Drupal Training Series
Foundations for OSU Drupal 6
Exploring OSU Themes
This work is licensed under a Creative Commons AttributionNonCommercial-ShareAlike 3.0 United States License
What We’ll Be Covering…
Themes
• What Themes Are & How They Work
• Theme Development
• OSU Grey Configuration
– Ex. 01 Configure Header Color Scheme
– Ex. 02 Insert OSU Grey Header Images
• Changing Themes
– Ex. 03 Change Default Theme
• OSU Orange Configuration
– Ex. 04 Configure Header Icon Image
– Ex. 05 Insert OSU Orange Header Images
• Breadcrumbs
– Ex. 06 Configure Menu Breadcrumb
• Global Theme Configuration
– Ex. 07 Change Post Information Settings
Site Information Configuration
– Ex. 08 Change Site Information
Summary
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
2
Getting Started
As a reminder, to get to your personal development site go to:
http://drupaldev.cws.oregonstate.edu/training/<yourONIDname>/login
From there, log in with your ONID information.
After logging in, please open a second tab in your browser and go
to CWS Training at
http://oregonstate.edu/cws/training
Locate the name of this workshop in the list and click it. This will
take you to a page describing the course with download links at
the bottom of the page.
Download the lab materials to your desktop and unzip them.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
3
Themes: What Themes Are & How They Work
Themes allow for the rapid changing of a site’s overall look and
feel. This covers a fairly wide range of items, as a website contains
many different elements that posses distinct characteristics. For
example:
• Text
• Images
– Font Type
– Font Size
– Line Spacing
– Size
– Borders
– Positioning
• Backgrounds
• Layout
– Colors
– Gradients
– Regions
– Components
A user who possesses the permission to change a theme can do so
in a matter of six mouse clicks. This is a great way to freshen up an
old website with minimal effort.
In the OSU Drupal 6 permission set, the only role that can change
the theme is the Administrator.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
4
Themes: Theme Development
While well-developed themes are generally easy to use, they are
not necessarily easy to build.
For professional looking themes, there is often both a designer
and a developer working together. The designer comes up with
the “look and feel” and the developer builds the theme according
to the designer’s specifications.
Additionally, depending on the theme complexity and the budget,
other professionals, such as photographers or illustrators, may be
involved as well.
This workshop will not focus on how to build a theme. This is a
complex endeavor with a very long learning curve. Instead, we
will focus on how to configure two very flexible themes developed
specifically for OSU.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
5
Themes: Theme Development – OSU Drupal Themes
Currently, each default OSU Drupal 6 installation comes supplied
with four OSU themes:
• OSU Grey (Default OSU theme)
• OSU Orange
• OSU Linen
• OSU Drupal Lite
OSU Grey and OSU Orange have been designed by University
Advancement and built by Central Web Services with flexibility,
convenience, and customization in mind. For detailed information
regarding use specifications of these themes, please visit:
http://oregonstate.edu/ua/brand/templates-and-themes
Our focus for this workshop will be on enabling and configuring
both OSU Grey and OSU Orange. For every OSU Drupal 6
installation, OSU Grey is enabled and set as the default theme, so
let’s start with this…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
6
Themes: OSU Grey
Distinguishing features of OSU Grey:
Optional rotating
header
Clean, silvery
gradient fill
Standard
search bar
Secondary Page Display
Arial font in
menus
No image, dark
charcoal color
Arial font
Front Page Display
The default display looks pretty nice, but it can be added to…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
7
Themes: OSU Grey – Layout Regions
The OSU Grey theme has seven different layout regions in which
groups of content can be placed:
Top Horizontal Bar
stretches across width
of all lower regions
Top Horizontal Bar
Pre-Content
Fluid width matte
Content
Fixed width border
Content
Left Sidebar
Right Sidebar
Fluid width regions
Post-Content
Footer
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
8
Themes: OSU Grey – Themes Control Panel
To configure the OSU Grey theme,
you must go through the Themes
control panel:
1. Click on Administer > Site
Building > Themes to view the
collection of installed themes
on the site, which appear on
the List tab
2. Scroll down the page to the
OSU Grey theme and click on
the configure link within its
row
1
2
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
9
Themes: OSU Grey – Configuration
1
There are several different configuration
options for OSU Grey:
1. Toggle display group
– Turns element displays on or off
2. Shortcut icon settings group
– Shortcut icon (“Favicon”) upload
2
3. Theme-specific settings group
– Color Scheme
Change header colors
– Breadcrumb settings
Turns breadcrumbs on and off
– Theme development settings
For developers
3
– Rotating Header Image Directory
Toggles a custom rotating header
– Front Page Header Image
Configures Front Page Header Image activity
– Secondary Page Header Image
Configures Secondary Page Header Image activity
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
10
Themes: OSU Grey – Configuration – Ex. 01 Configure Header Color Scheme
To configure the Color Scheme for
OSU Grey:
1. Scroll down the screen to the
Color Scheme group
2. Select one of the options from
the Color Scheme drop down
box – the options are:
–
–
–
Grey
Orange
Tan
1
2
3. Click the Save configuration
button at the bottom of the
screen
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
11
Themes: OSU Grey – Configuration – Ex. 01 Configure Header Color Scheme – Completed
Front Page Display
Since there are two different
displays – a Front Page display and a
Secondary Page display, it’s a good
idea to check both to see how they
look
Click on the Home page link to see
the Front Page
To see the Secondary Page, click on
Administer > Site building > Themes
to return to the Theme settings
As can be seen, the Secondary Page
looks different – this is normal.
Secondary Page Display
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
12
Themes: OSU Grey – Configuration – Custom Header Images
Both OSU Themes, Grey and Orange, allow custom images to be
inserted in the header region. A few different effects are available:
• Rotating random image
• Random image on reload
• Single image
Size and quality of the images used is very important. For these
features to work well, images must be:
• .jpg format (file extension must be lowercase, .JPG will not work)
• Absolute image sizes
– Grey = 640 pixels wide x 160 pixels tall
– Orange = 575 pixels wide x 163 pixels tall
• 72 – 150 dpi resolution
– The lower the better for performance sake
You can find out more about working with digital images at:
http://oregonstate.edu/cws/webtrain/picture-this
For information on photo quality, view WebComm’s guide at:
http://oregonstate.edu/ua/brand/photography
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
13
Themes: OSU Grey – Configuration – Ex. 02 Insert OSU Grey Custom Images – Create Directory
To insert a custom header image into
OSU Grey:
1. Go to Administer > Site building >
Themes and click on the
configure link in the OSU Grey
row
2. Scroll down the page to the
Rotating Header Image Directory
group and click the “Use a
custom rotating header
location?” box
3. The Rotating header images
directory field will appear – enter
the text ingredients after “grey/”
1
2
3
– This will create a directory in the site’s file
system to hold images from the
corresponding workshop materials
4. Click the Save configuration
button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
14
Themes: OSU Grey – Configuration – Ex. 02 Insert OSU Grey Header Images – Delete Default Images
A set of default images are automatically
loaded into the new folder you created from
the configuration panel – these can be used
or deleted, as desired – we’ll delete them for
our purposes:
1
1. In the Navigation menu, click on My
account > File browser tab
2
2. Click on the folder titled grey and then
the sub folder titled ingredients
3. Select the first image file in the list,
then hold the Ctrl + A keys to select all
files
3
4. Click the Delete link
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
15
Themes: OSU Grey – Configuration – Ex. 02 Insert OSU Grey Header Images – Upload New Images
Now, upload the new images from your
workshop materials:
1. Click on the Upload link to open
the uploader
2. Click on the Browse button and
browse to
1
2
3
Desktop
d06-explore-osu-themes-lab
ex-02 folder
ingredients folder
3. Select the first file in the folder and
click the Upload button
Repeat this process until all files in the
ingredients folder are uploaded
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
16
Themes: OSU Grey – Configuration – Ex. 02 Insert OSU Grey Header Images – Configure Header Activity
Now, return to Administer > Site
building > Themes > OSU Grey >
Configure to finish the configuration:
1
1. In the Front Page Header Image
group
– Select a Rotating Header Type
2
2. In the Secondary Page Header
Image group
– Select a Secondary Page Header Type
 short header option shows no image
 tall header option shows an image
– Select a Rotating Header Type
3. Click the Save configuration
button
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
17
Themes: OSU Grey – Configuration – Ex. 02 Insert OSU Grey Header Images – Completed Configuration
Front Page
Secondary Page with graphic option
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
18
Themes: Changing Themes
Changing themes is really very simple. As mentioned before, it
only takes six mouse clicks to change the entire look and feel of
your website.
There are a couple of things to consider, though, before changing a
theme:
• Theme changes may affect block layout (which we’ll
discuss in Drupal 6 Formatting Blocks workshop)
• Items that are configured for one theme, such as the
header images in OSU Grey, will not carry over to another
theme
Keeping this mind, let’s change the theme to OSU Orange and take
a look at the features of this particular theme.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
19
Themes: Changing Themes – Ex. 03 Change Default Theme
To change a theme:
1. Go to the Themes list at Administer
> Site building > Themes
2. Scroll down to the OSU Orange
theme
3. Click the Enabled check box to
enable the theme
4. Click the Default radio button to
make this theme the default theme
5. Click the Save configuration button
2
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
3
1
5
4
20
Themes: Changing Themes – Ex. 03 Change Default Theme – Theme Changes and Block Layout
OSU Grey Front Page Display
OSU Orange Front Page Display
Often, especially in the case of custom blocks, when themes are changed over the blocks may
disable themselves. This is especially true when the new theme has a different layout region
configuration. If you switch themes and your blocks are gone, just re-enable them.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
21
Themes: OSU Orange
Distinguishing features of OSU Orange:
Optional
Rotating Header
Static, selectable
Header Icon
Contoured
and shaded
search bar
Large, bold menu
links
Fluid Width
“Frame”
Orange, grey, &
white color theme
Verdana font
Let’s learn a little more about this theme…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
22
Themes: OSU Orange – Layout Regions
The OSU Orange theme, like OSU Grey, has seven different layout regions in which groups
of content can be placed:
Top Horizontal Bar
bordered by Left &
Right Sidebars
Top Horizontal Bar
Fluid width matte
Pre-Content
Content
Right Sidebar
Left Sidebar
Content
Fixed width border
Post-Content
Footer
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
23
Fluid width regions
Themes: OSU Orange – Configuration
1
OSU Orange also has several configuration
options:
1. Toggle display group
– Turns element displays on or off
2. Shortcut icon settings group
– Shortcut icon (“Favicon”) upload
2
3. Theme-specific settings group
– OSU Header Icon
Change static, iconic images
– Breadcrumb settings
Turns breadcrumbs on and off
– Theme development settings
For developers
3
– Rotating Header Image Directory
Toggles a custom rotating header
– Front Page Header Image
Configures Front Page Header Activity
– Secondary Page Header Image
Configures Secondary Page Header Activity
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
24
Themes: OSU Orange – Configuration – Ex. 04 Header Icon Image
To change the OSU Header Icon:
1. Scroll down to the Themespecific settings group
2. Select an OSU Icon Image from
the drop down box
3. Click the Save configuration
button at the bottom of the
screen
1
2
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
25
Themes: OSU Orange – Configuration – Ex. 04 Header Icon Image -- Completed
The changed icon will show in the left
corner of the header
All icons have a transparent
background and are, in some way,
iconic representations of OSU
New iconic images can not be added
through the Drupal configuration
panel per University Advancement
specifications
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
26
Themes: OSU Orange – Configuration – Ex. 05 Insert OSU Orange Header Images – Create Directory
Inserting custom header images in
OSU Orange is the same as with OSU
Grey:
1. Scroll down the page to the
Rotating Header Image Directory
group and click the “Use a
custom rotating header
location?” box
2. The Rotating header images
directory field will appear – enter
the text meals after “orange/”
1
2
– This will create a directory in the site’s file
system to hold images from the
corresponding workshop materials
3. Click the Save configuration
button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
3
27
Themes: OSU Orange – Configuration – Ex. 05 Insert OSU Orange Header Images – Delete Default Images
The default images are automatically
loaded into the new folder you created
from the configuration panel – these
can be deleted or used as desired. For
our purposes, we’ll delete them:
1. In the Navigation menu, click on
My account > File browser tab
2. Click on the folder titled orange
and then the sub folder titled
meals
3. Select the first image file in the list,
then hold the Ctrl + A keys to
select all files
4. Click the Delete link
1
4
3
2
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
28
Themes: OSU Orange – Configuration – Ex. 05 Insert OSU Orange Header Images – Upload New Images
Now, upload the new images from
your workshop materials:
1.Click on the Upload link to
open the uploader
2.Click on the Browse button
and browse to
2
1
Desktop
d06-explore-osu-themes-lab
ex-05 folder
meals
3. Select the first file in the
folder and click the Upload
button
Repeat this process until all files in
the meals folder are uploaded
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
29
3
Themes: OSU Orange – Configuration – Ex. 05 Insert OSU Orange Header Images – Configure Header Activity
Now, return to Administer > Site
building > Themes > OSU Grey >
Configure to finish the configuration:
1
1. In the Front Page Header Image
group
2
– Select a Rotating Header Type
2. In the Secondary Page Header
Image group
– Select a Secondary Page Header Type
 short header option shows no image
 tall header option shows an image
– Select a Rotating Header Type
3. Click the Save configuration
button
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
30
Themes: OSU Orange – Configuration – Ex. 05 Insert OSU Orange Header Images – Completed
Front Page Display
Secondary Page Display
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
31
Themes: Now You Do It – Custom Headers Lab
The provided workshop materials have a substantial amount of images grouped into
different categories. There exists a set each for OSU Grey and OSU Orange.
Once the initial uploading process is done, the site builder can switch back and forth
between these image sets as desired to freshen up the site. For example, a set of images
for each season could be uploaded and switched as the season changes.
Add another set of images, of your choosing, to either the OSU Orange theme or the OSU
Grey theme.
Create a new directory
1. Choose the image sets you want to
use from the training materials
folder, note the titles
2. Go to Administer > Site building >
Themes > configure link
3. In the Rotating images directory,
change the last part of the text to the
same name as the folder that holds
your images
Update images
Finish Configuration
1. Go to My account > File browser tab
2. Open image folder, select first image
in list, hold down Ctrl + A keys, click
Delete link
3. Click Upload link to open uploader
4. Browse to training materials on
desktop
5. Upload images from desired folder
4. Click the Save configuration button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
32
1. Return to Administer > Site building >
Themes > configure link
2. Enter Front Page image settings
3. Enter Secondary Page image settings
4. Click the Save configuration button
Themes: Breadcrumb Settings
Breadcrumbs are a navigation tool used to display the path a user has traveled on a web
site. They are especially handy on large sites. Typically, breadcrumbs are displayed using
a small font at the top of a screen.
OSU Orange Breadcrumbs
OSU Grey Breadcrumbs
Both OSU Grey and OSU Orange allow for breadcrumb configuration.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
33
Themes: Breadcrumb Settings – Ex. 06 Configure Breadcrumbs – Basic Settings
To configure Breadcrumbs for either OSU
Grey or OSU Orange – go to the respective
theme’s configuration screen via Administer
> Site building > Themes > configure link:
1. Scroll down to the Breadcrumb settings
group and select settings
1
– Display breadcrumb
Yes, Admin section only, or No options
– Breadcrumb separator
Choose a character to separate breadcrumbs
– Show home page link in breadcrumb
Allow or hide the Home page link
– Append separator to end of breadcrumb
Adds separator at end of breadcrumb trail
– Text in First Breadcrumb
Change the reference name for your Home page
– Breadcrumb Prefix Text
Add off-site breadcrumb links to point to parent
sites
2
2. Click the Save configuration button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
34
Themes: Breadcrumb Settings – Ex. 06 Configure Breadcrumbs – Change Home Reference
To change the reference for the
Home breadcrumb, do the
following:
1. In the Text in First Breadcrumb
field, enter the text you want
to see for your Home page
breadcrumb.
2. Click the Save configuration
button
1
2
This is the breadcrumb
affected by this setting.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
35
Themes: Breadcrumb Settings – Ex. 06 Configure Breadcrumbs – Create Breadcrumb Prefix
To add a breadcrumb prefix to your
breadcrumb trail do the following:
1. In the Breadcrumb Prefix Text field,
enter the HTML link tag and URL
that you want your breadcrumb to
point to.
Here’s how to code a link tag:
<a href=“http://example.com”>Example</a>
1
Several of these in a row can be established
if something like a hierarchy is needed.
2. Click the Save configuration button
2
This is the breadcrumb
affected by this setting.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
36
Themes: Global Theme Configuration
There are some theme settings that are applied site wide.
These settings are known as Global Theme Settings and will
produce the same effect no matter what theme is used on a site.
Global Theme Settings include things such as:
• Whether to display certain elements or not
• Whether post information should be shown
• What content types post information should be shown on
Let’s change the Post information settings…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
37
Themes: Global Theme Configuration – Ex. 07 Change Post Information
Post information is similar to a “by-line”
in print media. For some content types,
such as a Story, this might be desired.
For other content types, though, it
might actually be misleading or
distracting. To change these settings:
1
2
1. From within the Navigation menu
click on Administer > Site building >
Themes > Configure tab
2. In the Display post information on
group, check the Announcement
and Story types and make the
others blank
3. Click the Save configuration button
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
38
Themes: Global Theme Configuration – Now You Do It – Post Settings Lab
Create a new Story to test the new
post settings
Go to = Create Content > Story
Title field = Recall Alert: 2009-06-03
Menu settings group = None
Body field = use lab materials:
• ex-07.doc
Input format group = Full HTML
Publishing options group = Published
Preview and Save
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
39
Themes: Global Theme Configuration – Compare Story v. Page Post Information
Post information on
Story content type
Now compare the Story to the
Home page, which uses a Page
content type
The Story will display post
information while the Page does
not
No post information on
Page content type
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
40
Site Information Configuration
There are several different areas within Drupal that allow or
require configuration. Following are just a few examples:
• Themes
• Blocks
• Input formats
• Roles
• Permissions
For this workshop, we’ve focused on configurations for the OSU
Grey and OSU Orange themes.
There are a couple of general configurations that would be good
to make at this point as well, such as the site name (in the upper
left corner of your screen) and the e-mail of the administrator or
group in charge of the site.
For this we’ll need to examine the Site information configuration
options…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
41
Site Information Configuration: Ex.08 Change Site Information
To change the site information:
1. Go to Administer > Site
configuration > Site information
2. Change the Name field to Food for
Thought
1
3. Change the E-mail address field to
your OSU e-mail address
2
Note: In practice, it’s best to have a group email established for contact information –
contact your IT Help Desk
3
4. Click the Save configuration button
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
42
Site Information Configuration: Ex. 08 Change Site Information – Completed
Take a look at the site’s Home page, then log out of the site altogether to see how an
anonymous user would view the site
Contributor Display
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
Anonymous Display
43
Summary
The OSU Grey and OSU Orange themes allow for a great deal of
variation upon the original themes.
It’s important to remember that, as our Drupal sites grow more
complex, different features grow more intertwined. Changes to
one thing can affect the outcome of another thing – either for the
positive or negative.
Now that the look and feel has been examined and established,
it’s time to turn our eyes towards structure and layout – what’s a
sensible, logical structure for your site, how can menu items can
be further optimized, what additional features we can add to our
site to both help create efficiencies and increase functionality?
These questions and more are answered in the model based series
of workshops that we provide: Developing Site Structures,
Formatting Blocks, and Generating Custom Content Types.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
44
Conclusion
This completes the OSU Drupal 6 Exploring OSU Themes tutorial.
For additional tutorials, please visit CWS Training at:
http://oregonstate.edu/cws/training
To view and register for all OSU Drupal 6 Workshops, visit the
Professional Development Central Registration site at:
http://oregonstate.edu/cws/register
To submit a Help Ticket or make a Site Request on-line, go to:
http://oregonstate.edu/cws/contact
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
45