Intro to CSS Selectors in Drupal
- 1. 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
- 2. 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
- 3. Why Should You Know This Turn this: Into this… with CSS
- 4. CSS Rule Syntax Example: 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. 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…
- 6. 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
- 7. 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
- 8. Combinators escendant – S3 S3… Elements that are contained inside another element. For example, the selector: IV.menu A:hover ould define the hover style for any anchor tag inside a div with class menu, even if there are other tags between.
- 9. Combinators hild – S3 > S3… Describes elements that have a direct parent and child relationship: L.menu > LI.leaf ould target ONLY <LI class=“leaf”> elements that were directly under a <UL class=“menu”> element. ibling – S3 + S3… or S3 ~ S3
- 10. 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
- 11. Something !Important One 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; }
- 12. Drupal Areas Drupal 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. 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
- 14. Theme Regions
- 15. 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; }
- 16. Nodes, Blocks, & Menus
- 17. 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;; }
- 18. Views & View Fields
- 19. 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; }
- 20. CCK Fields
- 21. 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; }
- 22. Form Fields No examples prepared, but forms are similar to CCK / Node fields.
- 23. Helpful Tools FireFox with FireBug Chrome with built in Explore Element
- 24. Questions? This has covered a lot of complex concepts quickly….