Using Cascading Style Sheet (CSS) to Style the Public View

The TES Public View provides a way to display your institution's transfer equivalencies, transfer guides, and articulation agreements to prospective students. In Public View Management and Customization, we introduced you to how TES Administrators could start customizing their institution's Public View. 

In this article, we will delve deeper into the look and feel of the Public View and get you started changing this through use of a Cascading Style Sheet (CSS).

Standard Styling

The TES Public View comes designed with a standard look and feel. If you choose to use the Public View's existing style, you will notice that it uses the colors, shading, and font styles of TES.

Why Use Custom Styling

TES provides you the flexibility to customize the styling of your Public View. You can change the colors of the background, shaded bars, text, and establish preferred fonts. 

What are some reasons you might want to change the styling of the Public View? Since users navigate to the Public View via your institution's website, you might wish for the Public View to match your institution's branding. TES allows you to do this by using a customized CSS or "Cascading Style Sheet."

What Can Be Styled?

• You can only style the elements named in the Public View code. You can’t use the style sheet to add features to the view, such as a graphical banner.

Are the Style Changes I Make Permanent? 

• No! If you decide you don't like the changes, it's easy to go back to TES' standard styling. We'll show you how below.

Understanding the CSS

Before you adjust your existing CSS, let's go over some of the basics of a CSS styling sheet's format

The Basic Format of CSS

CSS consists of a collection of individual blocks of code, each preceded by the name of the element to be styled. There are different classes of things, which aren't always consistently formatted (e.g. “a:link” vs. “.pagetitle”). Following each element is a block of code that tells a browser how to style the named aspect. Each of these style blocks is contained within braces (curly brackets); a “{” marks the beginning of the block, and a “}” marks the end. 

You will see lines that begin with “font-” and lines that start with “color:” followed by some values. Each line's end has a very important semi-colon, indicating the command is complete and separating it from the next one.

Anything contained inside slashes and asterisks (see highlighted below) is a note. A computer’s browser will know not to do anything with this text. You can use it to make notes to remember what you are doing in each code section. You can list the colors you are using in the style sheet, like in the example below.

Colors 

One of the most common means for setting color in a web page is to use hexadecimal (or just "hex") codes. For example, in a CSS, you might see "color: #660033". This hashtag and string of numbers are following it are the hex code for a specific color. The code is broken into three sets of digits that indicate how much red, green, and blue light are in the shade. The code for black is #000000 (no light). A green color might have a hex code of #009900 (lots of green light, little or no red/blue light). You might correctly guess that #660033 is going to be reddish-purple.

To determine the hex codes you will use to customize your Public View, use a “color picker” like this one provided by the w3schools. You can point at a color you want, and it will give you the hex code. You might also check with your institution’s publications office to see if they will provide you with “official” hex codes for your institution’s colors.

Fonts

Fonts come in two broad classes - serif and sans-serif. Serif-fonts have ornamental designs attached to the points; examples of these fonts include Times New Roman and Courier. Sans-serif fonts, on the other hand, lack these designs. Examples of sans-serif fonts are Helvetic or Arial.

Hard-and-fast rules in typography are hard to come by, but one safe methodology for beginners is to pick a single font to use or to choose one serif and one sans-serif, using one for titles and the other for body text. It often looks odd to pick two serif fonts or two sans-serif fonts and mix them.

When selecting a font, it's essential to consider whether the font is easily viewable, both aesthetically and in terms of availability. Using popular fonts may be your best choice - if someone is looking at your Public View but doesn't have the font you are using installed on their computer, the computer will try to substitute the "closest" match. 

Font lines tell the end-users computer, "I would like you to use this style for this element. If you don't have this style, then choose the closest one to it." In the example below, the user's computer is instructed to use Verdana or the closest sans-serif. 

Additionally, users can specify the font size and weight through commands like "font-size: 10pt;" and "font-weight: bold."

An excellent resource for choosing fonts is cssfontstack.com.  This site will tell you which standard fonts are likely to be on both PC and Mac computers.

How Will I Know What I Can Change in the CSS? 

The below screenshots of the Electric Kook-Aid Acid Test style sheet (a joke reference to the Tom Wolfe book) will help you determine what elements of the CSS can be changed. This style sheet turns each element a bright neon color when applied. 

Comparing this style sheet to the preview of your Public View will help you see which block of code is affecting what element on the page. For example, if you are wanting to change all Salmon-colored elements, you would search (CLTR+F) the CSS code for "#ff9999 (Salmon)" and change it in all places that it appears.

The GUIDES themselves show a further modification of text color, shading, and fonts.

Customizing Your Public View with CSS

We introduced you to the concept of a CSS, or "Cascading Style Sheet," above. This is an industry-standard way to format and style web pages without altering their content. We're going to show you how you can take the current TES Public View CSS and adjust it to change the colors of the Public View shaded bars, the text, and even set preferred fonts.

Steps

1. Navigate to Public View Management through the Match menu. Once there, click on the CSS Template link. A page of CSS code will appear. 
2. Open a plain text editor like Notepad. If using Windows, you can use Notepad. If using a Mac Mac, use TextEdit (in the Format menu at the top of the screen, choose “Make Plain Text”).
3. Once your editor opens, highlight the CSS code in your browser, copy it, and paste it into your editor. Keep a copy of your current TES Public View open for comparison. Make the adjustments you would like to the code to customize your Public View.
4. Go back to Public View Management and paste the code into the Custom CSS box. Press Submit.
5. Click on the Preview button to refresh the look and feel of your Public View. Seeing the changes can be tricky, though, because not all elements are on every page. You may have to navigate around to see the differences.
6. Don't like the changes you made? Go back to the Custom CSS box and remove the code you inserted. Then, click Submit again.