Home Tutorial Mods Configurator Bookstore Links Email JPDeni

Tutorial -- Fancier formatting -- Table Layout

Now that you have the general look of your pages the way you want them, it's time to make the forms and displays suit you better. You may be perfectly happy with the way the tables look now, with the yellow background and the blue text for the field labels. If so, you might want to skip this part. But if your color scheme and your preferences cause you to want something different, here's where to find out how to make it different.

First a little bit about color. You may have a super monitor that can display 16 million colors with no problem at all. More and more people are able to these days. But there are some folks who don't have that kind of capability and they can only see 256 different colors. When their monitors come across a color they are unable to display, they do their best, but sometimes the result isn't what you might want.

This isn't a real big deal when you're talking about link colors, because those are small parts of your page. But if you have large expanses of color, like the background of a table, they can look pretty crummy with a 256-color display.

The "rule of thumb" when you're working with 256 colors is that each of the color elements should have a hex value of 00, 33, 66, 99, CC, or FF. This link will take you to a chart of "browser-safe" colors you can be pretty certain of. Take note of the hexadecimal numbers associated with the colors you want to use.

The first thing you might want to change is the background color of the tables. Open html.pl and look at the beginning of sub html_record_form. You will see

<TABLE WIDTH="450" CELLPADDING=0 CELLSPACING=0 BORDER=1 BGCOLOR="#FFFFCC">

Insert the hexidecimal code for the table background color that you want after the # in that line.

You will probably want your display and your form to have the same background color, so find the similar line in sub html_record and make the same change.

It's very likely that your background color is not going to look very good with the blue font color for the field labels. Scroll up to the top of the script, to the section marked

##########################################################
##                   HTML Globals                       ##
##########################################################

You have already changed the definition of $html_title to match your database, so the next thing is to set your email address. This variable is only used once, in the login_failure page, to tell folks how to contact you in case they are having problems.

Notice that I have used single quotes around the email address. This makes it so you can enter your email address without having to worry about escaping the @ symbol.

$admin_email = 'you@server.com';

It is possible to set the fonts and colors of your pages through Cascading Style Sheets (CSS), but I don't know enough about them to be able to help you with them and some older browsers do not support CSS. Setting the fonts and colors by using variables is easy and it works.

The next section of the file includes all of the font settings you will need in the script.

# Set your font preferences below

# font face for pages
  $face        = "font face=Verdana, Arial, Helvetica";
# size of normal text  
  $font        = "$face size=2"; 
# an alternate color font  
  $font_color  = "$font color=#003399";
# size of title text  
  $font_title  = "$face size=4";  
# color of error messages  
  $error_color = "font color=red";  
# large font for error messages  
  $font_error  = "$face size=4 color=red"; 

It could be because I wrote it, but I think the variables are pretty self-explanatory.

If you want to have some other font styles to use in some places, you can add your own variables here and then use them where you want. For example, if you wanted to use a smaller font for some of your text, you could add something like

$font_small = "$face size=1";

When you wanted to use the font within the text you would use

<$font_small>This is smaller text.</font>

All of the font variables listed are used somewhere in the script. All of them need to be defined. If you delete one of the font variables and do not delete every reference to it in the script, you will end up with pages with the following:

<>Text

You will undoubtedly want to change the text in sub html_home to suit your database. Add whatever text you want users to see when they first log on to the database between

# < -- Start page text -- >
    print qq|

and

	|;
# < -- End page text -->

You can add or change text within any of the subroutines the same way.

The other thing you might want to change is the text on the submit and reset buttons on the forms. In each of the subroutines that has a form, there are variables:

    $submit_button = "...";
    $reset_button = "Reset Form";

You might want to perform a search for $submit_button = in order to be able to find all of them. You can put anything you like within the quotation marks and the text will appear on your form buttons.

You can also change the page title for each of the subroutines. Every subroutine has a variable

    $page_title = "...";

Change the text between the quotation marks to whatever title you would like to appear in the browser bar and the top of each page.

Don't change anything else in the page subroutines, though, unless you really know what you're doing.

The other thing you might think about editing, if you wish, are the texts for the links in the footer menu.

If you want to edit the text in the footer menu, go to sub html_footer. Look carefully at the links listed there and only change the actual printed text. Do not change the links themselves.

Some people prefer to have the word Search instead of View in their menus. Some like to use the word Edit instead of Modify.

  The basic tools

Some basics of Perl

  Install the demo

Create your own forms and displays

  Create your own configuration

Fancier formatting part one

  Set permissions

How to install a mod

If you need help

Home Tutorial Mods Configurator Bookstore Links Email JPDeni

Text-only site map

Background by Windy