Wordpress Themes - WP Forum at BFA - [SOLVED] Define CSS for a Specific Widget Area

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)

- - [SOLVED] Define CSS for a Specific Widget Area (http://forum.bytesforall.com/showthread.php?t=18505)

[SOLVED] Define CSS for a Specific Widget Area

Hello all.

First and foremost: thanks to those who made this theme possible and all the support I've gotten just from reading this forum. Atahualpa is AMAZING!

Second, web stuff, only being a hobby - I'm not sure if the terms I used to try to search this answer were wrong or what, but my searches resulted in nothing.

I am trying to stylize the widgets in my sidebar to all have a border around them. I've found this to be easy, but the part thats getting me, is I have a custom widget area up in the header where I DO NOT want a border around the widget.

If you look at my site: http://warsteeds.com you'll notice in the logo line there are four icons for Twitter, Facebook, ETC. I put these here by way of making a new widget area and floating it over in CSS. When I stylize the widgets to have a border this one get its too, blocking out part of my sites title and I just don't want a border up there at all.

So far my attempts at telling that widget to not have a border have failed.

Any ideas?

what you need to do is look at the page source - ie view the page and then use the browsers - view source - command to look at teh page source. Then you find the widget and see what ID or classes you can use to tel teh browser NOT to put a border around this element.

You can also use the FireBug extension in FireFox (the examine tool) to look at it and code some test CSS on the fly and see the effect.

Just not sure what I am missing. I used:

HTML Code:

div#follow_me

In the CSS to tell that widget where to go. If my thinking is correct (I am self-taught, amateur at this stuff, so probably not) I should be able to use the same spot in the css to define: border-style:none (or hidden) but neither of them change anything.

Just target only the widgets in the right sidebar. Here is some example CSS.

HTML Code:

#right .widget {

    border: 1px solid black;

    padding: 5px;

}

lmilesw <-- that guy: hero of the day.

Worked perfectly. Thanks for the alternative way to get that done!

Quote:

Originally Posted by lmilesw (Post 90482)

Just target only the widgets in the right sidebar. Here is some example CSS.

HTML Code:

#right .widget {

    border: 1px solid black;

    padding: 5px;

}