spacing for longer entries in sidebar

  • Resolved ta100

    (@ta100)


    15 years, 6 months ago

    Not sure where to put this. It’s a “How to” but about code (“Themes, Templates – XHTML and CSS”?). Seems like things are everywhere so, here it goes. First, I am using an extremely edited and revised form of the WP Firebug theme, really not like the original in many ways.

    The issue concerns spacing of longer entries in any section in the sidebars such as lists under “Categories” or “Recent Posts,” or really for any text in the sidebars even without being in a block like “Categories.” (The spacing in this post is not necessarily exact but only relative examples to show a general point.)

    First entry in a list

    Presently a second

    entry looks like this

    Third entry

    How do I make it to look like this?:

    First entry in a list

    This is closer to
    how the second entry
    should look.

    Third entry

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

  • Check the sidebar’s line-height in the CSS.

    Thread Starter ta100

    (@ta100)

    Adjusting the line height as in the actual code below only increases or decreases the spaces as shown in the first example. It makes no differentiation between different entries, and different lines within one entry.

    #rsidebar a {
    color:#d1944d;
    font-weight:normal;
    line-height: 22px;
    text-decoration: none;
    display:block;
    }

    Not sure how others’ monitors dispaly the first post I made with the examples, but on my Mac, I would want the spaces between the second entry to be even closer, so it is really clear what are different entries.

    A link to your site would help.

    Thread Starter ta100

    (@ta100)

    OK. Work in progress with obvious things I need to ajust. Also adult but lacking any pics or real adult content at this point.

    Link to my site is HERE.

    I will be in and out today to check this post. Thank you esmi for your time.

    It’s the line-height. I think you need to adjust that and then compensate with some extra margins to space out the different post titles. Eg:

    #lsidebar a {
color:#D1944D;
display:block;
font-weight:normal;
line-height:1em;
margin-bottom:10px;
text-decoration:none;
}
    Thread Starter ta100

    (@ta100)

    That did it! I hope you don’t mind me saying you are a genius. I know, it’s part of your job and training as a web developer, but small things like this are impressive to to the novice.

    Other than taking classes, do you have suggestions about where I can find information on how to do…this and that, codes and so forth, for css and php files. Like a reference book or reference website that I could use as a resource to look up how to do particular things?

    I will use this WP forum when I am stuck, but it would be good for me and others if I were more self-sufficient.

    Thanks.

    do you have suggestions about where I can find information on how to do…this and that

    Try https://www.w3schools.com/css/
    A great site to bookmark for general reference and a good series of tutorials for the newcomer.

    https://www.alistapart.com/
    Good for new cutting-edge techniques but possibly a little overwhelming for a novice.

    https://www.css-discuss.org/
    Actually a mailing list but there’s some interesting stuff in the site’s wiki if you don’t fancy subscribing to the list itself.

    If you use Firefox, consider installing the Web Developer Toolbar and the Firebug add-ons. The latter is especially useful for disabling, or editing, specific CSS on-the-fly and seeing what (if any) effect it has. At the end of the day, nothing beats just playing around with CSS and seeing what you can do.

    Hope that helps…

    Thread Starter ta100

    (@ta100)

    Thanks, I installed Firebug and still figuring out how to use it. Will look at the Web Developer Toolbar, and the site you listed.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘spacing for longer entries in sidebar’ is closed to new replies.