You can change link colors on a page beyond those set in Web Studio. This comes in handy if there are some links that just don't work with site-wide colors.
This Link uses the colors I assigned for this page - Blue for Unvisited, White for Hover, and Blue for Visited. I also selected the links to be underlined.
(The link opens a blank page).
Let's say that I need a certain link or set of links to be Red, Yellow and Blue and not be underlined, but I still want the rest of the links to stay the same. How would I do it?
If you select the text with the link, right-click and choose Edit HTML Source, you'll see code like this:
Main Menu
©
2007 WebStudioHelp.net & SunsetFX.com All Rights Reserved Worldwide
No images, graphics or text on this site may be reproduced without the written permission of WebStudioHelp.net
'Back to the Beach', 'Web Studio' and all content accessed through the Web Studio Forums are Copyright Back to the Beach Software and Web Studio.
Examples listed are with permission.
Navigation
Changing Link Colors Within a Page
The link in that paragraph is this portion:
Into the code above, paste in class="summit" after the <A (whether it's after <A href= or <A title= , etc.). The difference between the <A href and <A title has to do with whether or not you entered extra text into the description area when adding the link.
The resulting code would look like this:
|
Code: |
|
<P>
You can change link colors on a page beyond those set in Web Studio. This comes in handy if there are some links that just don't work with site-wide colors. </P> <P> <STRONG> <A title="Opens a blank page" href="http://www.blank.com/" target=_blank name="dummy link"> This Link </A> </STRONG> uses the colors I assigned for this page - Blue for Unvisited, White for Hover, and Blue for Visited. I also selected the links to be underlined. <BR> (The link opens a blank page). </P> <P> Let's say that I need a certain link or set of links to be Red, Yellow and Blue and not be underlined, but I still want the rest of the links to stay the same. How would I do it? <BR> </P> <P> If you select the text with the link, right-click and choose <STRONG> Edit HTML Source </STRONG> , you'll see code like this: </P> |
|
Code: |
|
<A title="Opens a blank page" href="http://www.blank.com/" target=_blank name="dummy link">
This Link </A> |
|
Code: |
|
<A class="summit" title="Opens a blank page" href="http://www.blank.com/" target=_blank name="dummy link">
This Link </A> |
Now, add the following code to the page - Page Properties / Page HTML / Inside Page Header:
|
Code: |
|
<style>
<!-- a.summit:hover {text-decoration: none; color: yellow;} a.summit:link {text-decoration: none; color: red;} a.summit:visited {text-decoration: none; color: blue;} --> </style> |
The result:
This Link now has Red for Unvisited, Yellow for Hover, and Blue for Visited - there is also no underline.
(The link will take you to CNN.com - use the "Back" button to return).
And I've added This Link to see the difference when one has been visited already.
(This link will take you to FoxNews.com - use the "Back" button to return).
You can also use this Color-Picker to generate the code to be placed into the Page Properties Thanks to Surfa for the help on the Color-Picker script!
To use, click on the color palette icon ( ) to open the color chart. (Note that there are different charts available from the drop-down selector). As you scroll over the colors, you'll see the color with both white and black text indicating the value. Select the colors you want for each mode, and if underlined links are desired (N0 / YES). When the colors have been selected, click on the Generate Code button. The Highlight Code button will allow you to copy the code (CTRL, C).
|
|
