axiomax wrote:Hello,
We are customizing the Neo Fashion Theme and we´d like to change the main image from home with an slider and 2 ads as you can be see here: http://www.axiomax.co/Clientes/Tiendacol/MainImage.jpg
We are not expertrs in Nop so we´d like a recommendation how is the best way to modify NeoFashion them to do it.
Thanks,
Hello,
You have to complete few steps to get the result you want.
1. You must open this file
~\Plugins\SevenSpikes.Nop.Plugins.AnywhereSliders\Themes\NeoFashion\AdditionalSupportedWidgetZones.xml and add these new widget zones:
<WidgetZone>home_page_slider_right_top</WidgetZone><WidgetZone>home_page_slider_right_bottom</WidgetZone>
2. Next you must add them in the home page view:
~\Themes\NeoFashion\Views\Home\Index.cshtml and add elements with classes used for styling:
before (remove the bold line):
@{
Layout = "~/Views/Shared/_ColumnsOne.cshtml";
}
<div class="page home-page">
<div class="page-body">
@Html.Widget("home_page_top")
@Html.Widget("home_page_slider_top")
@Html.Action("TopicBlock", "Topic", new { systemName = "HomePageText" })
@Html.Action("HomepageCategories", "Catalog")
@Html.Action("HomepageProducts", "Catalog")
@Html.Action("HomepageBestSellers", "Catalog")
@Html.Widget("home_page_after_products_and_categories")
@Html.Action("HomePageNews", "News")
@Html.Action("HomePagePolls", "Poll")
@Html.Widget("home_page_bottom")
</div>
</div>after(add the bold lines):
@{
Layout = "~/Views/Shared/_ColumnsOne.cshtml";
}
<div class="page home-page">
<div class="page-body">
@Html.Widget("home_page_top")
<div class="home-page-custom-sliders">
<div class="center-slider">
@Html.Widget("home_page_slider_top")
</div>
<div class="center-side-sliders">
<div class="side-top-slider">
@Html.Widget("home_page_slider_right_top")
</div>
<div class="side-bottom-slider">
@Html.Widget("home_page_slider_right_bottom")
</div>
</div>
</div>
@Html.Action("TopicBlock", "Topic", new { systemName = "HomePageText" })
@Html.Action("HomepageCategories", "Catalog")
@Html.Action("HomepageProducts", "Catalog")
@Html.Action("HomepageBestSellers", "Catalog")
@Html.Widget("home_page_after_products_and_categories")
@Html.Action("HomePageNews", "News")
@Html.Action("HomePagePolls", "Poll")
@Html.Widget("home_page_bottom")
</div>
</div>3. We must style the new elements in this file:
~\Plugins\SevenSpikes.Nop.Plugins.AnywhereSliders\Themes\NeoFashion\Content\nivo\nivo.css add this code to the end of the file:
.home-page-custom-sliders {
overflow: hidden;
}
.center-slider {
float: left;
width: 74%;
}
.center-side-sliders {
float: right;
width: 24%;
}
.center-side-sliders > * {
height: 183px;
overflow: hidden;
}
.center-side-sliders .side-top-slider {
margin-bottom: 14px;
}4. Then you must restart nopCommerce.
5. Now you can go to our AnywhereSliders in the admin site and create three new sliders.
The first one must have this widget zone:
home_page_slider_top (I have tested it with picture height: 391px)
The second must have this widget zone:
home_page_slider_right_top .
And the third slider must have this one:
home_page_slider_right_bottom (I have tested it with pictures height: 189px)
This is just a sample styling - you can further customize.
Hope this helped you !
