Add text to glossary term search results

[LTinker68]

I'm using the HTML5 Top Navigation setup in Flare and I have it set up to return glossary terms in search results. However, it's not terribly obvious to me that the first entry in the results is a search term. I've added a bit of top and bottom border to the glossary results style in the skin, but what I'd like to do is have "Glossary Term" appear in a small font to the right of the term or as a small heading that appears above the term. When I build the output and view source, there are no styles being called out specifically related to the glossary term, so I can't manually add a title to the glossary results like you can add a title to a mini-TOC block, if you know how to. So I'm guessing that means the styles are called in one of the JavaScript files or one of the Flare feature stylesheets. Anyone have any idea which JS or CSS file I should look in, or what style in particularly I should add to my topic stylesheet that will give me what I want?

For example...

TBD Glossary Term
    To be determined

[NorthEast]

OK, if you view the page source, then you'll not see anything because the HTML with the search results is being added after the page is loaded.
To see the 'live' page code, press F12 to display your browser's dev tools, and you can inspect the HTML from there.

You'll see the HTML looks a bit like this:

Code: Select all

<div id="searchPane" style="display: block;" class="">
    <h1 id="results-heading">Your search for <span class="query">"table"</span> returned <span class="total-results">3</span> result(s).</h1>
        <ul id="resultList">
            <li><div class="glossary">
                <div class="term">Table</div>
                    <div class="definition">A group of intersecting columns and rows that you can add to a topic for various purposes, such as comparing one thing with another or giving field descriptions for a software dialog.</div>
                </div>
            </li>

So in your stylesheet, you can add text to the div.term using the CSS ::after selector:

Code: Select all

#resultList .glossary .term::after
{
    content: " (glossary term)";
    font-size: 0.7em;
}

[LTinker68]

Whoohoo! That worked! Thanks, Dave! (Didn't realize the search results were added after the page loaded.)