Adjusting The Style Of The Glossary Pop Ups – Innovasys Support

This article will explain how to adjust the style of the Glossary Pop-Ups in HelpStudio. This is useful if you wish to make Glossary pop-ups fit into your existing custom styles.

The popup tip is defined by a set of standard styles built into the template. The outer container has a class name of ui-tooltip-green and the title bar ui-tooltip-titlebar and content ui-tooltip-content. In order to adjust the style of the glossary popup, you would need to define some custom style rules.

Here is an example of some rules which make the content text larger and change the coloring to grey/black:

.ui-tooltip-green .ui-tooltip-titlebar {
    background-color: #a0a0a0;
    color: black;
    border-color: #505050;
}
.ui-tooltip-green .ui-tooltip-content {
    background-color: #d0d0d0;
    color: #505050;
    border-color: #505050;
    font-size: 16pt;
    line-height: 16pt;
}

I would recommend reading this knowledgebase article on How to Create a New Stylesheet: https://innovasys.zendesk.com/hc/en-gb/articles/360000905866-How-To-Add-A-New-Stylesheet-To-Your-Project

To better understand which styles are applied to specific elements in the output, you can use the tools built into most modern browsers. These tools will enable you to inspect any element in any of the HTML files in the \build directory (there is a file in there for each topic in the booklet). In Google Chrome, for example, you can right click and select Inspect Element and that will take you to a view that will show you which style rules are being applied to that element and from which stylesheet they originate. The Booklet output is derived from .html files too - so you can find the generated HTML files in the \build sub-directory just as you can for the online outputs.

There is some more information on how to use the developer tools to diagnose HTML or CSS issues here:

https://innovasys.zendesk.com/hc/en-gb/articles/360015253971-Custom-styles-not-being-applied-Diagnosing-CSS-issues

0 Comments