Styling Public View with CSS in TES 4.0

Over 3 years ago we introduced the ability for users to use CSS to customize the look and feel of their TES Public View.
That article helped users learn how to customize their own institution’s Public View. While most of the article is still relevant there have been a few changes in TES over the past three years.
TES 4.0 completely changed the architecture of TES’s public view function. As announced last year, a whole new version of the TES public view was released. The 4.0 update included many enhancements, one of which was a better organized Custom Style Sheet (CSS) for the Public View. Users can still customize the CSS to create more brand synergy when deploying the TES Public View within the context of their own institution’s website. Many of our TES clients are still using the standard Public View CSS as well as the old TES 3.0 public view link. So, let’s consider this a guide to migrating from TES 3.0 Public View to the new TES 4.0 Public View.

Check to see which version you are using

To see what version of the Public View you are using on your website, you will need to be able to see what link is being referenced. The easiest way to tell is to open your Public View. If you see the option to “FIND TRANSFER COLLEGE BY NAME” instead of “INSTITUTION SEARCH” then you are still using an older, TES 3.0 link. While we are not planning on turning off the 3.0 links, you cannot edit the CSS of that page any more, which means you will need to update the link to the new link found in Public View Management – Embed URL.
3.0

4.0

Styling your Public View

Any TES Administrator can change the look of their Public View. You don’t have to be familiar with making websites! We have made it really easy to update the CSS based on a Template found in Public View management.
Let’s get started.

1. Log into TES.
2. Using the top menu, choose Manage > Public View Management.
3. Scroll down to the input box labeled Custom CSS.
4. 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.
5. 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”).
6. Once you have your editor open, highlight the CSS code in your browser, copy it, and paste it into your editor.

Don’t know CSS? Don’t worry. We have some of the basics covered here: Basic Format, Understanding Colors, Changing Fonts. In regards to the TES template, there are several key areas most users would like to customize. The main classes are:

a, a:hover, a:active = Relates to the functions of hyperlinks on the site

/*gridview*/ = Classes located under this section will control the majority of content in the items returned when navigating TES’s public view.

/*primary button*/ = Classes located in this section of the CSS template control the majority of buttons in TES. You can control the look of the buttons normal, active and what happens when the curser is hovering over it.

There is more you can control in TES 4.0. To highlight these new classes we created a 4.0 version of our Electric Kool-Aid Acid Test. You can see the sample on our support site but if you want to see it in your Public View, you can find the updated CSS here: Electric Kool-Aid Acid Test.
The purpose of the “EKAAT” is to help you quickly and easily identify which elements on the Public View screen are being controlled by which blocks of text in the CSS. To use it, you will need to copy-and-paste the EKAAT text into your Public View in the appropriate TES management screen. Then open up the text in your editor and your Public View, side-by-side, so you can compare them.
At the top of the EKAAT is a list of all the colors used in the test and their related values, e.g. “#ff9999 (Salmon)”. Look at your Public View to see what you want to change. Then search within the TES CSS to see what value you need to update. If it is “Salmon” colored in the Public View, search (CTRL+F) the EKAAT text for “ff9999” and change that value to the desired color/style. Once you have finished editing your EKAAT text, cut-and-paste it into the “Custom CSS” box of your TES > Public View > Public View Management screen. (Also, you should save a back-up copy of the text somewhere locally.)

User-created examples of customized Public Views

Changing the colors to match institutional brand.
Point Loma Nazarene University

Changing the Font and colors to match of the institutions brand
Columbia College
Adding a custom logo into the page header and changing the colors to match institutional branding
Benedictine University

Other suggestions on applying your own style to the TES Public View

Contact the marketing or branding team at your institution. They will provide you with the correct color values and be able to provide suggestions, and possibly help you with the CSS.
Have fun with it! Play around with different colors. If you are worried you can always remove the link from your site and test various options. Also, you could just remove the custom CSS from the Custom CSS field, which will reset the Public View back to the default TES configuration. No harm, no foul.
When you finish up your customizations, share it with us! We would love to see what you’ve done. We can add these samples to our collection to help other users achieve their own custom public view.