Jump to content


Photo

Borders around individual widgets in sidebars


Best Answer James B , 08 March 2013 - 12:02 AM

Hi there,

 

You have the right css in there, but there's an alignment issue, put a margin at the top of the box to bring it down slightly and you'll see the border show up.

 

 
.fbox {
    border: 1px solid black;
    margin-top: 5px;
}
Go to the full post


  • Please log in to reply
6 replies to this topic

#1 dchetson

dchetson

    Member

  • Members
  • 28 posts
  • Framework Version:Pro
  • Country: Country Flag

Posted 07 March 2013 - 08:57 PM

I am trying to create individual borders around three separate widgets that I have in my two sidebars. Have tried inspecting with FireBug but can't seem to get the selectors right. Currently, there's a border around the entire sidebar, but I want to have a border around each widget.

 

Additionally, I have boxes at the top of my page that have borders, but for some reason, the top border is not appearing. Help with that would be appreciated as well.

 

The site is www.chetsonlawoffice.com



#2 batman

batman

    Bat Learning

  • Members

  • 1776 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 07 March 2013 - 10:35 PM

Hi dchetson

You have this:

 

 
.content-pad {
    margin-top: -2px;
    margin-bottom: -15px;}
 
 
If you change margin-top: 0px the border at boxes appear in my firebug


#3 batman

batman

    Bat Learning

  • Members

  • 1776 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 07 March 2013 - 10:38 PM

Hi again

I use this for the borders around the widget in my website, you can try this

 

 

 
.widget-pad {
background: whiteSmoke;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border: 1px solid white;
padding: 4px;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);}
 

;)



#4 James B

James B

    Advocate

  • Moderators
  • 4985 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 07 March 2013 - 11:38 PM

Hi let us know if batman's solution worked for you :-)



#5 dchetson

dchetson

    Member

  • Members
  • 28 posts
  • Framework Version:Pro
  • Country: Country Flag

Posted 07 March 2013 - 11:48 PM

Lovely - thank you!!! Now to the other issue - the boxes that have borders and for some reason the top border doesn't appear. :phew:



#6 James B

James B

    Advocate

  • Moderators
  • 4985 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 08 March 2013 - 12:02 AM   Best Answer

Hi there,

 

You have the right css in there, but there's an alignment issue, put a margin at the top of the box to bring it down slightly and you'll see the border show up.

 

 
.fbox {
    border: 1px solid black;
    margin-top: 5px;
}


#7 dchetson

dchetson

    Member

  • Members
  • 28 posts
  • Framework Version:Pro
  • Country: Country Flag

Posted 10 March 2013 - 03:30 PM

Perfect, thank you so much for your help!!!