Profile: Support
User posts
What are the rtl.css versions for?
Hi Thomas,
As answered in one of your previous post, the rtl versions of the css files contain styles that are applied for languages that are Right-To-Left. If you are not going to have a RTL language, you will not need rtl css files.
Hope that helps!
Retrieving http://www.whichrug.com/Plugins/SevenSpikes.Nop.Plugins.AjaxFilters/JQueryTemplates/JDropDown.htm failed.
I have reinstalled and follow the instruction advised in http://www.nop-templates.com/boards/topic/926/error-message-on-vendors-page-with-filters to rectify the problem but problem persists.
Please advise.
Hi ahm8025,
This had been fixed and uploaded on our site. You can integrate the fix by downloading the theme again and replace the Plugins\SevenSpikes.Nop.Plugins.AjaxFilters\Views\NopAjaxFilters\NopFilters.cshtml file with the one from the downloaded package. After that you need to restart the application from the administration.
Please let us know if the issue still exists!
But I can't get it to read my custom.css file here is where I added the code:
if (supportRtl)
{
Html.AppendCssFileParts("~/Themes/Allure/Content/CSS/styles.rtl.css");
}
Html.AppendCssFileParts("~/Themes/Allure/Content/CSS/styles.css");
Html.AppendCssFileParts("~/Themes/Allure/Content/CSS/custom.css");
Html.AddScriptParts("~/Plugins/SevenSpikes.Core/Scripts/SevenSpikesExtensions.js");
Here is what is in the custom.css file:
.category-page .sub-category-grid .item-box {
width: 18.5%}
.home-page-category-grid .item-box {
width: 16%}
@media screen and (min-width: 1001px){
.product-details-page .overview {
margin-left: 620px;
margin-right: 0;
}
}
@media screen and (min-width: 769px){
.ui-tabs {
float: left
}
}
@media screen and (min-width: 769px){
.product-details-page .overview {
float: right;
}
}
.side-2 {float: left;}
.center-2 {float: right;}Also, do I need custom.rtl.css file?
Hi Thomas,
The RTL css files are necessary only if you are going to use the theme with a language that is Right-To-Left, so I suppose that you will not need to have a custom.rtl.css file.
The piece of code that you have pasted is correct and the custom.css file should be included in the theme. You can verify this by disabling the css bundling and inspecting the page to see which css files are included in the <head> element.
Best Regards!
Hi Thomas,
Why should you drag your window "narrower" and them drag it back. It is not a real case scenario. We have added this "functionality" only for our demo and for customers who do this dragging but in the real world this is very unlikely to happen. The filters are detached and attached on a different place in the html for a mobile device, so we have added attaching them back in the beginning of the column so that if someone is doing this dragging, the filters are not lost and it does not look as a bug.
Hope that makes sense!
Hi Thomas,
I will try to summarize all the the questions asked in your previous posts and the options for the product picture.
1. nopCommerce has a setting (administration -> configuration -> settings -> media settings -> product detail image size) which controls to what size the pictures will be resized. The resizing works in a way that resizes the image by making the bigger dimension (height or width) to the setting set while keeps the ratio. So when you set this setting to 600 you will not have any product picture having width or height bigger than 600.
2. The Nop Cloud Zoom works in a way - when you upload a product picture that is large enough (at least 700px wide) nopCommerce displays a resized thumb version of it which is 600px wide. Then when you hover over it the Nop Cloud Zoom plugin uses the original picture(which is 700px wide) to show more detailed view of the picture.
3. The Nop Cloud Zoom has a various settings like Zoom Type. You can choose either inside or any other. If you choose any other you can modify the position of the displayed image by modifying the other settings with positive or negative numbers, like X-position, Y-position, etc. The default value for the Nop Allure Theme is "inside" .
So in order to have a decent product images, they just need to be at least 700px high or wide. The picture on the product page is centered vertically and horizontally, so it does not matter if the image is in portrait or landscape mode and the cloud zoom will work in both cases.
Hope that makes sense.
Please let us know if you have any comments or thoughts. We will be glad to discus and explain!
Best Regards!
Hi Thomas,
The Nop Mega Menu is styled by design in a way that it has 4 subcategories on a line, so that if they have subcategories the sub-subcategories are well displayed and readable. However if you need to have 5 subcategories on a single line you need to perform the following changes:
1. Modify the Plugins\SevenSpikes.Nop.Plugins.MegaMenu\Views\MegaMenu\CategoryMenuTemplate.WithPictures.cshtml and edit it as shown below:
line 16:
@(Html.DataTable<SevenSpikes.Nop.Plugins.MegaMenu.Models.MegaMenuCategoryModel>(Model.CategoriesModels, 5, "row", "box",
the number in bold is the changed one.
2. Edit the Plugins\SevenSpikes.Nop.Plugins.MegaMenu\Themes\Allure\Content\MegaMenu.css file as shown below:
line: 99
.categories.fullWidth .box {
width: 20%;
height: 100%;
border-left: 1px dashed #e6e6e6;
border-bottom: 1px dashed #e6e6e6;
padding: 15px 10px;
display: table-cell;
float: none;
}
The number in bold is the changed one.
Hope that helps!
It happens on your demo site as well.
Hi Thomas,
Thank you for your feedback!
We have fixed that issue. You can easily integrate the fix manually on your site so that you do not need to update the theme itself. Just open the Plugins\SevenSpikes.Nop.Plugins.AjaxCart\Styles\common.css file and edit is as shown below:
line 246:
.nopAjaxCartPanelAjaxBusy, .miniProductDetailsPanelAjaxBusy {
position: absolute;
z-index: 1003;
width: auto;
height: auto;
background: url('images/loader.gif') no-repeat fixed 50% 50%;
opacity: 0.7;
/*filter: Alpha(opacity = 70);*/
}
The number in bold is the changed one!
Thanks again!
sevenspikes.themes.playground.common.goto
Hi Thomas,
Thank you for your feedback. This is a typo with the resource name. You can easily fix it if you add the following two resources with the following values:
key: sevenspikes.themes.playground.common.goto value: Go to ...
key: sevenspikes.themes.playground.common.gotopage value: Product's page
You can have a look at the following video on how to add a locale resource.
Thanks again for your feedback.
Hi Thomas,
1. There was a bug with one of the views in the theme and that is why the Custom Head Styles were not taken into consideration. If you now download the theme again and replace just the Themes/Allure/Views/Shared/_Root.Head.cshtml with the one from the downloaded package it will work. Sorry for the misunderstanding!
Thus when you update or upgrade the theme, all the changes will be in place and no need to keep any files or merge any change.
2. You can create a new custom css file, say custom.css and place it in Themes/Allure/Content/css folder. Then edit the Themes/Allure/Views/Shared/Head.cshtml file and add the following line:
Html.AppendCssFileParts("~/Themes/Allure/Content/CSS/custom.css");after the line for the styles.css file.
So thus when you update or upgrade you will need to keep this custom.css file and keep the change in the Head.cshtml file.
My suggestion is if your code is no more than 2000 chars to use the first approach and if it is more than 2000 chars to use the second approach.
Hope that helps!
Glad you're going to fix back the description and SKU (easier for people to take out rather than put in) - highly appreciated! Even better if you let me know when, or I can apply a code change if nec and there's a long release schedule.
Appreciate your observation on the SKU on Categories, indeed we're not going to be able to have them on those pages yet thanks to source, will bring it up with nopCommerce when have a chance. Meanwhile, as long as on product pages (more important), will suffice!
Keep up the great work! Phil.
Hi Phil,
Thank you for your kind words!
The issue had been fixed and uploaded on our site. In order to integrate the fix just download the theme again and replace the Themes/Motion/Content/CSS folder with the one from the downloaded package.
Please let us know if you need any further assistance!
Thank you for your feedback again!
Best Regards!
