How to Edit the Colors of Templates in Kompozer
Templates help Web designers save time by reusing HTML elements. A camera sales site, for example, may need to display the same heading and background color on all pages on the site. Instead of setting those properties for each HTML page, site developers create a single template and make each page reference that template. If they later decide to create pages with different colors, they can update the template. If you use KompoZer, a free HTML editor, change the color of an existing template using the program's "CaScadeS" editor.
Other People Are Reading
Instructions
-
Create Template
-
1
Launch KompoZer and click "File." Click "New" then click "A Blank Template." A blank HTML template appears in the editing window.
-
2
Press "CTRL" and "S" and type "Test Template 1" in the "Page Title" text box. Click "OK." The "Save Page As" window opens and displays your hard drive's folders. Click one of the folders, and then type a "Test Template 1" in the "File Name" text box. Click "Save." KompoZer creates a new template and saves it in the selected folder.
-
-
3
Click the "CaScadeS" button at the top of KompoZer to open the CSS Stylesheets window. This window allows you to create a new style sheet for the template.
-
4
Click "Internal Stylesheet," and then click the drop-down box located on the right side of the window to view a list of HTML elements that you can style. Click the "body" element and then click "Create Rule."
-
5
Click "Background," and then click the "Color" button to display the Color window. Click one of the colors in the window, and then click "OK." KompoZer sets the stylesheet's body color to the selected color. Because the template uses the stylesheet, its color will also display that color.
-
6
Click "Insert." A drop-down menu appears. Click HTML and then type the following code into the text box that appears:
<h1>This is the Template Heading </h1>
Click "Insert" again. KompoZer adds a heading to the template. At this point, the template contains a heading and a background color matching the color you selected for the template's style sheet.
-
7
Press "CTRL" and "N" to open the Create a New Document window. Click "A New Document Based on a Template," and then click the "Folder" button to display the "Choose File" window. Locate the template file you created and double-click that file.
-
8
Click "Create." A new HTML page appears in the editor. Because it uses the template, this page will display the template's heading and background color. Any page you create that references this template will show the template's heading and background color. If you later decide that you need to create pages that have different colors, you can do that by changing the template as shown in the next section.
Change Template Colors
-
9
Press "CTRL" and "O" to display the Open HTML File window.
-
10
Click the "HTML Files" drop-down arrow and then click "HTML Templates." A list of existing templates appears in the window.
-
11
Double-click the template you created to open it in the editor. Its background color matches the color you set when you created the template.
-
12
Click the "CaScadeS" button to open the CSS Stylesheets window. Click the "body" link located in the window's left panel, and then click "Background."
-
13
Click the "Color" button to display the Color window. Click the new color you would like to use for the template and click "OK." KompoZer changes the template's color to the selected one. Any new HTML documents that you create based on this template will use the new color.
-
1
Tips & Warnings
This example creates a simple template that sets an HTML document's background color. You can use the same principles to set colors of other elements such as buttons, labels, paragraphs and text boxes. HTML pages that reference the template will apply those colors to the appropriate HTML elements. You can later change the template colors as shown in these steps. New HTML documents that you create that reference the template will use the new colors. KompoZer Web page
