[Pro] Change hyperlink underline colour

Hi

On this page http://ow.ly/NKXgY where is say Click here to ‘Get a Fast Quote’ how do I acheive the following:

• ‘Click here to’ hyperlink underline in blue

• ‘Get a Fast Quote’ hyperlink underline in red

Any help appreciated

Tony

http://ow.ly/NKXgY


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Within Freeway, have your CSS menu open to the point where you can see the list of your menu choices (click on it) Once it’s open, highlight what you want to change and just have the Actions tab (pretty sure that’s the one) open and you can do a variety of different things to it… Hover color, link color, etc.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Also see - http://www.softpress.com/kb/questions/188/Creating+navigation+menus+with+the+CSS+Menus+Action


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks for that Mike

What I’m particularly trying to achieve in the example given is the first half underline in blue, the second half underline in red.

Can we do this in Freeway Pro 5.6.5?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ah I see now… Hmm. I don’t know how that would work with the options we have. Maybe someone else can chime in but I don’t know how that would be done.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yes it’s possible with pure CSS but you need to add some custom code. You’ll have to modify the code below to target your specific link but the general concept does in fact work quite nicely, I tried it.

Essentially, instead of using the underline property for links you instead want to use a bottom-border. You will still get a line but you will have greater control over styling.

This code will produce a bottom border that is half red/blue.

.bottomHover {
    border-bottom: 2px solid red;
    position: relative;
}    

.bottomHover:after {
    position: absolute;
    left: 50%;
    right: 0;
    bottom: -.3em;
    border-bottom: 2px solid blue;
    content: '';
}

Todd
https://xiiro.com
CREATiv {space}
(coming soon)

What I’m particularly trying to achieve in the example given is the first half underline in blue, the second half underline in red.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You could put your hyperlinks in 2 separate html containers and set different link states on each container.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Tony

I believe you can achieve what you want by :

Navigate to Site Folder > Page > Formatting Icon (Second on the left where links formatting can be found) > Under “Links” you can specify how you want links to appear.

In addition if you then click on the “more” button under the “Link Styles” triangle click the ‘link’ and enter a style sets to play until your hearts content.

Hope it helps
Paul


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

There’s a difference between the css Underline text decoration and the border-bottom attribute. To use a different color for the line that the linked text you will need to use a border-bottom, borders you can define separately from the text. The attribute ‘underline’ always will have the same color the underlined text has.

To use different colored lines for each specific menu-item you will need to create a couple of extra name and tag styles to do so.

The name styles doesn’t have to contain any attribute, it just has to exist in your stylesheet so you can apply them. Name them as your border-color, like:

  • .menuRed
  • .menuBlue

Also create a couple of tag styles to apply the link styles (do include the dot here):

  • .menuRed a:link
  • .menuRed a:hover
  • .menuBlue a:link
  • .menuBlue a:hover

These styles will enclose the appropriate attributes, added via the Extended … feature, for you to choose what style (link, hover) to apply them to:

  • border-bottom: 1px solid Red or
  • border-bottom: 1px solid Blue

Richard


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options