How to make nivo slider full page width?

Many websites like this have slider full width, http://mooringtech.com/

How to make nivo slider full page width? but keep the content of page in the middle?

What the Theme you are using now?

pepper wrote:

The idea is that you have to take the slider out of the "master-wrapper-page" class div element or whatever element is containing it to a fixed width in your theme.  For example, if you are using the default theme, you can change the index.cshtml for the home page to the following:

@{
    Layout = "~/Views/Shared/_Root.Head.cshtml";
}
@Html.Widget("body_start_html_tag_after")
@Html.Partial("_Notifications")
@Html.Action("JavaScriptDisabledWarning", "Common")
@Html.Partial("Header")
<div class="header-menu">
    @Html.Action("TopMenu", "Catalog")
</div>
<div class="top_home_page">@Html.Widget("home_page_top")</div>
<div class="master-wrapper-page">
    <div class="master-wrapper-content">
        <script type="text/javascript">
            AjaxCart.init(false, '.header-links .cart-qty', '.header-links .wishlist-qty', '#flyout-cart');
        </script>
        @Html.Widget("content_before")
        @*ajax loading window*@
        <div class="ajax-loading-block-window" style="display: none">
            <div class="loading-image">
            </div>
        </div>
        <div class="master-wrapper-main">
            <div class="center-1">
                @Html.Widget("main_column_before")
                <div class="page home-page">
                    <div class="page-body">
                        <div class="hometext">
                            @Html.Action("TopicBlock", "Topic", new { systemName = "HomePageText" })
                        </div>
                        @Html.Action("HomepageCategories", "Catalog")
                        @Html.Action("HomepageProducts", "Product")
                        @Html.Action("HomepageBestSellers", "Product")
                        @Html.Action("HomePageNews", "News")
                        @Html.Action("HomePagePolls", "Poll")
                        @Html.Widget("home_page_bottom")
                    </div>
                </div>
                @Html.Widget("main_column_after")
            </div>
        </div>
        @Html.Widget("content_after")
    </div>
</div>
@Html.Action("Footer", "Common")
@Html.Action("EuCookieLaw", "Common")
@Html.Widget("body_end_html_tag_before")

You can use CSS to style the header-menu and top_home_page classes.  Let me know if this works for you.

ima9ines wrote:

I am using DefaultClean theme (3.40)

Tim2376 wrote:

I understand the concept but the code you gave is mixture of _Root and homepage.

I original root looks like this in 3.40

@{
    Layout = "~/Views/Shared/_Root.Head.cshtml";
}
@Html.Widget("body_start_html_tag_after")
@Html.Partial("_Notifications")
@Html.Action("AdminHeaderLinks", "Common")
<div class="master-wrapper-page">
    @Html.Action("JavaScriptDisabledWarning", "Common")
    <div class="master-wrapper-content">
        <script type="text/javascript">
            AjaxCart.init(false, '.header-links .cart-qty', '.header-links .wishlist-qty', '#flyout-cart');
        </script>
        @Html.Partial("Header")
        <div class="header-menu">
            @Html.Action("TopMenu", "Catalog")
        </div>
        @Html.Widget("content_before")
        @*ajax loading window*@
        <div class="ajax-loading-block-window" style="display: none">
            <div class="loading-image">
            </div>
        </div>
        <div class="master-wrapper-main">
            @RenderBody()
        </div>
        @Html.Widget("content_after")
    </div>
    @Html.Action("Footer", "Common")
</div>
@Html.Action("EuCookieLaw", "Common")
@Html.Widget("body_end_html_tag_before")

Now what exactly I should do in Home view and _root page?

pepper wrote:

In the default theme, if you look the home page index view it calls one of the shared layouts... I think for the home page it calls _ColumnsThree.cshtml for the default theme.  Set this to _ColumnsOne.cshtml.  Now look at this flow...

index.cshtml
/////////////
@{
    Layout = "~/Views/Shared/_ColumnsOne.cshtml";
}

////////////

_ColumnsOne.cshtml
////////////////
@{
    Layout = "~/Views/Shared/_Root.cshtml";
}
//////////////

_Root.cshtml
///////////////////
@{
    Layout = "~/Views/Shared/_Root.Head.cshtml";
}
/////////////////

The index page will call the _Columns One view that you set for the home page.  This view calls the _Root.cshtml view which in turn calls the _Root.Head.cshtml view.  What I did with the code above was combine the _Root.cshtml, _ColumnsOne.cshtml, into a custom index.cshtml in order to be able to make more changes that will apply just to the home page.  Once you get the slider and menu out of the  "master-wrapper-page" class you can add width constraints in CSS like margin-right:auto;margin-left:auto; to pull any content you want back to the middle.

Ok so based on your advise, I pasted the above code in Home/Index.cshtml

It messes up the whole header as it makes everything at  the top 100% width.

How can I make header and menu content in the center how it was before and only make slider 100% width?

Hi,

I have a possible solution for you :)

- By default, home page view have three columns layout.
  So that, copy the "_ColumnsThree.cshtml" view to the "Themes/DefaultClean/Views/Shared" folder.
  Add and modify its code as following (the underlined text are new code):

  BEFORE

<div class="leftside-3">
    @if (IsSectionDefined("left"))
    {
        @RenderSection("left")
    }
    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("PopularProductTags", "Catalog")
        @Html.Action("PollBlock", "Poll", new { systemKeyword = "LeftColumnPoll" })
        @Html.Widget("left_side_column_after")
    }
</div>
<div class="rightside-3">
    @if (IsSectionDefined("right"))
    {
        @RenderSection("right")
    }
    else
    {
        @Html.Widget("right_side_column_before")
        @Html.Action("NewsletterBox", "Newsletter")
        @Html.Action("RecentlyViewedProductsBlock", "Product", new { productThumbPictureSize = 32 })
        @Html.Action("PollBlock", "Poll", new { systemKeyword = "RightColumnPoll" })
        @Html.Widget("right_side_column_after")
    }
</div>
<div class="center-3">
    @Html.Widget("main_column_before")
    @RenderBody()
    @Html.Widget("main_column_after")
</div>

  AFTER

@if (IsSectionDefined("slider"))
{
    @RenderSection("slider")
}
<div class="columns-wrapper clearer">
    <div class="leftside-3">
        @if (IsSectionDefined("left"))
        {
            @RenderSection("left")
        }
        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("PopularProductTags", "Catalog")
            @Html.Action("PollBlock", "Poll", new { systemKeyword = "LeftColumnPoll" })
            @Html.Widget("left_side_column_after")
        }
    </div>
    <div class="rightside-3">
        @if (IsSectionDefined("right"))
        {
            @RenderSection("right")
        }
        else
        {
            @Html.Widget("right_side_column_before")
            @Html.Action("NewsletterBox", "Newsletter")
            @Html.Action("RecentlyViewedProductsBlock", "Product", new { productThumbPictureSize = 32 })
            @Html.Action("PollBlock", "Poll", new { systemKeyword = "RightColumnPoll" })
            @Html.Widget("right_side_column_after")
        }
    </div>
    <div class="center-3">
        @Html.Widget("main_column_before")
        @RenderBody()
        @Html.Widget("main_column_after")
    </div>
</div>

- Copy the "Home/Index.cshtml" view to the "Themes/DefaultClean/Views/Home" folder.

- Modify its markup like this:

BEFORE

@{
    Layout = "~/Views/Shared/_ColumnsThree.cshtml";
}
<div class="page home-page">
    <div class="page-body">
        @Html.Widget("home_page_top")
        @Html.Action("TopicBlock", "Topic", new { systemName = "HomePageText" })
        @Html.Action("HomepageCategories", "Catalog")
        @Html.Action("HomepageProducts", "Product")
        @Html.Action("HomepageBestSellers", "Product")
        @Html.Action("HomePageNews", "News")
        @Html.Action("HomePagePolls", "Poll")
        @Html.Widget("home_page_bottom")
    </div>
</div>

AFTER

@{
    Layout = "~/Views/Shared/_ColumnsThree.cshtml";
}
@section slider {
    @Html.Widget("home_page_top")
}
<div class="page home-page">
    <div class="page-body">
        @Html.Action("TopicBlock", "Topic", new { systemName = "HomePageText" })
        @Html.Action("HomepageCategories", "Catalog")
        @Html.Action("HomepageProducts", "Product")
        @Html.Action("HomepageBestSellers", "Product")
        @Html.Action("HomePageNews", "News")
        @Html.Action("HomePagePolls", "Poll")
        @Html.Widget("home_page_bottom")
    </div>
</div>

- To have a better structure and layout, copy the "_Root.cshtml" file to the "Themes/DefaultClean/Views/Shared" folder.
  Modify its code (the underlined text are new code)

@{
    Layout = "~/Views/Shared/_Root.Head.cshtml";
}
@Html.Widget("body_start_html_tag_after")
@Html.Partial("_Notifications")
@Html.Action("AdminHeaderLinks", "Common")
<div class="master-wrapper-page">
    @Html.Action("JavaScriptDisabledWarning", "Common")
    <div class="master-wrapper-content clearer">
        <script type="text/javascript">
            AjaxCart.init(false, '.header-links .cart-qty', '.header-links .wishlist-qty', '#flyout-cart');
        </script>
        @Html.Partial("Header")
        <div class="header-menu">
            @Html.Action("TopMenu", "Catalog")
        </div>
        @Html.Widget("content_before")
        @*ajax loading window*@
        <div class="ajax-loading-block-window" style="display: none">
            <div class="loading-image">
            </div>
        </div>
        <div class="master-wrapper-main clearer">
            @RenderBody()
        </div>
        @Html.Widget("content_after")
    </div>
    @Html.Action("Footer", "Common")
</div>
@Html.Action("EuCookieLaw", "Common")
@Html.Widget("body_end_html_tag_before")

- With the above modifications, slider will goes top of three columns content, and under the top menu on home page.
  Now, we needed to modify some styles in order to make the slider show full width of the page.

- Open the "Themes/DefaultClean/Content/styles.css" file. Add following CSS code at bottom of it.

/* Customized styles */
.master-wrapper-page {
    width: 100%;
}
    .master-wrapper-content {
        float: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }
        .header, .header-menu .top-menu, .columns-wrapper {
            margin: 0 auto;
            width: 960px;
        }
            .master-wrapper-main .slider-wrapper.theme-default{
                max-height: 501px;
                overflow: hidden;
            }
    .footer {
        margin: 0 auto;
        width: 960px;
    }

Hope this help :)

pepper wrote:

Hi,

That's why I said you have to add CSS to pull the content back in the middle that you want from the top.  For example, the header-menu class goes all the way across.  In order to pull the menu back to the middle you have to add CSS styles to the div element directly after header-menu which is "top-menu" since it is calling the menu.  

To pull the menu to the middle you would have to add the following css to the top-menu class "max-width:960px;margin-right:auto;margin-left:auto;"  Also, you can change the .header-menu class to take off the rounded corners.

The same thing applies to the header...look at the element that contains the content you want and then add CSS constraints to set the max width and right and left margins to auto.  Hope this helps!

pepper wrote:

Hi,

Please take a look on my previous post. I updated the styles and one more view ("_Root.cshtml") in order to have a better layout.