Close Window

Print

Making Simple Changes to Your Template

There are a few simple but important changes you may want to make to complete and personalize the template you selected for your site. These include...

• Add a logo to your header image.

• Globally change the color of fonts on your pages.

• Remove (or move) the extra navigation at the top of the template.

• Change the vertical navigation bar color.

• Find and change the main images.

Each of these is covered in one of the sections below.

Add a Logo to Your Header Image

The template package you downloaded comes with a top image, found in the image-files folder (it starts with or contains the word "header").

Complete the "look" and the personalization by adding your site's name/logo (see the package's demo.html to remind you).

You can do that with your graphics application (e.g., Photoshop), or, if you don't have one, with PicMonkey, a Web-based graphics tool.

For help adding your logo to the header image, see...

https://sbitips.sitesell.com/picmonkey-for-logo-image.html

This article will also help you make any other image into your top image, including cropping it to the correct size.

Change the Font Colors

To change a font color, replace the existing hex code with the code for the color you want to use. If the color is a named color, use that name instead of the hex code.

For a color name, see this W3Schools.com page...

https://www.w3schools.com/html/html_colornames.asp

To change the color for the entire site, at the top of your CSS file, in the Global Body, Font and Link Settings section, look for this code...

body {
background-color: #f0f5fb;
margin: 0;
padding: 0;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial,
sans-serif;
color: #000;
font-size: 85%;
}

Locate color: #000;.

Note: in your style sheet, the hex code may not be #000, or there may be a named color.

Replace the three-character (e.g., #000) or six-character (e.g., #f3f3f3) hex code, or the named color (e.g., green), with the hex code or named color you want to use for your global font color.

Tips

• Hex codes are normally 6 characters long (e.g., f3f3f3) plus the " # " character. However, if the code has three pairs where each member of the pair is the same, you can eliminate one member of the pair.

  For example, #000000 can be seen as #00 00 00. So you can remove one member of each pair, reducing the code to #000. Another example is #99bb99. This can be reduced to #9b9. This makes you CSS file slightly smaller, which means it loads a bit faster.

• Remember, a dark font on a light background always improves readability. Black on white is the best choice. Black on a light colored background is next.

• In the code listed above, the background-color property is #f0f5fb. Yours is likely different. You can change the color of the background that your pages sit on by changing the background-color to a different hex code or named color.

Remove (or Move) the Top Navigation

Every pre-designed template comes with navigation links at the top of the template. Some are in the top right corner, some centered just below the logo.

Remove the Top Navigation

If you want to remove those navigation links, open your HTML template and delete the following code from the file...

<div class="ExtraNav">
<ul>
<li><a href="#1"><strong>Extra Link 1</strong></a></li>
<li><a href="#2">Extra Link 2</a></li>
<li><a href="#3">Extra Link 3</a></li>
<li><a href="#4">Extra Link 4</a></li>
<li><a href="#5"><strong>Extra Link 5</strong></a></li>
</ul>
</div>

Another idea...

If you think you might someday want to use the navigation links, add commenting tags before and after (the code remains, but is unseen by visitor and search engines)...

<!-- <div class="ExtraNav">
...
</div> -->

You never know when you'll want the extra nav. As a site grow, the need tends to arise.

Move the Top Navigation

If you want to move the top navigation, open your CSS file and find the following code, in the Horizontal Text NavBar subsection of the Additional Navigation section...

#Header .ExtraNav {
font-size: 85%;
position: absolute;
top: 0;
right: 0;
}

#Header .ExtraNav ul {
margin: 0;
}

Note: Your template's "top" and "right" numbers may be different than in the code just above, depending on where the top navigation appears in your template. Here's how to adjust the location...

Change the top number to a larger number to move the navigation down the page, or to a smaller number to move it up the page.

Change the right number to a larger number to move it to the left, or to a smaller number to move it to the right. If you want the navigation to appear on the left side, change right to left and change the number accordingly.

Note: If your top or right number is currently set to 0, and you want to increase the number, you'll need to add px immediately after the number (e.g., change 0 to 10px).

Experiment until your Top Navigation is right where you want it!

Change the Navigation Bar (NavBar) Color

Your NavBar's buttons (inside the Navigation div) sit on top of the image in the NavColumn.

For most templates, the background-color is set to "transparent," which means that the color beneath (in the NavColumn image) is what surrounds the buttons.

If you want your buttons to stand out more, you can place them on a different background color. To do that, open style.css and find the following code in the Left Column Navigation section...

.Navigation {
width: 100%;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial,
sans-serif;
background-color: transparent;
}

Note: Your background-color property may not say "transparent" -- it may have a hex code or a named color.

Change background-color to the color of your choice. Or enter "transparent" (without the quotes) if you want the background color to show the color of the image in the entire NavColumn.

Change the Buttons

Most of the templates come with navigation links that look and act like buttons. Others have only links. You can change the look to suit your taste.

Changing From Buttons to Links

If you want to change from buttons to links, find this code in style.css (your background color and border may be different)...

.Navigation li {
background-color: #fff;
border: 0 solid #a9775e;
margin-bottom: 5px;
}

Change background-color to "transparent" (without the quotes). Then remove border: 0 solid #a9775e;.

Move down to the Navigation Link styles (your colors and borders may be different)...

.Navigation a:link {
color: #a9775e;
display: block;     /*  this makes the whole box highlight rather than
just the text */
padding: 3px 0 3px 4px;
text-decoration: none;
border-top: 2px solid #a9775e;
border-right: 1px solid #a9775e;
border-left: 1px solid #a9775e;
}

.Navigation a:visited {
color: #a9775e;
display: block;     /*  this makes the whole box highlight rather than
just the text */
padding: 3px 0 3px 4px;
background-color: #ffffff;
text-decoration: underline;
border-top: 2px solid #a9775e;
border-right: 1px solid #a9775e;
border-left: 1px solid #a9775e;
}

.Navigation a:hover {
color: #a9775e;
display: block;     /*  this makes the whole box highlight rather than
just the text */
padding: 3px 0 3px 4px;
background-color: #e4ebb7;
text-decoration: underline;
border-top: 2px solid #a9775e;
border-right: 1px solid #a9775e;
border-left: 1px solid #a9775e;
}

For each one, remove the following...

• display: block; /* this makes the whole box highlight rather than just the text */

• border-top: 2px solid #a9775e;
  border-right: 1px solid #a9775e;
  border-left: 1px solid #a9775e;

  Note that you may only have one common border property to change, instead of 3 or 4 individual ones.

Then make the background-color the same for all three -- a hex code, a named color, or "transparent."

Your buttons will now display as links.

Changing How Buttons Look

You may want buttons, but want them to look different. In the code above, you would simply make a few changes...

• Change color to a different hex code or named color to make the link text a different color.

• Change background-color to change the color of the button.

• Add, remove or modify the border property or properties. Borders can have different colors; be solid, dashed, dotted, double; and be different widths -- 1px, 2px, etc. Make changes until you're satisfied with the look of your buttons.

Changing From Links to Buttons

If your design has only links, and you'd prefer buttons, you need to add code to style.css. First, find this code...

.Navigation li {
background-color: transparent;
margin-bottom: 3px;
}

Change the background-color to the hex code or named color of your choice. Then change this code...

.Navigation a:link {
color: #000033;
padding: 3px 0 3px 4px;
text-decoration: none;
}

.Navigation a:visited {
color: #000099;
padding: 3px 0 3px 4px;
text-decoration: none;
}

.Navigation a:hover {
color: #333333;
padding: 3px 0 3px 4px;
background-color: transparent;
text-decoration: underline;
}

First, change the background-color in each one to the hex code or named color of your choice.

Next, add display: block; /* this makes the whole box highlight rather than just the text */ to each one. This will make each link act like a button.

Change the color and text-decoration to suit your tastes.

Finally, add border property(s) to each one to suit your tastes (see above for a discussion of what you can add to border properties.

Change the Main Images

You may want to change one or more of the design images...

• logo image

• global background image

• main content column image

• navigation, extra column and footer images.

You can do all of this in your CSS file. Go to its Page Structure Details section and then check out the following sections...

Logo Image

If you want to change the logo image, find the following code in your style.css...

#Header {
background-image: url(../image-files/header-image.jpg);
background-repeat: no-repeat;
background-color: transparent;
background-position: top left;
}

Change header-image.jpg (or the header image's file name in your style.css) to the file name you want to use. Or use your graphics application to edit header-image.jpg and leave the CSS code as is.

Global Background Image

Your template may use a global background image. You can change it by finding the following code...

#PageWrapper {
margin: 24px auto;
background-image: url(../image-files/background.gif);
background-repeat: repeat-y;
}

Change background.gif (or the file name in your style.css) to the file name you want to use. Or use your graphics application to edit background.gif and leave the CSS code as is.

Main Content Column Image

Your template may also use a main content column background image. If it does, you'll probably find it here...

#ContentWrapper {
background-image: url(../image-files/background.gif);
background-repeat: repeat-y;
background-color: transparent;
}

If not, you'll find it here...

#ContentColumn {
background-image: url();
background-repeat: no-repeat;
background-color: transparent;
}

Change background.gif (or the existing file name) to the file name you want to use. Or use your graphics application to edit background.gif and leave the CSS code as is.

Navigation, Extra Column and Footer Images

You can do the same for the navigation column, the extra column and the footer, changing or replacing each of their background images...

#NavColumn {
background-image: url(../image-files/nav-background.jpg);
background-repeat: repeat-y;
background-color: transparent;
}

#ExtraColumn {
background-image: url();
background-repeat: no-repeat;
background-color: transparent;
}

And you can do the same for the footer...

#Footer {
background-image: url();
background-repeat: no-repeat;
background-color: #abc4e3;
text-align: center;
font-size: 85%;
}

No file name may be used. In this case, the code is different (e.g., background-image: url( ); in #ExtraColumn and #Footer, above). Replace that URL with the following code if you want to use an image...

background-image: url(../image-files/location-background.jpg);

Note that "location-background.jpg" is the name of your image. Name it according to location (e.g., "nav-background.jpg," "extra-col-background.jpg," or "footer-background.jpg"). Change the extension, too, if necessary, from "jpg" to "gif" or "png."

Switching to 2 Columns

Do you want to turn your 3-column design into a 2-column one that's 960 pixels wide? Here's what to do...

In style.css, go to...

/* ------ Section 2 - Global Page Structure ------- */

Go to #ContentColumn, where you will see this...

margin: 0 180px 0 180px;

Change that code to...

margin: 0 0 0 180px;

Next, go to #ExtraColumn and add this line...

display: none;

It should look like this...

#ExtraColumn {
display:none;
float: left;
width: 179px;
margin-left: -180px;
}

Remember to remove any content in the Extra Column, especially any AdSense ad code. It's against Google's terms of service to hide ad code, which is what you'd be doing if you left the code in but hid the Extra Column.

Not all of the templates have a Content Column that can be widened easily. Some have the Extra Column in the middle, so you'll have to change the last number in the margin. Others have the width of the Content Column also set by graphics. So you'll have to make changes to the background images, and possibly to the header and footer images, depending on the template you selected.

Summary and More

You now know how to change the most commonly customized parts of any downloaded template. For other customizations, either download and check out the CSS Action Guide, ask at the HTML & CSS forum, or hire a SiteSell Professional to do it for you.

Once you have your site's design where you want it, complete work on your SBI! Includes in the masterTemplate.html file in your downloaded site design package. SBI! Includes foresee just about any possible future need for site-wide changes.

Click here for more information about using SBI! Includes with your template.

© and ™ SiteSell Inc. All Rights Reserved.

Close Window