I know the sidebar is no longer supported by Nicola or any of the other members or staff of ZetaBoards but I am on the verge on completing a conversion of the vBulletin Skins, BlueFox and GreenFox, and as I have decided to add a sidebar to the skin. The sidebar plays an important role in the skins and they would not look as good without it.
This is my Layout:
Spoiler: click to toggle <!-- TOPMENU --><!-- HEADER --><div id="main"><div id="wrap">
<div class="memberonly"> <div style="float:right; margin-left:0; margin-right:10px; margin-top:10px;" class="category"> <table> <tr><td width="724px"><!-- NAV --></td></table></div> </div> <script type="text/javascript"> <!-- if(document.getElementById('top_info').innerHTML.match('Register')){document.write('<style>.memberonly \{display:none;\}</style>');} // --> </script>
<div class="guestonly"> <div style="float:right; margin-left:0; margin-right:10px; margin-top:10px;" class="category"> <table> <tr><td width="533px"><!-- NAV --></td><td width="170px"> <form action="http://s1.zetaboards.com/guild_lounge/login/log_in/" method="post"> Username: <input type='text' size='10' maxlength='250' name='uname' /> Password: <input type='password' size='10' name='pw' /> <button type="submit" class="btn_mod">Log In</button> </form> </td> </table> </div>
</div> <script type="text/javascript"> if(document.getElementById('top_info').innerHTML.match('Sign Out')){document.write('<style>.guestonly \{display:none;\}</style>');} </script>
<!-- start sidebar content --> <div id="sidebar_content"> <div id="sidebar">
<!-- block 1 --> <div class="block_border"> <h2 class="special">Navigation</h2> <div class="block"> <div class="row1">
» <a href="http://s1.zetaboards.com/guild_lounge/index/">Home Page</a>
<br>» Help Desk
<br>» <a href="http://s1.zetaboards.com/guild_lounge/members/">Member List</a>
<br>» Become a Premium
<br>» <a href="http://s1.zetaboards.com/guild_lounge/search/">Search Forums</a>
<div class="memberonly"><hr>» <a href="http://s1.zetaboards.com/guild_lounge/home/">Account Management</a> <br><center>
<img src="http://i.pbase.com/v3/34/582634/1/47089985.spacer.gif"></img> <img src="http://i.pbase.com/v3/34/582634/1/47089985.spacer.gif></img> <img src="http://i.pbase.com/v3/34/582634/1/47089985.spacer.gif"> </img><img src="http://i.pbase.com/v3/34/582634/1/47089985.spacer.gif"> </img><img src="http://i.pbase.com/v3/34/582634/1/47089985.spacer.gif"> </img><img src="http://i.pbase.com/v3/34/582634/1/47089985.spacer.gif"> </img>
<a href="http://s1.zetaboards.com/guild_lounge/home/">Preferences </a> · <a href="http://s1.zetaboards.com/guild_lounge/msg/">Inbox </a> · <a href="http://s1.zetaboards.com/guild_lounge/login/logout/?" >Sign Out</a></center> </div> <script type="text/javascript"> <!-- if(document.getElementById('top_info').innerHTML.match('Register')){document.write('<style>.memberonly \{display:none;\}</style>');} // --> </script>
</div></div></div>
<!-- block 2 --> <div class="block_border"> <h2 class="special">Quick News</h2> <div class="block"> <div class="row1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div></div></div>
<!-- block 3 --> <div class="block_border"> <h2 class="special">Member of The Week</h2> <div class="block"> <div class="row1"> <p class="image"> <center><img src="http://209.85.62.24/161/43/0/a240907/avatar-240907.gif"></img></center><br> <a href="http://s1.zetaboards.com/guild_lounge/profile/240907/">Flavius</a>, our forum manager is the only member and therefore deserves the MOTW prize of 100 free posts. He has gladly converted our BlueFox Theme from vBulletin to Zetaboards and continues to benefit the forum in every way. </p> </div></div></div>
</div> <!-- end sidebar --> </div>
<div id="board"> <!-- BOARD --> </div>
</div></div> </div></div>
This is the Sidebar CSS I am using:
Spoiler: click to toggle /********************SIDEBAR CSS ********************/ /* adjust width of entire forum content here */ #sidebar_content {width: 185px;margin-left:3px;}
/* Adjust width and styling here */ #sidebar {float: left; width: 185px; margin-top:5px; padding: 5px 7px; background-color:none; }
/* width of sidebar plus whatever amount of gap you want between sidebar and board */ #board { margin-left: 195px; margin-right:3px; }
/* styling of generic block */ .block {
border: 1px solid #181C18; background: #292829; margin:0; padding: 3px; border-top:0; font-size: 80%; color:gray; }
/* styling of whole block border */ .block_border {
border: 1px solid #313431; padding:0; background:none; margin-bottom:10px; }
/* styling of block header */ #sidebar h2.special {
font: bold 9pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; color:#fff; padding:5px; border: 1px solid #181C18; }
/******** do not touch this ********/
#logo, #wrap, #blog, #main, #blog h1, #blog_head:after, #blog_sub, #nav, #portal {clear: none!important;} #copyright {clear: both;} table {clear: right;}
The Problem:
Spoiler: click to toggle If my sidebar is longer in height than the top of the board and the top advertisement, when accessing the Preference and Inbox Pages, these Preference and Inbox sections are being pushed down by the sidebar leaving a big gap between the top advertisement and the top of the sections. This is only happens here and no where else. I am using FF by the way.
Thank you,
Flavius
|