GotFusion.com  Where your journey begins
Showcase your website at Fusion GalleriesNetObjects Fusion 7 Websites Portal

 


 

Creating a Custom CSS Style/Class

Using CSS (Cascading Style Sheets) allows you to set text font, size, and color for all text on all pages. Using CSS will make your web site pages uniform and use the same text through out. You should go over the numerous gotFusion tutorials on CSS to get a complete understanding of CSS and how it works within Fusion.

Make sure you have your web site project set to use CSS. This has been the default for the last few releases of NetObjects Fusion but if you are using an earlier product you need to change from HTML to CSS formatting

This gotFusion tutorial will show you where to check to make sure your site project is set to use CSS formatting.

Click the Page View IconGo to Page View on any page of your web site project. If you are not at page view press the Page Icon in the icon bar.


From the menu bar select Text > Manage Styles
Click Text Manage Text Styles


You will see the Manage Styles properties palette. This will show you all of the CSS styles that are used by your Fusion site project. You can edit any of them (even the ones that you set in Style View) from this Properties palette. This tutorial covers creating a new CSS style so:

  1. Click the New button at the bottom left.
  2. The first option/bullet lets you change an existing style. We want a new style so select the second option of Create Custom Style and give it a name. You cannot have spaces so make sure you use one word or a hyphen or underscore between words. Make the name of the style as descriptive as you can so that you know what it is when you go to apply it. Our example is green-14px.
  3. We want to use this new style on every page so select Site Wide
  4. Click the OK button to go to the next palette where you will define the style

Select the type of style to create


On the formatting palette you have all of the formatting options that are available.

We want to only change the size and color not the font so we leave everything set to automatic other than the size (14px) and the color (green).

If you want to uses a color that is not on the color picker, click on More Colors and then you can enter the hex or RGB numbers for the color you want to use. Your formatting will be shown to you in the preview window so that you know what it will look like and can change or tweak the look. When finished press the OK button to write the CSS style to your style sheet. Then close the Manage Styles properties palette

Format the text the way you want it to look


Applying a Custom CSS Style/Class

On your page, highlight the text you wish to apply your custom CSS style to. From the drop down list, select the style and it will be applied. Your custom styles will always be at the top of the Style drop down so that they are easy to locate and uses. That's all there is to using custom CSS styles. Since you selected to use the style on all pages the text formatting drop down will show green-14px on every page.

Apply CSS formatting to text



Return to the TOP of this page

Did you find this tutorial useful?
Do you want to keep this resource online?
Make a donation to keep gotFusion alive


|  Fusion  |  Web Design  |  Hosting  |  Resources  |  gotFusion Store  | 

Problems with this page?  

All content copyright © 2001 - 2017 gotFusion LLC. The name gotFusion and the gotFusion ® logo are registered trademarks of gotFusion LLC
Copyright, legal notice & privacy statement