For many who are just getting started with Rational HATS, understanding the widgets and components are the easy part. They often come from an RPG or COBOL background (i.e. green screen development). What is greek to them is usually the web page customization and especially the cascading style sheets. I thought I would write today about how the default CSS templates in HATS are organized.
If you are highly experienced with CSS, then this article is really not for you, but if you can’t even spell CSS, well, this should be a good primer.
To start out, open the HATS template ‘Swirl’. Its located under ‘Web Content – Templates’.
Then go to the ‘Source’ tab. The style sheets are specified in the tag as follows:
<!– Global Style Sheet –>
<LINK rel=”stylesheet” href=“../common/stylesheets/monochrometheme.css” type=“text/css”>
<LINK rel=”stylesheet” href=“../common/stylesheets/reverseVideoMono.css” type=“text/css”>
This tells the template to pull in two style sheet definitions. These two will be used throughout the application and for every transformation and default rendered screen. There are several stylesheets available in the project that you create, and most are associated with a particular template. For now, let’s assume you want to customize the ‘Swirl’ look and feel.
Open the monocrometheme.css style sheet. These are located under the ‘Web Content – common – stylesheets’ folder.
In a CSS file, comments are made using /* */ syntax, which is the first lines you should see. The next statement will be @import url(commontheme.css);
This is a command to load recursively, another stylesheet which in this case is common to nearly all the HATS templates. The @import notation loads this additional stylesheet before any of the styles are applied to the web page. The rest of the page are what we call style selectors.
The most primitive selector selects an HTML element such as the tag:
BODY {
background-color: white;
color: black;
font-family: tahoma, arial, , helvetica, sans-serif
/* For accessibility compliance: remove the following line */
font-size: 10pt;
}
You will see many selectors for various HTML tags (TABLE, TD, TR, etc). Each rule applies style properties as you see above. You don’t have to memorize very possible style attribute. Rather, the development environment has a feature called code-assist that helps you select a property attribute. Press CTRL+space to pop up the code assist:
Your style rule must always be closed with curly braces { }. Each attribute must be appended with a semi-colon ( ; ). The editor should show warning messages if you have not done this.
As you read down the style sheet you will see more advanced style selectors. Style selectors that are prepended with a period apply to HTML elements with a class attribute of that name.
For example this style rule: .HATSTABLEHEADER
Applies to this HTML element: class=”HATSTABLEHEADER“> ….
Some style rules will have both an HTML element name, and a class name such as this:
TABLE.HATSTABLE
This applies to an HTML
element with a class of “HATSTABLE” only. Whereas the former example could apply to ANY html element with a class of HATSTABLEHEADER.
Next, you may also see some style rules prepended with the pound/hash/anoctothorpe sign (#). Yes, the pound sign is called an anoctothorpe. This still rule applies to HTML elements with an id attribute of that name such as in:
id=”header“> …
Now, you may ask, what is the difference between an id and a class attribute. Think of an attribute as you would an identification. It uniquely identifies that element on the web page, meaning, there should not be any other element with that id. Whereas, if you ever took my HATS training class, there were multiple students in the room that made up the class. A CSS class attribute is used to apply similar formatting to multiple elements.
As you can see, you can start to get very specific about which area in your web page you want to style. You can combine elements and id/class attributes to apply to various subsets of elements. For example, you could have a style rule of INPUT.REQUIRED to apply a style rule to all input html elements that have a class of ‘required’. Whereas other input elements that have different class attributes are unaffected.
The next step in understanding style selectors psuedo elements. These are often seen as :hover, :link, and :visited. This are what changed the look of an element when you mouse over it, or when you have been to a site previously (i.e. the site is listed in your browser’s history). Using these you can change the background image on a table, or div element when a person mouses over an element. This provides for many very cool effects.
A.HATSLINK:hover {
color: #5555ff;
}
The above selector applies to anchor or link tags when you mouse over them.
In a style sheet you should see the selectors progress from very generic (such as the body tag which in turn becomes the default for all the following elements), to very specific selectors. This is why its called ‘cascading’, because the styles ‘cascade’ to sub-elements. In the hands of skilled web designer a HATS application can become a radically different beast. I’ve been critical for some time of the default styles and templates that come with HATS. They are quite dated and subsequently, the transformed apps look dated, although not as dated as a pure green screen. By creating a new template and style sheet, you can make your HATS app look like some thing you’d find on a more modern site without the user even guessing its front-ending a green screen.
The last thing I’ll mention about the HATS style sheets is their general nomenclature and organization. There is typically a main style sheet, a corresponding reverse video stylesheet, and commontheme.css. The latter is always included in the main style sheet. The reverse video is for those screens that support reverse video (i.e. black text on a green background rather than green text on a black backgound). There are style rules in the stylesheets that begin with .H such .HRED, .HCYAN, .HBLUE, etc. Those are to style fields that are default rendered and are of the similar color on the green screen. You do not have to keep those colors, but rather could change the style so they show with a more specific color in that color hue using either hex or rgb color values. Those that are for reverse video have the class selector prefix of .R such .RGREEN, .RBLUE, etc.
As a rule of thumb, when you are just getting started, try using an existing stylesheet an modify its style rules gradually. If you think you want to define rules for specific classses or ID’s that you specify, create another stylesheet and place those style rules there. Then be sure to add your new stylesheet to the head of the template you have selected or created.
If you are interested in more information on CSS and general web design, principles which apply very well to all types of web development, then check out my following links on Delicious:
http://del.ico.us/klenny/css
That’s all for now. I hope this helps you in your development efforts. Happy modernizing.
Your style rule must always be closed with curly braces { }. Each attribute must be appended with a semi-colon ( ; ). The editor should show warning messages if you have not done this.
