html5-img
1 / 45

Drupal Training Series

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

patience-casey
Télécharger la présentation

Drupal Training Series

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Drupal Training Series • Foundations for OSU Drupal 6 • Exploring OSU Themes

  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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  18. Themes: OSU Grey – Configuration – Ex. 02 Insert OSU Grey Header Images – Completed Configuration • Front Page • Secondary Page with graphic option

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

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

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

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

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

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

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

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

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

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

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

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

  31. Themes: OSU Orange – Configuration – Ex. 05 Insert OSU Orange Header Images – Completed • Front Page Display • Secondary Page Display

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

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

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

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

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

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

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

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

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

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

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

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

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

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

More Related