This site requires JavaScript to be enabled
IE BUMPER
IE BUMPER
Knowledge Home | Print
ARTICLE NOT FOUND

Change text and background colors in Web CMS title area

Share URL:      Article: KB0000252 Published: 2014-05-14 Last modified: 2016-05-19

Question

How do I change text and background colors in the title area?

Overview

The title area in the site_configuration file is already incredibly versatile allowing you to add a logo, add a background image, update the site title, or for the more advanced among you, an XHTML block where you can define your own stylings in HTML and CSS.

But what about the background color for the site title area block? What if plain ol' white doesn't do it for you? Or what if you apply an image but now the dark text is almost impossible to see?

Audience: Site managers and administrators
Difficulty: Advanced

Identity Standards for UC Davis

Some among us are creative geniuses with a rare eye for color combinations, interior design and matching one's socks to their outfits. Some of us aren't so lucky. The web team from University Communications is here to help; the Identity Standards color page has all the official color schemes and codes used for official university business. Depending on which CMS template scheme you decide to use, there's a variety of compatible color codes you can use in your title area.

It's all in the contrast

If you decide to customize the background color or the text color of the title area, please keep in mind that some users viewing your page may have partial sight or color deficiencies. An article from Lighthouse International explains how to create effective color contrast to make certain your pages are as accessible as possible.

Answer

Customize the background color of the title area

  1. Click New > File and create a file named 'supplemental.css' and save it under /Base Folder/local_resources/css/.
  2. Click on your new file and select the Edit tab.
  3. Enter these lines:
/*------------------------------SITE TITLE AREA BACKGROUND COLOR--------------------------*/ 
#title_area_content  {background-color: [[your color here]];}
  1. Replace the double square brackets with your hexadecimal code (example: #FFFFFF;) or web-friendly color name (example: Alice Blue). Click Submit to save your change.
  2. Go to your site_configuration file under /Base Folder/_configuration and click the Edit tab.
  3. Click on "Site Specific Files" and then attach your new supplemental.css to the site-specific CSS section under the "Supplemental Files" subheading. Click Submit to save your changes.
  4. When you check any of your pages, you should see your color choice in the header.
  5. Remember: when you publish your site, make certain to also publish your new 'supplemental.css' file so the color scheme will also appear on your live web site.

Before, with the default white background:

After, with the modified pink background:

Customize the site title's text color of the title area

  1. Follow the above steps and add the following piece of code to the supplemental.css on its own or in addition to the background color change.

/*------------------------------SITE TITLE COLOR AREA------------------------------*/
#site_title #title.heading h1 a, #site_title #title.heading h1 a:visited {
color: [[your color]];}

  1. Replace the double square brackets with the hexidecimal name or web-safe name of your choice, though again we recommend using a color from the official color palette outlined in the Identity Standards color page.

Before, with the default dark blue text:

After, with the modified white site title:

Troubleshooting

The background color isn't showing up.

  • Did you attach the supplemental stylesheet? You can attach it globally on the site_configuration file or to the page settings area of an individual page.
  • Check your code. Did you enter the CSS code shown above properly?
  • Is there a background image in use in the title block area? If an image is present, the image takes precedence over any color indicated. To have the background color, remove the image from the site_configuration file.


Have Knowledge Base feedback?

Email ithelp@ucdavis.edu with any suggestions, updates, or comments regarding the UC Davis Knowledge Base.



 Attachments: