Problem with blog columns

Discussion in 'QnA (read only)' started by champ_rock, Jul 28, 2006.

Thread Status:
Not open for further replies.
  1. champ_rock

    champ_rock champ_rock

    Joined:
    Jun 15, 2005
    Messages:
    750
    Likes Received:
    1
    Trophy Points:
    0
    Location:
    Somewhere on the earth , near the equator
    hi..my blog id is http://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 http://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
     
  2. thecyclone2k

    thecyclone2k New Member

    Joined:
    Jan 23, 2004
    Messages:
    333
    Likes Received:
    1
    Trophy Points:
    0
    Location:
    www.solinweb.net
  3. OP
    OP
    champ_rock

    champ_rock champ_rock

    Joined:
    Jun 15, 2005
    Messages:
    750
    Likes Received:
    1
    Trophy Points:
    0
    Location:
    Somewhere on the earth , near the equator
    i could not find help from these 2.. templates .. has anyone converte a 2 column template into a 3 column one??????
     
  4. siriusb

    siriusb New Member

    Joined:
    May 12, 2005
    Messages:
    1,171
    Likes Received:
    1
    Trophy Points:
    0
    Location:
    Chennai, India, Asia, the Earth, the Solar system,
    Your css code is located in
    http://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.
     
  5. Zeeshan Quireshi

    Zeeshan Quireshi C# Be Sharp !

    Joined:
    Jun 9, 2006
    Messages:
    1,805
    Likes Received:
    5
    Trophy Points:
    0
    Location:
    Toronto
    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='http://www.blogsome.com'>Blogsome</a></li>
    
    <li><a href='http://blogsome-forum.blogsome.com'>Blogsome Forums</a></li>
    
            </ul>
    	
            <h2>Categories:</h2>
            <ul>
              	<li><a href="http://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='http://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="http://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="http://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="http://jakshay.blogsome.com/wp-login.php">login</a></li>
              <li><a href="http://jakshay.blogsome.com/wp-register.php">register</a></li>
            </ul>
    	
            <h2>Meta:</h2>
            <ul>
              <li><a href="http://jakshay.blogsome.com/feed/rss/">RSS .92</a></li>
              <li><a href="http://jakshay.blogsome.com/feed/rdf/">RDF 1.0</a></li>
    
              <li><a href="http://jakshay.blogsome.com/feed/">RSS 2.0</a></li>
              <li><a href="http://jakshay.blogsome.com/comments/feed/">Comments RSS 2.0</a></li>
              <li><a href="http://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 = "http://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="http://www.blogsome.com"><img src="http://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="http://www.blogsome.com">Blogsome</a> <br> <span class="designer">Theme designed by <a href="http://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: Jul 31, 2006
    champ_rock likes this.
  6. OP
    OP
    champ_rock

    champ_rock champ_rock

    Joined:
    Jun 15, 2005
    Messages:
    750
    Likes Received:
    1
    Trophy Points:
    0
    Location:
    Somewhere on the earth , near the equator
    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?
     
  7. Official Techie

    Official Techie New Member

    Joined:
    Jan 25, 2005
    Messages:
    439
    Likes Received:
    0
    Trophy Points:
    0
    Location:
    Somewhere in motherboard
Thread Status:
Not open for further replies.

Share This Page