Drupal Training Series

This work is licensed under a Creative Commons Attribution-

NonCommercial-ShareAlike 3.0 United States License

Drupal Training Series

Foundations for OSU Drupal 6Exploring OSU Themes

http://creativecommons.org/licenses/by-nc-sa/3.0/us/

Provided by Central Web Services541-737-1189http://oregonstate.edu/cws 2

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


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.


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– Font Type– Font Size– Line Spacing

• Backgrounds– Colors– Gradients

• Images– Size– Borders– Positioning

• Layout– 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.


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.


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…


Themes: OSU Grey

Distinguishing features of OSU Grey:

Optional rotating header

Clean, silvery gradient fill

The default display looks pretty nice, but it can be added to…

Arial font

Standard search bar

Front Page Display

Secondary Page Display

Arial font in menus

No image, dark charcoal color


Themes: OSU Grey – Layout Regions

The OSU Grey theme has seven different layout regions in which groups of content can be placed:

Content

Left Sidebar Right Sidebar

Pre-Content

Content

Post-Content

Footer

Top Horizontal Bar

Top Horizontal Bar stretches across width

of all lower regions

Fixed width border

Fluid width regions

Fluid width matte


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


Themes: OSU Grey – Configuration

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

3. Theme-specific settings group– Color Scheme

Change header colors– Breadcrumb settings

Turns breadcrumbs on and off– Theme development settings

For developers– 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

1

2

3


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

3. Click the Save configuration button at the bottom of the screen

1

3

2


Themes: OSU Grey – Configuration – Ex. 01 Configure Header Color Scheme – Completed

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.

Front Page Display



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


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/”

– 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

1

2

3


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. In the Navigation menu, click on My account > File browser tab

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

4. Click the Delete link

1

4

2

3


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

Desktopd06-explore-osu-themes-lab

ex-02 folderingredients 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

1

2

3


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. In the Front Page Header Image group

– 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



1

2

3


Themes: OSU Grey – Configuration – Ex. 02 Insert OSU Grey Header Images – Completed Configuration

Secondary Page with graphic option

Front Page


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.


Themes: Changing Themes – Ex. 03 Change Default Theme

To change a theme:1. Go to the Themes list at Administer

> Site building > Themes2. Scroll down to the OSU Orange

theme3. Click the Enabled check box to

enable the theme4. Click the Default radio button to

make this theme the default theme5. Click the Save configuration button

1

52 3 4


Themes: Changing Themes – Ex. 03 Change Default Theme – Theme Changes and Block Layout

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.

OSU Grey Front Page Display OSU Orange Front Page Display


Themes: OSU Orange

Distinguishing features of OSU Orange:

Optional Rotating Header

Orange, grey, & white color theme

Let’s learn a little more about this theme…

Static, selectable Header Icon

Verdana font

Contoured and shaded search bar

Large, bold menu links

Fluid Width “Frame”


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:

Content

Left SidebarRight Sidebar

Top Horizontal Bar

Pre-Content

Content

Post-Content

Footer

Top Horizontal Bar bordered by Left &

Right Sidebars

Fixed width border

Fluid width regions

Fluid width matte


Themes: OSU Orange – Configuration

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

3. Theme-specific settings group– OSU Header Icon

Change static, iconic images– Breadcrumb settings

Turns breadcrumbs on and off– Theme development settings

For developers– 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

1

2

3


Themes: OSU Orange – Configuration – Ex. 04 Header Icon Image

To change the OSU Header Icon:1. Scroll down to the Theme-

specific settings group2. Select an OSU Icon Image from

the drop down box3. Click the Save configuration

button at the bottom of the screen

3

1

2


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


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/”

– 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 3

1

2


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

23

4


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

Desktopd06-explore-osu-themes-

labex-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

12 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. In the Front Page Header Image group


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



1

2

3


Themes: OSU Orange – Configuration – Ex. 05 Insert OSU Orange Header Images – Completed


Front Page Display


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

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

Finish Configuration

1. Return to Administer > Site building > Themes > configure link

2. Enter Front Page image settings

3. Enter Secondary Page image 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.

Both OSU Grey and OSU Orange allow for breadcrumb configuration.

Themes: Breadcrumb Settings

OSU Grey Breadcrumbs OSU Orange Breadcrumbs


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

– Display breadcrumbYes, Admin section only, or No options

– Breadcrumb separatorChoose a character to separate breadcrumbs

– Show home page link in breadcrumbAllow or hide the Home page link

– Append separator to end of breadcrumbAdds separator at end of breadcrumb trail

– Text in First BreadcrumbChange the reference name for your Home page

– Breadcrumb Prefix TextAdd off-site breadcrumb links to point to parent sites

2. Click the Save configuration button2

1


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.


1

2

This is the breadcrumb affected by this setting.


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>

Several of these in a row can be established if something like a hierarchy is needed.


This is the breadcrumb affected by this setting.

1


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…


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. 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


1

2


Themes: Global Theme Configuration – Now You Do It – Post Settings Lab

Create a new Story to test the new post settingsGo 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


Themes: Global Theme Configuration – Compare Story v. Page Post Information

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

Post information on Story content type

No post information on Page content type


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…


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

3. Change the E-mail address field to your OSU e-mail address

Note: In practice, it’s best to have a group e-mail established for contact information – contact your IT Help Desk


1

4

2

3


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 Anonymous Display


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.


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

Drupal Training Series

Documents

Transcript of Drupal Training Series