1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
ZEN'S STYLESHEETS
-----------------
Don't panic!
There are 25 CSS files in this sub-theme, but its not as bad as it first seems:
- The drupal7-reference.css is just a reference file and isn't used directly by
your sub-theme. See below.
- There are 7 CSS files whose names end in "-rtl.css". Those are CSS files
needed to style content written in Right-to-Left languages, such as Arabic and
Hebrew. If your website doesn't use such languages, you can safely delete all
of those CSS files.
- If you aren't using this theme while doing wireframes of the functionality of
your sub-theme, you can remove wireframes.css from your sub-theme's .info file
and delete the file as well.
That leaves just 16 CSS files. (Okay, still quite a few, but better than 25.)
- Instead of one monolithic stylesheet, your sub-theme's CSS files are organized
into several smaller stylesheets that are grouped to allow cascading across
common Drupal template files.
- The order of the stylesheets is designed to allow CSS authors to use the
lowest specificity possible to achieve the required styling.
ORDER AND PURPOSE OF DEFAULT STYLESHEETS
----------------------------------------
First off, if you find you don't like this organization of stylesheets, you are
free to change it; simply edit the stylesheet declarations in your sub-theme's
.info file. This structure was crafted based on several years of experience
theming Drupal websites.
- html-reset.css:
This is the place where you should set the default styling for all HTML
elements and standardize the styling across browsers. If you prefer a specific
reset method, feel free to add it.
- layout-fixed.css:
- layout-liquid.css:
Zen's default layout is based on the Zen Columns layout method. The
layout-fixed.css file is used by default and can be swapped with the
layout-liquid.css file. These files are designed to be easily replaced. If you
are more familiar with a different CSS layout method, such as Blueprint or
960.gs, you can replace these files with your choice of layout CSS file.
- page-backgrounds.css:
Layered backgrounds across scattered divs can be easier to manage if they are
centralized in one location.
- tabs.css:
While most of the CSS rulesets in your sub-theme are guidelines without any
actual properties, the tabs stylesheet contains actual styling for Drupal
tabs, a common Drupal element that is often neglected by site desiners. Zen
provides some basic styling which you are free to use or to rip out and
replace.
- pages.css:
Page styling for the markup in the page.tpl.php template.
- blocks.css:
Block styling for the markup in the block.tpl.php template.
- navigation.css:
The styling for your site's menus can get quite bulky and its easier to see
all the styles if they are grouped together rather then across the
header/footer sections of pages.css and in blocks.css.
- views-styles.css:
Views styling for the markup in various views templates. You'll notice this
stylesheet isn't called "views.css" as that would override (remove) the Views
module's stylesheet.
- nodes.css:
Node styling for the markkup in the node.tpl.php template.
- comments.css:
Comment styling for the markup in the comment-wrapper.tpl.php and
comments.tpl.php templates.
- forms.css:
Form styling for the markup in various Drupal forms.
- fields.css:
Field styling for the markup produced by theme_field().
- print.css:
The print styles for all markup.
- ie7.css:
- ie6.css:
The Internet Explorer stylesheets are added via conditional comments. Many CSS
authors find using IE "conditional stylesheets" much easier then writing
rulesets with CSS hacks that are known to only apply to various versions of
IE. The full conditional comment syntax can be found on Microsoft's website:
http://msdn.microsoft.com/en-us/library/ms537512.aspx
An alternative method presented by Paul Irish can be found at
http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
In these stylesheets, we have included all of the classes and IDs from this
theme's tpl.php files. We have also included many of the useful Drupal core
styles to make it easier for theme developers to see them.
DRUPAL CORE'S STYLESHEETS
-------------------------
Many of Zen's styles are overriding Drupal's core stylesheets, so if you remove
a declaration from them, the styles may still not be what you want since
Drupal's core stylesheets are still styling the element. See the
drupal7-reference.css file for a complete list of all Drupal 7.x core styles.
|
