Styling glossary links

[kmiz]

I am new to Flare and have just added a Glossary as an accordion tab in my WebHelp output. I have added all my glossary terms as links to topics. The glossary terms are blue and turn prurple once the link has been visited. I would like the link to remain blue when it is visited and to turn red when the mouse hovers on it.

I have tried working with the style sheet to get these effects but have not been successful.

Here is the code that I copied from my style sheet:
div.GlossaryPageTerm
{
color: #0000ff;
font-size: 10pt;
font-weight: normal;
}

div.GlossaryPageHeading
{
color: #000000;
font-size: 12pt;
}

a.GlossaryPageTerm
{
text-decoration: underline;
font-style: normal;
font-size: 10pt;
color: #0000ff;
}

a.glossterm:link
{
font-size: 10pt;
text-decoration: underline;
color: #0000ff;
}

a.glossterm:visited
{
font-style: normal;
font-size: 10pt;
text-decoration: underline;
color: #0000ff;
}

div.GlossaryPageDefinition
{
color: #0000ff;
font-size: 10pt;
}

div.GlossaryPageEntry
{
color: #0000ff;
font-size: 10pt;
}

a.GlossaryPageTerm:focus
{
font-style: normal;
font-size: 10pt;
}

a.glossterm:hover
{
color: #ff0000;
font-size: 10pt;
}

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

a.GlossaryPageTerm:visited
{
color: #0000ff;
}

Any help would be appreciated.

[SteveS]

Open your stylesheet in the style sheet viewer and click the advanced view button to display in advanced view if it isn't already doing so.

Expand a -> GlossaryPageTerm -> (Pseudo Classes) and you should see the classes for active, focus, hover, link, and visited. The font selector should allow you to set the color property to whatever you prefer.

HTH

[LTinker68]

Expand a -> GlossaryPageTerm -> (Pseudo Classes) and you should see the classes for active, focus, hover, link, and visited. The font selector should allow you to set the color property to whatever you prefer.

The styles are added to the stylesheet in the order you modify them, so make sure you modify them in the order of link, visited, focus, hover, active; otherwise any hover effect you specify won't work (the hover style has to come after the link, visited [and focus] styles in the stylesheet in order for it to work).

[kmiz]

Thanks for the quick response. Since I hadn't changed these styles in the proper order, I opened the style sheet in the internal editor and put them in the proper order, but when I compile, the links are still purple when visited, underlined in every form (link, visited, focus and hover), and have no differing hover effect. I am new to this project, but I think this is what happens elsewhere in the project for links. I'm not sure if this is browser default or stylesheet controlled. I am trying to make the glossary look the index which I am told was not tinkered with.

Here is the style sheet code if you have the time to look at it and that would help in troubleshooting. I changed both a. GlossaryPageTem and a.glossterm. If i don't change the div.GlossaryPageTerm, the font defaults to 14pt., so the font size seems to be coming from that style.

Thanks for your help!
I just had a thought. When I enter these terms in the glossary editor, I am selecting the style as Popup. I think this style just applies to content converted to glossary links, and not to the way terms are displayed in the Glossary accordion, but just thought I'd throw that in there in case its affecting the display when selected from the accordion.

a.GlossaryPageTerm
{
font-size: 10pt;
color: #4682b4;
text-decoration: none;
}

div.GlossaryPageTerm
{
font-size: 10pt;
font-weight: normal;
text-decoration: none;
color: #4682b4;
}

a.GlossaryPageTerm:link
{
font-size: 10pt;
color: #4682b4;
text-decoration: none;
}

a.GlossaryPageTerm:visited
{
color: #4682b4;
font-size: 10pt;
text-decoration: none;
}

a.GlossaryPageTerm:focus
{
color: #4682b4;
font-size: 10pt;
text-decoration: none;
}

a.GlossaryPageTerm:hover
{
color: #ff0000;
font-size: 10pt;
text-decoration: none;
}

a.glossterm:link
{
color: #4682b4;
font-style: normal;
font-size: 10pt;
}

a.glossterm:visited
{
color: #4682b4;
font-style: normal;
font-size: 10pt;
}

a.glossterm:focus
{
color: #4682b4;
font-size: 10pt;
font-style: normal;
}

a.glossterm:hover
{
color: #ff0000;
font-size: 10pt;
font-style: normal;
}

[LTinker68]

I used to have a nice write-up of what all the different glossary styles did. I'm going to have to write that up again sometime.

The a.GlossaryPageTerm styles control the appearance of the links and div.GlossaryPageDefinition style controls the appearance of the definition once a term has been clicked in the Glossary pane, not the links of terms in the topics themselves.

The glossaryTerm style controls the default appearance of the link in the topic itself. The appearance of the focus and hover styles is determined by the pseudo classes under the glossaryTerm, depending on the type of effect you specify in the Glossary for that term. In other words, the pseudo classes under glossaryTerm > Popup control popup glossary terms, and the pseudo classes under glossaryTerm > Expanding control the appearance of the expanding text, etc. If you don't specify an effect in the Glossary for a term, then it defaults to using a popup effect but uses the "Pseudo Classes" directly off the glossaryTerm style. The popup effect uses the pseudo classes under the Popup class under the glossaryTerm style. So specified "popup" glossary terms can have a different appearance than non-specified (default) popup glossary terms.

Hopefully that makes sense. To make a long story short, you want to modify the styles under the glossaryTerm style in the stylesheet.

[benpal]

Working with Flare 4.1.40.
In the only style sheet I have, in Advanced View I see:
div.GlossaryPageDefinition -> font-size of 12pt
div.GlossaryPageTerm -> font-size of 14pt

I can change the font size to another value, but I cannot set it to "default", it just won't stick and immediately jumps back to the original values 12pt/14pt.

However when I look at the source code of the style sheet after setting the values to "default" I see this:

div.GlossaryPageDefinition
{

}

div.GlossaryPageTerm
{

}

div
{

}

[LTinker68]

If you want the glossary terms to be a specific size then you'll probably want to set the size in those styles. Generally, if you take out the font size, a tag will inherit the font size of its parent tag, and if that parent tag doesn't have a size specified, then it'll use the font size of the grandparent tag, and so on. However, the glossary styles are defined by MadCap. What you see in the Stylesheet GUI probably is the default font size, as defined by MadCap in Flare. So if you don't want those font sizes, then you'll have to specify the font size to override the default values.

[benpal]

Thanks Lisa, I guess that's it. Since I have set my basic font-size in the body tag, I wanted it to be cascaded through the whole document. Would make it easier to change the style for different media, becuase there would be only one location to change.
Setting the font-size to 100% gives the same result and seems to work, though.

I'm still puzzled that the application would watch over my shoulder while I'm trying to set values in a text file ...

[LTinker68]

Based on rules of cascading stylesheets, the glossary tags defined by MadCap should, by default, be set to inherit their properties from the parent. I don't know why they weren't set up that way. I suggest submitting a bug report at http://www.madcapsoftware.com/bugs/submit.aspx.