HOWTO ...
... make a third column in the Asevo skin
An introduction to containers

http://www.blog.hemminga.net/B2evoforum/howto1-800.png

As the picture shows, the Asevo skin has plenty space. The picture is taken from a 1440 px wide 17" widescreen laptop monitor. This is visually attractive, but also offers opportunities to add items to the skin. In this HOWTO I will show how to add a sidebar to the left site of th central screen.
The tool that I am using are primarily Firefox based, like the Web Developer addon http://addons.mozilla.org/firefox/addon/60

http://www.blog.hemminga.net/B2evoforum/howto2-800.png

Here you see Web Developer in action. The mode is Outline -> Outline current element. There is a red box around the main area and the Status bar tells me what div I am pointing to. That will be: html > body > div#skin_wrapper .skin_wrapper_loggedin > div .main_zone > div .inner_wrapper

For this operation you want to copy the Asevo skin to a new directory. I called it asevo_3c. This is what you end up with:
[list]

blogs

[list]

skins

[list]

asevo

asevo_3c

[/list:u]
[/list:u]
[/list:u]
and the asevo_3c folder has the same contents as the asevo folder.

With your favorite editor crack open the file /skins/asevo_3c/style.css. We inspect the elements starting with the information from the Web Developer Statusbar.:

div.inner_wrapper
{
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 84%;
   width: 88ex;
   margin: 0 auto;
   padding: 1px;
}
.evo_main_area /* Left column */
{
   width: 62ex;
   float: left;
   overflow: hidden;
}
.evo_sidebar /* Right column */
{
  width: 23ex;
   float: right;
   overflow: hidden;
}

This is the basic layout. The total (div.inner_wrapper) is 88ex wide. The left column is 62ex wide, the sidebar is 23ex, so there is a gap of 3ex. Doing some basic math reveils that we want our new div.inner_wrapper to be 88 + 23 + 3 = 114ex wide. While we are typing, let's make a copy of the existing sidebar with some small modifications, so we end up with this:

div.inner_wrapper
{
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 84%;
   width: 114ex;
   margin: 0 auto;
   padding: 1px;
}
.evo_sidebar_left /* Left sidebar */
{
  width: 23ex;
   float: left;
   overflow: hidden;
   margin-left: 3ex;
}
.evo_main_area /* Central column */
{
   width: 62ex;
   float: left;
   overflow: hidden;
}
.evo_sidebar_right /* Right sidebar */
{
  width: 23ex;
   float: right;
   overflow: hidden;
}

I gave the Left sidebar it's space of 23em *plus* a 3ex margin-left for the space between. I renamed the right sidebar from .evo_sidebar to .evo_sidebar_right.
If you wonder: at this moment the skin looks like this:
http://www.blog.hemminga.net/B2evoforum/howto3-800.png
There is no left sidebar yet, so it's place is being taken by the Central column.

Now we focus our attention to the file /skins/asevo_3c/index.main.php. This is where it all happens. Since we checked the skin with our Web Developer tool and inspected the css file, we have a broad idea of what to expect. On line 95 we find oud our first div:

<div class="evo_main_area">

It runs all the way to line 271. There in the file is the start of the sidebar marked. On line 274 we find our div:

<div class="evo_sidebar">

Our left sidebar will be a copy of the existing right sidebar so we can copy/paste the block. The sidebar block is the part between lines 272 ... 302:

272 <!-- =================================== START OF SIDEBAR =================================== -->
273 
274 <div class="evo_sidebar">
...
300	</div>
301
302 </div>

and we copy it to before the main area. That will be right before line 95 that I mentioned before.

Naming conventions.
It is agreed that the specific containers will be numbered from left to right and from top to bottom. This is somewhat important for our work because we now have a second sidebar. According to the convention the new sidebar on the left is sidebar #1 (or plain 'Sidebar') and the existing sidebar is sidebar #2. Have a look at your widgets / containers in the Dashboard of your blog.
This means that we won't have to change much on our new sidebar. We only rename the div to:

96 <div class="evo_sidebar_left">

and focus our attention to the original sidebar. Here we change the div to:

304 <div class="evo_sidebar_right">

Also we change the Right sidebar to it's conventional name:

278 skin_container( NT_('Sidebar 2'), array(

This is about it. Let's have a look. First we upload the folder /asevo_3c/ to the server. In the Dashboard we go to Global settings -> Skins install -> Install new and pick our skin (we will make a new screenshot later). Now we go to Blog settings -> Skin and install our asevo_3c skin. You can have a peep now, but we want to add widgets, so we go to Blog settings -> Widgets. Here we find our Sidebar container and the new Sidebar 2 container. Fill the container with some widgets.
If you're done finally have a look at the result:
http://www.blog.hemminga.net/B2evoforum/howto4-800.png
and let me make a skinhot. According to the specs it must be 240x180 px and be called skinshot.jpg (or .png and I think .gif works also). If you do that and place it in the /asevo_3c/ folder, the picture will show up in the Dashboard where you select your skin.
http://www.blog.hemminga.net/B2evoforum/skinshot.png

This is about it. If you wish, you can download the skin: [url=http://www.blog.hemminga.net/media/blogs/asevo_3c.zip]Download![/url]

A short notice about containers.
If you walked through this HOWTO, you copied and pasted a container. You named them properly and doing just that made them appear in the Dashboard. The container is the place in the skin you provide for the widgets. If you view the source of your skin, you will see it's nothing more than an unordered list:

<div id="sidebar">
<ul> // start of container
   <li> // start of first widget
   ...
   </li>
   <li> // start of second widget

and since most widgets (think of the blogroll) are unordered lists themselves you end up with multiple nested lists, the final <li> being the output to the screen.

That's all for now. I hope you liked the show.

harishankar wrote:

Afwas, I would just add a note to that tutorial to say that to view the newly added containers in an already installed skin (from the admin panel), we need to go back to "Skins Install" and click on "Reload containers".

This is a technicality, but harishankar is right: if you change an existing skin that is already installed in your blog (add a container) you will only 'see' the new container after you have manually reloaded the skin.

Thanks for the remark