... Elxis version 2009.1 codename Hecate is out, download it from Elxis Download Cender (EDC) ...
Collapsible columns
From Elxis Official Documentation
What are collapsible columns? Such columns simply disappear when there is no content inside them. We will explore very basic three column layout.
First, create simple HTML file nd name it index.html. Then, create style.css in the same folder.
Add the following line to your inside index.html, and inside <html></html> tag:
<link rel="stylesheet" type="text/css" href="style.css"/>
That way we linked style.css with index.html.
Finally, write some HTML markup between <body></body> tag:
<div id="container"> <div id="header">Header content here</div> <div id="main"> <div id="content">Put some content here</div> </div> <div id="col1">Some modules here</div> <div id="col2">Some modules here, too</div> <div id="footer">Footer goes here</div> </div>
Now, we should add inside divs to get some spacing around content, like this:
<div id="container"> <div id="header"> <div class="inside">Header content here</div> </div> <div id="main"> <div id="content">Put some content here</div> </div> <div id="col1"> <div class="inside">Some modules here</div> </div> <div id="col2"> <div id="inside">Some modules here, too</div> </div> <div id="footer"> <div class="inside">Footer goes here</div> </div> </div>
Notice that we didn't add inside div to content div. That's because it is already inside main div. Also notice that we used class="inside", not id="inside". That is because we want to create XHTML valid template, and there can not be multiple id-s of the page. Also, we put content before side columns for better SEO.
Using CSS we can add colors to our elements, so we can easily distinguish them. Also we will add some breathing space to the content of id divs.This template will be constructed using negative margins wich are perfect CSS valid cross-browser solution.
Following is the CSS code:
body{margin:0;padding:0}
#container{
width:960px;
margin:0 auto;
}
#header {
float:left;
width:100%;
height:100px;
background:#999;
clear:both;
}
#main{
float:left;
width:100%;
}
#content {
padding:10px;
margin: 0 200px; /* This is the important line */
}
#col1 {
float:left;
width:200px;
margin-left:-960px;
background:#fcf;
}
#col2 {
float:left;
margin-left:-200px;
width:200px;
background:#fcc;
}
#footer {
float:left;
width:100%;
height:30px;
background:#000;
height:1%;/* We must put this in order to get proper #inside margines */
clear:both;
}
.inside{
margin:5px;
background:#ccc;
padding:5px;
}
If you did everything as we described before, you should have very simple three column HTML layout. Now we need to convert it to Elxis template. To do so, read Elxis Template Introduction first.
You can rename style.css to layout.css of your new template and index.html to index.php. In order to make left or right column disappear if there is nothing inside we will use conditional PHP statement.
Suppose we are loading left position into col1 div and we want this div to be collapsible, here's how we wrap our column:
<?php if((moscountmodules('left')>0)) { ?>
<div id="col1">
<div class="inside">Some modules here</div>
</div>
<?php } ?>
This means that if there are no published modules on position left, col1 won't be displayed. In such situation, col1 will not be displayed. Open the layout.css (ex-style.css), and find #content selector.
You will see this:
margin: 0 200px
That means we have 200px margin for left and right side. Since col1 have disappeared, we will have meaningless space on the left.
Therefore, we must remove this line from CSS:
margin: 0 200px (inside #content selector). This line means 0 for top and bottom margins and 200px for left and right.
Now we open index.php (ex-index.html) and add the following PHP code inside <html></html>:
<?php if((moscountmodules('left')>0)) { ?>
<style type="text/css">#content {margin-left:200px}
</style>
<?php } ?>
What we have done now? We said that if nothing is loaded inside position left, we won't assign 200px left margin to the content div.
So, we should see the whole picture now... if nothing is loaded inside left position, col1 div won't exist, so we don't display 200px left margin.
Same procedure will work for right div and it's respective margin.
Hopefully, this will give you some ideas.
