http://wordpress.org/support/ WordPress › Support Topic: Styling my sidebar - margins between widgets and rounded corners en Tue, 24 Nov 2009 04:10:43 +0000 http://wordpress.org/support/topic/285618#post-1122783 Wed, 01 Jul 2009 17:57:18 +0000 naomijps 1122783@http://wordpress.org/support/ <p>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! </p> http://wordpress.org/support/topic/285618#post-1122543 Wed, 01 Jul 2009 14:34:16 +0000 naomijps 1122543@http://wordpress.org/support/ <p>My blog is here: <a href="http://jpsblog.org" rel="nofollow">http://jpsblog.org</a></p> <p>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?</p> <p>Here's what my style.css code for the sidebar looks like right now:</p> <p>#secondary, #third{<br /> background-color: #BAD6EC;<br /> text-align:left;<br /> padding: 0px;<br /> border: 0px #3574A8;<br /> SP_GRADIENT<br /> }</p> <p>#secondary h4, #third h2{<br /> background-color: #3574A8;<br /> color: #BAD6EC;<br /> font-family: Verdana;<br /> font-size: 95%;<br /> font-weight: bold;<br /> text-align:center;<br /> margin-top: 0px;<br /> padding: 7px;<br /> }</p> <p>#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%; }<br /> #menu a { text-decoration:none; color: #BAD6EC; }<br /> #menu ul li {font-family: Verdana; font-size: 85%; font-weight: normal; text-align:left; color: #3574A8; margin-top: 0px; padding-bottom: 0px; }<br /> #menu ul li a { display:block; padding:4px 4px 4px 10px; text-decoration:none; color: #000000; }<br /> #menu ul li a:hover { color:#BAD6EC; background: #3574A8; }<br /> #archives ul li {font-family: Verdana; font-size: 85%; }</p> <p>Thanks! </p>