• 0
Sign in to follow this  
Followers 0

How to pick the right IDs or class names to customize?

Question

Posted · Report post

Hi, I am very new to css. I have done some stuff on my own in the past and didn't have much trouble since I named everything myself. But I am having a hell of a time trying to figure out what ID or class (if I am right in what it's called) to pick in order to apply my own css. For example, I am able to change the background behind the logo because I was able to find "brand" something or other using firebug. BUT for the life of me I can't figure out how to change the default font size for my text widgets all at once. I tried using firebug for it. It finds ".textwidget" or ".widget-pad". So I tried:

 .widget-pad {font-size: .7em;}
	/*doesn't work then tried*/
	.textwidget {font-size: .7em;}

... What am I missing and how can I pick the right ones in the future? I used the same method for the brand.nav section and didn't have any issues. Thanks!

Share this post


Link to post
Share on other sites

4 answers to this question

  • 0

Posted · Report post

The widget-pad wouldn't be it because that's simply the padding around the widget area. With the HTML section open, you can usually go through each line and then find the section you want by watching the highlighting. [code].textwidget {font-size: .7em;}[/code] is the right selector, but you may need to add an !important to get it to overwrite the default (this is a good rule of thumb to either do first or try second). So just make it look like [code].textwidget {font-size: .7em !important;}[/code] That should work. If it doesn't, try adding the main parent in front of it (with a space in between), like #sidebar_primary or #sidebar1 or #sidebar2.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Important was it! Thanks. I thought when I entered CSS in the base editor it was supposed to override the other css automatically? Is there an easy way to determine the "parent"? Because

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The parent selector? Like #sidebar_primary? It usually precedes the other selector (.textwidget for example) and looks something like this: [code][/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks Cat, I've started to notice things in firebug that I somehow didn't see before. So far I've much improved. On my default platform base layout there seem to be a lot more divs in between text widget and sidebar.

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  
Followers 0