Grow your CSS skills. Land your dream job.

[Solved] Space out widgets on sidebar

  • # September 6, 2009 at 12:34 pm

    Hi,

    I am currently adding widgets etc to my sidebar in wordpress. It’s getting to look a little cramped in there, can I space it out slightly using css? Am sure I could use margin but am unsure as to where to put this..

    http://www.leehughes.co.uk

    CSS for sidebar

    Code:
    #content #sidebar {
    float: right;
    width: 25%;
    }
    #content #sidebar p {
    font-size: 12px;
    line-height: 22px;
    color: #FFFFFF;
    }
    #content #sidebar p a {
    color: #FFFFFF;
    text-decoration: underline;
    }
    #content #sidebar p a:link {
    color: #FFFFFF;
    text-decoration: underline;
    }
    #content #sidebar p a:hover {
    color: #003366;
    text-decoration: none;
    }
    #content #sidebar h2 {
    color: #FFFFFF;
    font-size: 18px;
    }
    #content #sidebar h3 {
    font-size: 14px;
    color: #FFFFFF;
    }
    #content #sidebar h3 a {
    color: #FFFFFF;
    text-decoration: none;
    }
    #content #sidebar h3 a:hover {
    color: #003366;
    text-decoration: underline;
    }
    #content #sidebar h2 a {
    color: #FFFFFF;
    font-size: 18px;
    text-decoration: none;
    }
    #content #sidebar h2 a:hover {
    color: #003366;
    font-size: 18px;
    text-decoration: none;
    }
    #content #sidebar li {
    color: #FFFFFF;
    line-height: 22px;
    }
    #content #sidebar li a {
    color: #FFFFFF;
    text-decoration: underline;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    }
    #content #sidebar li a:link {
    color: #FFFFFF;
    text-decoration: underline;
    }
    #content #sidebar li a:hover {
    color: #003366;
    text-decoration: none;
    }
    #content #sidebar a {
    color: #CCCCCC;
    }

    Many thanks to anyone that can help :)

    # September 6, 2009 at 12:43 pm

    well if you look at your source, you will notice that your sidebar has an id of sidebar and that your headings in your widgets are h2

    so I would style these and give some space between the top of the element and the end of the last

    Code:
    #sidebar h2
    {
    top:20px; //example
    }
    # September 6, 2009 at 12:59 pm

    thanks :)

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".