1

Topic: Adding a Right Column with 2.5.3

First off, I use version 2.5.3 of vldP. I know the coding for later versions is different than 2.5.3 so the coding I did for 2.5.3 may not be exactly the same for other versions. However, there may be enough similarities that you can use the following as a guide for your version.

My goal was to add a right column to my site. I had to keep the width under 980 pixels or anyone using a resolution of 1024 x 768 may have problems seeing the site on their monitor without having to scroll.



HERE ARE THE STEPS I TOOK:

1. OPEN header.tpl

FIND: <div id="sidebar_wrap">

COPY from beginning of <div id="sidebar_wrap"> to the closing </div>

PASTE the entire copied div right below the closing </div> of sidebar_wrap

RENAME the copied <div id="sidebar_wrap"> & <div id="sidebar"> TO: <div id="sidebar_wrap2"> & <div id="sidebar2">

NOTES

1. I'm not 100% sure, but I believe the side bar coding is now in its own template for versions later than 2.5.3.

2. My current width is 958. Since that is less than 980 I decided to work with that width and leave it as is.

XXXXXXXXXXXXXXXXXXXXXXXXXXXX

1. OPEN site.css

FIND:

div#sidebar_wrap {
    padding: 0px 10px 10px 0px;
    width: 170px;
    float: left; }

      div#sidebar { }
   
I want to duplicate the above code and make change as follows:

div#sidebar_wrap2 {
    padding: 0px 0px 10px 10px;
    width: 170px;
    float: right; }

      div#sidebar2 { }

NOTES:

In the above changes it is important to note that I added  float right to the new code. I also adjusted the padding for a float right sidebar. I used the same width (170px) for the right side bar since my left side bar is also 170px. Your left side bar width may not be 170px. Recommend that the right sidebar width be the same as your left side bar width to maintain an overall balance to your site.

XXXXXXXXXXXXXXXXXXXXXXXXXXXX

1. OPEN header.tpl

FIND:

#content_wrap {
      padding-bottom: 10px;
    width: 730px;
    float: left; }

CHANGE TO:

#content_wrap {
      padding-bottom: 10px;
    width: 560px;
    margin:0px auto;
    float: left; }

NOTES:

1. How did I come up with 560 -- I used the following formula: 730 (current width) - 170 (the new right side bar width) = 560

2. Note the add margin: 0px auto is added so it centers the content between the two sidebars.

XXXXXXXXXXXXXXXXXXXXXXXXXXXX

Basically the above is all I need to do, but as usual, when you make adjustments it may throw other things out of whack. So I had to do some tweaking. For example the blogs and news on my home page where messed up because of the new 560 width for the content. I played with the CSS coding and even though I got it to work, it was not as tight as I wanted. I ended up using tables which gave me more control and a better display for my blogs and news.

It is really difficult to advise you since my site coding is heavily modified but I will show you the coding I used to tweak my blog and news on my home page.

1. In homepage.tpl I deleted the coding for the titles since I will be adding the titles directly in the table.

<h3 class="news">{lang:"core","home_latest_news"}</h3>

<h3 class="blogs">{lang:"core","home_latest_blogs"}</h3>

2. I created a  100% wide table with 2 columns...each column will be 50% wide. HERE IS WHAT THE TABLE LOOKS LIKE


<table width="100%"  border="0">
  <tr>
    <td width="50%" valign="top"><div class="block news">

        <h3 class="blacktitle">{lang:"core","home_latest_news"}</h3>
        {news:limit=1,cache_time=0}
            
        <h3>Filipina and Asian Dating Random Blogs</h3>

        {blogs:limit=5,groups="2|9",orderby="random",cache_name="blogs2",cache_time=0}
  </div></td>
  
    <td width="50%" valign="top"><div class="block blogs">
    
        <h3 class="blacktitle">{lang:"core","home_latest_blogs"}</h3>
        {blogs:limit=5,groups="2|9",cache_name="blogs1",cache_time=0}

        <h3>Filipina Lady and Asian Dating Admin Blog</h3>
        {blogs:limit=1,member_id=1,cache_name="admin1",cache_time=0}

    </div></td>
  </tr>
</table>

After I created the table and added the coding to the table,  in homepage.css I played around with the width for the news and blog until there was a good fit for my site.

div.homepage div.news {
        float: left;
        width: 275px; }
       
div.homepage div.blogs {
        float: right;
        width: 275px; }

Again, the coding above in the table will probably be a lot different than your coding. For example <h3 class="blacktitle"> is a class I created so my heading would use a different color background gif. However, you should be able to look at your default coding, compare it with the above and be able to make the necessary adjustments.

I know some templates don't have both the news and blogs on the home page. So you really have to know how to tweak your site after you added the right side bar to get things lined up properly.

Good luck.

Last edited by db3204 (2012-10-06 16:04:30)