Wide Area in Sidebar

Author Message
Gabbie
Posted: 10/29/2010
Quote message 

I found a tutorial about adding a wide sidebar area above 2 columns in your sidebar, but I have no idea how to apply this to an Artisteer template.

Here's the tutorial link: http://www.lawnydesigns.com/2009/01/create-3-column-blogger-template-with-2.html

And here's a link to a blog that has what I want in its sidebar: http://www.caseemarie.net/

Any help is much appreciated! :)
 
Endy
Posted: 10/31/2010
Quote message 

Ok. This is what you must do:

go to layout > Edit HTML and search : 

 body#layout .art-sidebar1{          

 width: 25%;        

 }


after this line add: 

#sidebar-top{

clear:both;

}

#sidebar-right{

width:142px;

float:right;

word-wrap:break-word;

overflow:hidden;

}

#sidebar-left{

width:143px;

float:left;

word-wrap:break-word;

overflow:hidden;

}


change the width:143px; with your own dimensions of the sidebars

After that search: 

<b:section class='art-layout-cell art-sidebar1' id='sidebar1' preferred='yes'>


Change : id='sidebar1' to id='sidebar-right'

paste the folowing lines : 

<b:section class='sidebar' id='sidebar-top'/>

<b:section class='sidebar' id='sidebar-left'/>


before the : 

<b:section class='art-layout-cell art-sidebar1' id='sidebar1' preferred='yes'>


Save your template and you are done.

here you have a demo :

http://548621.blogspot.com/


 
Gabrielle
Posted: 11/1/2010
Quote message 

Thanks so much for your help!! I am going to try it out now. :D
 
Endy
Posted: 11/2/2010
Quote message 

I hope you succeed
 
Gabrielle
Posted: 11/5/2010
Quote message 

I did! Thank you so much! I really appreciate you taking the time to explain that to me :)
 
Endy
Posted: 11/6/2010
Quote message 

With pleasure. Glad I could help. Another tip: you can change columns width in percentages, so if you change the sidebar width the two columns will be sized correctly, without modifying them manually.

Exemple: 
#sidebar-top{



clear:both;



}



#sidebar-right{



width:50%;



float:right;



word-wrap:break-word;



overflow:hidden;



}



#sidebar-left{



width:50%;



float:left;



word-wrap:break-word;



overflow:hidden;



}[/cpde]