Nop Allure Responsive Theme released for nopCommerce 3.30 (Nop-Templates.com Team)

Hi Guys,

We would like to share with you the release of the Nop Allure Responsive Theme for nopCommerce 3.30. The theme is powered by 10 premium nopCommerce plugins and looks exeptional on any device.

The Nop Allure Theme comes with pre-designed color presets and background textures easily managed from the admin panel. To see the presets in action check out the theme's live demo.

There are several ehancements introduced to this new theme. To learn more have a look at our latest blog post.

Your feedback is appreciated.

Nop-Templates.com Team

Hello,

I would like to know how I can integrate the instagram icon into my Allure theme site, since it currently has options for Facebook,twitter,vimeo and youtube, which I can set from the administrative side. Any ideas?

Thanks!!

jorgechirinos wrote:

Hi,

there is no Instagram icon/link included in Allure theme, so you can't activate that via admin panel. But you can add it manually.
First of all you have to find or create an instagram icon that suits you (40x40px recommended). Then go to your theme directory and find the file "Footer.cshtml" (~Themes/Allure/Views/Common/Footer.cshtml) and within that file look for this code:

<ul>
                    @if (!String.IsNullOrEmpty(Model.FacebookLink))
                    {
                        <li><a target="_blank" class="facebook" href="@Model.FacebookLink"></a></li>
                    }
                    @if (!String.IsNullOrEmpty(Model.TwitterLink))
                    {
                        <li><a target="_blank" class="twitter" href="@Model.TwitterLink"></a></li>
                    }
                    @if (!String.IsNullOrEmpty(Model.GooglePlusLink))
                    {
                        <li><a target="_blank" class="google" href="@Model.GooglePlusLink"></a></li>
                    }
                    @if (!String.IsNullOrEmpty(pinterestUrl))
                    {
                        <li><a target="_blank" class="pinterest" href="@pinterestUrl"></a></li>
                    }
                    @if (!String.IsNullOrEmpty(vimeoUrl))
                    {
                        <li><a target="_blank" class="vimeo" href="@vimeoUrl"></a></li>
                    }
                    @if (!String.IsNullOrEmpty(Model.YoutubeLink))
                    {
                        <li><a target="_blank" class="youtube" href="@Model.YoutubeLink"></a></li>
                    }
                    @if (Model.NewsEnabled)
                    {
                        <li><a class="rss" target="_blank" href="@Url.RouteUrl("NewsRSS", new {languageId = Model.WorkingLanguageId})"></a></li>
                    }
                </ul>

Inside the <ul>...</ul> section you have to add your "Instagram" code, like this:
<li><a target="_blank" class="instagram" href="... your-instagram-url..."></a></li>

The code above will create a new link. Then go to to your css file and add some style to add the icon to the new link, like this:

.social-sharing .instagram {
    background: url("../img/your-new-icon.png") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

The image file with the new icon should be placed within your main image directory (~Themes/Allure/Content/img/)