RESOLVED: Suppressing bullets in HTML5 Glossary as page

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets

RESOLVED: Suppressing bullets in HTML5 Glossary as page

Postby Phlawm53 on Fri Feb 06, 2015 4:15 pm

------
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
You do not have the required permissions to view the files attached to this post.
User avatar
Phlawm53
Sr. Propeller Head
 
Posts: 434
Joined: Tue Mar 16, 2010 10:58 am
Location: San Francisco, CA

Re: RESOLVED: Suppressing bullets in HTML5 Glossary as page

Postby Rona Kwestel on Tue Sep 05, 2017 2:35 pm

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
Sr. Propeller Head
 
Posts: 159
Joined: Wed Apr 04, 2007 11:50 am

Re: RESOLVED: Suppressing bullets in HTML5 Glossary as page

Postby Rona Kwestel on Fri Sep 08, 2017 12:06 pm

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
Sr. Propeller Head
 
Posts: 159
Joined: Wed Apr 04, 2007 11:50 am

Re: RESOLVED: Suppressing bullets in HTML5 Glossary as page

Postby Rona Kwestel on Fri Sep 08, 2017 3:41 pm

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;
}
Rona Kwestel
Sr. Propeller Head
 
Posts: 159
Joined: Wed Apr 04, 2007 11:50 am


Return to Web-based Outputs

Who is online

Users browsing this forum: No registered users and 5 guests