Hexidecimal Color Codes
We have 2 sources that you can use to choose your hex code colors.
Color chart is a simple display of colors and their corresponding hex codes.
Hex Color Generator is a tool that you can use to choose actual color schemes for your frames kit.
Changing Heading Background Color
Open the heading.css style sheet file with any text editor.
Find the color statements that contain this code:
background-color :
Replace the hexidecimal code after the colon with your own color choice.
Be sure to precede the hex code with a pound sign (#).
Changing Intro Background Color
Open the intro.css style sheet file with any text editor.
Find the color statements that contain this code:
background-color :
Replace the hexidecimal code after the colon with your own color choice.
Be sure to precede the hex code with a pound sign (#).
Changing Link Background and Button colors
Open the top-links.css style sheet file with any text editor.
The code below is a sample from one of the templates. Examine the comments to accomplish color changes.
a.menu1{
display:block;
width :100px;
text-align : center;
font-family: Verdana;
font-style : normal ;
font-size : 9pt;
font-weight :bold;
color :#ffffff; */ Change Normal Button Text color Here */
text-decoration : none;
background-color :#a94d38; */ Change normal button color here */
padding :1px;
border-top : solid #ff967f 1px; border-right : solid #ff967f 1px; border-left : solid #000000 1px; border-bottom : solid #000000 1px }
a.menu1:hover{
color :#dfdfdf; */ Change button text hover mode here */
background-color :#54261c; */ Change button color hover mode here */
border-top : solid #000000 1px; border-right : solid #000000 1px; border-left : solid #ff967f 1px; border-bottom : solid #ff967f 1px }
body { background-color: #a94d38; */ Change Links section background color here */
margin:0 }
Adding a Heading Graphic
You can order a free heading graphic from our Graphics Gallery.. When you order, the background color for the image will be the color that you specify for the background of the heading section.
Save the new image in the images folder of your template.
To place the new image you will modify the web page named heading.html
Some of the templates don't have an existing graphic. Replace the code shown below with the code to add your image.
<h1>Use this free frames template to create a website.</h1>
For templates that already have an image the code is shown below:
<img src="images/create-a-website-frames.png" width="250" height="63" align="left" alt="Create a website with free frames template." border="0">
If you use an html editor to replace the image, width and height settings will most likely be set for you. If you change the image manually you will need to adjust the width and height settings of the image. See Anchor Tag Image
If your image is cut off when you view the entire frameset or the index.html page, you will need to change the height settings of the rows. The code found on the index.html page is shown below.
<!--The settings for rows are their height in percentages - They should add up to 100-->
<frameset rows="15/,10/,75/" frameborder="NO" framespacing="0" style="border: solid #000000 2px">
If the height of your new image is 150 pixels, try changing the row settings to:
rows="160, 50, *" See Frames
|
Most of the changes that you make to your frames kit will be made by editing the style sheet that controls the section of the page you wish to modify.
