[Question] Nop Traction and Widget Zones

Now that I got the Traction theme the way I like it. I'd like to use Nop Templates HTML Widget to add some additional HTML-specific content.

Specifically along the right side of the homepage; just like the HTML Widget's example site. However, I notice that Traction seems to have the 'right_side_column_before' and 'right_side_column_after' disabled.

If I switch to 'Default Clean' theme then the HTML code appears. Switch it to Traction and it disappears. So I know I have the right zones.

I would very much like to use the space on either side of the HomePageText box all the way down to the Footer.

I've begun to modify the '_ColumnsOneHome.cshtml' and now have the Right and Left side zones active, but they both appear either above the HomePageText or above the Footer.

Obviously, this is because the Home page is set to use only one column. Whereas, the 'Default Clean' is set to use three columns.

And, as expected, if you point the Traction theme to use the triple column everything gets misaligned.

---

So, where does one begin modifying the CSHTML to support widget zones on either side of the currently single column.

Code so far:

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




@section HomePage
{
}




<div class="center-1">
    @Html.Widget("main_column_before")
    @RenderBody()
    @Html.Widget("main_column_after")
</div>








<div class="leftside-3">
    @if (IsSectionDefined("left"))
    {
        @RenderSection("left")
    }
    else
    {
        @Html.Widget("left_side_column_before")
        @Html.Widget("left_side_column_after")
    }
</div>




<div class="rightside-3">
    @if (IsSectionDefined("right"))
    {
        @RenderSection("right")
    }
    else
    {
        @Html.Widget("right_side_column_before")
        @Html.Widget("right_side_column_after")
    }
</div>

Hi,

What you have done is sufficient. Keep in mind after you add the left and right side you will have to style them. They are just regular divs with some content inside and, in your case the content is the elements placed in the widget zones. So add styling for leftside-3 and rightside-3 and everything will be fine.

Ask if you have any further questions.

Using the below code. Moves the two widgets I'm using to test with above the center column's content. But also displaces the center column down. Like so:

------
|   |
  |
------

I'd like it to line up, like so:

-----
| | |
-----

I'm looking at the '_ColumsThree.cshtml' and I see the <center-#> div is placed after the <leftside-#> and <rightside-#> div.

So, it looks like the CSHTML is setup right. This leads me to believe it's the CSS. But if I look at 'DarkOrange' and it's CSS I see that the <center-#> divs have a float of 'left'. For the Three Column Master Page section.

Ideally, I'd like the left and right columns of 'DarkOrange' to be paired with 'Traction'.

.leftside-3 {
float: left;    
width: 180px;
margin: 0px 0px 0px 50px;
display: inline;
}




.rightside-3 {
float: right;
width: 180px;
margin: 0px 200px 0px 0px;
display: inline;
}

Combined with:

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




@section HomePage
{
}




<div class="leftside-3">
    @if (IsSectionDefined("left"))
    {
        @RenderSection("left")
    }
    else
    {
        @Html.Widget("left_side_column_before")
        @Html.Widget("left_side_column_after")
    }
</div>




<div class="rightside-3">
    @if (IsSectionDefined("right"))
    {
        @RenderSection("right")
    }
    else
    {
        @Html.Widget("right_side_column_before")
        @Html.Widget("right_side_column_after")
    }
</div>




<div class="center-1">
    @Html.Widget("main_column_before")
    @RenderBody()
    @Html.Widget("main_column_after")
</div>

Hi there,


You can use the following styling accordingly for the left, right and center columns:

.leftside-3 {
    float: left;
    margin: 0;
    width: 180px;
}

.rightside-3 {
    float: right;
    overflow: hidden;
    width: 180px;
}

.center-3 {
    float: right;
    margin: 0 10px;
    overflow: hidden;
    width: 600px;
}

In your case the problem (that makes the center block to falls down below the left and right columns ) is the margin I guess. You do not need it. Try to set margin only to 'center-3' block (or 'center-1' element in your case, but actually you must use 'center-3' instead of 'center-1').

Seems to be working with this:

.rightside-3 {
float: right;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 50px;
margin-left: 0px;
overflow: hidden;
width: 300px;
}




.center-3 {
float: right;
margin-top: 0px;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 0px;
overflow: hidden;
width: 1500px;
}

*Note: I'm partial to breaking out the margins. Makes it easier for me.