Add Second Sidebar To Default-Theme

  • Resolved mcbo

    (@mcbo)


    16 years, 11 months ago

    Hey,

    I want to add an extra, second sidebar to my customized Default-theme. (First Column: Content, Second Column: Recent Comments, Third Column: Recent Posts), but I’m stuck on it.

    This is what I’ve tried:

    At first, Style.css looks like this:

    #sidebar
{
	padding: 8px 0 10px 0;
	margin-left: 500px;
	width: 250px;
	}

#sidebar form {
	margin: 0;
	}

    I added to style.css:

    #sidebar2
{
	padding: 8px 0 10px 0;
	margin-left: 750px;
	width: 150px;
	}

#sidebar2 form {
	margin: 0;
	}

    I added to sidebar.php (below ‘first’ sidebar):

    <div id="sidebar2">Test Sidebar 2, Test Sidebar 2, Test Sidebar 2</div>

    I thought it would be as simple as that, but it messes up my blog very badly.

    When I remove this one: margin-left: 750px;, the test-message just appeares below Sidebar 1.

    Does anyone know how to add a second sidebar to my blog?

    Thanks in advance!

Viewing 5 replies - 1 through 5 (of 5 total)

  • Have you looked into the Three Columns Kubrick Theme?

    I don’t know which version of WordPress you are using, but the theme’s page says that it is:

    (tested on WP2.x)

    Thread Starter mcbo

    (@mcbo)

    Thanks for your reply!

    First of all: my WordPress-version is 2.5.

    Yes, I tried that theme. The only thing it does is removing functions.php and create div-id’s for sidebar1 and sidebar2. The theme puts both sidebars in sidebar.php.

    It worked out. The 2 sidebars were placed exactly next to each other, but when I tried to modify the ‘margin-left’ (to geth both sidebars more to the right), my blog totally messed up.

    When I do the thing I described above in my first post, the second sidebar isn’t at the right place too. It shows up just right below the first sidebar.

    My WordPress version is 2.5 (updated a couple days ago).

    I would really appreciate if someone knows how to add an extra sidebar succesfully to my customized Default-theme!

    Try this: (be sure to make backups first)

    1. Remove width from: .narrowcolumn and .widecolumn
    2. Under /* Begin Structure */ add `#content{
      width:300px;
      float:left;
      }`
    3. Under /* Begin Sidebar */ (around line 540) modify like this: `#sidebar,
      #sidebar2{
      width: 190px;
      float:left;
      }`

    This was tested and works on IE6, Safari 3.0.4, Opera 9.26, and FF 2.0.0.13.

    You may have other styles that may interfere with this basic layout which may need adjusting.

    Thread Starter mcbo

    (@mcbo)

    mfields. Thank you very much for your reply. I really appreciate your help.

    I followed your instructions step by step, but I can’t make it work. I guess I’m doing something wrong.

    Is it ok if I e-mail you the url of my testpage (I rather not post it on the forum), so you can see what’s the rough idea of the new layout? I could also send you a .zip of my content-files (before I tried the second sidebar)?

    I would really like to hear from you!

    Thread Starter mcbo

    (@mcbo)

    Update: Mfields had the right solution for me. I pasted this piece of code at the bottom of my style.css (the #sidebar2-code from my first post remained):

    #sidebar{
        margin:0;
        padding: 0 0 0 20px;
        }
    #sidebar2{
        padding: 0 0 0 20px;
        margin:0;
        width: 150px;
    }
    #content,#sidebar, #sidebar2{ float:left; }
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Add Second Sidebar To Default-Theme’ is closed to new replies.