|
Multiple hover & link styles on a single page or site wide
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
- Click the New button
On the New Text Style properties palette
- Select Create Custom Style give your new style a unique name
Use the format of uniqueName:link (with a colon between)
- 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
- 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.
different:hover
different: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:
- Highlight the link
- Click the Link button on the text properties palette
- Select the internal, external or file link from the link properties palette
- Click the html button on the property palette
- 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
|
Did you find this tutorial useful?
Do you want to keep this resource online?
Make a donation to keep gotFusion alive
This page was written by and is maintained by turtle
|
|
