Skip to main content
CollegeSource Production

Page 343 - 348

Using CSS to Style Your Public View

< Previous | Contents | Next >

 Preview the Public View before you deploy it using the CLICK TO PREVIEW button.

image

Your Read Me Text

will display here.

Your Transfer Resource Links will display here.

Filter the list by the first letter of the institution’s name.

View the “My List” of courses.

Search for a

TRANSFER COLLEGE BY NAME.

Navigate through pages of results.

Click on an institution name to see the equivalencies to courses from that institution

Click SEARCH to see the equivalencies to courses from that institution.

Click GUIDES to see Group Reports from that institution.

 The Public View layout is similar to the Equivalency Manager view available to Staff with the Equivalency Manager User Right assigned, with the notable differences that 1) users of the Public View cannot modify equivalencies, and 2) the Public View shows Group Reports in the same view whereas in TES, you would have to navigate into the school, then into the Groups and Group Reports feature to see these reports.

Using CSS to Style Your Public View

 CSS, or “Cascading Style Sheets”, is an industry-standard way to format and style web pages. Style sheets allow you to quickly change the look and feel of a web page, without altering its content.

 Styling, in this case, essentially means changing the colors of the Public View background, shaded bars, and the text, as well as setting preferred fonts.

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

 The basic process, explained in detail below, is to download a template to get you started, edit it in a basic text editor, and then cut-and-paste the code into an input box within the PUBLIC VIEW MANAGEMENT page in TES.

 You cannot break it! Even if you make a complete mess of your CSS, all you have to do is delete all the text in the CSS input box and click SUBMIT. The Public View will revert to its’ default styling.

Editing CSS:

1. CSS Template – Click on it and a page of CSS code will appear in your browser.

2. Separately, open a plain text editor. In Windows, you can use the Notepad application. On a Mac, use TextEdit (and in the Format menu at the top of the screen, choose “Make Plain Text”).

3. Once you have your editor open, highlight the CSS code in your browser, copy it, and paste it into your editor.

The Basic Format of CSS

The template begins like this. Anything contained inside slashes and asterisks (see highlighted below) is a note. A computer’s browser will know not to do anything at all with this text. You can use it to make notes to yourself to remember what you are doing in each section of code. Here the only note is to indicate this is the “default” CSS scheme for TES. You should rename your version.

image

CSS consists of a collection of individual blocks of code, and each is preceded by the name of element to be

styled. There are different classes of things, which you don’t really need to know about to make changes, but it explains why the elements named look like they aren’t 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 element. Each of these style blocks is contained within braces (curly brackets); a “{” marks the beginning of the block and a “}” marks the end. The first named element in this template is “a:link” which is all the text in the Public View that is a link (is hyperlinked to another location/page).

image

The stuff inside each block is pretty readable. (The default style sheet for TES is quite simple, as CSS goes.) You will see lines that begin with “font-” and lines that begin with “color:” which are followed by some values. At the end of each line is a very important semi-colon, indicating the command is complete and separating it from the next one.

image

Colors

One of the most common means for setting color in a web page is to use hexadecimal (or just “hex”) codes. When you see “color: #993333″ the hashtag and string of numbers following it is 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 should be used in the color. The code for black is #000000 (no light). A green might look like #009900 (lots of green light,

little or no red/blue light). Knowing that, you might guess that #993333 is going to be reddish, and you would be right. It’s the burgundy color you see in the default Public View look.

Use a “color picker” like this one provided by the w3schools: www.w3schools.com/tags/ref_colorpicker.asp. 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 give you “official” hex codes for your institution’s colors.

Fonts

Every font has a different profile. Some fonts are tall and narrow, others are squat. Some are easy to read on- screen and some aren’t. Messing around with fonts can alter the whole layout of a page, causing lines to wrap uncomfortably. While it may be fun to use some crazy fonts, it is best to stick with some basic, tried-and-true font sets.

The fonts you select for a page are subject to the availability on the end-user’s computer. Not every computer has every font installed. If you name a font the user’s computer doesn’t have, that computer will substitute in a font it does have that is “close” to the one named.

Fonts come in two broad classes – serif and sans-serif. You are looking at a sans-serif (no serif) font right now. It doesn’t have any ornamental doodads sticking off the points of the letters. Times New Roman, on the other hand, or even Courier, are serif fonts because they do have the doodads (the doodads are “serifs,” in case

you didn’t figure that one out yet). Pull up a document and type something in Helvetica or Arial (sans-serif) then

type the same thing in Times New Roman or Courier (serif) and you will immediately see the difference.

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 pick 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 together.

Here is what the font lines in the CSS are doing. This line, “font-family: arial black, sans-serif;” is basically saying to the end-user’s computer “I would like you to use Arial Black for this element. If you don’t have Arial Black then please choose a standard sans-serif font that you do have!” You will also see commands like “font-size:

10pt;” and “font-weight: bold;” – which set the size of the font and indicate whether it is bold or italic.

A great resource for choosing fonts is http://www.cssfontstack.com/. This site will tell you which common fonts are likely to be on both PC and Mac computers!

Getting Started & Resources

You are now ready to start monkeying around with your CSS. The best thing to do is to keep the preview of the Public View open in a separate tab. Change something in the CSS, press “Submit” at the bottom to update the CollegeSource database, then refresh your preview tab to see what was changed. Seeing the changes can be a bit tricky, though, because not all elements are on every page. You may have to navigate around to see the differences.

Standard (TES) Format:

This is the standard (TES) format. It is the default choice for your Public View. Colors, shading, and fonts match those in TES.

image

The “TES” color scheme:

 Red and black text

elements

 Yellow and gray shading

 Hovering over text does not result in a color change

We have pre-built two helpful CSS templates for you and placed them in the Support Center. The first is the Electric Kool-Aid Acid Test (a joke-reference to the famous book about hippies written by Tom Wolfe). This style sheet turns each element a goofy color so that, when you apply it, you can easily compare the CSS to the preview and determine which block of code is affecting which thing on the page. (E.g. match the block of CSS beginning with the note “/* orange */” to the orange thing in the Public View preview screen.)

image

The “Electric Kool-Aid

Acid Test” color scheme:

 Every text element

is a different color

 Variations of gray

shading

 Hovering over text produces a color change

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

image

The second helpful template is Cloudy Day. If you like a lot of what is going on there, you can start with this one rather than the default template.

image

The “Cloudy Day” or “CollegeSource” color scheme:

 Blue text

 Blue and gray shading

 Hovering over text produces a color change

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

image

 When experimenting, remember to save any sheets you like in your text editor before you tweak them and do a “save as” on your changed versions. That way you can always go back and grab the text from an earlier acceptable version.

 Remember there are still some limits to what you can do. The elements in the templates above contain ALL of the elements used in the Public View. If you add anything else it won’t do anything – or rather it will style something that isn’t there. Also, there is a character limit for the CSS. About the only way you should be able to break this is with endless notes or by adding extraneous elements. Just under the input box is an indicator, showing how many characters you have left.

  • Was this article helpful?