Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Sidebars & Widgets »

[SOLVED] Define CSS for a Specific Widget Area


  #1  
Old Sep 28, 2012, 11:59 AM
SigWS
 
29 posts · Sep 2012
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?
  #2  
Old Sep 28, 2012, 12:17 PM
juggledad's Avatar
juggledad
 
23,729 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Sep 28, 2012, 12:51 PM
SigWS
 
29 posts · Sep 2012
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.
  #4  
Old Sep 28, 2012, 01:22 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Just target only the widgets in the right sidebar. Here is some example CSS.
HTML Code:
#right .widget {
    border: 1px solid black;
    padding: 5px;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #5  
Old Sep 28, 2012, 01:32 PM
SigWS
 
29 posts · Sep 2012
lmilesw <-- that guy: hero of the day.

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

Quote:
Originally Posted by lmilesw
Just target only the widgets in the right sidebar. Here is some example CSS.
HTML Code:
#right .widget {
    border: 1px solid black;
    padding: 5px;
}

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Post-Specific Logo Area Background bswb97 Header configuration & styling 5 Aug 26, 2011 03:27 PM
How do I set a specific width for widgets in the same widget area sober Sidebars & Widgets 6 Jul 30, 2011 06:28 PM
How do I link to one specific area in a Table? dazmeister Atahualpa 3 Wordpress theme 3 Sep 1, 2010 06:05 AM
[SOLVED] Specific content in logo area for a category paulae Header configuration & styling 6 Mar 28, 2009 07:08 AM


All times are GMT -6. The time now is 09:15 AM.


Powered by vBulletin® Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.