Profile: hristo

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;

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.

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.

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.

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

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.

Hi,
you can look up for this piece of code in your main CSS file (styles.css):

.product-grid .item-box .product-title {
    height: 36px;
    margin: 0 0 5px;
    overflow: hidden;
}

...and change the height value from 36px to say 56px (you can fine tune it as you like), this will make the text placeholder to accommodate 3 lines of text instead of 2. After that you can test and see if your catalog boxes look ok on different pages (it is a good idea to test the hover state of the boxes too).

Let us know if there is something else.

Hi Jilin,
you have to replace the image in the img folder of your project (Themes --> Nitro --> Content --> img/). the file name of the image is depending  on your color preset - "free-shipping-red.png", "free-shipping-green", etc. Find the image and replace it with the one you want.

Keep in mind that the place holder of the image is styled for images with dimesions of 85x85 px. If your new image is of a different size or scale, you'll need to change the place holder css styles in order to fit the new image. Look for this code in your main CSS file (styles.css):

.free-shipping {
    ... ... ...
}
... and change the width and height to anything you like. if your new image is 85x85 px, you don't need to change anything, just replace the image.

Let me know if you have any further questions.

Hi,
from your screenshot I can see you are experiencing a severe font pixelization and not a "very minor difference" as we discussed before. This is definitely not related to the theme template (our themes are taking multiple cross-browser testings so it's not possible to miss such a serious problem).

Here is a screenshot from the demo as it looks in Firefox and in Chrome. As you can see the only difference is in the thickness, there is no pixelization.
Firefox
Chrome

Your problem could be coming from your browser, or from your operating system.

Which version of Chrome you have? Older versions had severe font rendering problems, take a look at this article for example:
http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/
As of version 37, Chrome claims the problem is being fixed but according to some users the fix is only partial.

Or, it could be your operating system (have you changed any anti-aliasing/ClearType settings?).

Anyway, I still suggest you to test your project on another machine with newest version of Chrome installed and look for a difference. If the problem is coming from the browser version and you want to support older versions too, here is an article that explains how to force Chrome to use SVG source instead of TT (true type) or WOFF, which could be a possible fix for you:
https://coderwall.com/p/5cvwyq

Hope this helps!

If you have any further questions or if you decide to change the font for specific elements on your site and need directions, let us know.

Then obviously there is a problem on your end, because it seems you are seeing a major difference. There are custom fonts in almost all out themes and the difference in font rendering is very minor, definitely not a problem.
You can send us a screenshot if you like so we can see the difference (or give us a link if your website is available online), but I suggest you to take a look at the theme on another machine and with another version of Chrome installed and see if there is any difference.