0

I created a Zen sub-theme called mytheme and copied the contents of /sites/all/themes/zen/STARTERKIT/css to /sites/all/themes/mytheme/css/, and assigned the Navigation block to the First sidebar region.

I want to know which CSS file controls the styling of the Navigation menu, so I loaded the site in my web browser (Google Chrome 7.0.517.44).

The Navigation block is contained in a div with class="region region-sidebar-first column sidebar". I highlighted this code using Firebug, which tells me that the class is defined in: http://www.mysite.dev/sites/all/themes/mytheme/css/layout-fixed.css.

There isn't a CSS class called region region-sidebar-first column sidebar in layout-fixed.css, but there is a class called .region-sidebar-first, which I assume are relates to 'region region-sidebar-first column sidebar'.

What characters are valid in CSS class names? SO topic says "name must start with an underscore (_), a dash (-), or a letter(a–z), followed immediately 1 by a letter or underscore, and then any number of dashes, underscores, letters, or numbers", which makes sense.

But how does .region-sidebar-first end up as 'class="region region-sidebar-first column sidebar"' in the HTML source code? This is confusing for beginners like myself, and if anyone can explain the logic behind this naming convention, that would be great.

Community
  • 1
  • 1
unpossible
  • 303
  • 1
  • 8
  • 20

2 Answers2

2

Those are multiple classes applied to the same element. You separate multiple classes with a space. So, technically, there are four classes applied there.

Brandon Durham
  • 7,096
  • 13
  • 64
  • 101
  • The four classes being: 1. region 2. region-sidebar-first 3. column 4. sidebar – Brandon Durham Nov 18 '10 at 16:36
  • Thanks Brandon. How do I find out where the .region, .column and .siderbar classes are defined? None of these classes appear in 'Matched CSS Rules' in Firebug. – unpossible Nov 18 '10 at 16:58
  • It's quite possible some are no longer used, and it's also quite possible they're used only for targeting that element with Javascript. – Brandon Durham Nov 18 '10 at 17:01
1

You can give an element several classes, seperated with spaces. Your element has four classes in total: region, region-sidebar-first, column and sidebar.

Ulrich Schwarz
  • 7,598
  • 1
  • 36
  • 48