Tips_tutorials   >   Studiojs201   >   Making the Page Pretty

Making the Page Pretty

So far we haven't worried about the look of our web page. Function before form, right? Function is working, so we can move on to form. This is were CSS (Cascading Style Sheets) come into play. CSS to web pages is like #STYLES to Omnis Studio. CSS is the way to go for controlling the look of your web pages!

Using a .css file we can specify the look we want for any of the elements in the web page. This frees us from cluttering the HTML in the web page with all kinds of colour and style related tags. It also allows us to instantly change the look of all our web pages from one point, the CSS file.

The cleanest way I have found for controlling elements on a web page with CSS is to put blocks of elements inside <div> tags.

  1. Create a css directory in your localhost's web server folder.
  2. Start a new text file using your text editor.
  3. Enter the following text in the new file.

    body, input, textarea, table {

    font-family: lucida grande, geneva, helvetica, arial, sans-serif;
    font-size: 9pt;
    }

    form {

    margin: 0px;
    }

    input, textarea {
    padding-left: 2px;
    }

    div.container {

    background-color: #F2F2F2;
    border: 1px solid gray;
    }

  4. Save the file as, master.css, to the css directory

We now need to point the static web page to the master.css file and add the container division.

  1. Open searchcountries.htm
  2. Add the following link tag to the <head> section of the web page.

    <link rel="stylesheet" type="text/css" href="http://localhost/css/master.css" />
  3. Add the following <div> tag just below the opening <body> tag

    <div class="container"> <!-- open container div -->
  4. Add the following <div> tag just above the closing </body> tag

    </div> <!-- close container div -->
  5. Save the changes.
  6. Reload the page in FireFox. The page background should change to grey and the font should change to a san-serif type of font.

When making this tutorial the <iframe> section showed a heavy black border in FireFox and no border in Safari. I tried setting the border to zero using the CSS but did not succeed. To eliminate the thick black frame border.

  1. Open searchcountries.htm
  2. Add the property to the opeinng iframe tag.

    frameborder="0"

    The full tag should read:

    <iframe id="SearchResults" name="SearchResults" src="" width="100%" height="100%" scrolling="yes" frameborder="0"></iframe>
  3. Save the changes.
  4. Reload the page in FireFox. The frame border should disappear.

Title Division

Let's put the <h3> title located inside the body into a title division which we can control from the master.css file.

  1. Add the following <div> tag just below the opening container division.

    <div class="title">Countries</div> <!-- title div -->
  2. Delete the entire old <h3> tagged title from the body section.
  3. Save the changes.
  4. Add the following CSS to the master.css file.

    div.title {

    font-size: 11pt;
    font-weight: bold;
    text-align: left;
    padding-top: 5px;
    padding-left: 20px;
    margin-bottom: 0px;
    }

  5. Save the changes.
  6. Reload the page in FireFox. The title inside the body should now be bold and in bigger font.

Search Division

Let's put the search related fields in a search division which we can control from the master.css file.

  1. Add the following <div> tag just below the title division.

    <div class="search"> <!-- open search div -->
  2. Add the following </div> tag just above the close container div tag.

    </div> <!-- close search div -->
  3. Save the changes.
  4. Add the following CSS to the master.css file.

    div.search {

    margin: 10px;
    padding: 5px;
    padding-top: 0px;
    border-collapse: collapse;
    border: 1px solid gray;

    }

  5. Save the changes.
  6. Reload the page in FireFox. The search related fields should now be inside a grey border box.

Headed List Div - CSS

We want to search results to look a bit more like an Omnis Studio headed list. This is going to take a bit more work. The entire results page is coming from our Omnis Studio application, so we will have to add CSS page links and div tags to the code in our Omnis Studio application.

First create a headedlist.css file.

  1. Start a new text file using your text editor.
  2. Enter the following text in the new file.

    div.headedlist {

    margin: 0px;
    padding: 5px;
    }

    div.headedlist table {

    border-collapse: collapse;
    border: 1px solid gray;
    }

    div.headedlist table th {

    padding-left: 5px;
    padding-right: 5px;

    text-align: left;

    border: 1px solid gray;
    background-color: #99CCFF;
    }

    div.headedlist table td {

    padding-left: 5px;
    padding-right: 5px;

    border-left: 1px solid gray;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    }

    div.headedlist table caption {

    padding-top: 3px;
    caption-side: bottom;

    text-align: center;
    }

  3. Save the file as, headedlist.css, to the css directory

Headed List Div - oHTMLTools

Now it's time to modify some code in the ContactsWeb library.

  1. Add a $retCSSLinkTag method to oHTMLTools
  2. Add a parameter, pURLToCSSfile, Character type.
  3. Enter the following code in the method.

    ; Prepare a link tag pointing the specified CSS file.
    Calculate Tag as con('<link rel="stylesheet" type="text/css" href="',pURLtoCSSfile,'" />')
    Quit method Tag

  4. Modify the $retHTMLPageTemplate method to read as follows:

    Begin text block
    Text: <html> (Carriage return,Linefeed)
    Text: <head> (Carriage return,Linefeed)

    Text: <title>##TITLE##</title> (Carriage return,Linefeed)

    Text: ##LINK## (Carriage return,Linefeed)
    Text: ##JAVASCRIPT## (Carriage return,Linefeed)

    Text: </head> (Carriage return,Linefeed)
    Text: <body> (Carriage return,Linefeed)
    Text: (Carriage return,Linefeed)
    Text: <div class="container"> <!-- begin container div --> (Carriage return,Linefeed)
    Text: (Carriage return,Linefeed)

    Text: ##BODY## (Carriage return,Linefeed)

    Text: (Carriage return,Linefeed)
    Text: </div> <!-- close container div --> (Carriage return,Linefeed)
    Text: (Carriage return,Linefeed)
    Text: </body> (Carriage return,Linefeed)
    Text: </html> (Carriage return,Linefeed)
    End text block

    Get text block HTML

    Quit method HTML

  5. Modify the first part of the $convertListToHTMLTable method to read as follows:

    Calculate List as pfList

    ; Open the div
    Calculate HTML as con(HTML,kCr,'<div class="headedlist"> <!-- open headed list div -->')

    ; Open the table
    Calculate HTML as con(HTML,kCr,kTableOpenTag)



    This adds the opening headed list <div> tag to the HTML.
  6. Modify the last part of the $convertListToHTMLTable method to read as follows:

    ; Close the table.
    Calculate HTML as con(HTML,kCr,kTableCloseTag)

    ; Close the div
    Calculate HTML as con(HTML,kCr,'</div> <!-- close headed list div -->')

    Quit method HTML



    This adds the closing headed list <div> tag to the HTML.

Headed List Div - rtCountryList

We need to modify the $construct method of rtCountryList. Modify the section of code from, ; Get an HTML page template to ; Add the HTTP content header , to read as follows:

; Get an HTML page template.
Do ioHTMLTools.$retHTMLPageTemplate() Returns HTML

Do ioHTMLTools.$retCSSLinkTag("http://localhost/css/master.css") Returns MasterCSSLink
Do ioHTMLTools.$retCSSLinkTag("http://localhost/css/headedlist.css") Returns HeadedListCSS
Calculate LinkTags as con(MasterCSSLink,kCr,HeadedListCSS)

; Replace the placeholders with content.
Calculate HTML as replaceall(HTML,'##LINK##',LinkTags)
Calculate HTML as replaceall(HTML,'##JAVASCRIPT##','')
Calculate HTML as replaceall(HTML,'##TITLE##','Countries')
Calculate HTML as replaceall(HTML,'##BODY##',TableHTML)

; Add the HTTP content header.
Do ioHTMLTools.$addHTTPContentHeader(HTML) Returns FlagOK

Test the Headed List CSS

We are ready to test the headed list CSS.

  1. Reload searchcountries.htm in FireFox.
  2. Click the Search button on the web page.

All going well, the table in the SearchResults frame should appear with grey borders and dividers and the column headings should be have a light blue background.

Are you getting a sense of how you can control the look of web pages using CSS? CSS is the place to control the appearance of your web pages.

Warning

Unfortunately, Internet Explorer is not a fully WC3 compliant. There are a few CSS snags that you will run into between FireFox, Internet Explorer, and Safari. If you run into one of these, do a Google search and you'll likely be able to find a work around.

StudioTips Documentation - Copyright 2006 Vencor Software