Website Template Font Classes
Adding New Title Styles or Text Styles
These are instructions for adding a totally new font size or color. For editing current font sizes and colors see changing font color, size and face or changing link colors
Step 1:
Open the template .css file, coolstyle.css or corporatestyle.css, or css file in your colors folder, using Notepad.
Step 2:
Select and copy one of the "class" lines as shown in the example below:
.title { color: #FF3300; font: 15px verdana, arial, sans-serif; font-weight: bold; }
Paste it just below itself.
Step 3:
Now edit the new line with a new name as seen below.
.titlebigger { color: #FF3300; font: 15px verdana, arial, sans-serif; font-weight: bold; }
Edit the new line with some new sizes or colors.
.titlebigger { color: #000000; font: 22px verdana, arial, sans-serif; font-weight: normal; }
You have now created a new class. You will now need to edit one of the HTML pages to add the new title color to some text.
Step 4:
Open one of the HTML pages, for example open the about.htm. Look for code similar to what is seen in the example below. This may be a little different in your template. (this line is from the "NewYork" Template)
<span class="title">ABOUT US</span><br>
Step 5:
Change the class name as in the example below:
<span class="titlebigger">ABOUT US</span><br>
Now open the page in your browser and hit the "refresh" button.
HTML Headings
Making headings in the template pages - <h1> to <h6>:
A heading is HTML code and can be used for titles in the template pages, however, you will want to style them using CSS. Using headings may improve your website search engine ranking.
Example: Add the following to any page:
<h1>This is a Heading</h1>
The results will be the following with a double break after the heading title:
Styling the heading:
You will now want to "style" the <h1> tag to remove the double break and use the font and color of your choice. You can add the following to your template css file for a black heading:
h1 { color: #000000; font: 16px arial, sans-serif; font-weight: bold; margin: 0px 0px 1px 0px; }
You can optionally replace all the "title" classes in your template pages with heading code. Locate the following in your HTML pages:
<span class="title">
About Us<br>
</span>
And replace the above with the following code:
<h1>About Us</h1>
Or you can skip adding any new css code and just replace the above with the following and add the "margin: 0px 0px 1px 0px;" as shown above to the css file title code:
<h1 class="title">About Us</h1>
Caution Note: Use only a single heading tag per page otherwise it may be seen as spamming by Google.
For more help with HTML headings see Formatting H1 Heading Tags For SEO and also HTML Headings at W3Schools.
Related Topics:
Changing Link Colors
Changing Font Colors
Editing the Flash Animation
Adding a Second Link Class (advanced)
Links:
Font Colors
Color Mixer Software
|
|
Allwebco Chrome Templates
Quick color change css web templates.
AllwebcoDesign.com
Shopping Cart Templates
Professional templates with built-in Paypal.
AllwebcoDesign.com
|
