WordPress.org

1. brabuhr
   Member
   Posted 2 years ago #

   Hi everyone,

   I'm trying to add a box with rounded corner to my widgets. The theme I'm currently using is piano-black. It comes with an 'information box' at the top of the sidebar that has the sort of rounded corner background I want to recreate.

   However, when I try and do this the top part is misaligned with the rest of the widget: http://gyazo.com/13f431115f6353441e8d68ceacb4e79f.png

   I'm using the following code
   

   .side-title { margin:0px 0 20px 0;
   font-size:11px;
   text-transform:none;
   text-align:center;
   color:#999;
   font-weight:normal;
   line-height:100%;
   background:url(img/info-box-top.gif) no-repeat left top;
   padding:25px 20px 5px 20px;
   width:232px;
   }
   
   .side-box { color:#aaa;
   line-height:160%;
   margin:0 0 50px 30px;
   font-size:11px;
   width:232px;
   background:url(img/info-box-bottom.gif) no-repeat bottom left;
   padding:12px 20px 20px 20px;
   }

   Any help would be greatly appreciated. I've already played around with eh padding and the margins, trying every possible combination, but the top bit just won't budge.
   Thanks!

2. alchymyth
   The Sweeper
   Posted 2 years ago #

   if the 'side-title' div is within the 'side-box' div, the the padding of the 'side-box' div will influence the position of the 'side-title' div.

   try and use 'padding:0;' in .side-box

   this will unfortunately also influence any content that goes into the sidebar.

   you could check: http://codex.wordpress.org/Function_Reference/register_sidebars
   if you can work with the 'before-widget' and 'after-widget' parameters.

3. brabuhr
   Member
   Posted 2 years ago #

   Thanks for your reply :). Unfortunately setting the padding to zero resulted in this: http://gyazo.com/33657602cad6db318f220cf60494fb8b.png

   I will take a look at the before and after widget parameters, but I'm not very knowledgeable in that area.

   I feel there has to be another way around it.

Topic Closed

This topic has been closed to new replies.