Web page design

[style.css]

[Colors]

[header.php]

[footer.php]

Customizing: style.css

If you decide to customize the look at feel of your web page, it could be enough to change the style/style.css file.

All the styles used in the public web page are defined here.

If you are used to working with CSS style sheets you will know what to do. If not, you maybe want to learn a little about it (see, for instance, W3C page about style sheets) but, in any case, you could be satisfied changing just the color of some elements in the page, which is quite easy.

If you take a look to style/style.css you will see that it is quite simple (we show here only an schematic structure, look into the real file for the details).

body {} a {} a img {} h2 {} select, input, textarea, button {} /*================ HEADER ============================================*/ #cat_div_header {} #cat_div_header h2 {} #cat_div_header h3 {} #cat_div_logos {} #cat_div_menu {} .cat_menu {} .cat_menusel {} .cat_menu a {} .cat_menusel a {} /*================ MAIN ==============================================*/ #cat_div_main {} #cat_div_main ul li {} #cat_div_main h3 {} /*================ FOOTER ==============================================*/ #cat_div_svocat {} /*================ SPECIAL STYLES ======================================*/ /* special style for showing command-like texts */ .cat_comm {} /* special style for showing errors or, sometimes, messages that we want to highlight for the users */ .cat_error {} /* special style for showing text in a smaller font. */ .cat_mini {} /*================ home.php ======================================*/ #cat_div_home_descrip {} #cat_div_home_resources {} #cat_div_home_acknowledge {} /*================ search.php ======================================*/ .cat_search_form_tit {} .cat_search_form_fld {} .cat_search_list_tit {} .cat_search_list_fld {} .cat_search_more_tab {} .cat_search_more_lnk {} a.cat_search_help {} /*================ news.php ======================================*/ .cat_news_tit {} .cat_news_txt {}

In summary:

• We set some general properties for the web page: body (default font, background, etc), for the links (a) for headers (h2) and form elements (select, input, textarea, button).
• Then we define styles for the different layers:
  • Header: header itself, menu and logos.
  • Main content area.
  • SVOCat footer.
• We define some special styles for displaying some special kind of texts (command-like texts, errors, text in smaller font).
• And finally some styles only to be used for specific contents:
  • Home page: the different layers contained in the home page.
  • Search (Data Retrieval): styles for the search form and list of results.
  • News page.