How would I add "Clear: Both" into the p_Normal class (Webhelp)

Pshooter · Unread post by **Pshooter** » Fri Jan 08, 2021 12:28 am

Hi there!

I tried to make the subject as descriptive as possible, but here it is again:

I would like to add "Clear:both" into the p_Normal class. I am using H&M 8, with Minimalist Standard 343 Webhelp skin.

Is this something I can do within H&M 8 or the skin, or is this manually editing an outputted .css file? If the second option, which file, and where in it would I add the line?

The problem that I have is that sometimes images start stacking up on top of each other because the text beside the picture is relatively brief.

stacking.png

==== with change applied via browser ===

withclearbothapplied.png

Unread post by **Tim Green** » Fri Jan 08, 2021 7:53 am

Hi "P",

You can't do this in the style itself because that is a universal XML-based style definition that must work for both HTML and non-HTML output, where there is no "clear". What you need to do is add some additional CSS to the skin you are using. First locate the CSS file generated for the topic formatting in the WebHelp output folder and open it in an editor to see how your styles are named and used there.

The basic principle is that the paragraph attributes are applied with a <p> class named p_YourStyleName and the text attributes are applied with a <span> class named f_YourStyleName. You will want to add definitions for the paragraph styles, of course. The stylesheet is referenced in the HTML Page Template in the .hmskin file, which you can locate in Configuration > HTML Page Templates > Default when you edit the skin in Help+Manual. The generated stylesheet is referenced in that template with the line:

Code: Select all

<link rel="stylesheet" type="text/css" href="<%STYLESHEET%>" />

So you need to add your additional style attributes after that reference. If it is just for this one paragraph type the easiest way to do that is to add it inline in the <head> section of the template, because that eliminates the need for an addition http request for an additional CSS file. So something like this:

Code: Select all

<style type="text/css">
p_YourStyleName {
    clear: both;
    }
</style>

If you want to do more extensive post-styling create your own CSS file with your definitions (no spaces or special characters in the name) and add it to the Baggage Files section of the skin. To do this select Project Files > Baggage Files when editing the skin and then select Add File in the Project tab. Then go to the HTML page template and add your reference to the file after the standard stylesheet reference, like this:

Code: Select all

<link rel="stylesheet" type="text/css" href="<%STYLESHEET%>" />
<link rel="stylesheet" type="text/css" href="your_stylesheet.css" />

Pshooter · Unread post by **Pshooter** » Fri Jan 08, 2021 11:28 pm

Hey Tim,

This worked perfectly, thank you very much!

Paul

Help & Manual Forums

How would I add "Clear: Both" into the p_Normal class (Webhelp)

How would I add "Clear: Both" into the p_Normal class (Webhelp)

Re: How would I add "Clear: Both" into the p_Normal class (Webhelp)

Re: How would I add "Clear: Both" into the p_Normal class (Webhelp)