Skip to content

Specify Forums

Personal tools
You are here: Home » Cool Features » Change the Look and Feel of Your Specify Web Interface

Change the Look and Feel of Your Specify Web Interface

Document Actions

It is surprisingly easy to customize your Specify website. You can change the background, the fonts, text sizes, colors, text styles, and more. This will be a basic overview of some of the properties you can set using a cascading style sheet file.

Before you start editing your css file MAKE A BACKUP COPY. The file is located in the HTML directory you created for your website in the css folder. It is named Specify.css.

This basic tutorial will include information about colors and text.

Color properties:
Setting the color of elements is simple and can be done in three different ways: color name, hexadecimal, and RGB representations. If you know the name of the color you would like, set the value of the color attribute to that name ( eg. background-color: blue;). If you have the hexadecimal representation of the color, enter that value with a # in front (eg. color: #0000FF). Finally, if you know the RGB value of the color, enter it like this: scrollbar-base-color: rgb(0, 0, 255). You can perform a simple web search for html colors to get a list of supported colors.
Ensure that you use the correct format when setting the values in the css file (# for hexadecimal, rgb( ) for RGB).

Text Properties:

Your Specify web interface contains many sections that contain text: headings one through six, paragraph, caption, etc. These sections all have properties associated with the text they contain. Below is a listing of some of these properties.

text-decoration: none: normal text
underline: underlined text
overline: overlined text
line-through: strike-through text
blink: blinking text

example: text-decoration: blink; text will blink

font-weight: normal: normal text weight
bold: bold text

example: font-weight: bold; font is bold

font-size: uses a percentage to set the size of the text in comparison to normal text size

example: font-size: 500%; font is 500% of regular font

text-align: left: left aligned text
right: right aligned text
center: centered text

example: text-align: center; text will be centered on line.

This is just a basic overview of a few of the properties you can adjust using the css file.

Back to Cool Tips

Created by cj
Last modified 2006-05-10 12:29 PM
 

Powered by Plone

This site conforms to the following standards: