Time to spice up your links

In XSitePro you can change the way your links will look by simply adding some code to the scripts section.

Open up XSitePro and click on the "other" tab.

Next click on the "scripts" section. (Global Scripts for Ver2)

Next copy and paste the code below into the top box (head section).

<style>
<!--

A.type1:link    {color:#01657B; text-decoration:none;}
A.type1:visited {color:#FFDD00; text-decoration:none;}
A.type1:active  {color:#01657B; text-decoration:none;}
A.type1:hover   {color:#00FF80; text-decoration:underline;}

A.type2:link    {color:#00FF80; text-decoration:overline underline;}
A.type2:visited {color:#FF0000; text-decoration:overline;}
A.type2:active  {color:#FF0000; text-decoration:none;}
A.type2:hover   {color:#F07BDE; text-decoration:overline underline;}

//-->
</style>

Now it's time to put a style on your links. (Remember we just put 2 different styles into the header script section).

For a text link, just include a class=styleName in the <a href> tag. (Our style names are type1 and type2)

Here is an example.

This link Get XSitePro looks like this in code -

<A href="http://www.xsiteprowebsitedesignbuilder.com/xsitepro.html">Get XSitePro</A>

Now attach a style to it - Get XSitePro - and the code looks like this -

<A class=TYPE1 href="http://www.xsiteprowebsitedesignbuilder.com/xsitepro.html">Get XSitePro</A>

Notice the CLASS=TYPE1 before the href=.

Here is style #2 Get XSitePro

Remember to clear your browser and refresh the page to get the link back to the unvisited state.

I have only shown you two different styles.  You can have unlimited styles, just follow the pattern in the code.

To change the colors, just change the color values. Here is a tool to help in choosing the colors.HTML Color Converter

The text-decoration sets how the underline/overline will or will not appear with a link.

• text-decoration: none - will not show a link underline or overline.
• text-decoration: underline - will show a link underline.
• text-decoration: overline - will show a link overline.
• text-decoration: overline underline - will show a link overline and underline.

To have all your links be the same on all pages,  then instead of modifying each link code as above, you can just add the code below to your Global Scripts --> Head Section

<style>
<!--
A:link {color: blue; text-decoration: underline;}
A:visited {color: blue; text-decoration: underline;}
A:active {color: blue; text-decoration: underline;}
A:hover {color: white; text-decoration: none;}
//-->
</style>