Remove the sidebar
From b2evolution manual
This refers to b2evolution versions 0.9.0.*
Sometimes you see a skin you like but it has things in the sidebar you don't want. Sometimes you want "just the blog" so you wish the whole sidebar would just go away. Either way, it's very easy to do.
[edit] How to remove just one piece of the sidebar?
For the purpose of this article I will pretend that I want to use the 'custom' skin but do not want to have the calendar.
No problem! Open up skins/custom/_main.php in your favorite editor and look for the sidebar section. The code is commented nicely - you will see a line that says
<!-- START OF SIDEBAR -->
(Actually it has a lot of equals signs on either side of the text that I had to remove here due to how the renderers the manual uses work.) Since the calendar is near the top of the sidebar the code for it will also be near the top. Looking at the beginning of the sidebar area you will find this:
<div class="bSideItem">
<h3><?php $Blog->disp( 'name', 'htmlbody' ) ?></h3>
<p><?php $Blog->disp( 'longdesc', 'htmlbody' ); ?></p>
<p class="center"><strong><?php posts_nav_link( ' | ', '< '.T_('Previous'), T_('Next').' >' ); ?></strong></p>
<!--?php next_post(); // activate this if you want a link to the next post in single page mode ?-->
<!--?php previous_post(); // activate this if you want a link to the previous post in single page mode ?-->
<ul>
<li><a href="<?php $Blog->disp( 'staticurl', 'raw' ) ?>"><strong><?php echo T_('Recently') ?></strong></a> <span class="dimmed"><?php echo T_('(cached)') ?></span></li>
<li><a href="<?php $Blog->disp( 'dynurl', 'raw' ) ?>"><strong><?php echo T_('Recently') ?></strong></a> <span class="dimmed"><?php echo T_('(no cache)') ?></span></li>
</ul>
<?php // -------------------------- CALENDAR INCLUDED HERE -----------------------------
require( dirname(_FILE_).'/_calendar.php' );
// -------------------------------- END OF CALENDAR ---------------------------------- ?>
<ul>
<li><a href="<?php $Blog->disp( 'lastcommentsurl', 'raw' ) ?>"><strong><?php echo T_('Last comments') ?></strong></a></li>
<li><a href="<?php $Blog->disp( 'blogstatsurl', 'raw' ) ?>"><strong><?php echo T_('Some viewing statistics') ?></strong></a></li>
</ul>
</div>
The calendar is in the middle of this particular "bSideItem" div:
<?php // -------------------------- CALENDAR INCLUDED HERE ----------------------------- require( dirname(_FILE_).'/_calendar.php' ); // -------------------------------- END OF CALENDAR ---------------------------------- ?>
Delete those three lines and you won't have the calendar anymore. By the way if you're not into php yet here's a little helpful hint: all php statements start with <?php and end with ?>
[edit] How to remove the ENTIRE sidebar?
No problem! As you look through the rest of your _main.php file you will see where the sidebar is composed of several different "bSideItem" divs. Delete each of these (including the appropriate /div tag) until you are left with something like this:
<!-- START OF SIDEBAR --> <div class="bSideBar"> <?php // -------------------------- LINKBLOG INCLUDED HERE ----------------------------- require( dirname(_FILE_).'/_linkblog.php' ); // -------------------------------- END OF LINKBLOG ---------------------------------- ?> <p class="center">powered by<br /> <a href="http://b2evolution.net/" title="b2evolution home"><img src="../../img/b2evolution_logo_80.gif" alt="b2evolution" width="80" height="17" border="0" class="middle" /></a></p> </div> <div id="pageFooter"> <p class="baseline">
Here you still have a sidebar with the linkblog and the "powered by" credit badge. I left them in because 'technically' they are not inside a bSideItem div. The next step is to remove the bSideBar div, it's /div tag, the linkblog, and move the credit badge to the footer.
<!-- START OF SIDEBAR --> <!-- NO MORE SIDEBAR! --> <div id="pageFooter"> <p class="baseline">powered by <a href="http://b2evolution.net/" title="b2evolution home"><img src="../../img/b2evolution_logo_80.gif" alt="b2evolution" width="80" height="17" border="0" class="middle" /></a></p> <p class="baseline">
You can remove the two commented lines for "start of sidebar" and "no more sidebar" - I left them here just to illustrate.
Unfortunately your blog will still have space for a sidebar, so now you have to edit your style sheet. Again, working with the 'custom' skin, I will edit skins/skinname/custom.css to let the blog take the full screen. The custom skin uses an image for the background to get the vertical line in place, so you will have to make that go away.
div#wrapper {
background: #fff url(img/bg_content.gif) repeat-y 0 0;
width: 740px;
margin: 0 auto;
padding: 0;
}
becomes
div#wrapper {
background: #fff;
width: 740px;
margin: 0 auto;
padding: 0;
}
Finally, tell the bPosts div it's okay to take up as much room as it can.
/* Styles for posts */
.bPosts {
float: left;
width: 480px;
overflow: hidden;
/* background: #090;*/
}
becomes
/* Styles for posts */
.bPosts {
float: left;
/* background: #090;*/
}
That's it - no more sidebar, and no more empty space where the sidebar used to be. The actual work you will need to do depends entirely on your skin. Not all skins use "bSideItem", and some skins have the code for the sidebar before the code for the posts. The same is true for your style sheet: your work will depend entirely on the skin you are editing. Back up frequently, and make small steps towards your goal.
