intro to css selectors in drupal

24
An Introduction to CSS Selectors and Drupal Understanding CSS selectors and how Drupal allows you to use them to style pages is a key Drupal skill

Upload: cgmonroe

Post on 12-Dec-2014

7.947 views

Category:

Technology


0 download

DESCRIPTION

Presentation to the Triangle Drupal Users Group (TriDUG) July meeting. This is a brief overview of what CSS selectors are and how they can be used to target CSS at specific parts of Drupal pages.Note: This was done using the Fusion Starter theme in Drupal 7 but is applicable to D6 and other "major" themes.Sorry, the slide animations did not come thru... but only the before and after slide really got effected.

TRANSCRIPT

Page 1: Intro to CSS Selectors in Drupal

An Introduction to CSS Selectors and Drupal

Understanding CSS selectors and how Drupal allows you to use them to

style pages is a key Drupal skill

Page 2: Intro to CSS Selectors in Drupal

Audience Knowledge Quiz

How many……know what CSS stands for

…have “cut & pasted” CSS into sites

…have written their own CSS rules from scratch

…know what a CSS Selector is

…are experts, just here to heckle

Page 3: Intro to CSS Selectors in Drupal

Why Should You Know This

Turn this:

Into this… with CSS

Page 4: Intro to CSS Selectors in Drupal

CSS Rule SyntaxCSS Syntax: <Selector> { <property>: <value>; <property>: <value>; … }

Example: CSS:

A.menu:hover { color: #002b70; text-decoration: underline; }

HTML:<UL> <LI> <A class=“menu” href=“foobar.html”>FooBar</A> </LI></UL>

Page 5: Intro to CSS Selectors in Drupal

What are Selectors

Patterns used to select the parts of a document to apply the styles to.

The CSS3 spec define these patterns as:

A chain of one or more sequence of simple selectors separated by combinators

Lets break this down…

Page 6: Intro to CSS Selectors in Drupal

Sequence of Simple Selectors

The most common simple selector types are: .<class> select all elements with class=“<class>”

<element> match a specific HTML <element> (A, H2)

#<id> match element with id=<id> attribute

:<pseudo> “pseudo class” selectors like :hover, :visited

These can be combined into sequences to target specific document element like:

A.menu:hover H1#header

Note: There are a lot of other simple selectors, especially with CSS3. See:

http://www.w3.org/TR/css3-selectors/#selectors

Page 7: Intro to CSS Selectors in Drupal

What are Combinators

Combinators let you combine sequences of simple selectors (S3) and target very specific areas of a document.

Combinators are the most important CSS item to understand with Drupal!

They let you target almost anything on a Drupal page

Page 8: Intro to CSS Selectors in Drupal

CombinatorsDescendant – S3 S3…

Elements that are contained inside another element. For example, the selector:

DIV.menu A:hover

would define the hover style for any anchor tag inside a div with class menu, even if there are other tags between.

You can use multiple combinators, e.g:

Div.Content div.links A:hover

Page 9: Intro to CSS Selectors in Drupal

CombinatorsChild – S3 > S3…

Describes elements that have a direct parent and child relationship:

UL.menu > LI.leaf

would target ONLY <LI class=“leaf”> elements that were directly under a <UL class=“menu”> element.

Sibling – S3 + S3… or S3 ~ S3Describes elements that are siblings… see the docs for details.

Page 10: Intro to CSS Selectors in Drupal

Specificity (The Great Gotcha)

Complex CSS selectors will overlap with more than one rule applying to an element.

Specificity defines how browsers should calculate the “weight” of rules. The heavier ones win.

Drupal tends to have LOTS of rules so chances are your carefully crafted selector may not work.

Here’s how specificity is calculated: http://www.w3.org/TR/css3-selectors/#specificity

Page 11: Intro to CSS Selectors in Drupal

Something !ImportantOne trick to remember if your selector is not specific enough is the !important property declaration.

E.g., if these rules point to the same DIV, the text color will be red (#id is highly specific).Div#more_specific { color: red; }Div.less_specific { color: green; }

If you add, !important to the properties, the color will be green. Div#more_specific { color: red; }Div.less_specific { color: green !important; }

Page 12: Intro to CSS Selectors in Drupal

Drupal AreasDrupal pages have a wide variety of CSS addressable “areas” that are created by the system and themes.

•Page info•Theme regions•Nodes (Content type/Specific)•Blocks (General / Specific )•Menus (General / Specific )•Views (General / Specific )•Fields - Views & CCK (General / Specific )•Form elements (General / Specific )

Page 13: Intro to CSS Selectors in Drupal

Page Info

The body tag on Drupal pages will have several useful classes.

Front/Not-Front: Front page or not

Logged-in/not-logged in: User or Anonymous

Node-Type-<node-type>: Class based on Node Type

Page 14: Intro to CSS Selectors in Drupal

Theme Regions

Page 15: Intro to CSS Selectors in Drupal

Theme Regions

Page Top: <div id=“page-top” class=“region-page-top….

Header: <div id=“header-group” class=“header-group…

Sidebar First: <div id=“sidebar-first” class=“region-sidebar-first…

Footer: <div id=“footer” class=“region-footer…

Content: <div id=“content” class=“region-content…

Example CSS

#sidebar-first DIV.block { padding-top: 15px; }

Page 16: Intro to CSS Selectors in Drupal

Nodes, Blocks, & Menus

Page 17: Intro to CSS Selectors in Drupal

Nodes, Blocks, & Menus

Node: <div id=“node-2” class=“node node-page full-node…

Block: <div id=“block-block-2” class=“block…

Menu: <div id=“block-system-main-menu”

class=“block block-system block-menu…

Example CSS

#block-block2 .content { background-image: url("../images/SkylarkingDef2.gif"); background-repeat: no-repeat; width: 151px; height: 308px;; }

Page 18: Intro to CSS Selectors in Drupal

Views & View Fields

Page 19: Intro to CSS Selectors in Drupal

Views & View Fields

View: <div class=“view view-photo-galleries…

Field: <div class=“views-field views-field-title…

Example CSS

.view-photo-galleries .views-field-title { padding-bottom: 6px; } .view-photo-galleries .views-field-title A { font-size: 18px; }

Page 20: Intro to CSS Selectors in Drupal

CCK Fields

Page 21: Intro to CSS Selectors in Drupal

CCK Fields

Field: <div class=“field field-name-field-quest…

Field Label: <div class=“field-label…

Field Items: <div class=“field-items…

Field Item: <div class=“field-item…

Example CSS

.node-field-example .field DIV.field-label { padding: 1em 0; } .node-field-example .field DIV.items { padding: 1em 0 2em 1em; }

Page 22: Intro to CSS Selectors in Drupal

Form Fields

No examples prepared, but forms are similar to CCK / Node fields.

Page 23: Intro to CSS Selectors in Drupal

Helpful Tools

FireFox with FireBug

Chrome with built in Explore Element

Page 24: Intro to CSS Selectors in Drupal

Questions?

This has covered a lot of complex concepts quickly….