Skip to content

Commit 5867c35

Browse files
author
Darcy A. Branchini
committed
Initial commit of custom theme
0 parents  commit 5867c35

File tree

102 files changed

+8462
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

102 files changed

+8462
-0
lines changed

‎README.txt

+131
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
BUILD A THEME WITH ZEN
2+
----------------------
3+
4+
The base Zen theme is designed to be easily extended by its sub-themes. You
5+
shouldn't modify any of the CSS or PHP files in the zen/ folder; but instead you
6+
should create a sub-theme of zen which is located in a folder outside of the
7+
root zen/ folder. The examples below assume zen and your sub-theme will be
8+
installed in sites/all/themes/, but any valid theme directory is acceptable
9+
(read the sites/default/default.settings.php for more info.)
10+
11+
Why? To learn why you shouldn't modify any of the files in the zen/ folder,
12+
see https://drupal.org/node/245802
13+
14+
15+
*** IMPORTANT NOTE ***
16+
*
17+
* In Drupal 7, the theme system caches which template files and which theme
18+
* functions should be called. This means that if you add a new theme,
19+
* preprocess or process function to your template.php file or add a new template
20+
* (.tpl.php) file to your sub-theme, you will need to rebuild the "theme
21+
* registry." See https://drupal.org/node/173880#theme-registry
22+
*
23+
* Drupal 7 also stores a cache of the data in .info files. If you modify any
24+
* lines in your sub-theme's .info file, you MUST refresh Drupal 7's cache by
25+
* simply visiting the Appearance page at admin/appearance.
26+
*
27+
28+
29+
1. Setup the location for your new sub-theme.
30+
31+
Copy the STARTERKIT folder out of the zen/ folder and rename it to be your
32+
new sub-theme. IMPORTANT: The name of your sub-theme must start with an
33+
alphabetic character and can only contain lowercase letters, numbers and
34+
underscores.
35+
36+
For example, copy the sites/all/themes/zen/STARTERKIT folder and rename it
37+
as sites/all/themes/foo.
38+
39+
Why? Each theme should reside in its own folder. To make it easier to
40+
upgrade Zen, sub-themes should reside in a folder separate from the base
41+
theme.
42+
43+
2. Setup the basic information for your sub-theme.
44+
45+
In your new sub-theme folder, rename the STARTERKIT.info.txt file to include
46+
the name of your new sub-theme and remove the ".txt" extension. Then edit
47+
the .info file by editing the name and description field.
48+
49+
For example, rename the foo/STARTERKIT.info file to foo/foo.info. Edit the
50+
foo.info file and change "name = Zen Sub-theme Starter Kit" to "name = Foo"
51+
and "description = Read..." to "description = A Zen sub-theme".
52+
53+
Why? The .info file describes the basic things about your theme: its
54+
name, description, features, template regions, CSS files, and JavaScript
55+
files. See the Drupal 7 Theme Guide for more info:
56+
https://drupal.org/node/171205
57+
58+
Then, visit your site's Appearance page at admin/appearance to refresh
59+
Drupal 7's cache of .info file data.
60+
61+
3. Choose your preferred page layout method or grid system.
62+
63+
By default your new sub-theme is using a responsive layout. If you want a
64+
fixed layout for your theme, delete the unneeded "responsive" and
65+
"responsive-rtl" css/sass files and edit your sub-theme's styles.css
66+
or styles.scss file and replace the reference to "responsive" with
67+
"fixed".
68+
69+
For example, edit foo/sass/styles.scss and change this line:
70+
@import "layouts/responsive";
71+
to:
72+
@import "layouts/fixed";
73+
74+
Alternatively, if you are more familiar with a different CSS layout method,
75+
such as GridSetApp or 960.gs, etc., you can replace the
76+
"layouts/responsive" line in your styles.scss file with a line
77+
pointing at your choice of layout CSS file.
78+
79+
Then, visit your site's Appearance page at admin/appearance to refresh
80+
Drupal 7's theme cache.
81+
82+
4. Edit your sub-theme to use the proper function names.
83+
84+
Edit the template.php and theme-settings.php files in your sub-theme's
85+
folder; replace ALL occurrences of "STARTERKIT" with the name of your
86+
sub-theme.
87+
88+
For example, edit foo/template.php and foo/theme-settings.php and replace
89+
every occurrence of "STARTERKIT" with "foo".
90+
91+
It is recommended to use a text editing application with search and
92+
"replace all" functionality.
93+
94+
5. Set your website's default theme.
95+
96+
Log in as an administrator on your Drupal site, go to the Appearance page at
97+
admin/appearance and click the "Enable and set default" link next to your
98+
new sub-theme.
99+
100+
101+
Optional steps:
102+
103+
6. Modify the markup in Zen core's template files.
104+
105+
If you decide you want to modify any of the .tpl.php template files in the
106+
zen folder, copy them to your sub-theme's folder before making any changes.
107+
And then rebuild the theme registry.
108+
109+
For example, copy zen/templates/page.tpl.php to foo/templates/page.tpl.php.
110+
111+
7. Modify the markup in Drupal's search form.
112+
113+
Copy the search-block-form.tpl.php template file from the modules/search/
114+
folder and place it in your sub-theme's template folder. And then rebuild
115+
the theme registry.
116+
117+
You can find a full list of Drupal templates that you can override in the
118+
templates/README.txt file or https://drupal.org/node/190815
119+
120+
Why? In Drupal 7 theming, if you want to modify a template included by a
121+
module, you should copy the template file from the module's directory to
122+
your sub-theme's template directory and then rebuild the theme registry.
123+
See the Drupal 7 Theme Guide for more info: https://drupal.org/node/173880
124+
125+
8. Further extend your sub-theme.
126+
127+
Discover further ways to extend your sub-theme by reading Zen's
128+
documentation online at:
129+
https://drupal.org/documentation/theme/zen
130+
and Drupal 7's Theme Guide online at:
131+
https://drupal.org/theme-guide

‎config.rb

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
#
2+
# This file is only needed for Compass/Sass integration. If you are not using
3+
# Compass, you may safely ignore or delete this file.
4+
#
5+
# If you'd like to learn more about Sass and Compass, see the sass/README.txt
6+
# file for more information.
7+
#
8+
9+
10+
# Change this to :production when ready to deploy the CSS to the live server.
11+
environment = :development
12+
#environment = :production
13+
14+
# In development, we can turn on the FireSass-compatible debug_info.
15+
firesass = false
16+
#firesass = true
17+
18+
19+
# Location of the theme's resources.
20+
css_dir = "css"
21+
sass_dir = "sass"
22+
extensions_dir = "sass-extensions"
23+
images_dir = "images"
24+
javascripts_dir = "js"
25+
26+
27+
# Require any additional compass plugins installed on your system.
28+
#require 'ninesixty'
29+
#require 'zen-grids'
30+
31+
# Assuming this theme is in sites/*/themes/THEMENAME, you can add the partials
32+
# included with a module by uncommenting and modifying one of the lines below:
33+
#add_import_path "../../../default/modules/FOO"
34+
#add_import_path "../../../all/modules/FOO"
35+
#add_import_path "../../../../modules/FOO"
36+
37+
38+
##
39+
## You probably don't need to edit anything below this.
40+
##
41+
42+
# You can select your preferred output style here (can be overridden via the command line):
43+
# output_style = :expanded or :nested or :compact or :compressed
44+
output_style = (environment == :development) ? :expanded : :compressed
45+
46+
# To enable relative paths to assets via compass helper functions. Since Drupal
47+
# themes can be installed in multiple locations, we don't need to worry about
48+
# the absolute path to the theme from the server root.
49+
relative_assets = true
50+
51+
# To disable debugging comments that display the original location of your selectors. Uncomment:
52+
# line_comments = false
53+
54+
# Pass options to sass. For development, we turn on the FireSass-compatible
55+
# debug_info if the firesass config variable above is true.
56+
sass_options = (environment == :development && firesass == true) ? {:debug_info => true} : {}

‎css/README.txt

+154
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
ZEN'S STYLESHEETS
2+
-----------------
3+
4+
Don't panic!
5+
6+
There are 11 CSS files in this sub-theme, but it's not as bad as it first seems:
7+
- There are 5 CSS files whose names end in "-rtl.css". Those are CSS files
8+
needed to style content written in Right-to-Left languages, such as Arabic and
9+
Hebrew. If your website doesn't use such languages, you can safely delete all
10+
of those CSS files.
11+
- There are 2 example layout stylesheets inside the "layouts" folder,
12+
"responsive.css" and "fixed.css", but only one of them is used at any time.
13+
- One is just a print stylesheet!
14+
15+
That leaves just 4 CSS files!
16+
- styles.css
17+
- normalize.css
18+
- layouts/responsive.css
19+
- components/misc.css
20+
21+
Now go look in the styles.css file. That file simply includes (via @import) the
22+
other files. It also shows how the files in your sub-theme can be categorized
23+
with the SMACSS technique. http://smacss.com
24+
25+
26+
Why not just one stylesheet?
27+
28+
- For performance reasons you should always have all of your CSS in a single
29+
file to minimize the number of HTTP requests the user's browser needs to do.
30+
Fortunately, Drupal has a "Aggregate and compress CSS" feature that will
31+
automatically combine all the CSS files from its modules and themes into one
32+
file. You can turn on that feature under "Bandwidth Optimization" on the page:
33+
Administration > Configuration > Development > Performance
34+
So Drupal allows us (if we want) to use more than one stylesheet file, but
35+
still serves all the styles in one file to our users.
36+
- When developing a site using a single stylesheet, it can become unwieldy to
37+
scroll and find the place you need to edit. As a deadline becomes imminent,
38+
developers often start stuffing new styles at the bottom of the stylesheet,
39+
completely destroying any stylesheet organization.
40+
- Instead of one monolithic stylesheet, Zen sub-themes' CSS files are organized
41+
into several smaller stylesheets. Once you learn the organization (described
42+
below) it becomes easier to find the right place to add new styles.
43+
- Stylesheets are added in the order specified in the styles.css file. The
44+
default order of the stylesheets is designed to allow CSS authors to use the
45+
lowest specificity possible to achieve the required styling, with more general
46+
stylesheets being added first and more specific stylesheets added later.
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 @import declarations in your sub-theme's
54+
styles.css file. This structure was crafted based on several years of experience
55+
theming Drupal websites.
56+
57+
- styles.css:
58+
This is the only CSS file listed in your sub-theme's .info file. Its purpose
59+
is to @include all the other stylesheets in your sub-theme. When CSS
60+
aggregation is off, this file will be loaded by web browsers first before they
61+
begin to load the @include'd stylesheets; this results in a delay to load all
62+
the stylesheets, a serious front-end performance problem. However, it does
63+
make it easy to debug your website during development. To remove this
64+
performance problem, turn on Drupal's CSS aggregation after development is
65+
completed. See the note above about "Bandwidth Optimization".
66+
67+
- normalize.css:
68+
This is the place where you should set the default styling for all HTML
69+
elements and standardize the styling across browsers. If you prefer a specific
70+
HTML reset method, feel free to use it instead of normalize; just make sure
71+
you set all the styles for all HTML elements after you reset them. In SMACSS,
72+
this file contains all the "base rules". http://smacss.com/book/type-base
73+
74+
- layouts/responsive.css:
75+
Zen's default layout is based on the Zen Grids layout method. Despite the
76+
name, it is an independent project from the Zen theme. Zen Grids is an
77+
intuitive, flexible grid system that leverages the natural source order of
78+
your content to make it easier to create fluid responsive designs. You can
79+
learn more about Zen Grids at http://zengrids.com
80+
81+
The responsive.css file is used by default, but these files are
82+
designed to be easily replaced. If you are more familiar with a different CSS
83+
layout method, such as GridSetApp, 960.gs, etc., you can replace the default
84+
layout with your choice of layout CSS file.
85+
86+
In SMACSS, this file contains the "layout rules".
87+
http://smacss.com/book/type-layout
88+
89+
- layouts/fixed.css:
90+
This layout is based on the Zen Grids layout method, but uses a fixed pixel
91+
width. It is not included by default in your theme's .info file, but is
92+
provided as an option.
93+
94+
In SMACSS, this file contains the "layout rules".
95+
http://smacss.com/book/type-layout
96+
97+
- components/misc.css:
98+
This file contains some common component styles needed for Drupal, such as:
99+
- Tabs: contains actual styling for Drupal tabs, a common Drupal element that
100+
is often neglected by site designers. Zen provides some basic styling which
101+
you are free to use or to rip out and replace.
102+
- Various page elements: page styling for the markup in page.tpl.php.
103+
- Blocks: styling for the markup in block.tpl.php.
104+
- Menus: styling for your site's menus.
105+
- Comments: styling for the markup in comment-wrapper.tpl.php and
106+
comments.tpl.php.
107+
- forms: styling for the markup in various Drupal forms.
108+
- fields: styling for the markup produced by theme_field().
109+
110+
In SMACSS, this file contains "module rules". You can add additional files
111+
if you'd like to further refine your stylesheet organization. Just add them
112+
to the styles.css file. http://smacss.com/book/type-layout
113+
114+
- print.css:
115+
The print styles for all markup.
116+
117+
In SMACSS, this file contains a media query state that overrides modular
118+
styles. This means it most closely related to "module rules".
119+
http://smacss.com/book/type-module
120+
121+
In these stylesheets, we have included just the classes and IDs needed to apply
122+
a minimum amount of styling. To learn many more useful Drupal core selectors,
123+
check Zen's online documentation: https://drupal.org/node/1707736
124+
125+
126+
STYLES FOR INTERNET EXPLORER
127+
----------------------------
128+
129+
Zen allows IE-specific styles using a method first described by Paul Irish at:
130+
http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
131+
132+
If you look at Zen's templates/html.tpl.php file, you will see the HTML tag that
133+
will be used by your site. Using Microsoft's conditional comment syntax,
134+
different HTML tags will be used for different versions of Internet Explorer.
135+
136+
For example, IE6 will see the HTML tag that has these classes: lt-ie7 lt-ie8
137+
lt-ie9. If you need to write an IE6-specific rule, you can simply prefix the
138+
selector with ".lt-ie7 " (should be read as "less than IE 7"). To write a rule
139+
that applies to both IE6 and IE7, use ".lt-ie8 ":
140+
.someRule { /* Styles for all browsers */ }
141+
.lt-ie8 .someRule { /* Styles for IE6 and IE7 only. */ }
142+
143+
Many CSS authors prefer using IE "conditional stylesheets", which are
144+
stylesheets added via conditional comments. If you would prefer that method, you
145+
should check out the Conditional Stylesheets module:
146+
https://drupal.org/project/conditional_styles
147+
148+
149+
DRUPAL CORE'S STYLESHEETS
150+
-------------------------
151+
152+
Note: Many of Zen's styles are overriding Drupal's core stylesheets, so if you
153+
remove a declaration from them, the styles may still not be what you want since
154+
Drupal's core stylesheets are still styling the element.

0 commit comments

Comments
 (0)