WordPress.org

Ready to get started?Download WordPress

Forums

Added second sidebar, need help with tweaking CSS/style sheet (27 posts)

  1. NFGoddess
    Member
    Posted 3 years ago #

    Hi there- first off I have searched and read a lot of the posts about second sidebars in here, I swear! :). I have a theme that I have customized and do NOT want to switch to a 3 column and I needed to add a second sidebar.

    I was able to add the sidebar after reading an external blog post that I see many refer to in those threads. However I just can not get the stylesheet to work to make my new sidebar look like the original one- it is taking the CSS from the main page not the sidebar. I tried to copy the #sidebar code and paste it into the stylesheet with the new name (leftsidebar) but it doesn't do anything. I tried several times, put it in different places but no luck. I'm at a bit of a loss. I have just basic CSS knowledge but I feel like I should be able to do this with what I know, but it's not working. It is also pushing my content to the bottom but I'm sure I could figure that out with margins and padding eventually, the main issue is definitely the styling. Any help would be greatly appreciated! I am doing the coding on a dummy blog and then once I figure it out I'll transfer it to the domain I want it on.

    I'm in the adult entertainment industry so please don't be put off by the URL of the dummy blog. But if anyone is willing to take a look I'd really appreciate it: http://www.teenshumiliatingsissies.com

    Thank you in advance!! :)

  2. esmi
    Forum Moderator
    Posted 3 years ago #

    You need to place the new sidebar code inside it's own unique id (eg <div id="sidebar2">) and not within a a div with the id of content.

  3. NFGoddess
    Member
    Posted 3 years ago #

    Now we're getting somewhere!! Thanks so much, now I just need to work on positioning which I can probably figure out with the help of Firebug- if not I'll be back ;) Thanks again!!!

  4. NFGoddess
    Member
    Posted 3 years ago #

    Ok I got it all aligned correctly on the home page (where the blog is) but the other pages are all a little off- I can adjust the margins in CSS to get them correct but then the homepage is off- I'm am definitely confused now, as if the one margin setting is controlling all pages how could they be in a different position on the blog vs. the rest of the pages? The left sidebar is actually correct on all pages, but the content and original (right side) sidebar are off. Any thoughts?

    Also something I did must have made the 'category' at the bottom of a post disappear on my pages, but it is still there for the blog posts. No idea how that happened....

    Thanks in advance!!

  5. esmi
    Forum Moderator
    Posted 3 years ago #

    Start by sorting out the markup errors on your home page. Then move onto the CSS errors.
    http://codex.wordpress.org/Validating_a_Website

  6. NFGoddess
    Member
    Posted 3 years ago #

    Thank you. I was able to fix all the CSS errors. The markup errors were in the original theme, that worked fine before I added the sidebar. I'm thinking that although it may not be perfect code it should still work the same. I did not code this theme, I merely customized colors and such. I looked at the errors but have not used this tool before so am unable to fix a few of them, I'm hoping that they are fine.

    Unfortunately none of the CSS errors I fixed actually changed anything. Have you seen a theme do this before, where the margins are different on different pages but being controlled by the same code? It was fine before I added the sidebar...

  7. esmi
    Forum Moderator
    Posted 3 years ago #

    Have you seen a theme do this before, where the margins are different on different pages but being controlled by the same code?

    Yes and in virtually every case I've seen, it was a markup or CSS validation issue.

  8. NFGoddess
    Member
    Posted 3 years ago #

    Thanks so much for your help. I cleared up most of the markup errors- there are 3 left. One of which when I do what it says removes my footer, so I'm leaving that as is. The other two refer to code that for the life of me I can NOT find. It refers to <div id="post" 89"> but I can NOT find an '89' anywhere in any of my theme files. Is there perhaps more code that I don't have access to?

    I really don't know why that would affect what I'm doing now though as like I said the theme worked fine before I added the sidebar... and I didn't add the '89' code so it must have already been there. I'm at a loss...again. Sorry if I'm being a pain :( I'm so close to getting it right but have completely hit a wall here.


  9. esmi
    Forum Moderator
    Posted 3 years ago #

    I can see to sidebars in roughly the right place now, so it looks like you're on the right track.

  10. NFGoddess
    Member
    Posted 3 years ago #

    Thanks. The problem now is that they are correct on the main page but the positioning is off on the other pages- the positioning seems to all be controlled by the same margin codes in the CSS and when I adjust one, the others go out of position, or vice versa. I just do not understand how they are off on one but fine on another. I have decent CSS skills but there is obviously something I am missing here... thoughts?

    Thanks again for all your help, it is greatly appreciated!!

  11. esmi
    Forum Moderator
    Posted 3 years ago #

    Try adding the body_class() to the <body> element in header.php. That way you'll be able to style on a page-per-page basis.

  12. NFGoddess
    Member
    Posted 3 years ago #

    Thank you I'm sure that will be exactly what I need. Unfortunately it is also a bit beyond my CSS skill level. I added that in header.php but now am unsure how to add the page classes into the stylesheet. I read the article you linked but I dont know where to add what they say in the implementation part, or how to assign each page. My abilities in CSS draw the line at tweaking with Firebug's help, and the ability to read what is already there- I could never do this from scratch though so adding things is a bit confusing to me.

    Am I asking for too much help here? I'm not sure how much is provided here and I don't want to take advantage of your time and help if I'm asking above and beyond what this forum is for...

  13. esmi
    Forum Moderator
    Posted 3 years ago #

    Use Firebug to see what classes are being generated on each page and then use the most appropriate class to focus your CSS on just that page if necessary.

  14. NFGoddess
    Member
    Posted 3 years ago #

    Ok I see the page ID's in Firebug, for example <body class="page page-id-37 logged-in"> and from the article you linked it says I need to add to my stylesheet `.page {
    /* styles for all posts within the page class */
    }
    .page-id-2 {
    /* styles for only page ID number 2 */
    }
    .logged-in {
    /* styles for all pageviews when the user is logged in */
    `where in the stylesheet do I add this? Under the specific thing I'm looking to customize, such as the sidebar, content, etc? Do I need to add this in each section and for each page?

  15. esmi
    Forum Moderator
    Posted 3 years ago #

    You would use something like:

    .page .sidebar { [...]

    to style the sidebar on all Pages.

    .page-id-2 .sidebar { [...]

    to style the sidebar the Page with the ID of 2 only etc.

  16. NFGoddess
    Member
    Posted 3 years ago #

    Ok where do I put that? Do I start a 'page' section and put each page under it, or do I need to put it in the section of the element I'm controlling? (Sidebar, Content, etc) I tried it in a few different places and it moves everything all over the place...

    Also once I start assigning the styles to each page do I still leave the code that is already in the stylesheet under each element, or is that now irrelavant?

  17. esmi
    Forum Moderator
    Posted 3 years ago #

    A stylesheet file doesn't need "sections" - beyond those that help you stay organised. CSS cascades (hence its name) so the more specific the styling and/or the further down that file a given piece of CSS is, the more likely it will be applied. Very general styling higher up the file is more likely to be over-written.

  18. NFGoddess
    Member
    Posted 3 years ago #

    I have put this in at the end of the stylesheet `
    .page-id-21

    .sidebar {
    width:143px;
    float:right;
    font-size:12px;
    color:#333;
    margin: -456px 10px 500px 835px;
    font-family:Tahoma,Verdana,sans-serif;

    }`
    It is not doing anything. Can you see where I've gone wrong?

  19. esmi
    Forum Moderator
    Posted 3 years ago #

    Try:

    .page-id-21 .sidebar {
    width:143px;
    float:right;
    font-size:12px;
    color:#333;
    margin: -456px 10px 500px 835px;
    font-family:Tahoma,Verdana,sans-serif;
    }

    You need to keep the selectors on a single line.

  20. NFGoddess
    Member
    Posted 3 years ago #

    These are what I have tried, placed at the end of my stylesheet. They do absolutely nothing, as if they are being overridden somehow..
    As it stands I have 5 pages plus my home page. On the home page the post box is too high, pages 1/2 the sidebar is too low, and pages 3/4/5 are all perfect...

    .page-id-21 .sidebar {
    width:143px;
    float:right;
    font-size:12px;
    color:#333;
    margin: 20px 10px 500px 835px;
    font-family:Tahoma,Verdana,sans-serif;

    }

    .page-id-21 .post {
    margin: 50px 10px 0 10px;
    padding:0px 0px 0px 0px;
    height: 100%;
    text-align: justify;
    color:#000000;

    }

    .home blog .sidebar {
    width:143px;
    float:right;
    font-size:12px;
    color:#333;
    margin: 20px 10px 500px 835px;
    font-family:Tahoma,Verdana,sans-serif;

    }

  21. NFGoddess
    Member
    Posted 3 years ago #

    I am still needing some help with this, anyone around? I'm so close! lol

  22. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    to start with, your theme does not have a css class .sidebar; this would explain why your css additions are not showing any effect.

    it has css id #sidebar and #leftsidebar

    more confusingly, most of your site is in the div #leftsidebar; maybe (correct: more definitely) the div is not closed properly, or this is intended by the original theme (?)

    following from this, the positioning of the div #content

    /* The Content */
    #content {
    	float: left;
    	width: 690px;
    	margin: -416px 0px 20px 145px;
    	padding: 0 0 0 0;
    
    	}

    with a large negative top margin seems to be dependant on the output of the left sidebar; i.e. the content will shift with any changes to the widgets in the left sidebar.

    and the position of the right sidebar depends on the content of the #content div, and will endlessly shift for each page.

    suggestion:
    there is a (useless) <div> just after the <div id="leftsidebar"> - delete this - this should re-balance the arrangement of the html structure.

    (then change these styles to what is shown as follows:
    for #content:

    /* The Content */
    #content {
    	float: left;background:#999;
    	width: 670px;
    	margin: -0px 0px 20px 0px;
    	padding: 0 0 0 0;
    
    	}

    and for #sidebar:

    #sidebar {
    width:143px;
    float:right;
    font-size:12px;
    color:#333;
    margin: 0px 10px 0px 0px;
    font-family:Tahoma,Verdana,sans-serif;
    
    }

    if this does not work, you could paste the codes of page.php, sidebar.php, and the other sidebar file (?) into http://wordpress.pastebin.com/ each and post the links to these here.

    (you have some large height and margin values in various other styles as well, that might need to get changed later)

  23. NFGoddess
    Member
    Posted 3 years ago #

    Thank you so much for this detailed help post! I was not sure where you meant the extra div was, I saw one in the stylesheet and deleted it but nothing changed, let me know if it is somewhere else.

    I made the changes you said to content and sidebar and now everything is on the left, so I'm not sure where to go from here.

    I inserted the left sidebar myself, that was where this all began, trying to change a 2 column theme to a 3 column. I was able to create the sidebar but the trouble is the integration.

    If you could look at the codes below and give me any advice or corrections I'd really appreciate it.

    page.php


    sidebar.php

    leftsidebar.php

    Thanks so much for your help!

  24. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    change this area of page.php:

    <div id="leftsidebar">
    <?php include (TEMPLATEPATH . '/leftsidebar.php'); ?>
    <div id="content"><a name="content"></a>

    into this (by adding a closing </div>):

    <div id="leftsidebar">
    <?php include (TEMPLATEPATH . '/leftsidebar.php'); ?>
    </div>
    <div id="content"><a name="content"></a>

    (that should be it; as you seem to have made the suggested changes to the styles already).

  25. NFGoddess
    Member
    Posted 3 years ago #

    Ok some of these things worked, and some didn't, I backed up a few steps and figured a few things out myself. Now I am still hung up but think I've isolated at least one problem-

    I am seeing that my left sidebar (which IS in the correct position on ALL pages) is showing within the content Div. However the right sidebar (just called sidebar) is only in the main wrapper div. This is the sidebar that is giving me issues with placement- where it is in a different position on different pages. (I had that issue with the content but managed to fix that using the content and page margins, so that is fixed now.)

    When I check the page template my left sidebar and the content section are in a div code, the right sidebar is PHP get_ code. I'm thinking either using the different types of code is an issue, or more likely I have something in the wrong place. Whatever the issue it seems to be leaving the sidebar only in the wrapper and not directly within the content.

    Any help would be greatly appreciated. The codes should be the same as the links in my last post above.

  26. NFGoddess
    Member
    Posted 3 years ago #

    I'm still needing some help with this if anyone can help! thanks :)

  27. NFGoddess
    Member
    Posted 3 years ago #

    I'm still needing some help with this if anyone can help! thanks :)

Topic Closed

This topic has been closed to new replies.

About this Topic