Adding CSS to a specific element in a subtheme

Using the Omega started theme, i decided to change the font size of an element on my main page. if you don’t quite follow everything here, go back and read the last two posts. they pertain to this.

  • Use Google Chrome
  • Right click the element, in my case a block title
  • Choose Inspect element. The chrome dev tools will launch at the bottom.
  •  Look at the HTML part of the element. In this case it is h2.block-title – <h2>blah.com</h2>
  • Look over at the right hand side. You will see the CSS files that apply to the element. the one at the top is the last one to apply. in this case it is not in the subtheme, but the parent theme, omega, itself. here it is:
media=”all”                                                                         omega-text.css:49      the 49 is the line number in the css
h2.block-title {
font-size: 18px;
margin: 0;}
  • put your mouse over the  omega-text.css:49 part and you can see the full path to the file. i didn’t expect this; i thought the css file for the block would be in the subtheme and not the parent. so, i want to change it. but i don’t do it in the parent, i do it in the subtheme css. 
  • omega’s subtheme has a default css called global.css. i add this to that file:
media=”all”
h2.block-title {
font-size: 78px;
margin: 0;}
  •  because of the way Drupal inheritance works, this MORE SPECIFIC file will over ride the same defined CSS element in a different file. 
  • I save, refresh and i see the change. Now the change isn’t perfect because all the block titles are now too big. But the tools now show that the “top” file is the global.css file and the h2.block-title reference in the omega-text.css file now has a strike through, meaning it is overridden somewhere.
  • so i’ll journey to the template file next to see how to give that one block a specific css definition.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: