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;
