System-Wide SettingsHomepage SettingsBoxes and Sidebar
Pop-up WidgetEmbedded WidgetPop-up Question FormAPI Tools
Question FormSearch Form
General ChangesHomepageAnswer PageSidebarSystem BoxesBrowse & Search Pages
This is the "CSS" page of the "Customizing LibAnswers v1" guide.
Alternate Page for Screenreader Users
Skip to Page Navigation
Skip to Page Content

Customizing LibAnswers v1  

Customizing the look and feel of your LibAnswers system.
Last Updated: Feb 10, 2017 URL: http://help.springshare.com/customizela Print Guide RSS UpdatesEmail Alerts

CSS Print Page
  Search: 
 
 

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" />
 

FAQs: CSS

Description

Loading  Loading...

Tip