Drupal and CSS part II

well, i knew the day would come when i decided to go back to this book:

Drupal 7 Themes
Create new themes for your Drupal 7 site with a clean layout and powerful CSS styling
Ric Shreves

I had started this book a couple of months ago but decided that i needed to know more about CSS, JScript and PHP before i went head long into themes and subtheming. now, this book will be perfect for me to read. Ric Shreves is a good writer and I recommend his books. for whatever the opinion of a reformed MCSE is worth! 😉

How Drupal uses CSS

Drupal uses CSS for styling. Sure. But how? Drupal has dynamic content and not static html pages that have style sheet references in them. that’s where i am today.

This is a good reference for this from Adaptivethemes

Look to the .info file for your theme or module to specify what CSS files will be used.

But, how does the internal aspects of the css file tie to the outputted HTML?

Look to the .tpl file

More subtheming with Drupal and Omega

well, i enabled the omega subtheme alphorn to compare how the base subtheme created by the html5 stater kit looks up against a developed subtheme. this has been a pretty interesting way to see the mechanics of how a subtheme really works. I also have started using the firebug tool to inspect elements of web pages while using firefox. very cool, good tool. you can right click on an element and see where it derives its magic from. it’s christmas day so merry christmas to everyone. will write more tomorrow.

Omega CSS info – Drupal

here is some helpful info concerning the omega theme. this is from the readme file that is placed in your subtheme directory that you create with the html5 stater kit.

Informational: http://himer.us/omega960
Documentation: http://himer.us/omega-docs
Project Page: http://drupal.org/project/omega
Issue Queue: http://drupal.org/project/issues/omega
Usage Stats: http://drupal.org/project/usage/omega
Twitter: http://twitter.com/Omeglicon
##########################################################################################
##### CSS Files
##########################################################################################

Any custom CSS files should be placed in this folder.

Five CSS files are provided by default. These files will be loaded according to the
media queries established in your theme’s settings. The default values are provided below.

To use these stylesheets, rename the files and test with the name of your theme.
For example, if your theme is named beta, the files would be named:
global.css (this file does not get renamed)
beta-alpha-default.css
beta-alpha-default-narrow.css
beta-alpha-default-normal.css
beta-alpha-default-wide.css

global.css
* Loaded all for all layouts, including mobile.
* Default media query: n/a. Always applied.
* By default, this is the only stylesheet loaded for the mobile version of your site.
* This layout does not use the 960gs for its layout. It provides a linearized
view of your site’s content.

test-alpha-default.css
* Loaded for all layouts using the alpha grid (i.e. not the mobile layout).
* Default media query: n/a. Applied to all layouts using the alpha grid.
* By default the alpha grid is applied when the device width is at least
740px wide.

test-alpha-default-narrow.css
* Loaded for all layouts using the alpha grid. Styles will “cascade” to
wider layouts. You may overwrite any styles in the normal or wide
layout-specific CSS files if you wish.
* Default media query for the narrow layout is:
all and (min-width: 740px) and (min-device-width: 740px),
(max-device-width: 800px) and (min-width: 740px)
and (orientation:landscape)

test-alpha-default-normal.css
* By default this style sheet will be loaded for the normal and wide layouts
* Styles will “cascade” to the wide layout as well.
* Default media query for the normal layout is:
all and (min-width: 980px) and (min-device-width: 980px),
all and (max-device-width: 1024px) and (min-width: 1024px)
and (orientation:landscape)

test-alpha-default-wide.css
* By default this style sheet will apply only to the widescreen layout.
* Default media query for the wide layout is:
all and (min-width: 1220px)

CSS and the Omega theme for Drupal

../drupal/sites/all/themes/<name of your subthemed Omega site>/css

This is the folder location where all of the css info is copied by the starter kit when you create your Omega subtheme. 

Omega Theme and Subtheme – CSS

well, the holidays are upon us and i have been pretty busy. so here i am trying to play catchup.

i have decided to go with the omega theme. it has several points that have made me choose it.

  1. it has an html5 subtheme starter kit. 
  2. it is pretty well documented – http://drupal.org/node/819164
  3. it is a responsive theme, meaning it will execute media queries that will assign a specific css based on browser size, which means it is easily adaptable for mobile, which is the size that it is really meant to be used with (mobile) first.
  4. it is designed to be subthemed so that the core theme can be updated without impacting the subtheme that you create.

there are many elements that go into the successful creation of an Omega subtheme. I suggest you read the whole handbook. But, here, I will skip to the Omega CSS particulars.

  • global.css = global
  • yoursubthemename-alpha-default.css = default
  • yoursubthemename-alpha-default-narrow.css = narrow
  • yoursubthemename-alpha-default-normal.css = normal
  • yoursubthemename-alpha-default-wide.css = wide

it is important to note that these css files listed also indicate how the css files are “stacked” or “inherited”. What you see is that mobile devices are dealt with first. and that the layers are stacked up to a “wide” monitor arrangement. this encourages you to write “lean” css code.

Web resources for CSS

This is a great place to find resources for CSS.

http://sixrevisions.com/css/20_websites_learn_master_css/