Lessons: 1, 2, 3, 4, 5, 6

Lesson 2. Changing the rows's and columns's parameters


In this tutorial we are going to change the rows's and columns's parameters - background colors, pictures, font styles.

Rows
The striped tables are typical for all Tornado skins. Let's name
the first row - "R1"
the second row - "R2".
selected (highlighted) row - "SE"
and a cell, which contains a link - Index Cell- IC.

Grid Headers and Labels
Some grids have a special first "header" row (or several rows). We'll name it Grid Header - "GH"
And some have the Form Label rows - "FL" ("<TH>" is its analog).
In Ocean Above GH and FL classes have the same chrome background, but in other skins they are completely different. Usually GH have a centered text, and FL - rightaligned.







Now open your "/tornado/css/OceanAbove/style.css" file (or "style_ns4.css" for NS4 browser) and familiarize with classes, which you can change now.
.R1 - for Row1
.R2 - for Row2
.GH - for GridHeader
.IC - for IndexCell
.FL (and TH) - for FormLabel
.SE - for Row Selected

If you work with flat skin - change Flat (F) classes:
.R1F - for Row1
.R2F - for Row2
.GHF - for GridHeader
.ICF - for IndexCell
.FLF (and TH) - for FormLabel
.SEF - for Row Selected


.R1 { color:white; font-weight: bold; background:#029ddf url(images/row.jpg) no-repeat; padding-right: 3px; padding-left: 3px; border: none }
.R1F { color:white; font-weight: normal; background:#029ddf no-repeat; padding-right: 3px; padding-left: 3px; border: none }

.R2 { color:black; font-weight: bold; background:#afafaf url(images/strip2bg.jpg) repeat-y; padding-right: 3px; padding-left: 3px; border: none }
.R2F { color:black; font-weight: normal; background:#d6d6d6 repeat; padding-right: 3px; padding-left: 3px;
border: none }

TH { color:black; font-weight: bold; font-size: 8pt; font-family: verdana, tahoma, arial; background:#7193ca url(images/cstrip2bg.gif); text-align: right; padding-right: 3px; padding-left: 3px }

.FL { color:black; font-weight: bold; background:#b7b7b7 url(images/back_chrome.gif) repeat; text-align: right; padding-right: 7px }
.FLF { color:white; font-weight: bold; background-repeat: repeat; text-align: right; padding-right: 7px }

.GH { color:black; font-weight: bold; background:#b7b7b7 url(images/back_chrome.gif) repeat-x; text-align: center }
.GHF { color:black; font-weight: bold; background:silver repeat-x; text-align: center }

.IC { color:black; font-weight: bold; background:#b7b7b7 url(images/back_chrome.gif); text-align: center; border: none medium #696 }
.ICF { color:black; font-weight: bold; background-color:silver; text-align: center; border: none }

.SE { color:black; font-weight: bold; font-size: 8pt; font-family: Verdana, Tahoma, Arial; background:#79d7ff url(images/rowlight.jpg) repeat; padding-left: 3px }
.SEF { color:black; font-weight: bold; font-size: 8pt; font-family: Verdana, Tahoma, Arial; background:#79d7ff repeat; padding-left: 3px }


CSS syntax

  • { color:black; font-weight: bold; font-size: 8pt; font-family: verdana, tahoma, arial;...
    These parameters describe a font - its color, weight, size and family
  • background:#b7b7b7 url(images/back_chrome.gif) repeat-x;
    These describe a background color, picture and picture repeat method (see Lesson1)
  • text-align: right; padding-right: 7px }
    And these describe text alignment and text padding.
    Now you can change their value. Fill free and experiment - it's very interesting!
    Here are some helpful notes for you.
CSS parameter Description Suggested values
color: Text color any color - its html name or number (#NNNNNN)*
font-weight: Font Weight normal;
bold;
font-size: Font Size Npt
font-family: Font Family Any font installed
background:#nnnnnn
or
background-color:#nnnnnn		 Cell background color any color - its html name or number (#NNNNNN)*
url(images/back_chrome.gif) Cell background image any image under your wwwroot derictory - specify path

Note: for NS4 browser you must specify an absolute url to all your background images. For example "/tornado/css/OceanAbove/images/pagebg.jpg" instead of
"images/pagebg.jpg"
repeat-x; The repeat method for a background image (it repeats like a texture by default)
repeat-x
(to repeat x)
repeat-y
(to repeat y)
no-repeat
(to show it only once)
text-align: Text alignment right;
left;
center
padding-right:
padding-left:
 Left (right) cell padding Npx

         *N - any number or (for html color) A-F letter in HTML color code

R1. Change "{ color:white" to "{ color:YourValue"row2row1row1row2row2

Lessons: 1, 2, 3, 4, 5, 6