New OU-Libraries Branded Drupal Sites
- Jayson Marsh (Unlicensed)
Analytics
New OU Libraries-Branded Drupal Sites
- Library Logo
- Setting Up Fonts
- User Login
- Trademarked Phrases
- Web and Digital Colors
- Updated Content and Links
- Global Navigation Bar
- Global Footer
- Navigation Bar
About the Theme (oulib_bootstrap)
The theme to be utilized for all new OU Libraries-branded websites is called “oulib_bootstrap”. This essentially stands for “OU Libraries Base Theme”. It contains the fundamental code (PHP and CSS) for the look and feel of the OU Libraries web brand, including the universal OU header and footer, and the OU Libraries logo. It also contains an image folder with all of these core graphical items.
On Github: https://github.com/OULibraries/oulib_bootstrap
(You will also need the bootstrap base theme installed for this to work)
Things to remember:
- Please create a homepage for your site. Drupal will have very sparse placeholder content, but you will need to replace it with your own.
- You will need to create an “About This Site” page to account for the link in the universal footer. The path for it needs to be /aboutsite.
- Do not place any content blocks in the “Primary” & “Secondary” regions. Place them only in the “Content” region.
- The Menu block goes in the “Menu” region.
Library Logo
Although the base theme has an area predefined for the OU Libraries logo to appear within, the image itself requires a block to be created and placed for the logo image to show.
Simply create a new block with “Library logo for header region” as its block description (omit title). Then, copy and paste this code into the block body area:
<div class="logo"><a href="http://libraries.ou.edu" target="_blank"><img alt="OU Libraries Logo" class="img-responsive" src="/sites/all/themes/oulib_base/img/ou_lib_logo.png" style="width:650px" /></a></div>
After putting in the above code, make sure that text format is set to “Full HTML”, and then place it in the “Library Logo” region. Save it, and ensure that it appears.
-----------------------------
User Login
First, Drupal should generate a “user login” block automatically for your site. You will need to place it in the regions called “login left” and “login right”. Once placed, they will appear in the upper-right portion of the page.
This will be replaced by the CAS login and logout block. Covered in this document under section six.
Remember, the “login” blocks should only be available to anonymous users and the “logout” blocks should only be available to authenticated users.
-----------------------------
You must also adhere to the OU branding guidelines found here. http://www.ou.edu/brand
A few key things:
Elements trademarked by OU:
- PROMOTE the university through licensed products and other licensing arrangements,
- PRESERVE OU’s history by protecting historically significant and important trademarks,
- PROTECT OU’s image and reputation through trademark usage, ensuring entities using OU’s trademarks for commercial purposes have the legal right to do so
- PROFIT from the sale of officially licensed merchandise and other licensing agreements, which fund various university programs.
Trademarked Phrases
Phrases trademarked by OU include The University of Oklahoma®, There’s Only One Oklahoma®, and Boomer Sooner®. A complete list of OU's trademarks can be viewed at OU Trademarks.
Two Line Logo
Three Line Logo
Four Line Logo
Web and Digital Colors
These colors should only be used for web and digital materials. Black and white may also be used.
#841617
DO NOT USE, use black or white as a replacement
Updated Content & Links
- All pages must keep content updated with the most current information and dates/deadlines.
- Avoid broken links or links to pages that have moved.
- Write clear, concise page titles, headlines and body copy.
- Include one H1 Title on every page.
- Do not post pages marked “under construction.”
- Links from a University of Oklahoma page to any non-University site must not imply University endorsement.
Global Navigation Bar
- All OU websites must include the global navigation bar.
- The global navigation bar provides users an easy way to get to navigate selected pages of the OU Website.
- Any alterations to the Global Navigation bar must be approved by Web Communications.
Installation Instructions for Global Navigation Bar
Step One
Download the zip file containing the OU global header and install it in your parent directory.
Step Two
Place the code snippet below on the line directly BELOW the opening <body> tag.
<div class="globalheader">
<div class="globalheader-wrapper">
<ul>
<li><a class="tip home" href="http://www.ou.edu/web.html" alt="OU Home link"><span>OU Homepage</span></a></li>
<li><a class="tip search" href="http://www.ou.edu/content/ousearch.html" alt="OU Search link"><span>Search OU</span></a></li>
<li><a class="tip social" href="http://www.ou.edu/web/socialmediadirectory.html" alt="OU Social Media link"><span>OU Social Media</span></a></li>
<li class="wordmark">The University of Oklahoma</li>
</ul>
<div style="clear:both;"></div>
</div>
</div>
Step Three
Place the code snippet below on the line directly ABOVE the closing </head> tag.
<link rel="stylesheet" type="text/css" media="all" href="gloabalheader.css" />
<style type="text/css">.globalheader-wrapper { width:980px; }</style>
Step Four
The default width of the header is 980px. If your site's width is something other than that, edit the line below in your header section.
<style type="text/css">.globalheader-wrapper { width:980px; }</style>
Global OU Footer
The following information is required in the footer:
- Last updated date with address, phone number and email address for the department.
- Links to the accessibility, sustainability, HIPPA, OU job search, policies, legal notices, copyrights.
- Optional: links to department social media accounts
- Format and design should follow the design seen below (example: ou.edu/admissions)
-----------------------------
Navigation Bar
The appearance of the site’s navigation bar is governed by the theme’s CSS, so you will not need to generate any code of your own in order to make it appear and scale appropriately. Simply edit your main menu links within the Drupal dashboard as needed.
However, you will need to make sure that the “Main menu” block sits in the Menu region. You will also need to ensure that the “Main menu” block’s title is <none>. This addresses initial spacing issues you might encounter once you first assign the navigation bar to its region.