Page Index Toggle Pages: 1 Print
Adding Side Bar Y2.4 (Read 1848 times)
Captain John
Ex Member


Adding Side Bar Y2.4
Nov 7th, 2009 at 4:54am
Print Post  
  This modification will run Top Logo area 100% of browser width.  Forum 80% on left, SideBar 20% on Right

In the default.html (default forum template)
Search for: (and Remove)
Code
Select All
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="menutop">
	<tr>
		<td class="small" align="left" valign="middle" width="2%" height="23">&nbsp;</td>
		<td class="small" align="left" valign="middle" width="48%" height="23"><div id="yabbclock">{yabb time}</div></td>
		<td class="small" align="right" valign="middle" width="48%" height="23">{yabb langChooser}</td>
		<td class="small" align="left" valign="middle" width="2%" height="23">&nbsp;</td>
	</tr>
</table>
<table class="windowbg2" width="100%" cellpadding="4" cellspacing="0" border="0">
	<tr>
		<td align="left" valign="top" width="1%" height="40">&nbsp;</td>
		<td align="left" valign="middle" height="40">{yabb uname}<br />{yabb im}{yabb admin_alert}</td>
		<td align="center" valign="middle" width="460" height="100" rowspan="2"><a href="http://www.yabbforum.com"><img src="{yabb images}/yabblogo.png" alt="YaBB - Yet another Bulletin Board" title="YaBB - Yet another Bulletin Board" border="0" /></a></td>
	</tr>
	<tr>
		<td align="left" valign="top" width="1%" height="60">&nbsp;</td>
		<td class="small" align="left" valign="top" height="60">{yabb news}</td>
	</tr>
</table> 


Find:
Code
Select All
<body>
<div id="ImageAlert" style="visibility:hidden; position:fixed; background-color:#AAAAAA; width:200px; top:30%; right:41%">
  <div id="ImageAlertText" style="background-color:#EEEEEE; text-align:center; padding: 3px; margin:1px;"> </div>
  <div id="ImageAlertPic" style="background-color:#FFFFFF; text-align:center; margin:1px;"> </div>
</div> 



Insert edited html code between the above code, to just above the code below
Code
Select All
<a name="pagetop">&nbsp;</a><br />
<div id="maincontainer">
<div id="container"> 



below is the Edited html:
Code
Select All
  <div id="wrapper">
  <div id="header">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="menutop">
  <tr>
    <td class="small" align="left" valign="middle" width="2%" height="23">&nbsp;</td>
    <td class="small" align="left" valign="middle" width="48%" height="23"><div id="yabbclock">{yabb time}</div></td>
    <td class="small" align="right" valign="middle" width="48%" height="23">{yabb langChooser}</td>
    <td class="small" align="left" valign="middle" width="2%" height="23">&nbsp;</td>
  </tr>
</table>
<table class="windowbg2" width="100%" cellpadding="4" cellspacing="0" border="0">
  <tr>
    <td align="left" valign="top" width="1%" height="40">&nbsp;</td>
    <td align="left" valign="middle" height="40">{yabb uname}<br />{yabb im}{yabb admin_alert}</td>
    <td align="center" valign="middle" width="460" height="100" rowspan="2"><a href="http://www.yabbforum.com"><img src="{yabb images}/yabblogo.png" alt="YaBB - Yet another Bulletin Board" title="YaBB - Yet another Bulletin Board" border="0" /></a></td>
  </tr>
  <tr>
    <td align="left" valign="top" width="1%" height="60">&nbsp;</td>
    <td class="small" align="left" valign="top" height="60">{yabb news}</td>
  </tr>
</table></div>
  <div id="sidebar">
   <table width="100%" cellspacing="1" cellpadding="2" border="0">
     <tr valign="middle"><td><center><img src="{yabb images}/billboard1.png" border="0" /></center><br /><b><font color=#ff0000>1XX .....</color></b></td></tr>
     <tr valign="middle"><td><center><img src="{yabb images}/billboard1.png" border="0" /></center><br /><b><font color=#ff0000>2XX .....</color></b></td></tr>
     <tr valign="middle"><td><center><img src="{yabb images}/billboard1.png" border="0" /></center><br /><b><font color=#ff0000>3XX .....</color></b></td></tr>
     <tr valign="middle"><td><center><img src="{yabb images}/billboard1.png" border="0" /></center><br /><b><font color=#ff0000>4XX .....</color></b></td></tr>
     <tr valign="middle"><td><b><font color=#ff0000>5XX .....</color></b></td></tr>
   </table></div>
 



  Edit highlighted table to include your content

Edit default CSS file to this:
Code
Select All
#wrapper {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0px;
}
#header {
  width: 100%;
  text-align: center ;
  padding: 0px;
  border-top: 0px;
  margin-bottom: 10px;
}
#sidebar {
  position: absolute;
  width: 20%;
  right: 10px;
  top: 150px;
  padding: 2px;
  padding-top: 10px;
}
#maincontainer {
  margin-right: 22% ;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 6px;
  padding-right: 2px;
  border-top: 0px;
  margin-bottom: 10px; 



For more info http://www.thesitewizard.com/css/design-2-column-layout.shtml
« Last Edit: Dec 15th, 2009 at 8:28pm by »  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Print
 
  « Board Index ‹ Board  ^Top