Change the Look and Feel of Your Specify Web Interface
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.