Visited Links - Override all link colors

Report · Jan 05, 2011

Hi,

I'm using RH8 in WebHelp and IE. I read all the former postings regarding people having the same problem and some mentioned a fix in a .css but the .css wasn't available with the posting of March 25, 2008.

My visited link color seems to override all other link colors. Originally I had the link colors in a style sheet and changed the colors in the .css. That didn't work and all colors still were the visited link color. I deleted the link colors from this .css and added the link colors via the RoboHelp Edit Styles. Either way doesn't seem to work and all link colors are my visited color. I've tried clearing my cache several times and this doesn't work, neither does deleting the history.

Can anyone shed some light on this? Thanks very much for any help you can provide.

Report · Jan 05, 2011

The .css file is your style sheet.

You need to place the a: styles in specific order (think the mnemonic LoVeHAte) inside the .css file:

LinkVisitedHoverActive

That is:

a:link {

styles }

a:visited {

styles }

a:hover {

styles }

a:active {

styles }

Although you can combine any of these, such as a:link,visited { style }, you're probably better off keeping them separate (easier to maintain later).

For more CSS help, see the W3C tutorial site.

Good luck,

Leon

Report · Jan 05, 2011

Hi there

In addition to Leon's excellent advice, here is a tip for easily opening the .CSS in Windows Notepad. (Notepad is the logical choice for making these edits. RoboHelp will insist on opening its own CSS dialog.)

Right-click the Project Manager and choose Explore. This will open Windows Explorer at the project location. From there, you are able to locate the CSS file and right-click to open it with Windows Notepad.

Cheers... Rick

Helpful and Handy Links

RoboHelp Wish Form/Bug Reporting Form

Begin learning RoboHelp HTML 7 or 8 moments from now - $24.95!

Adobe Certified RoboHelp HTML Training

SorcererStone Blog

RoboHelp eBooks

Report · Jan 05, 2011

Thanks very much, Leon and Rick. I'm getting there. I changed my .css in Dreamweaver to be in the order specified. Now they're still purple for many of them but are blue when I hover over them. Some other links are blue. I should have mentioned that many of the links that are initially purple are in my mini-TOC which I put in each page (not via a Master page). I looked in the .html code for them but couldn't see a color property. I don't see where I can change this property.

I have other things in my .css. (not links but headings, etc.) before the link properties. Should I put the Link/Visited/Hover/Active before anything else in the style sheet?

Thanks again for your responses, I appreciate your time.

Report · Jan 06, 2011

If you look into the HTML code of the output in the mini-TOC block, you'll see two style settings:

A class setting for the Show/Hide dropspot label:

... <a class="dropspot" ...

A standard hyperlink to the RH-generated bookmarks:

... <a href="#MiniTOCBookMark2" ...

That second one should follow whatever settings you've previously set up in your CSS file.

If you want these mini-TOC links to be different, you could set the default "a href" styles with one look, and then set up a separate class for other normal topic hyperlinks, such as "a.topic:link { styles }", "a.topic:visited { styles }", etc.

The other thing to keep in mind is this: the reason for the name Cascading Style Sheets.

The styles in the .css file

are overridden by the styles in the <HEAD> section of the topic page

which are overridden by styles added in-line (at a specific instance of formatted content).

Those last two could be affecting your results.

[Another thing: don't use the Styles window (by double clicking the .css file in Project Manager). In my projects, the "Hyperlink" styles it "previews" do not agree with my .css settings. I suggest you do all your work in the .css file with Notepad or a similar text editing tool.]

Good luck,

Leon

Report · Jan 06, 2011

Hi Leon,

Thanks again. I looked at the code in the "view source" as you suggested for the <a href="#MiniTOCBookMark2"... I'm puzzled because there is no color definition here just:

<div align="left" class="droptext" id="MTPOPUP31335" >
<ul style="text-align:left; font-family:Verdana;font-size:10pt;font-weight: normal;font-style: normal;text-decoration: underline;" >
<li><a href="#MiniTOCBookMark2" style="font-family:Verdana;font-size:10pt;font-weight: normal;font-style: normal;text-decoration: underline;">Purpose</a>
</li>
<li><a href="#MiniTOCBookMark3" style="font-family:Verdana;font-size:10pt;font-weight: normal;font-style: normal;text-decoration: underline;">Screen Tour</a>

I looked in the mini-TOC set-up (Format Placeholder) and don't see anywhere where I can define what the color is supposed to be for visited links and don't understand how I could change this. I even checked the "use styles from topic" box to see if that made a difference. I'm still getting the "visited" color for my links unless I hover over, then they're blue. I edited the .css (Dreamweaver) I inherited from another similiar project for this project and put the links in the order you suggested. The style sheet used for this project just starts w/the BODY.

I really appreciate your help and time responding to my questions.

Thanks,

Sue

Report · Jan 06, 2011

Would you mind pasting the code, in your next posting, for every style that starts with "a", so that we can gain more insight?

Good luck,

Leon

Report · Jan 06, 2011

Hi Leon,

Here is all the code with "a" type styles in the .css. Again, I also have the links also in the mini-TOC but didn't see a way via the Format Placeholder to change

this. Currently, most of my links are showing up as the "visited" color -- grey. I'm going to revisit this link issue again very soon but have to get a ton of content in now. I really appreciate your efforts.

Thanks,

Sue

A.expandspot {
cursor: hand;
font-style: italic;
font-size: 10pt;
font-family: Verdana;
color: #800000;
text-decoration: none;
}
SPAN.expandtext {
font-style: italic;
font-weight: normal;
color: #ff0000;
font-family: Verdana;
font-size: 8pt;
}
A.dropspot {
cursor: hand;
color: #008000;
font-style: italic;
font-size: 10pt;
text-decoration: none;
}
A.glossterm {
cursor: hand;
font-size: 10pt;
font-family: Verdana;
font-style: italic;
color: #0000ff;
text-decoration: none;
}
SPAN.glosstext {
font-style: italic;
font-weight: normal;
color: #0000ff;
font-family: Verdana;
font-size: 10pt;
}
OL,
UL {
margin-top: 0px;
margin-bottom: 0px;
}
p.breadcrumbs {
font-size: 8pt;
x-on-hover: fontchange(bold=on);
x-next-class: breadcrumbs;
x-next-type: p;
}
A.breadcrumbs {
font-size: 10pt;
}
A:link {
font-size: 10pt;
font-family: Verdana;
color: #0000ff;
text-decoration: underline;
}
A:visited {
font-size: 10pt;
font-family: Verdana;
color: #808080;
text-decoration: underline;
}
A:hover {
font-size: 10pt;
font-family: Verdana;
color: #0000ff;
}
A:active {
font-size: 10pt;
font-family: Verdana;
color: #0000ff;
text-decoration: underline;
}
A.popupspot {
font-size: 10pt;
font-family: Verdana;
}

Report · Jan 06, 2011

Try placing these above any other "A." classes (A.expandspot, etc.). I suspect that this placement in the file might be just as important as the LVHA hierarchical order.

A:link {

font-size: 10pt;

font-family: Verdana;

color: #0000ff;

text-decoration: underline;

}

A:visited {

font-size: 10pt;

font-family: Verdana;

color: #808080;

text-decoration: underline;

}

A:hover {

font-size: 10pt;

font-family: Verdana;

color: #0000ff;

}

A:active {

font-size: 10pt;

font-family: Verdana;

color: #0000ff;

text-decoration: underline;

}

Good luck,

Leon

Report · Jan 06, 2011

Hi Leon,

I tried this and no luck. I'm going to have to revisit next week when I'm back in.

Thanks again for all of your help. I really appreciate it.

Sue

Report · Jan 06, 2011

Hi Sue

Another thing I don't believe I've seen mentioned is to check for an embedded style. Just look at the HTML code behind the topic. Look in the head area. If you find anything other than a linked CSS file, try deleting it and see if that fixes the issue.

Best of luck to you in resolving it... Rick

Helpful and Handy Links

RoboHelp Wish Form/Bug Reporting Form

Begin learning RoboHelp HTML 7 or 8 moments from now - $24.95!

Adobe Certified RoboHelp HTML Training

SorcererStone Blog

RoboHelp eBooks

Report · Jan 10, 2011

Hi Rick,

Thanks again for the response. I checked and the only thing that appears is the "text/css" that follows the stylesheet name (that I think is generated). I can't see any inline styles following this. It appears fine in the View/preview mode (eyeglasses) but when I generate and put out to the server all links appear "visited" color no matter how many times I clear my history/cache or who is viewing.

I'll get to the bottom eventually. Thanks again for your responses.

Sue

Report · Apr 17, 2013

After spending multiple hours trying to get the hyperlink(visited) style in the css to do what I wanted, this answer: resequencing the order so that link, visited, hover, active come before expandspot is what finally works. Thank you.

Adobe Community

Visited Links - Override all link colors