Profile: nikola.dragiev

Hello,

By design the title of the fields has a specified width and is not designed to contain long text.
I'm afraid that what you want will require major changes in the register view of the theme and also changes to the theme styling.

Thanks

Hello,

This is the code you need:

.mega-menu > li:nth-child(7):hover{
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff4242), to  #490101));
  background: -webkit-linear-gradient(#ff4242, #490101);
  background: -moz-linear-gradient(#ff4242, #490101);
  background: -ms-linear-gradient(#ff4242, #490101);
  background: -o-linear-gradient(#ff4242, #490101);
  background: linear-gradient(#ff4242, #490101);
  -pie-background: linear-gradient(#ff4242, #490101);
}

Please Go to your nopCommerce installation folder => Plugins => Seven.Spikes.Nop.Plugins.Mega.Menu => Themes/DefaultClean/Content => MegaMenu.css. Then Open the file and paste the code at the bottom.

If you don't like the shades of the red you can change the HEX values in the code.

Hope I've been useful,

Nikola Dregiev
NopTemplatesTeam

Hello,

You can do that by simply using the CSS pseudo-selector ":nth-child" and applying the background property to the .megamenu li you want to change.
If your website is live you can send us link so, i can look at it and provide you with the css code you need to add.

Hope this is useful

Nikola Dragiev

Hello,

Please add this code on your Custom Head styles after the one you already applied:

@media all and (min-width: 240px) and (max-width: 980px) {
    .leftside-3,
    .center-3 {
        float: none;
        width: 100%;
    }
}

Now your website should look ok on a mobile device too

Hope I've been useful,

Nikola Dragiev
NopTemplatesTeam

Hello,

To achieve the effect you want please replace the css code which you added in your Custom Head Styles with this code:

.product-grid .item-box:hover .hover-details {
        -webkit-transition: all 2s ease-in-out;
        -moz-transition: all 2s ease-in-out;
        transition: all 2s ease-in-out;
    }

    .product-grid .item-box.immediate .hover-details {
         -webkit-transition: all 0 0 ease-in-out !important;
        -moz-transition: all 0 0 ease-in-out !important;
        transition: all 0 0 ease-in-out !important;
    }

and after that you need to go to your nopCommerce installation => Themes => Allure => Content => scripts => Allure.js. When you open the file paste this code on the bottom:

$(document).ready(function () {

    $(".item-grid .item-box").hover(function () {

        /* Mouse enter */
        setTimeout(function () {
            $(this).addClass("immediate");
        }, 2000);

    }, function () {

        /* Mouse leave */
        $(this)
          .removeClass("immediate");

    });
});

When you save it you can see that the desired effect appears when you hover on your item-box.

Hope this works for you,

Nikola Dragiev
NopTemplatesTeam

Hello,

If you want the Add to Cart button to disappear instantly like the quick view add this code after the first one I send you:

.product-grid .item-box .hover-details .add-info{
  display: none;
}
.product-grid .item-box .hover-details:hover .add-info{
  display: block;
}

Hope this works fine for you,

Nikola Dragiev
NopTemplatesTeam

Hi again,

You have to go to tour nopCommerce administration, then Plugins > NopAllureTheme > Settings then in Custom Head Styles paste this code:

.product-grid .item-box .hover-details{
  -webkit-transition: all 2.00s ease-in-out;
  -moz-transition: all 2.00s ease-in-out;
  transition: all 2.00s ease-in-out;
}

Please note that the 2.00s in each line is the seconds delay you want to add, by changing this in all three lines you can customize the delay to reach the desired effect.

Hope I've been useful,

Nikola Dragiev
NopTemplatesTeam

Hello Thomas,

I see you are using the Nop Allure Theme,

from your post i understand that you want to delay the effect which appears when you hover the mouse over an item box, which can be achieved with a simple css code added to your theme, from the theme's plugin. But if you want to delay the quick view pop up window which appears when you click on the "Quick View" button, i'm afraid that that would not be possible.

Please write us which effect do you want to achieve, and if it's the first we will provide you with the css code needed and instructions on how to add it to your theme.

Looking forward to your replay,

Nikola Dragiev
NopTemplatesTeam

Hi,

Can you send us link yo your website, so we can investigate your problem there, because the code you have sent us looks correct,

NIkola Dragiev

NopTemplatesTeam

Hello,

To apply this change only on the Nop Allure Theme you have to go to your nopCommerce Administration => Plugins => Nop Allure Theme => Settings, there you will find a Custom Head Styles text field where, you have to paste this code:

.side-2 .block .list > li:last-child{
  display: none;
}
.side-2 .block .list > li:nth-child(6) a{
  border-bottom: none;
}

Now these css changes will be applied only for the Nop Allure Theme

Hope I've been useful,

Nikola Dragiev

NopTemplatesTeam