An Introduction to CSS Selectors and DrupalUnderstanding CSS selectors and how Drupal allows you to use  them to style pag...
Audience Knowledge QuizHow many… …know what CSS stands for …have “cut & pasted” CSS into sites …have written their own CSS...
Why Should You Know ThisTurn this:Into this… with CSS
CSS Rule SyntaxExample:                         CSS Syntax:CSS:                              <Selector> {   A.menu:hover {...
What are SelectorsPatterns used to select the parts of adocument to apply the styles to.The CSS3 spec define these pattern...
Sequence of Simple SelectorsThe most common simple selector types are: .<class>            select all elements with class=...
What are CombinatorsCombinators let you combine sequences ofsimple selectors (S3) and target very specificareas of a docum...
Combinatorsescendant – S3 S3…Elements that are contained inside anotherelement. For example, the selector:               I...
Combinatorshild – S3 > S3…Describes elements that have a direct parentand child relationship:               L.menu > LI.le...
Specificity (The Great Gotcha)Complex CSS selectors will overlap with morethan one rule applying to an element.Specificity...
Something !ImportantOne trick to remember if your selector is notspecific enough is the !important propertydeclaration.E.g...
Drupal AreasDrupal pages have a wide variety of CSS addressable“areas” that are created by the system and themes.•Page inf...
Page Info The body tag on Drupal pages will have several useful classes.Front/Not-Front:           Front page or notLogged...
Theme Regions
Theme RegionsPage Top:     <div id=“page-top” class=“region-page-top….Header:       <div id=“header-group” class=“header-g...
Nodes, Blocks, & Menus
Nodes, Blocks, & MenusNode: <div id=“node-2” class=“node node-page full-node…Block: <div id=“block-block-2” class=“block…M...
Views & View Fields
Views & View FieldsView: <div class=“view view-photo-galleries…Field: <div class=“views-field views-field-title…Example CS...
CCK Fields
CCK FieldsField:        <div class=“field field-name-field-quest…Field Label: <div class=“field-label…Field Items: <div cl...
Form FieldsNo examples prepared, butforms are similar to CCK /Node fields.
Helpful ToolsFireFox with FireBugChrome with built in Explore Element
Questions?This has covered a lot of complex       concepts quickly….
Upcoming SlideShare
Loading in...5
×

Intro to CSS Selectors in Drupal

8,378

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,378
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
31
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Intro to CSS Selectors in Drupal"

  1. 1. An Introduction to CSS Selectors and DrupalUnderstanding CSS selectors and how Drupal allows you to use them to style pages is a key Drupal skill
  2. 2. Audience Knowledge QuizHow 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
  3. 3. Why Should You Know ThisTurn this:Into this… with CSS
  4. 4. CSS Rule SyntaxExample: CSS Syntax:CSS: <Selector> { A.menu:hover { color: #002b70; <property>: <value>; text-decoration: underline; <property>: <value>; } …HTML: }<UL> <LI> <A class=“menu” href=“foobar.html”>FooBar</A> </LI></UL>
  5. 5. What are SelectorsPatterns used to select the parts of adocument to apply the styles to.The CSS3 spec define these patterns as: A chain of one or more sequence of simple selectors separated by combinatorsLets break this down…
  6. 6. Sequence of Simple SelectorsThe 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, :visitedThese can be combined into sequences to targetspecific document element like: A.menu:hover H1 #headerNote: There are a lot of other simple selectors, especially with CSS3. See: http://www.w3.org/TR/css3-selectors/#selectors
  7. 7. What are CombinatorsCombinators let you combine sequences ofsimple selectors (S3) and target very specificareas of a document.Combinators are the most important CSS itemto understand with Drupal!They let you target almost anything on a Drupalpage
  8. 8. Combinatorsescendant – S3 S3…Elements that are contained inside anotherelement. For example, the selector: IV.menu A:hoverould define the hover style for any anchor taginside a div with class menu, even if there areother tags between.
  9. 9. Combinatorshild – S3 > S3…Describes elements that have a direct parentand child relationship: L.menu > LI.leafould target ONLY <LI class=“leaf”> elementsthat were directly under a <UL class=“menu”>element.ibling – S3 + S3… or S3 ~ S3
  10. 10. Specificity (The Great Gotcha)Complex CSS selectors will overlap with morethan one rule applying to an element.Specificity defines how browsers shouldcalculate the “weight” of rules. The heavier oneswin.Drupal tends to have LOTS of rules so chancesare your carefully crafted selector may not work.Here’s how specificity is calculated: http://www.w3.org/TR/css3-selectors/#specificity
  11. 11. Something !ImportantOne trick to remember if your selector is notspecific enough is the !important propertydeclaration.E.g., if these rules point to the same DIV, the textcolor 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 colorwill be green.Div#more_specific { color: red; }Div.less_specific { color: green !important; }
  12. 12. 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 )
  13. 13. Page Info The body tag on Drupal pages will have several useful classes.Front/Not-Front: Front page or notLogged-in/not-logged in: User or AnonymousNode-Type-<node-type>: Class based on Node Type
  14. 14. Theme Regions
  15. 15. Theme RegionsPage 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; }
  16. 16. Nodes, Blocks, & Menus
  17. 17. Nodes, Blocks, & MenusNode: <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;; }
  18. 18. Views & View Fields
  19. 19. Views & View FieldsView: <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; }
  20. 20. CCK Fields
  21. 21. CCK FieldsField: <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; }
  22. 22. Form FieldsNo examples prepared, butforms are similar to CCK /Node fields.
  23. 23. Helpful ToolsFireFox with FireBugChrome with built in Explore Element
  24. 24. Questions?This has covered a lot of complex concepts quickly….
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×