Get Reliable web hosting from Yahoo! Web Hosting – 35% off for a limited time! Make Your Own Website
Modifying Your Template
Understanding Tables and Modifying the Borders
These templates use a table construction. The basic code for a table without any attribute tags is :<table><tr><td></td></tr></table>
Tables are made up of rows and columns. Rows run across the page. Columns or cells run up and down the page. Rows can be divided into columns using the cell tag: <td></td>
For more read Design With Tables
The code for templates 1,2 and 3 use 2 tables. Templates 4 and 5 use 3 tables. The top table has one cell and will contain your heading graphic.
Borders can be added to the table tag and to the cell tag using inline CSS style sheets.
Look at the code for the first table tag:<table width=”100%” cellpadding=”5″ cellspacing=”0″ style=”border-top:solid #000000 2px;border-left:solid #000000 2px;border-right:solid #000000 2px”>
Focus on the inline style sheet:style=”border-top:solid #000000 2px;border-left:solid #000000 2px;border-right:solid #000000 2px”
You see 3 declarations for a border separated by semi-colons. They are top left and right. We leave off the bottom border because the second table has a top border which acts as the bottom for this table.
The code that defines the type, color and thickness of the border is: solid #000000 2px
Some other border types are: dashed, dotted, inset, outset and groove. All of the types don’t work in all browsers, so if you choose a different type be sure to test your web pages in both IE and Mozilla browsers.
The color is defined here in hexidecimal code: #000000. It could also be specified as black or #000(RGB). For more hexidecimal colors see our Color Chart.
2px or 2 pixels is the defintion of the thickness of the border. I use pixels because it gives more control. You could also specify thin, medium or thick. Thinner borders look better to me. You might prefer them thicker.
If you don’t want borders you can replace the code with style=”border:none” or border=”0″
Controlling Text and Links
Settings for font-family, style, size, weight, alignment and color of text and links are defined in the linked CSS style sheet provided with each template. If you want to change the size of the text in your paragraphs or header tags this is where you would go.
The web page is connected to its CSS style sheet by a statement in the head section of the document:<link rel=”stylesheet” href=”template1.css” type=”text/css”>
This line of code in the head section tells the browser to use template1.css for the style settings on the page.
Your linked style sheet can be edited using a simple text editor like NotePad.
A typical declaration in your linked style sheet looks like this:
p {font-family:arial, sans serif;font-size:12pt;font-style:normal;font-weight:normal;text-align:left;margin-left:10px;text-indent:1em}
This is the style sheet for your paragraph settings, hence p{…}. The code segments inside the brackets are called declarations. Each individual declaration ends with a semi-colon.
The first declaration is the font-family. For CSS compliance you should supply at least 2 and the last one should always be a generic like serif or sans serif. Other font families you might choose are verdana, tahoma, times new roman or courier.
The second declaration is the font size. I have used the point system (pt) and set it to 12pt. You can experiment with different sizes. 8pt, 9pt, and 10pt would be smaller text. 14pt and 16pt would be larger.
I have set the font style to normal. If you want slanted text you can set it to oblique or you could choose italic.
For simplicity set font weight to normal or bold. There are other settings, but get a little experience before you try using them.
I have set text alignment for paragraphs to left. Other choices are right, center and justify.
I have set a left margin to 10 pixels. You can experiment with other settings in pixels or just remove the declaration if you don’t want the extra space on the left side.
Finally, I indented the paragraph 1em. If you don’t want indented paragraphs, set it to zero or remove the declaration.
If you wanted colored text you would add a color declaration. See the style selector for the h1 tag below on how to change the color of text. For CSS compliance if you supply a foreground color with the color declaration you should also supply a background color (background-color:) even if it is white.
h1 {font-family:arial,serif;font-size:18pt; font-weight:bold; font-style:normal; text-align:center; color:#066a64; background-color:#ffffff}
Sitemap Links
The links in the right hand column, left hand column or second table, which we call the sitemap links are controlled by these lines in the CSS style sheet:
#sitemap a {font-family:arial; font-size:10pt; font-style:normal; font-weight:bold; text-decoration:none; color:#000000; background-color:#ffffff}
#sitemap a:hover {font-family:arial; font-size:10pt; font-style:normal; font-weight:bold; text-decoration:none; color:#ff0000; background-color:#ffffff}
#sitemap designates these settings to a container on the page that carries an ID tag labeled sitemap.
If you look at the code on the page you’ll find the ID specified as an attribute of a cell in a table:
<td ID=”sitemap” width=”150″ align=”center” style=”border-left:solid #000000 2px”>
These settings will only control those anchor tags. Anchor tags in the body text will not be affected.
There are really only 2 things we need to look at here.
The underline is removed from the hyperlink using the declaration: text-decoration:none. If you want your hyperlinks underlined, just remove that declaration.
Second, note that the forecolor in the a:hover declaration is different than the forecolor for the a declaration. This causes the color change of the hyperlink when you hold the mouse pointer over the link.
Sidebars
The templates which include sidebars use the ID attribute for setting their appearance.
If you add background color to a sidebar, you will need to add that same background color to the elements (header tags, paragraph tags, links) contained in the sidebar.
An example for the header tag used in a sidebar is shown below. The background color in the cell is set to dfdfdf in the table code on the web page template. The background color for the h2 tag used in that sidebar is set to dfdfdf in the style sheet.
<td ID=”sidebar” width=”150″ style=”border-left:solid #000000 1px;background-color:#dfdfdf”>
#sidebar h2 {font-family:arial, sans serif;font-size:12pt;font-weight:bold;font-style:normal;text-align:center;color:#000000;background-color:#dfdfdf}
