Support » Themes and Templates » Styling my sidebar – margins between widgets and rounded corners

  • My blog is here: http://jpsblog.org

    As you can see, I’ve already done quite a bit of styling work on my sidebar (especially that hover effect). Now, I want to take one last step but I’m not sure how. I want separate widgets into their own boxes (ie put margins in between the widgets), and then rounded corners for each of those boxes. How should I go about doing that?

    Here’s what my style.css code for the sidebar looks like right now:

    #secondary, #third{
    background-color: #BAD6EC;
    text-align:left;
    padding: 0px;
    border: 0px #3574A8;
    SP_GRADIENT
    }

    #secondary h4, #third h2{
    background-color: #3574A8;
    color: #BAD6EC;
    font-family: Verdana;
    font-size: 95%;
    font-weight: bold;
    text-align:center;
    margin-top: 0px;
    padding: 7px;
    }

    #menu {background: #BAD6EC; border-left: 3px solid #3574A8; border-top: solid 3px #3574A8; border-right: solid 3px #3574A8; border-bottom: solid 3px #3574A8; padding: 0px 0px 10px 0px; position: absolute; right: 2px; top: 0; margin-left: 10px; text-align:left; font-size:100%; }
    #menu a { text-decoration:none; color: #BAD6EC; }
    #menu ul li {font-family: Verdana; font-size: 85%; font-weight: normal; text-align:left; color: #3574A8; margin-top: 0px; padding-bottom: 0px; }
    #menu ul li a { display:block; padding:4px 4px 4px 10px; text-decoration:none; color: #000000; }
    #menu ul li a:hover { color:#BAD6EC; background: #3574A8; }
    #archives ul li {font-family: Verdana; font-size: 85%; }

    Thanks!

Viewing 1 replies (of 1 total)
  • Still wondering how to place margins between widgets and how to create rounded corners… can anyone help with at least one or the other? Thanks!

Viewing 1 replies (of 1 total)
  • The topic ‘Styling my sidebar – margins between widgets and rounded corners’ is closed to new replies.