More on this site

Alt-Web Home Page

Chalk Board Intro

CSS  Styled Background Images

Image Borders on Mouse Over

Iframes

Print Page Buttons

Close Window Buttons

Scrollable Divisions

CSS  Flyout Menus

Vertical & Horizontal Centering

Centered on  Two-toned Background Image

Liquid Layouts

Images and Text

Layout Regions

Printer Friendly Pages

Web Color Assist Tool

Hex  Color Chart

Favicons

Fast Contact Forms

Custom CSS Link Styles
in NetObjects Fusion (8, 9 or 10)

Description:

When you need a second set of link styles in your site, this tutorial gives you basic code which you can copy & paste into the head of your MasterBorder (in-line style) or sitewide CSS (external stylesheet).  Feel free to edit styles to suit your needs.

Example:   newlink item 1 |  newlink item 2 |  newlink item 3

In-Line Tutorial (NOF 8, 9, 10)

1. In Page Design View, Tools > Options > Current site > General Tab: Select Dynamic Page Layout -all browsers, Cascading Style Sheets (CSS) and change Curly Quotes to Straight Quotes.

2. Highlight and copy this code for a newlink class:

<style type="text/css">

.newlink:link{/*unvisited*/
color:#990000;
text-decoration:none}

.newlink:visited{/*visited*/
color:#9999FF;
text-decoration:none}

.newlink:hover{/*mouseover*/
color:#990000;
background:none;
text-decoration:underline}

.newlink:active{/*selected*/
color:#FFCC00;
text-decoration:none}

.newlink:focus{/*optional, same as hover, but with tab key*/
color:#990000;
background:none;
text-decoration:underline}

</style>
 

3. Click somewhere inside your MasterBorder or Page Layout area.  On the properties box (F3), hit the HTML... button.

4. This will invoke an HTML insertion window.
5. Select the Between Head Tags tab and paste your newlink code into the HTML insertion pane:

6. Edit hex #colors and other style definitions as required.. Use this handy Hex #color chart to help with color selection. When you are done, click OK.

Applying newlink class to your text (NOF 8, 9, 10)

7. Type some text on your page, highlight text and click the LINK button.
8. On Link Properties Box, hit the HTML button and click on the Inside Link tab.
9. Paste this bit of code into the link HTML insertion box and hit OK.

class="newlink"

10. Repeat steps 7 - 9 for other newlinks.
11. Save site (Ctrl+S).  NOTE: This style is not visible in Design View. You must perform a Local or Remote Publish to see your newlink style.

Pasting Code into External Stylesheet (NOF 10)

1. Copy the newlink code WITHOUT these beginning and closing tags:

<style type="text/css">
</style>

2. On the Tools Menu, go to Style View

3. Click the CSS Code tab and scroll down to the bottom of your stylesheet. Click inside the stylesheet and paste  newlink code. Save site ( Ctrl+S).

NOTE:  This link order MUST be followed to work.

• Link,
• Visited,
• Hover,
• Active
• (optional) Focus

The memory device for keeping correct link order is LiVHA.  For more on pseudo-classes and link styles, visit the w3schools.com

We hope you enjoyed this tutorial on custom CSS link styles.