Modifying CSS to customise code-style text

Please post all questions and comments regarding Help & Manual 7 here.

Moderators: Alexander Halser, Tim Green

Post Reply
Technical Tom
Posts: 11
Joined: Thu Mar 24, 2022 2:40 pm

Modifying CSS to customise code-style text

Unread post by Technical Tom »

Help+Manual 7 has an option to apply code-style inline text formatting. The default formatting can be applied via a button in the Write tab:
code-style formatting button.PNG
I wish to utilise this function to indicate text appearing in the menus of the software that I am documenting. In keeping with the software interface, such text would have a grey background and white characters.

If I apply this code-style formatting to the word 'Finish' in the editor, the corresponding XML code is:
<text styleclass="Code Example" style="font-weight:normal; font-style:normal; text-decoration:none; color:#000000;" translate="true">Finish</text>

In default.css there is a declaration that seems to correspond to this code-style formatting:
span.f_CodeExample /* Code Example */
{
font-size: 11px;
font-family: 'Courier New',Courier,monospace;
}


If I place a copy of this CSS in the Baggage Files, I can (as an extreme example!) modify the declaration to make the background blue and the characters red:
span.f_CodeExample /* Code Example */
{
color: red;
font-size: 1em;
font-family: 'DINOT-Bold',DINOT,Calibri,sans-serif;
background-color: blue;
}


However, in the published webhelp document, the background is blue but the characters are not red.
published webhelp document.PNG
Could anyone help me understand why this is the case, and what the structured solution is?

xxx
You do not have the required permissions to view the files attached to this post.
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Modifying CSS to customise code-style text

Unread post by Tim Green »

Hi Tom,

Don't try to repurpose the code syntax formatting tool for this. You will run into all kinds of strange problems, and you will also not be able to reformat the text formatted that way by changing the style definition. The syntax formatter is not designed for formatting single words within other text, only for entire passages of computer code in specific languages. Instead, define a dedicated text style with the attributes you need. See here (text styles) for instructions:

https://helpandmanual.com/help/hm_worki ... efine.html

The rest of the chapter on styles is also strongly recommended, as Help+Manual styles are different from regular word processing styles in some ways.

PS: It's also a mistake to try to achieve CSS from within the project editor. You need to define universal styles that will also work in non-HTML formats (PDF and Word).
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Technical Tom
Posts: 11
Joined: Thu Mar 24, 2022 2:40 pm

Re: Modifying CSS to customise code-style text

Unread post by Technical Tom »

Thank you for your help.

I now understand that there is an official way to create character styles.

As for CSS modifications, surely this will nonetheless prove necessary for adjusting the appearance of webhelp templates?
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Modifying CSS to customise code-style text

Unread post by Tim Green »

Technical Tom wrote: Mon Mar 28, 2022 4:18 pm As for CSS modifications, surely this will nonetheless prove necessary for adjusting the appearance of webhelp templates?
Absolutely, but we keep content and layout separate. The content is formatted in the project editor and the formatting you apply there is exported as CSS that is used in the HTML. The skin contains the templates and the CSS for the templates, and you can edit that in the skin.

The .hmskin file of the skin is actually a special kind of Help+Manual project without topics. It only contains the HTML templates, the necessary settings and additional JavaScript and CSS files stored in the baggage section. You can edit .hmskin files just like Help+Manual projects, and you will find everything there.
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Post Reply