Close

Profile: hristo

Avatar

User posts

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.

jakubz wrote:
Hi Guys! I bought smart template week ago, but  unfortunately now i need to change few things. The biggest one (how i think) is change on product list. I want show 4 products in grid (not 3 how is in template), and 2 products in line (on mobile version).
Maybe someone from you can help me and tell, how should i start do this? How to start change it? Maybe someone know standards of mobile resolution? or tell me how should I start change it?

Next question: is somewhere one place where can i change main color of template?

Thx!




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

Change Logo
5 years ago

simon17 wrote:
Hi 

I would like to change the logo(at left corner) to my own logo, how can I find this setting. Thanks 


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.

5 years ago

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.

5 years ago

nopmstr2014 wrote:
Hi All,
Is it possible to move Newsletter subscribe text box from footer to left side above category list on home page ?
Or can i use any plugin to link or anchor an image to newsletter text box?
We want to highlight to new people coming to our site to sign up to our newsletter – the current sign up is hidden right at the bottom 
Thanks


Hi,
yes it is possible to move the newsletter box from the footer to the left column, but it will require some additional styling.

First of all, go to your "Footer.cshtml" file (located in Themes/Nitro/Views/Common/Footer.cshtml) and look for this piece of code:

<div class="footer-block newsletter-block">
    @Html.Action("NewsletterBox", "Newsletter")
</div>

Copy only the inner part(@Html ... "), and then delete the whole piece from there and save the file. Now go to your _ColumnsTwo.cshtml file (in Themes/Nitro/Views/Shared/_ColumnsTwo.cshtml) and look for this code:

else
    {
        @Html.Widget("left_side_column_before")
        @Html.Action("CategoryNavigation", "Catalog", new { currentCategoryId = currentCategoryId, currentProductId = currentProductId })
        @Html.Widget("left_side_column_after_category_navigation")
        @Html.Action("ManufacturerNavigation", "Catalog", new { currentManufacturerId = currentManufacturerId })
        @Html.Action("VendorNavigation", "Catalog")
        @Html.Action("RecentlyViewedProductsBlock", "Product", new { productThumbPictureSize = 32 })
        @Html.Action("PopularProductTags", "Catalog")
        @Html.Action("PollBlock", "Poll", new { systemKeyword = "LeftColumnPoll" })
        @Html.Widget("left_side_column_after")
    }

Add the code you copied from Footer.cshtml inside the "else" section (at the top of it), it should look like this:

else
    {
        @Html.Action("NewsletterBox", "Newsletter")
        @Html.Widget("left_side_column_before")
        ...
        ...
        ...
    }

Do exactly the same in the _ColumsTwoHome.cshtml file (located in the same directory)

Save the files and at this point you should be able to see the newsletter box appearing at the top in your website's left column. But it will look weird because there is no styling for it at this new placement.
Go to your NewsletterBox.cshtml file (Themes/Nitro/Views/Newsletter/NewsletterBox.cshtml) and find this element:

<div class="block-newsletter"> and change the class name to "block block-newsletter" and save the file.

Now go to your main CSS file ("styles.css", which is located in Themes/Nitro/Content/css/styles.css) and add this code to it:

.block-newsletter {
    background: #eee;
    padding: 10px;
}

Save the file and preview the result. You should now have your newsletter box with the same styling. I recommend you to make backups of those files before changing it.


------------------------


As for adding an image to the text field of your newsletter, you can do it by adding the image path to the main CSS file ("styles.css"), find this code:

.newsletter-email input[type="text"] {
  float: left;
  width: 180px;
  height: 30px;
  border: 0;
  background: #fff;
}

and change the background property to:

background: #fff url('../img/your-image-filename-here') right center no-repeat;


5 years ago

Hi,
there is no problem to change vertical offsets in order to fix your issue, but do your changes only in 980.css, this way the changes will apply only to desktop resolutions, and will not be present on smaller screen widths where elements' design is different.

Also thank you for your feedback, we agree the titles spacing can be improved so we are going to fix this in the theme.

5 years ago

peter@gramthomsen.dk wrote:
I would like to remove the box shadow around the
slider. I have tried to edit in the Presentation\Nop.Web\Plugins\SevenSpikes.Nop.Plugins.AnywhereSliders\Themes\DefaultClean\Content\nivo\nivo.css

i can not see any changes in the slider on the pages.


Hi,
the file you are trying to edit is correct (Plugins\SevenSpikes.Nop.Plugins.AnywhereSliders\Themes\DefaultClean\Content\nivo\nivo.css),
check it again and look for this piece of code:

.nivoSlider {
    background: url("loading.gif") no-repeat scroll 50% 50% #fff;
    border-radius: 5px !important;
    box-shadow: 0 1px 5px 0 #4a4a4a;
    margin-bottom: 10px;
    overflow: hidden !important;
    position: relative;
}

... and delete the "box-shadow" line. This will remove the shadow around your main slider.

5 years ago

insity wrote:
Hi,
I am using Motion Theme with NopCommerce 3.3. Off late some of my customers and even me have a feeling that the 'Buy' button in this theme is not very prominent. Especially when the customer is in a hurry and spends very less time on the site, being an ecommerce theme the 'Buy' button should be very prominent and attract the attention of the customer.

Anybody else had the same issue or views or comments from their customers?
Nop-Templates team the overall theme is very good and I like the look and feel, is there something that can be done to only enhance the 'Buy' Button at all places so that it contrasts out and becomes prominent without changing the overall layout and other aspects of the theme.

Thanks
Insity Support


Hi,
because the space in the area where the "Buy" button resides is very limited, there is no way to make it bigger. Instead I can suggest you to swap the colors of the button and the price pad if you like (button goes yellow, price pad goes grey). You will need also to swap the styles of the texts inside. If you do, look for any unwanted side-effects on button hover, and if necessary - disable the hover effect.

5 years ago

nopmstr2014 wrote:
Hi 
Is there any way to display ALT text for free shipping image?
Thanks


No, since the image is applied as a background, there is no way to set an alternate text (ALT).

5 years ago

nopmstr2014 wrote:
Thanks for your reply.
How about 'Free Shipping' text,
How can I remove that text ?
Thank you


To remove the text, find the same piece of code again

.free-shipping {
    ... ... ...
}
and change the font-size property from 14px (current value) to 0. This will make the text disappear.