drupal training series n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Drupal Training Series PowerPoint Presentation
Download Presentation
Drupal Training Series

Loading in 2 Seconds...

play fullscreen
1 / 45

Drupal Training Series - PowerPoint PPT Presentation


  • 131 Views
  • Uploaded on

Drupal Training Series. Foundations for OSU Drupal 6 Exploring OSU Themes. 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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Drupal Training Series' - patience-casey


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
drupal training series
Drupal Training Series
  • Foundations for OSU Drupal 6
  • Exploring OSU Themes
what we ll be covering
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
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: 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
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
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
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…
themes osu grey layout regions

Content

Top Horizontal Bar

Left Sidebar

Pre-Content

Right Sidebar

Content

Post-Content

Footer

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

Fluid width matte

Fixed width border

Fluid width regions

themes osu grey themes control panel
Themes: OSU Grey – Themes Control Panel
  • To configure the OSU Grey theme, you must go through the Themes control panel:
    • Click on Administer > Site Building > Themes to view the collection of installed themes on the site, which appear on the List tab
    • Scroll down the page to the OSU Grey theme and click on the configure link within its row

1

2

themes osu grey configuration
Themes: OSU Grey – Configuration

1

  • There are several different configuration options for OSU Grey:
    • Toggle displaygroup
      • Turns element displays on or off
    • Shortcut icon settings group
      • Shortcut icon (“Favicon”) upload
    • 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

2

3

themes osu grey configuration ex 01 configure header color scheme
Themes: OSU Grey – Configuration – Ex. 01 Configure Header Color Scheme
  • To configure the Color Scheme for OSU Grey:
    • Scroll down the screen to the Color Scheme group
    • Select one of the options from the Color Scheme drop down box – the options are:
      • Grey
      • Orange
      • Tan
    • Click the Save configuration button at the bottom of the screen

1

2

3

themes osu grey configuration ex 01 configure header color scheme completed
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
themes osu grey configuration custom header images
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
Themes: OSU Grey – Configuration – Ex. 02 Insert OSU Grey Custom Images – Create Directory
  • To insert a custom header image into OSU Grey:
    • Go to Administer > Site building > Themes and click on the configure link in the OSU Grey row
    • Scroll down the page to the Rotating Header Image Directory group and click the “Use a custom rotating header location?” box
    • 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
    • Click the Save configuration button

1

2

3

themes osu grey configuration ex 02 insert osu grey header images delete default images
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:
    • In the Navigation menu, click on My account > File browser tab
    • Click on the folder titled grey and then the sub folder titled ingredients
    • Select the first image file in the list, then hold the Ctrl + A keys to select all files
    • Click the Delete link

1

2

3

4

themes osu grey configuration ex 02 insert osu grey header images upload new images
Themes: OSU Grey – Configuration – Ex. 02 Insert OSU Grey Header Images – Upload New Images
  • Now, upload the new images from your workshop materials:
    • Click on the Upload link to open the uploader
    • Click on the Browse button and browse to

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

1

2

3

themes osu grey configuration ex 02 insert osu grey header images configure header activity
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:
    • In the Front Page Header Image group
      • Select a Rotating Header Type
    • 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
    • Click the Save configuration button

1

2

3

themes osu grey configuration ex 02 insert osu grey header images completed configuration
Themes: OSU Grey – Configuration – Ex. 02 Insert OSU Grey Header Images – Completed Configuration
  • Front Page
  • Secondary Page with graphic option
themes changing themes
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
Themes: Changing Themes – Ex. 03 Change Default Theme
  • To change a theme:
    • Go to the Themes list at Administer > Site building > Themes
    • Scroll down to the OSU Orange theme
    • Click the Enabled check box to enable the theme
    • Click the Default radio button to make this theme the default theme
    • Click the Save configuration button

1

5

2

3

4

themes changing themes ex 03 change default theme theme changes and block layout
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.
themes osu orange
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…
themes osu orange layout regions

Content

Left Sidebar

Top Horizontal Bar

Right Sidebar

Pre-Content

Content

Post-Content

Footer

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

Fluid width matte

Fixed width border

Fluid width regions

themes osu orange configuration
Themes: OSU Orange – Configuration

1

  • OSU Orange also has several configuration options:
    • Toggle display group
      • Turns element displays on or off
    • Shortcut icon settings group
      • Shortcut icon (“Favicon”) upload
    • 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

2

3

themes osu orange configuration ex 04 header icon image
Themes: OSU Orange – Configuration – Ex. 04 Header Icon Image
  • To change the OSU Header Icon:
    • Scroll down to the Theme-specific settings group
    • Select an OSU Icon Image from the drop down box
    • Click the Save configuration button at the bottom of the screen

1

2

3

themes osu orange configuration ex 04 header icon image completed
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
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:
    • Scroll down the page to the Rotating Header Image Directory group and click the “Use a custom rotating header location?” box
    • 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
    • Click the Save configuration button

1

2

3

themes osu orange configuration ex 05 insert osu orange header images delete default images
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:
    • In the Navigation menu, click on My account > File browser tab
    • Click on the folder titled orange and then the sub folder titled meals
    • Select the first image file in the list, then hold the Ctrl + A keys to select all files
    • Click the Delete link

1

4

3

2

themes osu orange configuration ex 05 insert osu orange header images upload new images
Themes: OSU Orange – Configuration – Ex. 05 Insert OSU Orange Header Images – Upload New Images
  • Now, upload the new images from your workshop materials:
    • Click on the Upload link to open the uploader
    • Click on the Browse button and browse to

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

2

3

1

themes osu orange configuration ex 05 insert osu orange header images configure header activity
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:
    • In the Front Page Header Image group
      • Select a Rotating Header Type
    • 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
    • Click the Save configuration button

1

2

3

themes osu orange configuration ex 05 insert osu orange header images completed
Themes: OSU Orange – Configuration – Ex. 05 Insert OSU Orange Header Images – Completed
  • Front Page Display
  • Secondary Page Display
themes now you do it custom headers lab

Create a new directory

    • Choose the image sets you want to use from the training materials folder, note the titles
    • Go toAdminister > Site building > Themes > configure link
    • In the Rotating images directory, change the last part of the text to the same name as the folder that holds your images
    • Click the Save configuration button
  • Update images
    • Go to My account > File browser tab
    • Open image folder, select first image in list, hold down Ctrl + A keys, click Delete link
    • Click Upload link to open uploader
    • Browse to training materials on desktop
    • Upload images from desired folder
  • Finish Configuration
    • Return to Administer > Site building > Themes > configure link
    • Enter Front Page image settings
    • Enter Secondary Page image settings
    • Click the Save configuration button
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.
themes breadcrumb settings
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.
  • Both OSU Grey and OSU Orange allow for breadcrumb configuration.

OSU Orange Breadcrumbs

OSU Grey Breadcrumbs

themes breadcrumb settings ex 06 configure breadcrumbs basic settings
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:
    • Scroll down to the Breadcrumb settings group and select settings
      • Display breadcrumb

Yes, Admin sectiononly, 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

    • Click the Save configuration button

1

2

themes breadcrumb settings ex 06 configure breadcrumbs change home reference
Themes: Breadcrumb Settings – Ex. 06 Configure Breadcrumbs – Change Home Reference
  • To change the reference for the Home breadcrumb, do the following:
    • In the Text in First Breadcrumb field, enter the text you want to see for your Home page breadcrumb.
    • Click the Save configuration button

1

2

This is the breadcrumb affected by this setting.

themes breadcrumb settings ex 06 configure breadcrumbs create breadcrumb prefix
Themes: Breadcrumb Settings – Ex. 06 Configure Breadcrumbs – Create Breadcrumb Prefix
  • To add a breadcrumb prefix to your breadcrumb trail do the following:
    • 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.

    • Click the Save configuration button

1

2

This is the breadcrumb affected by this setting.

themes global theme configuration
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 informationsettings…
themes global theme configuration ex 07 change post information
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:
    • From within the Navigation menu click on Administer > Site building > Themes > Configure tab
    • In the Display post information on group, check the Announcementand Story types and make the others blank
    • Click the Save configuration button

1

2

3

themes global theme configuration now you do it post settings lab
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 optionsgroup = Published
  • Preview and Save
themes global theme configuration compare story v page post information
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
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
Site Information Configuration: Ex.08 Change Site Information
  • To change the site information:
    • Go to Administer > Site configuration > Site information
    • Change the Name field to Food for Thought
    • 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

    • Click the Save configuration button

1

2

3

4

site information configuration ex 08 change site information completed
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
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
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