Profile: Peter.Zhekov

If you are not able to deal with this, please submit a ticket in our website.

Hi there,
This is what I did and it works properly.
First in the file _Root.cshtml   ("~\Presentation\Nop.Web\Themes\theme name\Views\Shared\_Root.cshtml" ) I have added element 'div' with class 'small-logo-icon' (look the samples below).

<div class="small-logo-icon">
                <a href="@Url.RouteUrl("HomePage")" class="logo">
                    
                </a>

            </div>

<div class="responsive-nav-wrapper">
            <div class="small-logo-icon">
                <a href="@Url.RouteUrl("HomePage")" class="logo"></a>
            </div>
            <div class="menu-title">
                <span>@T("SevenSpikes.Themes.Common.MenuTitle")</span>
            </div>
            <div class="search-wrap">
                <span>@T("Search")</span>
            </div>
            <div class="shopping-cart-link">
                <a href="@Url.RouteUrl("ShoppingCart")">@T("ShoppingCart")</a>
            </div>
            <div class="filters-button">
                <span>@T("SevenSpikes.Themes.Common.Filters")</span>
            </div>
            <div class="personal-button" id="header-links-opener">
                <span>@T("SevenSpikes.Themes.Common.Personal")</span>
            </div>
        </div>

Then I just added some styles in the 'mobile-only.css' file, to show the logo and float it left:

.responsive-nav-wrapper .small-logo-icon {
    background: rgba(0, 0, 0, 0) url("../img/new-small-logo.png") no-repeat scroll center center;
    float: left;
}

Of course you can use your normal logo (or completely new one) just set it different styles like 'background-size:50px;' and of course show the way to the image  using 'background-image' style (example: 'background-image:url('here write down the way and the name of the image.png')').

.small-logo-icon {
    background: rgba(0, 0, 0, 0) url("/Themes/allure/Content/img/logo.png") no-repeat scroll center center / 50px auto;
    float: left;
}

This is shorthand code that I have used to styled this logo and it must work for you.  

Hi Patrik,
You must go to "_Root.cshtml" view and create new element which must hold your logo ( look the example below).

In the markup add link with random class:

<a href="" class="small-logo"></>

Inside the 'href' attribute add the code from the normal logo element which you must find in the 'Header.cshtml' view (must be something like:

<a href="@Url.RouteUrl("homepage")">

).
Finally you must add some css styling for the logo (probably in the css file which is responsible for mobile resolution like):

.small-logo{display:inline-block; with:45px; height:45px; background-image:url('the path to the logo image goes here')no-repeat center;}

This must works properly for you. So adding manually html element <a> which is 'hyperlink', make it to leads you to the homepage, then add some proper styles like image/logo, width/height and position (last one can be done by float, display inline-block, position:static, absolute, fixed, related and so long).

Hi there,

If your images for the slider are smaller you can set style property for max-with (look the example below) and this way to limit the stretching of the slider just as much as you want.

.slider-wrapper {
    margin: 0 auto;
    max-width: 1600px;
    position: relative;
    z-index: 1;
}

The bold styles are the one you must change. For 'max-widht' use whatever value you want, and 'margin: 0 auto;' will hold your slider in the center of the screen. Where you must place this styles? In the file '~Plugins/SevenSpikes.Nop.Plugins.AnywhereSliders/Themes/your theme name here/Content/nivo/nivo.css'. Just look for this selector - '.slider-wrapper'-  and add the styles and values you want.

Hi there,

In your case you have at least two options:
first is to use scroll (when the categories are too much the scroll will show and the customer can scroll up and down along the list). For this purpose you must add following styles in your 'mega menu' plugin css-file:
.mega-menu
.sublist {
    max-height: 100px;
    overflow: scroll;
}
It`s up to you (and your theme design) what will be the value against 'max-height' (this will be the visible menu, so you can use any different value which will satisfy your needs).

The other option (the one with two columns) it`s possible do be done but it`s more complicated to be done properly.   I will try to be as clear as possible, so you can do it right.
First you need to decide how much width will have every single list item from the infinite list drop down. For example I`ll use 130px width. In this case the wrapper box should be 260px width.

.sublist.first-level {
    width: 260px;
}

.sublist.first-level > li {
    
    float: left;
    width: 130px;
} - like that I am making every element 1/2 with of it`s parent width.
Finally you need to add this code:

.sublist.first-level > li:nth-child(2n+1){cleat:both;}

.first-level .sublist {
    z-index: 1;
}

Hope all this to be useful for you.

Hi there,

This is what you can do to solve this issue:

If you inspect carefully the code, you will notice that on the body element the background is:

background: #000000 url("../img/background.png") repeat-x scroll left 30px;

This means that there is solid black color and one image also for background. So the top part of this image is the white line. If you want to remove it this is what you need to do:
first find the code in the file 'styles.css' (which you can find here: "~Themes/NeoFashion/Content/css/styles.css") and remove the code that set the image for background, and leave just the solid color.
This is how the code should looks like after this change:




body {
    background: #000000;
    color: #c0c0c0;
    font: 15px Sylfaen,sylfaen_ff,serif;
}

Hi there,


You can use the following styling accordingly for the left, right and center columns:

.leftside-3 {
    float: left;
    margin: 0;
    width: 180px;
}

.rightside-3 {
    float: right;
    overflow: hidden;
    width: 180px;
}

.center-3 {
    float: right;
    margin: 0 10px;
    overflow: hidden;
    width: 600px;
}

In your case the problem (that makes the center block to falls down below the left and right columns ) is the margin I guess. You do not need it. Try to set margin only to 'center-3' block (or 'center-1' element in your case, but actually you must use 'center-3' instead of 'center-1').

As far as I understand you want to take out from home page slider the menu and the filters.
To take the filters out this is what you must do:

Open the '~Plugins\SevenSpikes.Nop.Plugins.AjaxFilters.Pro\Themes\Traction\Content\FilterWidget.css' and add this code inside (find the section with the 'min-width: 1001px' breakpoint and add the code in the very bottom of it):

.home-slider .home-page-filters-wrapper {
    margin: -20px 0 0 !important;
}

Now for the menu:


Open the file: '~Plugins/SevenSpikes.Nop.Plugins.AnywhereSliders/Themes/traction/Content/nivo/nivo.css' and find this styles below:

.admin-header-links ~ .subheader-wrapper {
    top: 91px;
}

And change it to:

.admin-header-links ~ .subheader-wrapper {
    margin: 0;
    position: relative;
    top: 0;
}

I hope this will helps you.

Hi there,
We notice this problem and fixed it already but the fix is not uploaded yet.
I am offering you to add the fix manually. You just need to copy the code below in the file: '~Plugins/SevenSpikes.Nop.Plugins.AnywhereSliders/Themes/Tiffany/Content/nivo/nivo.css'.
Find the next lines of code and change the value against the property float: to 'none':
.home-page-category-grid.categories-2 .item-box {
    float: right;
    margin: 0 !important;
}



This is how it must looks in the end:



.home-page-category-grid.categories-2 .item-box { float: none; margin: 0 !important; }

Hi there,

Notice that there are two different hover effects you can switch between from admin setting: 'Item box hover effect:'.
To disable both effects you must make this styles changes (actually comment the code below will be enough).
For the first hover effect find the code below and comment it:

.product-grid .item-box:hover .details {
    background: none repeat scroll 0 0 #ffffff;
    bottom: 0;
    color: #000000;
}

For the next lines of code just add the bold text like is shown:

.product-grid .item-box:hover .details .buttons {
    bottom: -47px;
    display: none;
}

For the second hover effect find and comment the code below:

.product-grid .item-box:hover .details .buttons {
    bottom: -47px;
    display: none;
}.product-grid .item-box:hover .hover-effect-2 .picture a::after {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
}

.
Then again find this below and add the bold style:

.product-grid .item-box:hover .hover-effect-2 .buttons {
    display: none;
    opacity: 1;
}

If you do not know where to find those styles, look here: '~Themes/Tiffany/Content/CSS/980.css'.

Finally look the example below to see how you must comment the code:

/*.product-grid .item-box:hover .hover-effect-2 .picture a::after {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
}*/