SVOCat Documentation

Version 2.2-nocoor, Last change: March 30, 2021; Author: Carlos Rodrigo

HomeDownloadDocumentationExamplesCreditsHelp-Desk
1. Introduction
2. Download
    2.1. Extract
    2.2. Permissions
3. The files
4. Example
5. Configure
    5.1. First
    5.2. Project
    5.3. Mysql
    5.4. Web
    5.5. VO options
    5.6. Fields
    5.7. Photometry
    5.8. Search Opts.
    5.9. File Paths
    5.10. Scripts
    5.11. Registry
    5.12. Spectra
    5.13. Links
    5.14. References
6. Edit
7. Web Design
    7.1. style.css
    7.2. Colors
    7.3. header.php
    7.4. footer.php
Previous   Next

Web page design

[style.css][Colors][header.php][footer.php]

Just changing colors

If you just want to change some colors in the web page, look in the style/style.css file for color definitions. You will find them as: "color" (for font color), background or background-color (for background color) or in some "border" definitions (for line color).

Colors are specified as things like #abc, it is, a "#" symbol followed by three characters. Those three characters represent a color in RGB format. That means that the first number is the amount of Red, the second the amount of Green and the third the amount of Blue. These amounts are writen as hexadecimal numbers (where 0 is minimum and f(16) is maximum). For instance:

  • #000 is "nothing of red, nothing of green, nothing of blue", and the result is: black.
  • #fff is "maximum of red, maximum of green, maximum of blue", and the result is: white.
  • #ff0 is "maximum of red, maximum of green, nothing of blue", and the result is: yellow.
  • #f80 is "maximum of red, 50% of green, nothing of blue", and the result is: orange.

You can try some combinations using numbers and letters (a,b,c,d,e,f) and see what you get.

Given that the web page design is simple, I would guess that, if you want to change colors, you will want to change the often used "Red" colors (menus, titles...) to some other color. Let's imagine that you want a mostly white-and-blue design instead white-and-red. You will want to change:

  • h2 → color: #900; to color: #447;
    (to change all the big titles)
  • #cat_div_header h3 → color: #900; to color: #447;
    (to change the small subtitle in the top header)
  • #cat_div_menu → background-color: #900; to background-color: #447;
    (to change the background of the menu)
  • .cat_menusel a color: #900; to color: #447;
    (to change the color of the link in the menu when an item is selected)
  • #cat_div_main h3 → color: #900; to color: #447;
    (to change all the small titles in the content)

and we get a more bluish look:

Previous   Next