Profile: hristo

Hello,

you can show the prices of the related products in Quick View by adding some code to the css file of your plugin (QuickView.css):

.quickViewWindow .product-grid,
.quickViewWindow .product-grid .item-box,
.quickViewWindow .product-grid .item-box .details {
height:auto !important;
}


.quickViewWindow .product-grid .item-box .buttons {
display:none
}


This fix is specific for Electronics theme only.

If you remove the images in default theme mega menu in 3.6, then you have to reset the position property of the title from "absolute" to "static" in this CSS stack:

.mega-menu .fullWidth.categories .box .title {...}


This will fix your problem with missing titles.

Hi,

there is no separate search box for the home page, it is only one search box that renders throughout the whole website, the different positioning on the home page  is because of CSS styling.


You can style the search box on your home page in two ways. The first is to do it by using the .main-slider-header class name for inheritance, this class is present only if you have a homepage slider enabled and is present only on the home page.

The other way is to do it by using .master-home-page class name for inheritance, in case you don't have a homepage slider.


But if you don't use a slider, the search-box will render to the right by default anyway. Let us know if you need more assistance.

Newsletter's inner structure is here: Themes/Nitro/Views/Newsletter/NewsletterBox.cshtml

As for the location (placement) of the newsletter - originally it is in the footer (Themes/Nitro/Views/Common/Footer.cshtml), and in the previous post is explained how to be moved to the side column.

Hello, Gav.

In order to have your mega menu grid without any pictures, first you have to hide the images, and then to zero the margin of the links.
Go to the CSS file of your Mega Menu plugin and find this code:

.mega-menu .picture {...}

and then add "display: none;" to it (without quotes), doing so will remove the images.

Next, find  this piece of code, either  .categories.fullWidth .box ul {...} or .categories.fullWidth .subcategories {...} and look for its  margin property. When you find it, change its value to 0 (zero), this will move the links to the beginning of the box, taking the place of the images.

In case you decide you only want to remove the images without keeping the grid, you can use our "Category Menu without Pictures" template which will change the layout of the menu to a list.

Hi,
you need to add this code to your 980.css file if you want the changes to apply to devices with screen widths larger than 1000px, or to your 768.css file if you want the changes to apply to devices with screen widths larger than 768px. Do not add the code to styles.css or 480.css because there is not enough space on smaller mobile devices to keep both customer blocks on a single line.

Here is the code:

.customer-blocks {
  margin: 0 0 30px;
  overflow: hidden;
}
.returning-wrapper {
  float: left;
  width: 46%;
  margin: 0 2%;
}
.new-wrapper {
  float: right;
  width: 46%;
  margin: 0 2%;
}

Hi again,

the theme is already set (by default) to display 2 items per row on mobile devices, starting from 481px. I guess you are testing your site on a smartphone with screenwidth of 480px so you are seeing the previous layout (1 item per row).
What you should do is to go to your 480.css file and to change this code:

@media all and (min-width: 481px)

to @media all and (min-width: 480px)

This way you will be able to see 2 products per row.
Keep in mind you'll have to check the css files of your plugins too and do the same thing - changing the "481px" media query value (if found) to "480px".

As for changing the main theme color to a custom color that is not predefined, you have to do it manually, there is no other way.

Hi there,

on your question about changing the main color of the theme - you can do this in the settings of the theme plugin (admin --> plugins --> Nop SmartTheme Plugin --> settings).

As for rearranging the number of the products per line, it is optimally set on mobile resolutions and is not recommended to change it. It goes as follows:

0 to 480px  -->  1 product per line
481px to 768px  -->  2 products per line
769px and above  -->  3 products per line

I can help you to change your product grid to have 4 products per line for screen resolutions above 1280px (below 1280 you don't have enough space to have 4 products per line). Just go to the end of your 980.css file and find this piece of code:


@media all and (min-width: 1280px) {

...
...
...

}


Inside the outer brackets (for example just before the closing bracket), paste this new code:

.item-box {
  margin: 0 0.5% 30px;
    width: 24%;
}
.item-box:nth-child(3n+1) {
  clear: none;
}
.item-box:nth-child(4n+1) {
  clear: both;
}


This will change your product grid to have 4 items per line on screens of 1280px or bigger. It will also change your sub-category grid in the same way.

I hope this helps.
Best regards

Hi,
you have to go to Administration --> Plugins --> Nop ShopAll Theme --> Settings,
where you'll find two buttons, one to remove the old logo and another one to upload a new one.

Hi,
yes you can change the position of the menu, but in order to get it done you will need to change also some properties of the slider and probably the logo.

First of all, position the menu where you want it, but you have to do that via ".main-slider-menu" class name to ensure your changes will apply only where the slider is present. You don't want your changes to apply to all pages because the layout is different on pages with no slider on it.

Set the position of the menu to "absolute", and set the "top" property to a value that works for you (depending on how tall is the content you have above the slider). Set the "left" property to 50% and set a negative left margin which have to be half of the width of the menu in order to place the menu in the center of the page (if your menu is 980px, the left margin should be -490px).

At this point you should have you menu positioned where you want it. Now you have to change the bottom margin of your slider from -45px (which works for the old placement of the menu) to say 20px; This way you will prevent content overlapping below your slider.

If you need to change the position of your logo (and most probably you will), do it via ".main-slider-header" class name - increase the top margin to a value that works for you. This is because you will want to change the logo offset only if the slider is present.

Remember that these guidelines are for desktop resolutions. But doing the same thing on mobile devices will be similar.

I hope this will be helpful.