Profile: Peter.Zhekov

Hi Richard,

You can try to set white background color to the 'cloud-zoom-big' element. I have tried to set a white background to this particular elements and it works perfectly.
So find the file 'CloudZoom.css' and in the styles below just add the bold line:

#cloud-zoom-big {
      border: none;
      overflow: hidden;
     background-color: #fff;
        }

Hi Jay,
You are right!
You can manage the title and description in the carousel by adding the following styles in the 'JCarousel.css' file:

.nop-jcarousel .jcarousel-item .short-description {
    max-height: 30px;
}
.nop-jcarousel .jcarousel-product-name {
    max-height: 20px;
}

The first selector is for the 'short description' and the second one is for the 'title/product name'. You need to test and choose value which works for you (it is not necessary to use the values 20 and 30 pixels because it might not look good).

You can simply reduce the height of the categories in the left side. You just need to change one value in the 'styles.css' file (which you can find in '~Content/CSS/styles.css').
Look for the code below and just change the bold value to "5px". This will make the line lower.

.block .list a {
    border-top: 1px solid #c9c9c9;
    display: block;
    padding: 9px 10px;
    position: relative;
    transition: all 0.2s ease-in-out 0s;
}

If you like you can copy only the line bellow in the 980.css file and the category menu in side will looks lower only in the desktop resolution.

.block .list a {
    padding: 5px 10px;
}

About the second question, you can use the same approach with reducing the items height. In the file '980.css' find the following styles and change the bold value only:

.header-menu .sublist a {
    background: rgba(255, 255, 255, 0.9) none repeat scroll 0 0;
    border-bottom: 1px solid #c9c9c9;
    color: #505050;
    display: block;
    line-height: 14px;
    padding: 11px 15px;
    ...
}

Here you can set value of 7px for example. There are no option to use two columns in the drop down menu. Also you can have different amount of subcategories on different levels so the other approach (maximum height and overflow ) will not be option. I saw that there is lot of element in 'gift accessories' and this is only second level sub menu. In this case you can try to add this code, but kept in mind that if you have some sub menus one level down, it wont works.

.top-menu > li > .sublist-wrap > ul > li > .sublist-wrap {
    max-height: 300px;
    overflow: auto;
}

This will limit you second level sub menu to maximum 300 pixels and let you get to all of the items in the menu by scrolling up and down. If you decide to try this you need to add this styles in the '980.css' file.

Hi Richard, This is what you can do for for the carousel:

.manufacturers-carousel .item-picture a {
    border: medium none;
    height: 150px;
    position: relative;
}

.nop-jcarousel .item-picture img {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
}

With the first code we give height to the wrapper element. You need to add only the bold one styles. You can find the existing styles in 'Plugins/SevenSpikes.Nop.Plugins.JCarousel/Themes/Content/JCarousel.css'.
The second selector '.nop-jcarousel .item-picture img' you will also find there. You can simply remo all the line and replace it with the one I am sending you:

.nop-jcarousel .item-picture img {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
}

Please write back if there are some more issues.

You can use this global styling:

.item-box .picture {
    display: none;
}

This will hide all the images all over the theme. It's global but as I understand you do not need any images in the theme (neither the categories or the product item boxes).

Hi Richard,


If I have understood correctly in case you have too much element in your 'sub menu' you can not scroll to the very bottom of this menu in case it height is bigger than the screen height. So you can solve  the problem by adding the following styles in the '980.css' file:

.header-menu .sublist-wrap {max-width: 500px;}

You can use other value instead of 500px. This will make your sub menu maximum height of 500 pixels, and if it is bigger than 500,  scroll will appear.  

If this is not what you want to accomplish, please send us back a screenshot of the problem.

Please make sure that you are using the proper version of IE browser, but not with 'Quirks mode' or something else turned on (turn off all the emulation if there are some). And also please send us a link to screenshot of the problem.

Styles for the navigation bar (probably you mean 'mega menu') you can find here: '~Plugins\SevenSpikes.Nop.Plugins.MegaMenu\Themes\your theme here\Content\MegaMenu.css'.

You can simply hide the product image, find the following code in your 'styles.css' file:

.product-grid .product-item .picture {
   ...
}
And add 'display: none;' property like this:

.product-grid .product-item .picture {
   ...
   display: none;
}

Please check you 'OrderSummary.cshtml' view (you can find it here '~Presentation\Nop.Web\Themes\Motion\Views\ShoppingCart\OrderSummary.cshtml') for following code:

<div id="terms-of-service-warning-box" title="@T("Checkout.TermsOfService")" style="display:none;">
                                <p>@T("Checkout.TermsOfService.PleaseAccept")</p>
                            </div>
                            <div class="terms-of-service">
                                <input id="termsofservice" type="checkbox" name="termsofservice" />
                                <label for="termsofservice">@T("Checkout.TermsOfService.IAccept")</label>
                                <span class="read" onclick="javascript:OpenWindow('@Url.RouteUrl("TopicPopup", new { SystemName = "conditionsofUse" })', 450, 500, true)">@T("Checkout.TermsOfService.Read")</span>
                            </div>

If this code looks the same in your document, everything is fine. If there are some difference please write back what your view contain.  Also there are settings in the Administration which you can check:

'Content Management/Topics'. Once you have opened it look for 'ConditionsOfUse'. Inside it check the system name and the URL.