Profile: Peter.Zhekov

Hi there,
Thank you for your report. It will helps us to improve the theme.
Please add the following styles in the your theme 'Custom head styles':
This will solve both problems with the theme logo in mobile resolution and for the mega menu categories:

@media all and (max-width: 1000px) {
.header.normal .header-logo {
    left: 0;
    position: absolute;
    top: 100%;
}
.header-logo a img {
    max-height: 100px;
    max-width: 100%;
}
}

@media all and (min-width: 1001px) {
.master-wrapper-page{
    overflow:visible;
}
.master-wrapper-page:after {
    content: '';
    display: block;
    clear: both;
}
}

Hi there,

I tested the plugin and I found just one problem with the color of the search button on hover (because I use the last version of the plugin). Now I have fixed and within few hours it will be up to the last version of the plugin. Please update the plugin and I believe it will be just fine.
If you prefer to add the changes manualy please add the code below in the custom head styles in your theme administration:

.color-neutral .blog-search-box .search-box-button {background-color: #505050;}
.color-neutral .blog-search-box .search-box-button:hover {background-color: #606060;}
.color-neutral .post-relations label::before {background-color: #505050;}
.color-neutral .rich-blog-homepage .read-more, .color-neutral .post-actions .read-more {background-color: #505050;}


This must solve your problems.

Hi Aviw,

This can be done if you add the following code in the 'Custom Head Styles' in your theme administration. Acctually this code will make the short description, the rating and the buttons always visible. Please include the code in the 'Custom head styles' and if this is not what you want to achieve write back for more support.  

@media all and (min-width: 1001px) {
.product-grid .item-box .add-info {
opacity: 1;
position: relative;
height: auto;
}
.product-grid .item-box .product-rating-box {
opacity: 1;
}
.product-grid .item-box .buttons {
opacity:1;
position: relative !important;
}
.product-grid .item-box .buttons a:hover, .product-grid .item-box .buttons input[type="button"]:hover, .product-grid .item-box .buttons .ajax-cart-button-wrapper:hover * {
    height: 32px;
}
.product-grid .prices {
    margin-bottom: 10px;
}

}

Hi there,
Can you tell me where you have received this error (which online 'minifier' or program you have used)? Do you know that in the 'Admin/General and miscellaneous settings/SEO settings' you can find settings for 'JavaScript bundling and minification' and also 'CSS bundling and minification'. You can use this integrated features from Nop administration directly.

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.