Problem with blog columns

Status
Not open for further replies.

champ_rock

champ_rock
hi..my blog id is *jakshay.blogsome.com/

now what i am trying to do is to make that 2 column template into a 3 column one.. for that i refered to this article *webdesign.about.com/od/css/a/aa102102a.htm for css help...

now when i look up my template html code i am not able to find any such thing
Code:
#leftnavigation {
  position : absolute;
  left : 0;
  width : 150px;
  margin-left : 10px;
  margin-top : 20px;
  color : #000000;
  padding : 3px;
}
#rightnavigation {
  position : absolute;
  left : 80%;
  top : 20px;
  width : 140px;
  padding-left : 10px;
  z-index : 3;
  color : #000000;
  padding : 3px;
}

Then for the content row, I set the margins to be somewhat relative to the outer columns.
#content {
  top : 0px;
  margin : 0px 25% 0 165px;
  padding : 3px;
  color : #000000;
}

please tell me how can i add a left hand side column
 

thecyclone2k

In the zone
I don't have much idea on it but, try these themes -
*www.wordpresstheme.com/themes/theme-tiga/
*www.wordpresstheme.com/themes/theme-wp-andreas09/

and try out their php files for help as they are 3 column themes.
 
OP
champ_rock

champ_rock

champ_rock
i could not find help from these 2.. templates .. has anyone converte a 2 column template into a 3 column one??????
 

siriusb

Cyborg Agent
Your css code is located in
*jakshay.blogsome.com/templates/wp-layout.css
I think you can directly edit it but I am not sure as I've never done it in wordpress.
Or you can always delete the reference to that external css link and copy-paste the css into your webpage (will increase the size of every webpage). Now you can edit your css to a three column design.
 

Zeeshan Quireshi

C# Be Sharp !
well tell me what you really wanna do , if you want to have two menus instead on one ( mean one on left , another on right ) then it's easy .

To add a side bar on the left add this into your main template :

ps: you can edit it to make a new menu :

Code:
<div id="leftbar">
        <h2>Links:</h2>
        <ul>
          <li><a href='*www.blogsome.com'>Blogsome</a></li>

<li><a href='*blogsome-forum.blogsome.com'>Blogsome Forums</a></li>

        </ul>
	
        <h2>Categories:</h2>
        <ul>
          	<li><a href="*jakshay.blogsome.com/category/" title="View all posts filed under Uncategorized">Uncategorized</a>
</li>

        </ul>

	
        <h2>Search: </h2><form id="searchform" method="POST" action="">
          <div><input type="text" name="s" size="15" /><br />
          <input type="submit" name="submit" value="search" />
          </div></form>
        </li></ul>
	
        <h2>Archives:</h2>
        <ul>
           	<li><a href='*jakshay.blogsome.com/2006/07/' title='July 2006'>July 2006</a></li>

        </ul>
	
	<ul><li>
	<table id="wp-calendar">
    <caption>July 2006</caption>
    <thead>
    <tr>
		<th abbr="Monday" scope="col" title="Monday">M</th>

		<th abbr="Tuesday" scope="col" title="Tuesday">T</th>
		<th abbr="Wednesday" scope="col" title="Wednesday">W</th>
		<th abbr="Thursday" scope="col" title="Thursday">T</th>
		<th abbr="Friday" scope="col" title="Friday">F</th>
		<th abbr="Saturday" scope="col" title="Saturday">S</th>
		<th abbr="Sunday" scope="col" title="Sunday">S</th>

    </tr>
    </thead>

    <tfoot>
    <tr>
		<td colspan="3" id="prev" class="pad">&nbsp;</td>
		<td class="pad">&nbsp;</td>
		<td colspan="3" id="next" class="pad">&nbsp;</td>
    </tr>

    </tfoot>

    <tbody>
    <tr>
		<td colspan="5" class="pad">&nbsp;</td><td>1</td><td>2</td>
	</tr>
	<tr>
		<td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td>

	</tr>
	<tr>
		<td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td>
	</tr>
	<tr>

		<td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td>
	</tr>
	<tr>
		<td>24</td><td>25</td><td>26</td><td>27</td><td><a href="*jakshay.blogsome.com/2006/07/28/" title="Hello world!">28</a></td><td>29</td><td>30</td>

	</tr>
	<tr>
		<td id="today">31</td>
		<td class="pad" colspan="6">&nbsp;</td>
	</tr>
	</tbody>
	</table>
	</li></ul>

	
        
                <h2>Most Recent Posts</h2>
        <ul>
                <li><a href="*jakshay.blogsome.com/2006/07/28/hello-world/" title="Hello world!">Hello world!</a></li>
                </ul>
        </li></ul>
        	
        
        
        
        	
        <h2>Other:</h2>
        <ul>

          <li><a href="*jakshay.blogsome.com/wp-login.php">login</a></li>
          <li><a href="*jakshay.blogsome.com/wp-register.php">register</a></li>
        </ul>
	
        <h2>Meta:</h2>
        <ul>
          <li><a href="*jakshay.blogsome.com/feed/rss/">RSS .92</a></li>
          <li><a href="*jakshay.blogsome.com/feed/rdf/">RDF 1.0</a></li>

          <li><a href="*jakshay.blogsome.com/feed/">RSS 2.0</a></li>
          <li><a href="*jakshay.blogsome.com/comments/feed/">Comments RSS 2.0</a></li>
          <li><a href="*validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
        </ul>

<!--
####################################################
####            Do Not Remove                   ####
-->
        <ul><li><ul><br />
        <script type="text/javascript"><!--
        google_ad_client = "pub-0490979434562042";
  google_alternate_ad_url = "*www.blogsome.com/ad.php";
  google_ad_width = 120;
  google_ad_height = 240;
  google_ad_format = "120x240_as";
  google_ad_channel ="6155959376";
	google_color_border = "DFD8DF";
        google_color_bg = "FFFFFF";
        google_color_link = "909790";
        google_color_url = "909790";
        google_color_text = "000000";
        //--></script>

        <a href="*www.blogsome.com"><img src="*www.blogsome.com/ad.png" border="0"></a>
	</ul></li></ul>
<!--
####            Do Not Remove                   ####
####################################################
-->

	
</div>
</div>
<!--
####################################################
####            Do Not Remove                   ####
-->
        <p id="footer">Get free blog up and running in minutes with <a href="*www.blogsome.com">Blogsome</a> <br> <span class="designer">Theme designed by <a href="*wpthemes.info/">Sadish Balasubramanian</a></span></p>

<!--
####            Do Not Remove                   ####
####################################################
-->
</div>

add this to your css file :
Code:
#leftbar {
	margin: 0;
	width: 180px;
	padding: 10px 10px 0 0px;
	float:left;
	display:inline;	
	font-family : verdana, tahoma, arial, serif;	
}

html>body #leftbar {
	width: 180px;
}

#leftbar h2 {
	margin: 0;
	padding:5px;
	font-size: 1em;
	color: #333;
	font-weight: normal;	
	background:transparent url('/wp-inst/wp-content/sitetemplates/ShadedGrey/img/sidetitle.png') repeat-x top center;
}
#leftbar ul {
	list-style-type: none;
	padding: 0 0 1em 5px;
	margin: 0;	
}
#leftbar ul li {
	margin: 0.5em 0 0 0;
	padding: 0;
	font-size: 0.76em;
}
#leftbar li a:link, #leftbar li a:visited {
	color: #999;
	border-bottom: 1px solid #ebebeb;
	text-decoration: none;
}
#leftbar li a:hover {
	color: #666;
	border-bottom: 1px solid #666;
}
 
Last edited:
OP
champ_rock

champ_rock

champ_rock
i managed it up a bit.. now i think only some minor error is left.... please take a look at the blog now and tell me?
 

Official Techie

In the zone
my blog
*sudiptatech.blogspot.com/
*sudiptamondal.blogspot.com/

i want to know how can i increase the space between the two columns the right one where there are links and name and profile view and the left one where i post things and did u like the colour
 
Status
Not open for further replies.
Top Bottom