Page 1 of 1
Change the task labels in webhelp
Posted: Fri Dec 11, 2015 11:10 am
by 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
Re: Change the task labels in webhelp
Posted: Fri Dec 11, 2015 4:13 pm
by 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:
Regards,
Radu
Re: Change the task labels in webhelp
Posted: Fri Dec 11, 2015 4:29 pm
by 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
Re: Change the task labels in webhelp
Posted: Fri Dec 11, 2015 4:38 pm
by 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
Re: Change the task labels in webhelp
Posted: Mon Dec 14, 2015 11:59 am
by 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
Re: Change the task labels in webhelp
Posted: Mon Dec 14, 2015 5:40 pm
by 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
Re: Change the task labels in webhelp
Posted: Wed Dec 16, 2015 3:53 pm
by 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