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

 


 

You find that your normal globally applied link style settings do not work with links you have in a certain area on your web pages because the colors or font or size of the text is not want you want.

You can create a custom CSS style for this issue and apply the custom CSS to any page you wish.

Step 1:

Make sure that you have CSS enabled for the web site project you are working on. To enable CSS from the Menu bar select Tools > Options > Current Site and on the general tab of the Site Settings Palette make sure that Enable CSS has a tick in the radio button.  Click this link to see what this palette looks like to make sure you are in the right place

Step 2

Edit your StylesFrom the NetObjects Fusion menu bar select Text then pick  Edit Text Styles.

This will bring up the CSS user interface where you will create a custom CSS style that you can apply to any individual link to have it look differently from your standard links settings you have made in the current web style you are using in Style View

 

Create 4 custom styles by clicking the New button at the bottom of the Text Styles properties palette.

  1. Place a tick in the Create custom Style radio box and give your new link style a name (this example uses the style name of different). Make the first style different:link (your unique name a colon and the word link.  You can use any name you wish but different will be used in this example)
     
  2. If you wish your custom link style to be available on every page place a tick in the Site Wide radio button, if you only want this style to be used on a single page select the Page Specific radio button.  NOTE: You must be on the actual page where you want to use the style if you select Page Specific

Create 4 new custom styles

Your new styles should show in the display listingMake 3 additional CSS tags by following the steps above and name them

 different:active

different:hover

different:visited

At the bottom of your list of Styles in the properties palette you should see your 4 new custom CSS style declarations

To apply these styles to any link all you need to do is select the link, click the link button on the text properties palette, click the HTML button which is located at the bottom left corner of the Links Properties palette and insert  class="different" in the Inside the Tag tab of that palette

Step 3:

You can apply your Custom link style to any text link and it will inherit the attributes you have set when you created it.

Apply your custom Link Style

NOTE:  If you wish to edit any of your new link CSS styles bring up the CSS interface by selecting Tools > Edit Text Styles, select the style from the display list and click Edit to bring up that style's CSS properties.

Your custom link style will not display within the Fusion design as it is applied outside of the GUI.  In order to view your newly created link style you should preview your page and test.



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