Change the task labels in webhelp

[Glimmerino]

Hello.

I'm setting up a webhelp designed for night mode. Therefor I wish to change all the fonts to a brighter one so that they show on the dark background. I have succeded for all but the task labels ("About this task", "Procedure" etc.). How do I configure the style of these elements using CSS? And where can I change the actual label text to something else?

Best regards
Kristian

[Radu]

Hi Kristian,

You could look and see how the HTML content gets generated.
It seems to look something like:

Code: Select all

..............

   <div class="tasklabel"><h2 class="sectiontitle tasklabel">About this task</h2></div>

   ..............                     

   <div class="tasklabel"><h2 class="sectiontitle tasklabel">Procedure</h2></div>

   ........................

So you could try to match elements having the class "tasklabel" and change their styling like:

Code: Select all

.tasklabel{

............

}

Regards,
Radu

[bogdan_cercelaru]

Hello,

To change the label text you should add the following lines in the localization file and then modify the labels text. For example, for English US, you should edit the [DITA_OT_DIR]\plugins\com.oxygenxml.webhelp\oxygen-webhelp\resources\localization\strings-en-us.xml file.

Code: Select all

<!--Task section labels -->

<str name="task_context">About this task</str>

<str name="task_example">Example</str>

<str name="task_postreq">What to do next</str>

<str name="task_prereq">Before you begin</str>

<str name="task_procedure">Procedure</str>

<str name="task_results">Results</str>

Regards,
Bogdan

[Glimmerino]

Thankyou!

It all works fine.

I however noticed that the "Search Result" tab does not inherit the same styling as the "Content" tab. How do I style the "Search result" tab?

Best regards
Kristian

[bogdan_cercelaru]

Hello,

Using your favorite browser you can use the "Inspect element" option that allows you to found the class (or id) attribute of each rendered element. Also you can view the CSS rules applied to the selected element. Then you should use the corresponding class (or id) in your custom CSS to style the element as you wish.
For example, to change the color of the links from the "Search Results" tab, use the following CSS:

Code: Select all

a.foundResult {

    color: greenyellow;

}

Regards,
Bogdan

[Glimmerino]

Thankyou!

On the same subject:

Is there anyway to change the default onload background color to black? Now, the screen flashes white when clicking a link in the webhelp. Since my configuration is for night mode this is not desirable.

Best regards
Kristian

[bogdan_cercelaru]

Hello,

To change the default background color you should use the following CSS:

Code: Select all

body, #rightPane {

    background-color: #dddddd;

}

Regards,
Bogdan