1 |
4cce112d
|
Andreas Kohlbecker
|
ZEN'S STYLESHEETS
|
2 |
|
|
-----------------
|
3 |
|
|
|
4 |
|
|
Don't panic!
|
5 |
|
|
|
6 |
|
|
There are 22 CSS files in this sub-theme, but its not as bad as it first seems:
|
7 |
|
|
- The drupal7-reference.css is just a reference file and isn't used directly by
|
8 |
|
|
your sub-theme. See below.
|
9 |
|
|
- There are 7 CSS files whose names end in "-rtl.css". Those are CSS files
|
10 |
|
|
needed to style content written in Right-to-Left languages, such as Arabic and
|
11 |
|
|
Hebrew. If your website doesn't use such languages, you can safely delete all
|
12 |
|
|
of those CSS files.
|
13 |
|
|
- There are 2 example layout stylesheets in the layouts/ folder, but only one of
|
14 |
|
|
them is used at any time.
|
15 |
|
|
- If you aren't using this sub-theme while doing wireframes of your site's
|
16 |
|
|
functionality, you can remove wireframes.css from your sub-theme's .info file
|
17 |
|
|
and delete the file as well.
|
18 |
|
|
- One is just a print stylesheet!
|
19 |
|
|
|
20 |
|
|
That leaves just 11 CSS files. (Okay, still quite a few, but better than 22.)
|
21 |
|
|
|
22 |
|
|
Why not just one stylesheet?
|
23 |
|
|
|
24 |
|
|
- For performance reasons you should always have all of your CSS in a single
|
25 |
|
|
file to minimize the number of HTTP requests the user's browser needs to do.
|
26 |
|
|
Fortunately, Drupal has a "Aggregate and compress CSS" feature that will
|
27 |
|
|
automatically combine all the CSS files from its modules and themes into one
|
28 |
|
|
file. You can turn on that feature under "Bandwidth Optimization" on the page:
|
29 |
|
|
Administration > Configuration > Development > Performance
|
30 |
|
|
So Drupal allows us (if we want) to use more than one stylesheet file, but
|
31 |
|
|
still serves all the styles in one file to our users.
|
32 |
|
|
- When developing a site using a single stylesheet, it can become unwieldy to
|
33 |
|
|
scroll and find the place you need to edit. As a deadline becomes imminent,
|
34 |
|
|
developers often start stuffing new styles at the bottom of the stylesheet,
|
35 |
|
|
completely destroying any stylesheet organization.
|
36 |
|
|
- Instead of one monolithic stylesheet, Zen sub-themes' CSS files are organized
|
37 |
|
|
into several smaller stylesheets. Once you learn the organization (described
|
38 |
|
|
below) it becomes easier to find the right place to add new styles.
|
39 |
|
|
- Stylesheets are added in the order specified in your sub-theme's .info file.
|
40 |
|
|
The default order of the stylesheets is designed to allow CSS authors to use
|
41 |
|
|
the lowest specificity possible to achieve the required styling, with more
|
42 |
|
|
general stylesheets being added first and more specific stylesheets added
|
43 |
|
|
later.
|
44 |
|
|
- In addtion to following the normal CSS cascade, stylesheets are also organized
|
45 |
|
|
relative to common Drupal template files. The most commonly used Drupal
|
46 |
|
|
template files also have a corresponding stylesheet.
|
47 |
|
|
|
48 |
|
|
|
49 |
|
|
ORDER AND PURPOSE OF DEFAULT STYLESHEETS
|
50 |
|
|
----------------------------------------
|
51 |
|
|
|
52 |
|
|
First off, if you find you don't like this organization of stylesheets, you are
|
53 |
|
|
free to change it; simply edit the stylesheet declarations in your sub-theme's
|
54 |
|
|
.info file. This structure was crafted based on several years of experience
|
55 |
|
|
theming Drupal websites.
|
56 |
|
|
|
57 |
|
|
- normalize.css:
|
58 |
|
|
This is the place where you should set the default styling for all HTML
|
59 |
|
|
elements and standardize the styling across browsers. If you prefer a specific
|
60 |
|
|
HTML reset method, feel free to use it instead of normalize.
|
61 |
|
|
|
62 |
|
|
- layouts/responsive-sidebars.css:
|
63 |
|
|
Zen's default layout is based on the Zen Grids layout method. Despite the
|
64 |
|
|
name, it is an independent project from the Zen theme. Zen Grids is an
|
65 |
|
|
intuitive, flexible grid system that leverages the natural source order of
|
66 |
|
|
your content to make it easier to create fluid responsive designs. You can
|
67 |
|
|
learn more about Zen Grids at http://zengrids.com
|
68 |
|
|
|
69 |
|
|
The responsive-sidebars.css file is used by default, but these files are
|
70 |
|
|
designed to be easily replaced. If you are more familiar with a different CSS
|
71 |
|
|
layout method, such as GridSetApp, 960.gs, etc., you can replace the default
|
72 |
|
|
layout with your choice of layout CSS file.
|
73 |
|
|
|
74 |
|
|
- layouts/fixed-width.css:
|
75 |
|
|
This layout is based on the Zen Grids layout method, but uses a fixed pixel
|
76 |
|
|
width. It is not included by default in your theme's .info file, but is
|
77 |
|
|
provided as an option.
|
78 |
|
|
|
79 |
|
|
- tabs.css:
|
80 |
|
|
While most of the CSS rulesets in your sub-theme are guidelines without any
|
81 |
|
|
actual properties, the tabs stylesheet contains actual styling for Drupal
|
82 |
|
|
tabs, a common Drupal element that is often neglected by site desiners. Zen
|
83 |
|
|
provides some basic styling which you are free to use or to rip out and
|
84 |
|
|
replace.
|
85 |
|
|
|
86 |
|
|
- pages.css:
|
87 |
|
|
Page styling for the markup in the page.tpl.php template.
|
88 |
|
|
|
89 |
|
|
- blocks.css:
|
90 |
|
|
Block styling for the markup in the block.tpl.php template.
|
91 |
|
|
|
92 |
|
|
- navigation.css:
|
93 |
|
|
The styling for your site's menus can get quite bulky and its easier to see
|
94 |
|
|
all the styles if they are grouped together rather then across the
|
95 |
|
|
header/footer sections of pages.css and in blocks.css.
|
96 |
|
|
|
97 |
|
|
- views-styles.css:
|
98 |
|
|
Views styling for the markup in various views templates. You'll notice this
|
99 |
|
|
stylesheet isn't called "views.css" as that would override (remove) the Views
|
100 |
|
|
module's stylesheet.
|
101 |
|
|
|
102 |
|
|
- nodes.css:
|
103 |
|
|
Node styling for the markkup in the node.tpl.php template.
|
104 |
|
|
|
105 |
|
|
- comments.css:
|
106 |
|
|
Comment styling for the markup in the comment-wrapper.tpl.php and
|
107 |
|
|
comments.tpl.php templates.
|
108 |
|
|
|
109 |
|
|
- forms.css:
|
110 |
|
|
Form styling for the markup in various Drupal forms.
|
111 |
|
|
|
112 |
|
|
- fields.css:
|
113 |
|
|
Field styling for the markup produced by theme_field().
|
114 |
|
|
|
115 |
|
|
- print.css:
|
116 |
|
|
The print styles for all markup.
|
117 |
|
|
|
118 |
|
|
In these stylesheets, we have included all of the classes and IDs from this
|
119 |
|
|
theme's tpl.php files. We have also included many of the useful Drupal core
|
120 |
|
|
selectors to make it easier for theme developers to discover them.
|
121 |
|
|
|
122 |
|
|
|
123 |
|
|
STYLES FOR INTERNET EXPLORER
|
124 |
|
|
----------------------------
|
125 |
|
|
|
126 |
|
|
Zen allows IE-specific styles using a method first described by Paul Irish at:
|
127 |
|
|
http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
|
128 |
|
|
|
129 |
|
|
If you look at Zen's templates/html.tpl.php file, you will see the HTML tag that
|
130 |
|
|
will be used by your site. Using Microsoft's conditional comment syntax,
|
131 |
|
|
different HTML tags will be used for different versions of Internet Explorer.
|
132 |
|
|
|
133 |
|
|
For example, IE6 will see the HTML tag that has these classes: lt-ie7 lt-ie8
|
134 |
|
|
lt-ie9. If you need to write an IE6-specific rule, you can simply prefix the
|
135 |
|
|
selector with ".lt-ie7 " (should be read as "less than IE 7"). To write a rule
|
136 |
|
|
that applies to both IE6 and IE7, use ".lt-ie8 ":
|
137 |
|
|
.someRule { /* Styles for all browsers */ }
|
138 |
|
|
.lt-ie8 .someRule { /* Styles for IE6 and IE7 only. */ }
|
139 |
|
|
|
140 |
|
|
Many CSS authors prefer using IE "conditional stylesheets", which are
|
141 |
|
|
stylesheets added via conditional comments. If you would prefer that method, you
|
142 |
|
|
should check out the Conditional Stylesheets module:
|
143 |
|
|
http://drupal.org/project/conditional_styles
|
144 |
|
|
|
145 |
|
|
|
146 |
|
|
DRUPAL CORE'S STYLESHEETS
|
147 |
|
|
-------------------------
|
148 |
|
|
|
149 |
|
|
Many of Zen's styles are overriding Drupal's core stylesheets, so if you remove
|
150 |
|
|
a declaration from them, the styles may still not be what you want since
|
151 |
|
|
Drupal's core stylesheets are still styling the element. See the
|
152 |
|
|
drupal7-reference.css file for a complete list of all Drupal 7.x core styles.
|