| 1 |
// $Id:$
|
| 2 |
_ _ _ _
|
| 3 |
___| |_ _ _| | ___ _ __ ___ ___ __| |_ _| | ___
|
| 4 |
/ __| __| | | | |/ _ \ | '_ ` _ \ / _ \ / _` | | | | |/ _ \
|
| 5 |
\__ \ |_| |_| | | __/_| | | | | | (_) | (_| | |_| | | __/
|
| 6 |
|___/\__|\__, |_|\___(_)_| |_| |_|\___/ \__,_|\__,_|_|\___|
|
| 7 |
|___/ A skinning system for Drupal Themes
|
| 8 |
|
| 9 |
Style.module is a skinning system that overrides stylesheets in themes.
|
| 10 |
|
| 11 |
===========================
|
| 12 |
File structure
|
| 13 |
===========================
|
| 14 |
In every module and theme, the /styles folder includes additional
|
| 15 |
styles.
|
| 16 |
|
| 17 |
Every directory in /styles is a different, unique, style.
|
| 18 |
|
| 19 |
When a style is chosen, the style system replaces normal stylesheets
|
| 20 |
for a theme or module with the styles own.
|
| 21 |
|
| 22 |
It does this by replacing files relative to the original theme.
|
| 23 |
|
| 24 |
Let's take an example, here's the output of DRUPAL_THEME_DIR/themes/moo/:
|
| 25 |
|
| 26 |
+-DRUPAL_THEME_DIR/themes/moo/
|
| 27 |
|
|
| 28 |
+-moo.css
|
| 29 |
|
|
| 30 |
+-template.php
|
| 31 |
|
|
| 32 |
+-moo.info
|
| 33 |
|
|
| 34 |
+-page.tpl.php
|
| 35 |
|
|
| 36 |
+-images/
|
| 37 |
| |
|
| 38 |
| +-header-bg.png
|
| 39 |
|
|
| 40 |
+-logo.png
|
| 41 |
|
|
| 42 |
+-styles/
|
| 43 |
|
|
| 44 |
+-georgia-font/
|
| 45 |
| |
|
| 46 |
| +-moo.css
|
| 47 |
|
|
| 48 |
+-ocean/
|
| 49 |
| |
|
| 50 |
| +-moo.css
|
| 51 |
| |
|
| 52 |
| +-images/
|
| 53 |
| |
|
| 54 |
| +-background.png
|
| 55 |
|
|
| 56 |
+-day/
|
| 57 |
| |
|
| 58 |
| +-moo.css
|
| 59 |
| |
|
| 60 |
| +-images/
|
| 61 |
| | |
|
| 62 |
| | +-header.png
|
| 63 |
| |
|
| 64 |
| +-logo.png
|
| 65 |
|
|
| 66 |
+-night/
|
| 67 |
|
|
| 68 |
+-moo.css
|
| 69 |
|
|
| 70 |
+-images/
|
| 71 |
| |
|
| 72 |
| +-header-bg.png
|
| 73 |
|
|
| 74 |
+-logo.png
|
| 75 |
|
| 76 |
If no style chosen, the theme will act normally.
|
| 77 |
|
| 78 |
Day and Night styles
|
| 79 |
the moo.css in the style overrides the theme's
|
| 80 |
moo.css uses a the custom header-bg.png
|
| 81 |
Logo.png is replaced by the same
|
| 82 |
|
| 83 |
Georgia-font
|
| 84 |
Uses moo.css with a modification of the site's fonts
|
| 85 |
|
| 86 |
Ocean
|
| 87 |
Custom moo.css with added background.png
|
| 88 |
|
| 89 |
|
| 90 |
# See Tips: Theme stylesheet architecture
|
| 91 |
|
| 92 |
=================
|
| 93 |
Optionally: Files dir
|
| 94 |
=================
|
| 95 |
Color.module users rejoice. Styles.module supports all generated images
|
| 96 |
and stylesheets natively by utilizing the files.
|
| 97 |
|
| 98 |
This system treats the files directory as a different layer. The root
|
| 99 |
of the file directory is treated as like the drupal_path, except for
|
| 100 |
the permissions.
|
| 101 |
|
| 102 |
So YOUR_DRUPAL/themes/moo/style/night
|
| 103 |
and YOUR_DRUPAL/path_to_files/themes/moo/styles/night
|
| 104 |
|
| 105 |
are treated the same.
|
| 106 |
|
| 107 |
===========================
|
| 108 |
Tips
|
| 109 |
===========================
|
| 110 |
- You can replace images in CSS as you wish, simple use relative locations.
|
| 111 |
|
| 112 |
=====================
|
| 113 |
Theme stylesheet architecture
|
| 114 |
=====================
|
| 115 |
Essentially, you can seperate styling across stylesheets to increase the
|
| 116 |
theme's flexibility. If you are interested in a good architecture for
|
| 117 |
stylesheets, see the Zen starter theme. (http://www.drupal.org/project/zen)
|
| 118 |
|
| 119 |
If you are distributing a theme and want maximum configurability, you can
|
| 120 |
for instance move all of your font CSS into a fonts.css stylesheet, and
|
| 121 |
your images into a images.css stylesheet.
|
| 122 |
|
| 123 |
You can also seperate configurable CSS (font, color, background) and
|
| 124 |
non-configurable. Only the theme developer himself must determine what aspects
|
| 125 |
of the CSS cannot be changed.
|
| 126 |
|
| 127 |
Simply create two files, same statement, but different attributes.
|
| 128 |
|
| 129 |
===========================
|
| 130 |
7.x goals
|
| 131 |
===========================
|
| 132 |
- Overriding of .tpl.php files
|
| 133 |
- In lieu of the stylesheet architecture tip, perhaps a core patch to improve
|
| 134 |
Drupal's stylesheet caching system.
|
| 135 |
|
| 136 |
===========================
|
| 137 |
Style-compatible extensions
|
| 138 |
===========================
|
| 139 |
|
| 140 |
Harmony (to be included)
|
| 141 |
Link module styles attach to theme styles.
|
| 142 |
|
| 143 |
Color
|
| 144 |
Create customizable stylesheets and images
|
| 145 |
- Method of creating customizable stylesheets
|
| 146 |
- Interface for customizing colors
|
| 147 |
- Generation system. Output directly to native style.module styles.
|
| 148 |
|
| 149 |
Big bonus: Styles will work as long as they are properly placed.
|
| 150 |
This leaves room for developers to create custom front-ends and applications
|
| 151 |
for customizing styles through drupal.
|
| 152 |
|
| 153 |
|
| 154 |
========================
|
| 155 |
CHANGELOG
|
| 156 |
========================
|
| 157 |
See CHANGELOG.TXT
|
Parent Directory
| 
Revision Log
| 
Revision Graph