The TES Public View is a quick way to get your equivalencies, stored in TES, in front of the public in a website to which you control access. Some important things to remember about the TES Public View for TES Admins:
- Changes in your TES equivalencies are reflected immediately in your Public View.
- Using the “hide” option for each equivalency will keep it from displaying in the Public View (except that it can optionally be displayed in a Group or Group Report).
- We provide the link to your Public View and the ability to configure some of its features under the “Manage” tab of TES.
- We, CollegeSource, do not make your Public View available to anyone, you must place a link to it or frame it into one of your institution’s web pages.
Peviously, your ability to configure the Public View was mostly restricted to which components appear; you had no control over the general look and feel of the page. This summer we enhanced TES to accept custom CSS style sheets for the Public View. Here’s what you should know about the style sheet feature:
- CSS, or “Cascading Style Sheet,” 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. There are many free resources out there for helping you learn CSS and some are linked below.
- 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 TES Admin page for configuring the Public View.
- ANYONE CAN DO IT!
- You literally can’t screw up. If you make a mess, all you have to do is delete all the text in the CSS input box and the Public View will “snap back” to its default styling. No harm, no foul.
Seriously, anyone can do it. That’s what this article is about – teaching you how to change the look and feel of your Public View using the new CSS input feature. It’s especially fun if you have never done any kind of computer programming because you get to monkey around with some code and feel really smart.
But first, here are example screens with the default styling versus the same screens with custom styling applied, to give you a general idea of what you can do.
Examples
More Examples (click to enlarge)
Editing CSS
Let’s get started.
- Log into TES.
- Using the top menu, choose Manage > Public View Management.
- Scroll down to the input box labeled Custom CSS.
- Under that box is a link that says “CSS Template.” Click on it and a page of CSS code will appear in your browser. DON’T PANIC! It is nowhere near as complicated as it looks.
- 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”).
- 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
You are now ready to customize your CSS code. Except that you may have no idea what any of the things you are looking at means! So, let me explain.
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 take a second and rename your version.
CSS consists of a bunch of individual blocks of code, and each is preceded by the name of thing 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 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).
Are you with me so far? We’re almost done with the basics. 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.
Colors
We’ll start with color. 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. You don’t have to know exactly what they mean, but it’s kind of fun. 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.
All of that is academic though. You don’t have to guess at codes, you can just 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 university colors. Institutions are very particular about such things!
Fonts
Messing around with fonts can be tricky. You should know a couple of things first.
- 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 indicate 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.
Enough of that. 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!” (Good CSS is all polite like that.) 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. (Duh.)
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.
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.)
The second helpful template is Cloudy Day, the conservative and calming slate blue template you see in the examples above. If you like a lot of what is going on there, you can start with this one rather than the default template.
Final Thoughts
- Be fearless. Remember that you can’t mess up because you can always empty out the input box and go back to the default style.
- When experimenting, remember to save any sheets you like 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.
Have fun and remember to share your best designs with me, tr**@co***********.com. We are always on the lookout for great-looking client sites!
This is excellent! Informative AND entertaining! Thank you. Can’t wait to play around with it.