RESOLVED: Suppressing bullets in HTML5 Glossary as page

[Phlawm53]

------
For Flare 10, HTML5 Target.

I've managed to solve a problem that arose when I was asked to include a Glossary as a topic page in an HTML5 Target.

More specifically, when I generated a Glossary that worked perfectly well in a PDF, generating that same page in an HTML5 Target added bullets to the GlossaryPageHeading entries.

The Problem -
Although I normally use a Condition in a Project's TOC to generate a Glossary page in a PDF but suppress that page in an HTML5 Target, I was asked to generate a Glossary as a page rather than a left-side navigation panel or solely as links / popups.

When I did that, each GlossaryPageHeading entry had a bullet even though the PDF's Glossary didn't.

Flare10PDFversusHTMLGlossariesAndBullets.png

(The lurid orange and pink borders around the HTML5 Glossary elements are there solely for development / troubleshooting)

The Fix -
After much spelunking and experimenting with CSS settings, I was able to suppress the HTML5 Glossary's bullets with this CSS.

Code: Select all

ul.MCGlossaryProxy_0	/*Required to suppress bullets in HTML5 Target*/
{
  list-style-type: none;
  list-style-image: none;
}

I also needed to use separate CSS to adjust the position of other Glossary elements (GlossaryPageHeading, GlossaryPageTerm, GlossaryPageDefinition, GlossaryPageEntry) on the HTML5 page relative to their nicely positioned PDF counterparts.

Cheers & hope this helps,
Riley

[Rona Kwestel]

Thanks for posting this, Riley. It annoys me greatly that there isn't a more obvious way to do this. I would actually prefer a table to a list, but it seems that MadCap has a bias towards building it as a list and there is no apparent "lever" to pull to change that behavior. At least losing the bullets makes it less "listy".

[Rona Kwestel]

While it's nice that you can use the Google inspector to find the exact class to target, it seems less preferable to specify styles on a class that Flare does not actively expose, so after a bit more digging around, I ended up using the following code to suppress the bullets:

Code: Select all

li.GlossaryPageEntry	/* Required to suppress bullets in HTML5 Target */
{
	list-style-type: none;
}

I also wanted to remove the border above the list and it took me a while to figure out where to do that, so in case this is helpful for anyone else, here's the code:

Code: Select all

MadCap|glossaryProxy
{
	border-top: none;
}

[Rona Kwestel]

Here's another odd thing I noticed. For some reason, Flare wraps the glossary terms in an anchor tag, which causes the term to appear as a hyperlink when you hover over it:

Code: Select all

<a class="GlossaryPageLink" name="123799213_anchor3">My glossary term</a>

To prevent it from showing the hyperlink style - in our case, an underline - I added the following to the CSS:

Code: Select all

a.GlossaryPageLink:hover
{
	text-decoration: none;
}

[aneedell]

Thanks to everyone who contributed to this post. Without your recommendations I never would have figured this out. I want to also add that I needed to configure div.GlossaryPageDefinition ... it applies to the generated HTML5 glossary topic output. The Flare online help for glossaries is woefully out of date, especially regarding generated glossary topics in top/side navigation.

[ChoccieMuffin]

Thanks to everyone who contributed to this post. Without your recommendations I never would have figured this out. I want to also add that I needed to configure div.GlossaryPageDefinition ... it applies to the generated HTML5 glossary topic output. The Flare online help for glossaries is woefully out of date, especially regarding generated glossary topics in top/side navigation.

For the out of date documentation, can I suggest you add a feature request (see my signature for a link) which might put it further up the list of work for the Madcappers.