• alda

    (@alda)


    Hello,

    Can someone please help me add a dividing line in a sidebar? I’ve tried everything I can think of but to no avail. More specifically, I want to add a dividing line in my right sidebar, between the search form and the adsense ads, like the one that appears beneath the widget headings (or similar).

    Thanks so much.
    Alda
    http://newsite.aldasigmunds.com

Viewing 9 replies - 1 through 9 (of 9 total)
  • mechx1

    (@mechx1)

    You want to clean up the code a bit in right_sidebar, which will help. You have a spare:
    <div></div>
    Which probably doesn’t hurt, but doesn’t help, and a spare<br /> in the same area. Also, it looks like the list close</ul> for sidebar_list got pushed under your adwords script and site meter, bring that back where it belongs.

    As for the dividing line, you can use <hr>, but you can go crazy trying to get the same look in all browsers. Looking at the way the bottom border in your H2 tags is styled, I’m guessing that something like:

    #right_sidebar hr {
       Height: 1px;
       width: 80%;
       color: #dddddd;
       background-color: #dddddd;
    }

    will work, you can then put an <hr> in your sidebar where you want it. Do some research on the web to see what you can do with horizontal rule

    Thread Starter alda

    (@alda)

    Thanks for this … but I *really* need idiot-proof instructions. Meaning: I need to know what to do with that code you provided. I’ve already discovered that I’m NOT supposed to put it in my sidebar as is.

    Can you elaborate, please? Thanks.

    mechx1

    (@mechx1)

    I’ll do my best. It look like you got rid of the spare divs and breaks, that’s good. Now, the unordered list
    <ul class="sidebar_list">

    needs a closing
    </ul>
    this is all the way down past your adwords feed and the site meter, it is right under:
    <!-- Copyright (c)2006 Site Meter -->
    grab that closing tag and put it up just above
    <script type="text/javascript"><!--

    Otherwise all of the Google and site meter stuff is effectivly in your list.

    Now, you have two external style sheets,
    wp-content/themes/neoclassical/style.css
    wp-content/themes/neoclassical/custom.css

    I recommend that you add the stylecode I gave you to one of those, I’d probably go with whichever one has the selector #right_sidebar. It is a good idea to save a copy of the original you can go to if everything messes up Open it however you edit these things. It would probably be best if you found

    #right_sidebar {
    <style stuff>
    }

    and pasted what I gave you in after the last curly brace. Make sure you get all of it, especially don’t leave out a curly brace.

    When you get your style updated, you can go back to your index.php, and type <hr /> right after that </ul> you just moved, then check the result.

    The way I wrote that selector, it will only style an hr tag that is contained within the #right_sidebar DIV.

    Does this all make sense?

    Thread Starter alda

    (@alda)

    Yes, I think so. 🙂

    I’ll just have to take it step by step and I’m sure I’ll work it out. Just so busy right now but will have to carve out some time to work on this.

    Thank you!

    Thread Starter alda

    (@alda)

    Hi again mechx1 –

    A couple of issues: one, when I tried to place the underneath <script type=”text/javascript”><!– the adsense ads vanished. I placed it above that code, and they reappeared. Is that OK?

    Secondly, I can’t find the exact code you mention in the stylesheet (style.css) and it’s not in the custom.css. What I did find in the style.css is this:

    #right_bar { padding: 0 0 0 10px; }

    … but that’s the closest thing to what you mention. Is it supposed to look exactly like this:

    #right_sidebar {
    <style stuff>
    }

    … because I can’t find anything like it. Could it be somewhere else?

    Grateful for your help. Thanks.

    mechx1

    (@mechx1)

    Hello again, yes, the </ul> should go above the Javascript declaration, so if I understand you correctly you have it right.

    Your site appears to be down right now. I’ll take a look when it comes back up. I think you can probably put the CSS I gave you anywhere in style.css, but it is good practice to place it close to other related tags.

    Thread Starter alda

    (@alda)

    Hi,

    I’ve tried going through these steps as best I could (adding the code …

    #right_sidebar hr {
    Height: 1px;
    width: 80%;
    color: #dddddd;
    background-color: #dddddd;
    }

    … to the style sheet (style.css) in the /*—:[ sidebar styles ]:—*/
    section (that’s the closest thing I could find to the description given).

    I then went and added <hr></hr> to the sidebar section, but … there is still no change.

    I had no idea this was so difficult!

    Can anyone tell me what I’m doing wrong?

    I see a line in the “global elements” section of the style.css for Neoclassical v1.1 that says:

    hr { display: none; }

    I’m guessing this turns off the hr. Perhaps adding { display: solid; } or one of the attributes used for border styling to the custom.css file would fix this.

    From the example Chris gave in his custom.css file — that is, .custom a, .custom a:visited { color: #090; } <— This makes links green — it sounds as tho you’d write, for example:

    .custom hr { display: solid: }

    and put it in the custom.css file.

    And the hr tags would go between the body tags.

    But I could be wrong. I thought I know a bit about css, yet Chris’s style.css for Neoclassical 1.1 is the first time I’ve seen two ids in the same line without a comma separating them, as in #masthead #logo in the “banner styles” section. Putting a comma between them, I could understand. The theme shows well, so no commas must be ok.

    I recently saw that the hr tag doesn’t show consistently between browsers, any browsers. I wonder if this is why Chris used borders to create what looked like horizontal and vertical rules & effectively disabled the hr display in his theme.

    or her theme. Chris could be her.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘How do I add a dividing line in sidebar?’ is closed to new replies.