OPAC: Change Search Form Colors

Last updated
Save as PDF
Share
1. Share
2. Tweet
3. Share

Created By: Laura Guy

Created on: 5/14/2019

[This article was copied from the Voyager Wiki.]

Introduction

This relates to the "New" Tomcat WebVoyage that is included in Voyager 7.0.1 and forward.

Branding is an important part of our organization's identity. Changing the colors of the search pages and their "tabs" (or "buttons") is a part of that. The search form colors are controlled in a CSS file (changing the colors of the tabs is addressed in a separate document).

You will need to make changes to the CSS file found here: /m1/voyager/xxxdb/tomcat/vwebv/context/vwebv/ui/your_SKIN/css/searchPages.css

Search Form Colors

Update searchPages.css to change the color of the search form itself, as well as the little line between the active search form and its tab. The following examples change the search form color to gray, as per the screenshot below.

Code Examples

#searchForm

{

background: #cccccc none repeat scroll 0 0;

border: 1px solid #000;

clear: left;

margin: 0;

padding: 0;

color: inherit;

-moz-border-radius-bottomleft:10px;

-moz-border-radius-bottomright:10px;

-moz-border-radius-topright:10px;

}

#searchNav li.on a, #searchNav a:hover

{

color: #333;

border-bottom: 1px solid #cccccc;

cursor: pointer;

}

Report