Jump to content


Photo
- - - - -

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


  • Please log in to reply
4 replies to this topic

#1 ryanjohnjackson

ryanjohnjackson

    Super Member

  • Members
  • 143 posts

Posted 29 November 2011 - 06:11 PM

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:

Please Login or Register to see this Hidden Content

...

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!

#2 Jenny

Jenny

    Owned by PageLines

  • Unicorn Store Dev

  • 2917 posts
  • LocationWV
  • Country: Country Flag

Posted 29 November 2011 - 06:18 PM

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.

Please Login or Register to see this Hidden Content

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

Please Login or Register to see this Hidden Content


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.

#3 ryanjohnjackson

ryanjohnjackson

    Super Member

  • Members
  • 143 posts

Posted 30 November 2011 - 02:38 AM

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

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 30 November 2011 - 03:29 AM

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

Please Login or Register to see this Hidden Content



#5 ryanjohnjackson

ryanjohnjackson

    Super Member

  • Members
  • 143 posts

Posted 30 November 2011 - 02:41 PM

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.