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


This topic has been archived. This means that you cannot reply to this topic.
6 replies to this topic

#1 dchetson

dchetson

    Advanced Member

  • Members
  • 41 posts

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

  • DMS Subscriber†
  • 2251 posts

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

  • DMS Subscriber†
  • 2251 posts

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

  • DMS Subscriber†
  • 5126 posts

Posted 07 March 2013 - 11:38 PM

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



#5 dchetson

dchetson

    Advanced Member

  • Members
  • 41 posts

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

  • DMS Subscriber†
  • 5126 posts

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

    Advanced Member

  • Members
  • 41 posts

Posted 10 March 2013 - 03:30 PM

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