VuFind - Basic Theming Guide

"VuFind's standard default theme (blueprint) uses the Blueprint CSS library for layout. The default mobile theme (jquerymobile) is built with the jquerymobile library. Many basic design elements (such as colors and font sizes) can be customized through small CSS modifications, even if you do not have a detailed understanding of these frameworks."

The objective of this guide is to provide you with just enough knowledge to customize the look and feel of your VuFind instance by changing the logo and main color scheme.

Here are the directories and files we're primarily concerned with.

VuFind

  1. instances
  1. <your school directory>
  1. application
  1. themes
  1. blueprint
  1. css
  1. blueprint
  2. jquery-ui
  3. ie.css
  4. inspector.css
  5. print.css
  6. styles.css
  7. vudl.css
  1. helpers
  2. images
  3. js
  4. layouts
  5. templates
  6. theme.ini
  1. jquerymobile
  2. root
  1. cache
  2. config
  3. import
  4. httpd.vufind.conf

For now, we'll keep it simple by just modifying the existing blueprint theme, rather than creating a new theme.

Changing the Logo

First, you need to drop your school logo file into the blueprint/images directory. You should choose a high-quality png, jpg or gif file.

Next, you need to open /blueprint/css/styles.css in a text editor, and change the css to use the new image. You'll find this code somewhere around line 53 of styles.css:

#logo {

    background:url("../images/<your logo file name>") no-repeat scroll left center transparent;

    float:left;

    height:150px;

    width:200px;

}

You also may need to alter the height and width, depending on the dimensions of your image.

Changing the Main Background Color

All color options are also in the styles.css file. To change the default blue background color, you'll need to alter the code starting around line 5:

body {

    margin: 1.5em 0;

    /*background:url("../images/bg_body.jpg") no-repeat scroll center top;*/

    background-color: #0059ff;

}

Just change the highlighted hex value to the desired color's hex value.

Changing the Search Box Colors

The color options for the search box are also located in the styles.css file. This code is located a bit further down the file, under a header that says *****Homepage***** somewhere near line 310:

.searchHomeForm {

    background-color: #e6efc2;

    padding:2em;

    text-align:left;

    margin-top:.5em;

    font-size: 12pt;

    border-radius: 5px 5px 5px 5px;

    -moz-border-radius: 5px 5px 5px 5px;

    -webkit-border-radius: 5px 5px 5px 5px;

    border: 2px solid #c6d880;

    color: #0055a5;

}

Again, all you need to do is change the hex values.

After you alter these colors, you'll notice the Advanced link next to the Find button is still green. To fix that, check around line 328 of styles.css:

.searchHomeForm a, .searchHomeForm a:hover {

    color:#264409;

}

Simply change that value, and you should see your link color change.

Advanced Theming

This guide is the bare minimum required to customize your VuFind instance. There are a tremendous number of settings that can be changed to make your installation entirely unique.

For further instruction, we recommend looking at the VuFind2 Developer's Guide to Customizing the User Interface.