Script Blues

[dwag]

I've inserted a javascript link in a master page. The link is blue, but I need to change the color. I've tried changing the colors of the Script and Span properties in the stylesheet, but the blue refuses to go away. Anyone out there able to point me in the right direction? Thanks.

[LTinker68]

It's picking up the colors defined in the pseudo classes for the default <a> tag. You'd either need to change those styles (which would affect all the hyperlinks throughout your project) or you create a custom <a> class, style its pseudo classes (in the order link, visited, focus, hover), then apply that new class to the link in the masterpage.

[dwag]

Thanks. I created a custom <a> class, added to the pseudo classes the color I wanted, saved, applied the class to the link, saved and built. But the link remains blue. I must've missed a step in there somewhere. If willing, please advise once more.

[LTinker68]

Did you modify the styles in the order I listed above? If not, you'll need to open the stylesheet file in the Internal Topic Editor and rearrange the styles so they're listed in that order. Or delete the <a> class and recreate it, making sure to format the pseudo-classes in that order.

Also, you might want to delete the entire Output folder then rebuild. That will force the browser into thinking it's going to a site it hasn't gone to before, so it'll load everything from scratch instead of loading it from cache. It could be that you were seeing the cached image.

[dwag]

That did the trick. I conveniently ignored the order on first try. Sorry about that. An odd thing, though, having to do it that way; never would have figured it out without your help. Many thanks.

[RamonS]

I was reading this thread with great interest and wonder why the order is of essence here. Lisa, do you know why?

[dwag]

Forgive me for getting ahead of myself. Guess I assumed it'd worked.

I'd been testing one help topic, applying and re-applying the master page each time I fiddled with what I believed were the correct styles and properties, and nothing was working.

After opening the stylesheet in the internal editor, rearranging the elements of the new <a> style in the correct order (link, visited, focus, hover), saving and building, I noticed the link on the help topic I'd been testing indeed had changed colors but, on closer inspection, determined it was the "visited" color. (Another point: throughout this process, I did test several other topics and frankly have lost track of whether the original topic with the "visited" color was that way before or after I'd rearranged the order of the styles.) On checking all of the other topics with the same master page applied, I found that all script links remained blue.

So I then I deleted the output folder and rebuilt. Same result: all links (except for the one page) remained blue.

Finally, I deleted the new <a> style from the internal text editor, recreated it, set the colors I wanted for the link, visited, focus and hover elements, reapplied master pages, saved and rebuilt. No change. Blue links forever.

Would it help if I sent a screenshot of anything? Sorry to have to keep this thread open. It's such a small matter, I know, that has long overstayed its welcome.

[LTinker68]

I was reading this thread with great interest and wonder why the order is of essence here. Lisa, do you know why?

It's an HTML thing. It's been around for as long as I can remember. If I were to guess, I would say it's because the stylesheet is read from top to bottom, so the hover needs to be loaded after the other states so that's in memory waiting to be called when the mouseover event is called. But that's just a guess.

For future reference, the (new) acronym to remember is Lord Vadar's Former Handle Anakin, which correlates to link, visited, focus, hover, active.

[LTinker68]

Would it help if I sent a screenshot of anything? Sorry to have to keep this thread open. It's such a small matter, I know, that has long overstayed its welcome.

What version of Flare are you running?
Do you have just the one masterpage, or more than one? What is specified in the target for the masterpage?
Do you have just one stylesheet? If you don't, are you sure that you modified the hyperlink styles in the default medium and not the print medium?

Instead of a screenshot, could you post the page code of the masterpage and post the code for the hyperlink styles from the stylesheet?

[dwag]

5.0.
More than one master page. Different master specified in target, but apply the one in question to many pages individually.
One stylsheet.
Modified the hyperlink styles in default medium.

Are you saying you want me to open the master page and stylesheet with internal text editor, copy code and paste?

Thanks for hanging with this.

[LTinker68]

Are you saying you want me to open the master page and stylesheet with internal text editor, copy code and paste?

Yes, although not the entire stylesheet, just the hyperlinks.

[dwag]

Master:

<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" MadCap:lastBlockDepth="2" MadCap:lastHeight="161" MadCap:lastWidth="518">
<head>
<link href="../Stylesheets/Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<MadCap:breadcrumbsProxy />
<MadCap:bodyProxy />
<MadCap:miniTocProxy />
<p><span style="font-size: 9pt;"><a href="mailto:joesmith@joesmithcompany.com" target="_self" class="FeedbackLink"><span style="font-size: 8pt;"><script type="text/javascript">/*<![CDATA[*/var docfdbk_a="mail"
var docfdbk_b="to:"
var docfdbk_c="joesmith"
var docfdbk_d="@"
var docfdbk_e="joesmithcompany"
var docfdbk_f=".com"
var docfdbk_g="?subject="
document.write ("<a href='"+ docfdbk_a + docfdbk_b + docfdbk_c + docfdbk_d + docfdbk_e + docfdbk_f + docfdbk_g + document.title +"'>Send us feedback on this help topic.</a>");

/*]]>*/</script></span></a></span>
</p>
</body>
</html>

Stylesheet link (colors selection random at this point; just want to see it work):

a.FeedbackLink:link
{
color: #ff0000;
}

a.FeedbackLink:visited
{
color: #cc99ff;
}

a.FeedbackLink:focus
{
color: #ff0000;
}

a.FeedbackLink:hover
{
color: #ff0000;
}

[LTinker68]

<p><span style="font-size: 9pt;"><a href="mailto:joesmith@joesmithcompany.com" target="_self" class="FeedbackLink"><span style="font-size: 8pt;"><script type="text/javascript">/*<![CDATA[*/var docfdbk_a="mail"
var docfdbk_b="to:"
var docfdbk_c="joesmith"
var docfdbk_d="@"
var docfdbk_e="joesmithcompany"
var docfdbk_f=".com"
var docfdbk_g="?subject="
document.write ("<a href='"+ docfdbk_a + docfdbk_b + docfdbk_c + docfdbk_d + docfdbk_e + docfdbk_f + docfdbk_g + document.title +"'>Send us feedback on this help topic.</a>");

/*]]>*/</script></span></a></span>

I don't think the problem is with your stylesheet -- I think it's with your script.

First, lose the span tags -- not only are they competing with each other (one says font size 9pt, the other says 8pt), but you don't need them. You can specify the font size in the hyperlink classes in the stylesheet.

Second, you have two sets of href tags in that script. One surrounds the script, one is inside the script. The one inside the script doesn't have the FeedbackLink class defined in the href tag. You need to remove the outer href tag (it's not necessary) and reformat the script to include the FeedbackLink class in the href tag that's created when the script loads.

[dwag]

Lost the span tags (don't recall how or why they got in there like that) without incident but seem to be making a mess of things with the href thing. Ah well, I'll return to it later; in the meantime, I'm beginning to appreciate the color blue.

Thanks.

[SteveS]

... in the meantime, I'm beginning to appreciate the color blue...

Blue is the new black...