• tculley

    (@tculley)


    Hey all,

    My website is https://collegeplaylists.com and I’m looking to add a second sidebar on the left hand side of the site. I’m not really sure how to do this, and I’ve done some research but can’t figure it out. I used some code to add a second sidebar, but it appears above my posts. I guess it’s because it is a two column site. I really need this sidebar and any help would be greatly appreciated! Thanks so much in advance!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Michael

    (@alchymyth)

    looks like you know how add the second sidebar in the php files, that is a good start. then all you need is to know where to put it and a bit of css.

    given the structure of your site, i suggest to add the call for the second sidebar just before the <div id="content" > :

    assuming the file is called: sidebar2.php
    and the html within that file is:

    <div id="sidebar2">
    ...all the php and html codes...
    </div>

    then add the call for sidebar2 within all the needed php files (index.php, single.php, archive.php, category.php, page.php etc – although you may not have all of these – ) just before <div id="content" >:

    <?php include(TEMPLATEPATH."/sidebar2.php");?>
    
    	<div id="content">

    next step: adapt the style.css:

    add the new style for #sidebar2:

    #sidebar2 {
    width:210px;
    float:left;
    /*the next two lines are only for the beginning
    to let you see the position of the new sidebar */
    min-height:300px;
    border: 1px solid green;
    }

    there may be more to style such as margin, padding, background, etc.
    learn from the styles of the first sidebar and copy them if neccessary.

    some of the existing styles, particular some widths, need adaptarion as well, for instance:

    #content {
    	float: left;
    	width: 500px;
    	margin-bottom: 10px;
             margin-left:20px;
    }
    #page {
    	width: 1000px;
    	margin: 0px auto;
    	padding: 20px 0 0 0;
    }

    css often needs a bit of trial-and-error to get it right.

    that should be it – report back if you get stuck ??

    Thread Starter tculley

    (@tculley)

    Well I kinda got it to work. My only complaint is that now my page is too wide and has a horizontal scrolling bar as well as vertical one. I tried to edit all sorts of things in the stylesheet, with no effect. Any ideas?

    use DIV n css to control wit width

    #sidebar2 {
    	float: right;
    	width: 65em;
    	margin: 10px 0 10px -21em;
    	padding: 0;
    }
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘creating a second sidebar’ is closed to new replies.