Editing Our Free Web Templates

These instructions are for free web templates that you will find in our template gallery. We are replacing most of the original 306 templates with updated templates that are easier to modify. The code has been simplified for your convenience.

If you have no coding experience it may help you to study a few lessons in our HTML tutorial before you start. Recommended lessons are: Paragraph Tag, Anchor Tag, Header tag , Tables and Style Sheets. Visit our free HTML tutorial

Before You Start

Keep the orignal zip file in a safe place. If you make changes to the template that don't work or damage the structure of the layout, you can reload the original from the zip file.

Jump to:
Editing Links
Adding and Removing buttons
Editing and Removing Backgrounds

Editing with NotePad or Standard HTML Editor

The templates can be edited with NotePad or any standard HTML editor. If you need an HTML editor, we recommend NoteTab Light. It's FREE!!

The Slim Design

Most of the revised templates are set to a width setting of 790 pixels. This is a common setting that many web designers use. It offers less degradation at lower monitor resolutions. If someone views your site with a monitor resolution setting of 800X600, very little if any horizontal scrolling is needed to peruse your web page.

The Style Sheets

The revised templates use a linked style sheet. Its name is mycss.css. It is included in the zip download for each template. The style sheet can be edited with any simple text editor like NotePad.

When you upload your website to the internet it is imperative that you upload the style sheet file into the same folder as your web pages.

You can change font size , color and alignment by making simple changes to the style sheet file.

A typical style sheet from one of the templates is shown below.

When you see a pound sign (# ) there will be a matching id tag ( id="header" ) in the html code for those settings.

The first section controls the header elements like domain name, site name and slogan.


#header h1 {
font-family: Arial, serif;
font-style : normal ;
font-size : 16pt;
font-weight :bold;
text-align :center;
color :#ffcc33;
margin: 20px 0 0 0 }

#header p {
font-family: Arial, serif;
font-style : italic ;
font-size : 9pt;
font-weight :bold;
text-align :center;
text-indent: 0px;
color :#ffffff;
margin: 0 0 0 0 }

#topheader p {
font-family: Arial, serif;
font-style : italic ;
font-size : 8pt;
font-weight :bold;
text-align :left;
text-indent: 0px;
color :#6633FF;
margin: 0 0 0 10px }

The next section controls the horizontal navigation buttons.


#topnavigate p {
text-align: center;
float: left;
text-indent: 0px;
margin: 0 0 0 0;
padding: 0 0 0 0 }

#topnavigate a {
display: block;
background-image : URL(img/top-button-079.gif);
background-repeat : no-repeat;
margin: 0 0 0 0;
padding: 0 0 0 0;
width : 95px;
height: 26px;
}

#topnavigate a:hover {
display: block;
background-image : URL(img/top-button-079-2.gif);
background-repeat : no-repeat;
margin: 0 0 0 0;
padding: 0 0 0 0;
width : 95px;
height: 26px;
}

#topnavigate a {
font-family: Arial, Verdana, serif;
font-style : normal ;
font-size : 8pt;
font-weight :700;
text-decoration : none;
color:#ffcc33;
margin: 0 0 0 0;
line-height : 200% }

This section controls most of the borders on your web page.


#topheader, #head, #topnav, #navigate, #content, #footer {
border-top: solid #FFFF99 1px;
border-right: solid #000000 1px ;
border-bottom: solid #000000 1px;
border-left: solid #FFFF99 1px }

#head, #content {
border-top: solid #CCCCFF 1px;
border-right: solid #000000 1px ;
border-bottom: solid #000000 1px;
border-left: solid #CCCCFF 1px }

This section controls the side navigation buttons.


#navigate p {
text-align: center;
text-indent: 0px;
margin: 0 0 0 0;
padding: 0 0 0 0 }

#navigate a {
display: block;
background-image : URL(img/button-079.gif);
background-repeat : no-repeat;
margin: 0 0 0 0;
padding: 0 0 0 0;
width : 129px;
height: 30px;
}

#navigate a:hover {
display: block;
background-image : URL(img/button-079-2.gif);
background-repeat : no-repeat;
margin: 0 0 0 0;
padding: 0 0 0 0;
width : 129px;
height: 30px;
}

#navigate a {
font-family: Arial, Verdana, serif;
font-style : normal ;
font-size : 8pt;
font-weight :700;
text-decoration : none;
color:#ffcc33;
margin: 0 0 0 0;
line-height : 200% }

#topnavigate a:hover, #navigate a:hover {
color: #efefef}

These setting are for the tags in your content section.


#content img {
margin: 4px }

address {
font-family: Arial, serif;
font-style : normal ;
font-size : 8pt;
font-weight :700;
text-align : center;
color: #6633FF }

h1 {
font-family: Verdana;
font-style : normal ;
font-size : 16pt;
font-weight :bold;
text-align : center;
color : #6633FF }

h2 {
font-family: Verdana;
font-style : normal ;
font-size : 12pt;
font-weight :bold;
text-align : center;
color : #6633FF }

p {
font-family: Verdana;
font-style : normal ;
font-size : 10pt;
font-weight :normal;
text-align : left;
text-indent : 1em ;
color: #6633FF;
margin: 0 20px 10px 20px }

The HTML Code

There are comment statements in the HTML code that mark areas of the template that can be edited. A typical comment statement looks like this: <!--Edit links here-->

Editing Links

A typical block of links in the html code will look like this:
<p><a href="#begin">Your Link Text</a></p>
<p><a href="#begin">Your Link Text</a></p>
<p><a href="#begin">Your Link Text</a></p>
<p><a href="#begin">Your Link Text</a></p>

Replace Your Link Text with the text that you want to appear on the button.

Replace #begin with the destination url that you want the link to jump to.
( Example: <p><a href="about-us.html">About Us</a></p>

Removing Buttons

The procedure for removing horizontal buttons is different than removing the side buttons.

When adding or removing side buttons, just add or remove a line of code shown here:
<p><a href="#begin">Your Link Text</a></p>

You can have as many side buttons as you require.

There are eight horizontal buttons. You cannot add more. If you want to remove horizontal buttons, you should only remove the link text. This will leave the blank button in its position as a placeholder. The code would look like this:
<p><a href="#begin"></a></p>

Removing All Horizontal Buttons

If you wanted to remove all of the horizontal buttons and retain the colored horizontal bar, you would replace the topnav table with code similar to that shown below.
<table id="topnav" border="0" width="790px" STYLE="background-color: #ff6666" cellspacing="0" cellpadding="0">
<tr><td>&nbsp;</td>
</tr></table>

If you don't want the bar, simply remove the entire topnav table.

Removing All side Buttons

If you don't want to use side buttons, remove the entire cell marked with the id navigate. This would give you the entire 790 pixel width for your page content.

Backgrounds

The code for adding backgrounds is found in the html code of the web template. You can easily remove the background or replace it with one of your own choosing.

The main background is set in the body tag:
<body STYLE="background-image : URL(img/bkg.jpg)">

If you want to remove it, just delete the style statement STYLE="background-image : URL(img/bkg.jpg)" from the body tag.

If you want to change the background to one of your own, save your new background in the img folder and change img/bkg.jpg to the name of your background image.

Some of the templates have a separate background for the web page content. This setting will also be found in the html code. This code will usually be found in the cell tag marked id="content". Use the same procedure to remove or change it.

To keep the main background from showing through you should add a background color statement to the cell tag: STYLE="background-color: #ffffff"

Free Web Hosting Create a website with Yahoo Site Solutions or SiteBuilder Web Hosting FAQ

Net Success 2000 Plus Inc
PO Box 1508
Somerset, KY 42502
Copyright 2000 - 2007 Net Success 2000 Plus Inc
Last Modified: November 1, 2007

|HTML OnLine |Website Tutorial|