Jump to content
Sign in to follow this  
ryanjohnjackson

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

Recommended Posts

ryanjohnjackson    0
ryanjohnjackson

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
Jenny    33
Jenny
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.

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
ryanjohnjackson    0
ryanjohnjackson
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
catrina    103
catrina
The parent selector? Like #sidebar_primary? It usually precedes the other selector (.textwidget for example) and looks something like this: [code][/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
ryanjohnjackson    0
ryanjohnjackson
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  

×