O-Space Feature: CSS Themes for E-Portfolios

This is the second in an occasional series of posts about the new features and tweaks added to O-Space in Summer and Fall 2011.

Over the years, students and faculty have felt constrained by the basic layout of the e-portfolio. The only changes that users could make were to change the header image and add text to the page footer. That has now changed with the introduction of CSS Themes. Users can now change backgrounds and font colors.

What Is CSS

CSS stands for Cascading Style Sheets. It is a scripting language used for formatting websites, used in conjunction with HTML. By defining the fonts, colors, and styles for text in a separate file, the underlying code for a webpage is kept small and simple and loads more quickly. In addition, when making changes to a style, you only have to edit one file instead of editing every single page.

Although CSS is used to style HTML, it uses a different syntax. Instead of using <angle brackets>, CSS uses {curly brackets}. Elements may begin with a period, .element, or a pound sign, #element. Each webpage is divided into blocks, often called “containers” or “divisions.” These blocks can be nested inside of each other. The default block is usually #body.

To learn more about CSS, visit the CSS Tutorial on W3Schools.com or CSS Fundamentals on Lynda.com


How to Customize the CSS Theme for an e-Portfolio

Warning: It is very easy to break CSS. Change at your own risk.

  1. Go to Portfolio Tools > Settings.
  2. Scroll down to the section Choose A Theme > Customize Theme > Custom CSS.
  3. Edit the CSS as you will.
  4. Click the Save button at the bottom of the page.

I set up a site on the Meta-Portfolio with more detailed instructions. It includes a page with the default CSS code in case you need/want to start over as well as sample code changes.

If you are using Firefox, check out the Firebug add-on. (For other browsers, try out the Firebug Lite bookmarklet.) IThis extension lets you view code and test CSS changes on the fly.