CSS Changes Makes Sidebar Cleaner Looking

  • Resolved mwarbinek

    (@mwarbinek)


    16 years ago

    I like the “Deep Silent” theme, but there were problems with the CSS appearance of the Side bar content. The link entries that required two lines overlapped the next line below it and over all appearance showed some disorder and not formatted well. The division space between the sidebar titles was too much. A few minor changes to the “styles.css” file made the sidebar appearance clean and neat.

    Here is what I changed:
    (Old)
    #sidebar ul li ul{
    background-image:url(images/bg_li_bottom.gif);
    background-repeat:repeat-x;
    background-position:bottom left;
    padding-bottom:2px;
    margin-bottom:20px;
    padding-top:5px;
    border-top:1px solid #767155;
    }
    (New)
    #sidebar ul li ul{
    padding-bottom:2px;
    margin-bottom: 5px;
    padding-top:5px;
    border-top:1px solid #767155;
    border-bottom: 1px solid #767155;
    }
    I took out the background image that was used as a divider. Reason is that I believed that it was either the straight line or the image, not both. The simpler method was to use a border line and it was cleaner looking. I removed some CSS entries and modified others. It streamlined the appearance.

    Next change:
    (Old)
    #sidebar ul li ul li a{
    color:#000000;
    text-decoration:none;
    display:block;
    height:23px;
    padding:0px 5px 0px 15px;
    font-size:12px;
    line-height:23px;
    }
    (New)
    #sidebar ul li ul li a{
    color:#000000;
    text-decoration:none;
    display:block;
    padding:5px 5px 5px 15px;
    font-size:12px;
    line-height: 13px;

    The combination of “height” and “line-height” created problems in how the lines were displayed and caused overlapping or made everything into a disordered look. I kept the “line-height” and modified it to allow better formatting for two lined entries and added a bit to the padding.

    Now it looks good. You can see it at https://mormondirection.com

    Thanks

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

  • Ah, a godsend – a real programmer who uses the Deep Silent theme. I love this theme – overall it suits my sites needs better than anything else I’ve found. However, I am having difficulty making what few, small changes I would like to make. If you were able to effectively edit the sidebar, maybe you can tell me what I need to do to change the default font color? No matter which entries I edit to read color black (or #000000 – I’ve tried both), it doesn’t change anything, for existing posts or new posts. Technically I could use the font change in the visual editor – going through the whole site applying it would be a pain but it would be over with in a few days and then it would easy – except I use a fair amount of white space control, and for some reason, once I start inserting <br />&nbsp; tags, the color change stops working! I know this is the reason, I’ve experimented properly. So if you, a proper programmer (I am distinctly not), who also uses this theme, could tell me what I need to do for this particular problem, I’d deeply appreciate it. In the meantime my blog functions fine, so no rush. I just think it would be better if the font color was darker. My site involves quite a bit of prolonged reading, so I want to make as many concessions as is aesthetically and practically possible to eye strain.

    Assuming it matters, the site in question is at https://www.thewordpile.com. Thanks for helping.

    Actually, I’ve just realized that it DID work. Sorry about that, feel kind of foolish myself. I’d better figure out exactly which one it was – looks like black is a little too strong.

    Ah – it was the color code that didn’t work – it changed when I used black. I’ll try rgb code – barring that, do you know where I can find a list of color names that will dependably work?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CSS Changes Makes Sidebar Cleaner Looking’ is closed to new replies.