Templates/site colors

There are three basic areas of this page; your template selection, some pre-selected color schemes you can pick from, and lastly, individual color selections for various features on the site. Let's explore each area.


There are multiple different templates that you can pick from, and you can change your template at any time. Just click on one of the small template pictures to select it. An orange box surrounds the current template that you have selected. If you like the colors used in that little image, then click the "Load Default Colors" button on the above right of this section.

There are a couple things you should consider in selecting a template:

First, what does your logo look like? Is it square, rectangular? Would it look okay overlaying an image, or should it be against a solid background?

Also, and most importantly, how many pages do you intend to have on your site? If you pick a template that has the buttons across the top, can some of those pages nest underneath other buttons? Templates with top navigations can only have a certain number of buttons across the top. Only select one of these if you can nest your extra pages under other buttons, or if you won't have more pages than the default set.

You have to save your changes before you'll see the new template on your site. Sometimes you may even need to refresh your cache.

Color Schemes

We have come up with proven color schemes that you can use as starting blocks for you site, if you choose. We have tested these schemes on all of the templates and in most cases, they look nice. Some look better on particular templates though - just test them out until you find one you like. Once you've selected a scheme, you can then tweak those colors below. Remember that you must save your changes to view them on your site.

Individual Color Selectors

To customize individual colors in your site, select the 'Advanced Color Selections' button near the bottom of the page.

Please note that some selectors are particular to only some of the templates. At times you may have to play around with these to find which selector affects a certain area of your site. For instance, Top Bar Color refers to the templates that have a small strip across the top edge, or to the templates that have a large top block of color at the top. Also, If you're trying to change a header color, you may need to try Page Header Color, or Header Box Color.

To use the color selectors, just click on the bottom corner of one, or on the gray color field to the right of it. A Small popup shows up. In this popup you can drag the little circle around in the window, drag the slider up or down the rainbow of color, type a six digit HEX number into the field at the bottom after the hash tag, or fill in the appropriate RGB or HSB numbers if you know them.

Note that you have the ability to specify your fonts for your navigation and your body copy. You can also choose your Base Font Size. This will increase or decrease your text size on your entire site by up to three steps. Be careful with this. Everyone's browser is different. What may look like large or small text to you might look very different on someone else's computer. Keeping it at the default size is the safe way to go.

Again, remember to save your changes before you leave this page.


This tutorial website is designed to assist our bytePages™ customers in working with the byteEditor Content Management System they have on their sites.

Go here if you would like to have a bytePages™ template site, with this Content Management System installed in it: bytePages.

Go here if you would like to convert your existing site, or to build a new custom website as a self-manageable site using our proprietary Content Management System (byteEditor):
Byte Productions.