spacer spacer
SITEWAVES / Support / Knowledge Base   Member LogIn   
spacer
spacer
spacer
spacer spacer
spacer spacer
spacer spacer spacer
spacer spacer
SiteWaves Knowledge Base
spacer
spacer
spacer
spacer spacer spacer
spacer spacer
spacer spacer
GUEST
spacer
spacer
spacer
spacer spacer
Forum Home | Register | Preferences | Search | Log In
spacer
spacer
spacer
spacer spacer
Not Locked Moderated By Admin MODERATORS:  ADMIN Printer-Friendly Version Send this topic to a friend spacer
spacer
spacer
spacer
spacer spacer
<< Previous Topic Creating A Website Style Sheet Next Topic >>
spacer
spacer
spacer
spacer spacer
New Message emotions spacer spacer spacer spacerApril 22, 2004 @ 10:20:59 AM spacer
spacer
spacer spacer spacer
ADMIN
Administrator

Posts: 169

Joined:
Mar/10/01

spacer spacer spacer
Creating A Website Style Sheet

You have all the power when it comes to developing your ideal website. You can create new site colour schemes that may be applied to pages within your website using the Style Sheet editor. A style sheet is a simple mechanism for adding style (e.g. fonts, colors, spacing) to your website pages. Using these style sheets, you can define the size/colour/face of fonts, links, and form buttons on your site.

To access the Style Sheet editor, open the Website Option editor, and click on the [Edit Style Sheets] link to the right of the Style Default option. This will open a new window containing the Style Sheet editor. Once the editor has loaded, you may complete the form to create a new website style sheet using the steps below:


Step 1 - Creating Your New Style Sheet
Click in the box provied next to 'Style Title' and enter the following title:'My First Style Sheet'. Click on the 'Create' button located along the bottom of the editor. This will copy the existing selected style sheet and close the window.

Step 3 - Viewing Your New Style Sheet
Click the [Edit Style Sheets] link to the right of the Style Default option. This will open a new window containing the Style Sheet editor. Once the editor has loaded, select the style titled 'My First Style Sheet' with Today's Date from the Select Style drop down list at the bottom of the editor. This will refresh the editor with your new style.

Now you can go ahead and start setting your new style sheet design parameters!

SETTING YOUR MENU STYLE OPTIONS
Step 1 - Give your menu a background color
Beside the word 'Background' you will see a box. Click in the box to open the color picker window. Select any color you wish as your menu background.

Step 2 - Change the font of of the menu text
Select a style of text from the 'Font Face' drop down list provided.

Step 3 - Change the color of the font
To change the color of the font you selected, click in the 'Color' box below the 'Font Face' drop down menu, to popopen the color picker window.

SETTING YOUR PAGE STYLE OPTIONS
Step 1 - Choose A Body Color
At the top of the editor, click in the box next to 'Body Color' to popopen the color picker window. Select which color you would like to be applied as the Body Color of your page.

Step 2 - Setting The Header Title Bar
To apply a background color to the header bar, click in the first box provied to popopen the color picker window. Select which color you would like to be applied as the background for the header bar. To change the color of the text, click in the box next to the word 'Header' to popopen the color picker window. Select which color you would like to be applied as the text color for the header.

Step 3 - Setting The Title Bar
To apply a background color to the title bar, click in the first box provied to popopen the color picker window. Select which color you would like to be applied as the background for the title bar. To change the color of the text, click in the box next to the word 'Title' to popopen the color picker window. Select which color you would like to be applied as the text color for the title.

Step 4 - Setting The Page Background
To apply a page background color, click in the box provided to popopen the color picker window. Select which color you would like to be applied as the page background.

Step 5 - Setting The Page Font
Select the font and size for the page font, from the drop down lists provied. To change the colour of the page font, click in the boxes provided to popopen the color picker window. Select which color you would like to be applied as the page font color.

Step 6 - Setting The Links Bar
To apply a background color to the links bar, click in the first box provided to popopen the color picker window. Select which color you would like to be applied as the background for the links bar. To change the color of the text, click in the box next to the word 'Links' to popopen the color picker window. Select which color you would like to be applied as the text color for the links bar.

Step 7 - Setting The System Bar
To apply a background color to the system bar, click in the first box provided to popopen the color picker window. Select which color you would like to be applied as the background for the system bar. To change the color of the text, click in the box next to the word 'System' to popopen the color picker window. Select which color you would like to be applied as the text color for the system bar.

SETTING YOUR PARAGRAPH STYLE OPTIONS
Step 1 - Setting The Paragraph Title Bar
To apply a background color to the title bar, click in the first box provied to popopen the color picker window. Select which color you would like to be applied as the paragraph title bar.

SETTING YOUR FORM BUTTON STYLE OPTIONS
Step 1 - Select Normal Button Background Colour
You may select the colour that you would like applied to normal form buttons that appear on your website. Click in the box provided under the 'Colour' title to open the colour picker window. Once loaded, click on the color you would like to be applied to the normal button background. Once clicked, the colour picker window will close and the editor will refresh showing you the updated colour of your normal form button.

Step 2 - Select Normal Button Font Colour
You may select the colour that you would like applied to font of the normal form buttons that appear on your website. Click in the box provided under the 'Colour' title to open the colour picker window. Once loaded, click on the color you would like to be applied to the normal button font. Once clicked, the colour picker window will close and the editor will refresh showing you the updated font colour of your normal form button.

Step 3 - Select Accented Button Background Colour
You may select the colour that you would like applied to accented form buttons that appear on your website. Click in the box provided under the 'Colour' title to open the colour picker window. Once loaded, click on the color you would like to be applied to the accented button background. Once clicked, the colour picker window will close and the editor will refresh showing you the updated colour of your accented form button.

Step 4 - Select Accented Button Font Colour
You may select the colour that you would like applied to font of the accented form buttons that appear on your website. Click in the box provided under the 'Colour' title to open the colour picker window. Once loaded, click on the color you would like to be applied to the accented button font. Once clicked, the colour picker window will close and the editor will refresh showing you the updated font colour of your accented form button.

Step 5 - Select Disabled Button Background Colour
You may select the colour that you would like applied to disabled form buttons that appear on your website. Click in the box provided under the 'Colour' title to open the colour picker window. Once loaded, click on the color you would like to be applied to the disabled button background. Once clicked, the colour picker window will close and the editor will refresh showing you the updated colour of your disabled form button.

Step 6 - Select Disabled Button Font Colour
You may select the colour that you would like applied to font of the disabled form buttons that appear on your website. Click in the box provided under the 'Colour' title to open the colour picker window. Once loaded, click on the color you would like to be applied to the disabled button font. Once clicked, the colour picker window will close and the editor will refresh showing you the updated font colour of your disabled form button.

Step 7 - Save Your Style Sheet Changes
Once you have set your style sheet to your liking, click the 'Save' button located at the bottom of the editor. This will update your style sheet and close the window.


Congratulations, you have just created your first website style sheet! You will see a status message at the top of your screen indicating that the update was successful.

---------------
SiteWaves
Tech Support
spacer
spacer
spacer
spacer spacer
 Indicates New Messages since your last Log In    Indicates new messages posted. 5 Registered members
 Indicates New Messages in folder  Indicates new messages posted in folder. 5187930 Visitors since Mar/05/04
Your last log in: Sat, Jan/01/00 @ 12:00 AM. All times are Eastern Standard Time
spacer
spacer
spacer
spacer
spacer
spacer
spacer
spacer
spacer spacer
Privacy Policy Terms & Conditions Disclaimer Subscribe To Page
spacer
spacer
spacer
spacer spacer
 Accessiblity Options Site Map Font:   [S]   [M]   [L] Color:   [Normal]   [Plain]
spacer
spacer