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



Multiple hover & link styles on a single page or site wide
Select Manage Text Styles

This tutorial will go over how you create and apply a CSS pseudo class to create different styled and colored links on a page

This works in all releases of Internet Explorer, FireFox, and Opera.

In Page View, from the menu option Text, Select the drop down option Manage Styles.

    From the Manage Styles properties pallet
  1. Click the New button
  2. On the New Text Style properties palette
  3. Select Create Custom Style give your new style a unique name
    Use the format of uniqueName:link (with a colon between)
  4. Select Site Wide if want to use different link colors on all pages
    Select Page Specific if you wish to use different link colors on only this page
  5. Click OK

On the Text Format - (your link style name) properties palette, set whatever you wish to use for the new link as far as color, underlines, background color, positioning, etc. Color is the only thing that must be set. Leave the text size and font set to automatic unless you wish a different size and font on the links. By leaving everything else set to automatic and not setting a font size, this will let the links take on the font and size of the text that surrounds it.

After creating your different:link style you must create two more custom styles. One for hover and one for visited.



If you need more link styles, repeat the above process to create 3 more link, hover, and visited states and use another unique name for them (different etc)

Fusion 11 and later uses this method to apply a link pseudo-class

Now for any link in your site that you wish to show with a different color you can apply this style to it by:

  1. Highlight the link
  2. Click the Link button on the text properties palette
  3. Select the internal, external or file link from the link properties palette
  4. Click the html button on the property palette
  5. Insert class="different" inside the link as shown (if you choose another name, use the name you have chosen)

This link has class="different" inserted

This link has class="different2" inserted

This link has class="different3" inserted

This link does not have a class inserted and is site default

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