Exploring 3 sidebars in Artisteer 2.4.0.25435 WordPress themes

With the new 2.4.0.25435 version of Artisteer WordPress themes are rendered with a new css format.  Its a small change and one that slims down the css file, however it is currently stumping me just a bit when it comes to rendering a site with 3 sidebars on one side with one sidebar floating above two smaller ones.

image

I’ve discovered enough of the code to make it this far, which would be great and exactly what I’m looking for, but it only works right now in Firefox, safari, and Chrome, but not in IE8.

Here are the elements in the css code that I have changed to achieve this result.

/* begin LayoutCell, content */
.art-content-layout .art-content
{
width: 50%;
}
.art-content-layout .art-content-sidebar1
{
width: 100%;
}
.art-content-layout .art-content-sidebar2
{
width: 79%;
}
.art-content-layout .art-content-sidebar3
{
width: 71%;
}
.art-content-layout .art-content-wide
{
width: 100%;
}
/* end LayoutCell, content */

/* begin LayoutCell, sidebar1 */
.art-content-layout .art-sidebar1
{
background-color: #D4CCAA;
width: 50%;
overflow:hidden;
position: relative;
float: left;
}
/* end LayoutCell, sidebar1 */

/* begin LayoutCell, sidebar2 */
.art-content-layout .art-sidebar2
{
background-color: #D4CCAA;
width: 29%;
overflow:hidden;
position: relative;
float: left;
}
/* end LayoutCell, sidebar2 */

/* begin LayoutCell, sidebar3 */
.art-content-layout .art-sidebar3
{
background-color: #D4CCAA;
width: 21%;
overflow:hidden;
position: relative;
float: left;
}
/* end LayoutCell, sidebar3 */

And another section in formatting that looks like this after my changes, the items in bold represent items I added.

/* begin Layout – change css */
.art-content-layout
{
display: table;
padding: 0;
border: none;
width: 994px;
position: relative;
float: left;
}

.art-content-layout .art-content-layout
{
width: auto;
margin:0;
position: relative;
float: left;

}

div.art-content-layout div.art-layout-cell, div.art-content-layout div.art-layout-cell div.art-content-layout div.art-layout-cell
{
display: table-cell;
position: relative;
float: left;

}

div.art-layout-cell div.art-layout-cell
{
display: block;
position: relative;
float: left;

}

div.art-content-layout-row
{
display: table-row;
position: relative;
float: left;

}

.art-content-layout
{
table-layout: fixed;
border-collapse: collapse;
background-color: Transparent;
border: none !important;
padding:0 !important;
position: relative;
float: left;

}

.art-layout-cell, .art-content-layout-row
{
background-color: Transparent;
vertical-align: top;
text-align: left;
border: none !important;
margin:0 !important;
padding:0 !important;
position: relative;
float: left;
}
/* end Layout */

Comments

Response So Far...

Add Comment Register



Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>