Customizing the Style Sheet
There are two ways of customizing the look-and-feel via stylesheet changes:
- overriding the default styles for certain elements, and
- replacing them with your own style definitions.
Either way, you need to know the class names and definitions for the default styles.
If you use FireFox, the Firebug Add-on is a wonderful tool to inspect CSS elements of any page
If you use Chrome, the "Inspect Element" tool is rad
If you use Internet Explorer, use the F12 button.
1. Custom JS/CSS Code
Get to this option by heading to Admin Stuff > Look & Feel.
On the System-Wide Settings tab, scroll to the Custom JS/CSS Code box.
- Open a STYLE tag
- Type in your new class or ID definitions
- Close the STYLE tag
- Voila, you're done!
This method is simple, but it has a drawback - it slows downloading of your LibAnswers pages, since the styles need to load every time a user visits any page in your system.
Which brings us to the 2nd, more effective, way of customizing styles...
2. Create a New Stylesheet
- Download the current stylesheet at http://libanswers.com/css111/la.css
- Make any changes you'd like to the CSS classes defined in the file
- Delete any classes you don't customize (very important!)
- Upload your customized copy to a local webserver
- Head to Admin Stuff > Look & Feel, and scroll down the System-Wide Settings page to the Custom JS/CSS Codebox.
Add a reference to your new stylesheet using standard CSS file include syntax.
For example, let's say you named your new stylesheet libanswers.css, and uploaded that stylesheet to your institution's webservers, e.g. http://www.myinst.edu/styles/libanswers.css
In the Custom JS/CSS Code section, you would write the following:
<link rel="stylesheet" type="text/css" href="http://www.myinst.edu/styles/libanswers.css" />