Close

Move Newsletter text box from footer

nopmstr2014
9 years ago
#8463 Quote
Avatar
  • 35
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
hristo
9 years ago
#8476 Quote
Avatar
  • Moderator
  • 172
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;


Regards,
Hristo Gospodinov
Nop-Templates.com
nopmstr2014
9 years ago
#8489 Quote
Avatar
  • 35
Thanks
blaster30
9 years ago
#9192 Quote
Avatar
  • 8
Where do you update the content of those boxes?
hristo
9 years ago
#9206 Quote
Avatar
  • Moderator
  • 172
blaster30 wrote:
Where do you update the content of those boxes?


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.
Regards,
Hristo Gospodinov
Nop-Templates.com