Hyperlink Format

[Christina]

How can I format a hyperlink?

I figured out how to format a Cross-Reference; I updated the Xref tag with the following {color blue}{i}{u}{paratext}{/u}{/i}{/color}, and it works beautifully. The cross reference is in italics, has a blue underline, and goes where it's supposed to go. (see hyperlink.png. The Logging Into Your Account is a Xref.)

But the hyperlink...the only available style (see available style.png) that comes up when I make a hyperlinke is "a". When I edit the "a" tag, I make it blue, and select underline and italics. But when I view a preview, it comes up green......I've attached an image, hyperlink.png. (the www.webrootanywhere.com is a hyperlink.)

Thank you in advance.

[doc_guy]

I typically do this in the source code of the style sheet.

Here is how I did it recently for a project:

Code: Select all

p.docfeedback /* only used on master page for feedback link */
{
    text-align:center;
	font: bold 11px Arial;
	text-decoration: none;
	background-color: #EEEEEE;
	padding: 5px 9px 5px 9px;
	border: 1px solid #CCCCCC;
	border-radius: 10px;
	width: 225px;
}



p.docfeedback a:link, p.docfeedback a:visited, p.docfeedback a:hover, p.docfeedback a:active {
	color: #666;
	text-decoration:none !important;

}

This created a button-effect for a link. But the key functionality here is that you have the following:

Code: Select all

a:link{ }
a:visited { }
a:hover { }
a:active{ }

In my example, I wanted to only apply this style to links that were in a certain class of paragraph. If you use the second code example, you'll apply your changes to all links in the entire project.

[LTinker68]

But the hyperlink...the only available style (see available style.png) that comes up when I make a hyperlinke is "a". When I edit the "a" tag, I make it blue, and select underline and italics. But when I view a preview, it comes up green......

If you want more info on those additional styles that Paul referenced (a:hover, etc.), then here's a site that gives you the basic info on why there are pseudo-classes for the <a> tag -> http://www.w3schools.com/css/css_link.asp

[Christina]

Both of these answers were very helpful! First, they reminded me to go into the Advanced view of the style sheet, where I could fine tune the hyperlink format. It now looks blue and underlined, just as I wanted.

Followup question: Am I right in using the McBreadcrumbsLink (which already shows up under the Classes for the hyperlink) under the <a> style? Or should I create a new tag beneath the <a> style?

I got a bit lost when it starts saying "Pseudo Classes." I mean, I can see how you could change the color or look of the active, focus, hover, link, and visited sub-classes.

It's just that when I pull the drop-down from the Hyperlink button, I don't see any of these sub-classes beneath the <a> style. I guess my question would then be, "How do I add a style to the Defined Classes list?

See attached image; the aMcBreadcrumbsLink is already there and so handy!

[Christina]

Guess what I just figured out.

I created a new class called Hyperlink (so as not to confuse it with the Breadcrumb trail) and I made it blue and underlined.

So now, I open the Hyperlink drop-down, and Hyperlink is in there, just as it should be. (Wonder why it's not in there already?)

Thank you both for pointing me in the right direction.

[LTinker68]

I got a bit lost when it starts saying "Pseudo Classes." I mean, I can see how you could change the color or look of the active, focus, hover, link, and visited sub-classes... It's just that when I pull the drop-down from the Hyperlink button, I don't see any of these sub-classes beneath the <a> style.

You will NEVER see those pseudo-classes as a style you can select in Flare's GUI. Which hyperlink pseudo class is displayed at any given time depends entirely on the user's browser. If the user never clicked on a link or used another method to access the destination of the link, then the browser automatically uses the "link" pseudo class to style the hyperlink. If the user moves the mouse over the link but doesn't click, the browser automatically uses the "hover" pseudo class to style the hyperlink. So you as the writer never select which pseudo class is associated with the link; you only specify the parent class (or don't specify a class and it uses the default). Within that parent class, in the stylesheet, you define what each pseudo class looks like. Even if you style each pseudo class to have the same appearance, the browser will still switch between link, hover, visited, etc.; the user just wouldn't see a visible effect if you styled the pseudo classes to all be the same. (Which is NOT recommended, BTW.)

So that "hyperlink" style you created... Still has pseudo classes associated with it. If you don't style those pseudo classes in your stylesheet, then the browser will use the styles defined for the pseudo classes for the base <a> tag. If you don't style the pseudo classes for the base <a> tag, then the browser will use its own default pseudo classes.

[Christina]

Thank you, I understand better now how all this works. Now I just have to set up links for 19 projects!

[doc_guy]

If you have common content between the 19 projects, you should create a master project that has the common files (including the style sheet, master pages, and other content pieces) and then import those common objects into all 19 'child' projects. Don't try to maintain 19 different style sheets to keep them in sync! Flare can do that for you!