Applying different text link styles

Freeway
1

Trying to set up two different text link styles using CSS in Edit/Styles.

First I have set up:

a:link
a:visited
a:hover
a:active

These work fine.

Then I’ve set up:

a:link.small
a:visited.small
a:hover.small
a:active.small

The plan is to have the first lot using the default font size and the second lot at a smaller font size (you guessed).

But then how do I apply the styles to individual links on the pages as appropriate? (I get a warning saying I can’t apply the style to text.) Or am I going about this the wrong way altogether?

Thanks.

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

2

It’s kind of a pain to apply a class to a link in Freeway. You have to highlight the link text, then open the Hyperlink dialog, set the URL for the link, then click the Extended button in that dialog, then new to open yet another sub-dialog, and finally add the Name/Value pair class and small.

It’s much easier to do one of the following:

  1. If the small links are all together in a single container, like a footer, then click once on that HTML box (so its corner handles appear) and use the Inspector’s Link segment to set up specific link styles for that container element.

  2. If the small links are always inside a particular style of text, then create a paragraph style called .small that will act as the container for that type of link, and name your small styles like this:

    .small a:link
    .small a:visited
    .small a:hover
    .small a:active

Then just make sure those links are within a paragraph that has the small class applied to it, and don’t do anything else to make them special. They will inherit the styling that you have defined in those special styles – and you won’t need to apply those styles to anything to make that work.

Walter

On Feb 8, 2014, at 10:29 AM, Bob Kerr wrote:

Trying to set up two different text link styles using CSS in Edit/Styles.

First I have set up:

a:link
a:visited
a:hover
a:active

These work fine.

Then I’ve set up:

a:link.small
a:visited.small
a:hover.small
a:active.small

The plan is to have the first lot using the default font size and the second lot at a smaller font size (you guessed).

But then how do I apply the styles to individual links on the pages as appropriate? (I get a warning saying I can’t apply the style to text.) Or am I going about this the wrong way altogether?

Thanks.

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

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

3

Generally speaking, a link style is a tag style - it is CSS code which automatically targets the “a” or “anchor” tag. Simply make a link in Freeway Pro, and CSS will do the rest when you publish. There’s no need to apply it.

The CSS in your second example won’t work because it’s malformed, like a sentence whose bits have been switched around. We can fix it, but there are several ways to do it. Let’s look at a simple tag style solution first.

Our base tag is still the “a” or “anchor” tag. The .small class name is at the end, after the pseudo-modifier but it should follow the anchor tag like this -

  a.small:link

This arrangement tells CSS to focus on anchor tags with the small class definition, with the pseudo-modifiers identifying which state of the link to modify. I know that sounds a mouthful, but it’s just right.

So with that, how do we apply the .small style to the link? The easiest (and cleanest) way is to again make the code work for us without us having to crudely “paint” styles onto our text. When you select your link text, open the Link Editor and choose to extend it. In the name field, type “class” and in the value field type “small”. That’s it - Freeway Pro will now write the link tag for that text with that class name.

One more thing - you may want to style your .small style hyperlinks with properties that aren’t appropriately addressed in the link pseudo-variants… like size or style. This can be tricky because of FWP’s strict publishing rules. If you want to style other things besides these links with the .small style, you will have to write fancier code.

Let’s start with the simplest approach… let us assume that the .small style is something you wish to have apply to a block of text, or a whole box of content. In that case, there’s no need to apply the class to the link the way we did, because in this scenario the link tag is among the children of the class style. In that case we’d write the link style CSS like this -

  .small a:link

This essentially tells the browser to apply the style to link anchors who are among the children of anything that has the .small class style applied to it. The only thing you must do now is physically paint the surrounding text with that class style, or better yet, paint the HTML box holding the text and links with it. Freeway Pro takes care of the rest.

Hope this is helpful.

–
Ernie Simpson

On Feb 8, 2014, at 10:29 AM, “Bob Kerr” email@hidden wrote:

Trying to set up two different text link styles using CSS in Edit/Styles.

First I have set up:

a:link
a:visited
a:hover
a:active

These work fine.

Then I’ve set up:

a:link.small
a:visited.small
a:hover.small
a:active.small

The plan is to have the first lot using the default font size and the second lot at a smaller font size (you guessed).

But then how do I apply the styles to individual links on the pages as appropriate? (I get a warning saying I can’t apply the style to text.) Or am I going about this the wrong way altogether?

Thanks.

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

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

4

Thanks so much to both of you. Really helps my understanding.

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