Jump to content
Sign in to follow this  
dchetson

Borders around individual widgets in sidebars

Recommended Posts

dchetson+    2
dchetson

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

Share this post


Link to post
Share on other sites
batman    389
batman

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

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
batman    389
batman

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);}
 

;)


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
dchetson+    2
dchetson

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

Share this post


Link to post
Share on other sites
James B    436
James B

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;
}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
dchetson+    2
dchetson

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×