f_header1 style - default.css

[alanmcd]

I am using the babyblue skin for Webhelp.
When it compiles I get a default.css with, amongst other styles, f_Header1
This style used to be in the skin baggage .css file HM_TOPICSTYLES.css?
But for the life if me I cannot find it in the latest skin.
I am currently resorting to editing the default.css file but I'd like to edit the style in the skin so I don't have to keep doing it.
The default is white font and it's on a white background

Can someone tell me where this style is now? I've searched and searched but cannot locate it.
thanks
Alan

[Tim Green]

Hi Alan,

You don't need to edit any of these files! They are generated automatically on publishing from the styles defined in your project, and to "edit" them you just need to edit the style definitions in your project. For example, f_Header1 is generated for the text attributes of the Header1 style in your project. The paragraph attributes are generated to p_Header1. To change them in the output you just need to change the definition of the Header1 style in Write > Styles > Edit Styles in your project.

I am currently resorting to editing the default.css file but I'd like to edit the style in the skin so I don't have to keep doing it.

The styles in the skin are always only for the skin layout, not for the content that comes from your project. That is always controlled by the styles you define in your project, that are exported to the separate CSS file. In older skins there was a "topic styles" CSS file, that was also not for the topic content -- although you could add content CSS to it if you wanted -- but for the layout of the topic file.

[alanmcd]

OK thanks - but I suppose I'm still unclear on two things.
First the f_Header style did used to be present in previous skin css files. So not sure ho that was changed.
Secondly, I use the skin to publish to CHM - where I do want white text on the green background, but also on the Webhelp version where white text is not desirable. So if I change it in my document styles, it will work for one but not both.
Is there a way to address this?
Alan

[Tim Green]

First the f_Header style did used to be present in previous skin css files. So not sure ho that was changed.

That was never the case. No skin ever rewrote content style definitions; that would have been a serious error. If something like that was there it was in a skin that had been edited by someone else.

Secondly, I use the skin to publish to CHM - where I do want white text on the green background, but also on the Webhelp version where white text is not desirable. So if I change it in my document styles, it will work for one but not both.

You can define two sets of style definitions for each style, but only for screen and print. Since CHM and WebHelp are both screen styles you can't define two versions for that. It would generally be quite unusual to want differences like that between CHM and WebHelp since they are essentially very similar systems -- both HTML, both displayed dynamically on the computer screen.

If that is the case you can make an addition to the HTML page template in the skin with the CSS that you need. Just locate the reference with the <%STYLESHEET%> variable and insert it after that, so that it redefines the standard style setting.

Look for this line in the HTML page template of your skin:

Code: Select all

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

Then insert your style changes directly after it like this:

Code: Select all

 <link type="text/css" href="<%STYLESHEET%>" rel="stylesheet" />
<style type="text/css">
f_Header1 {
   color: green;
   background-color: pink;
}
</style> 

[alanmcd]

OK - well I don't remember making such edits but it's been a a few years now -so I will defer to your knowledge.
But here's the thing
My project is published as CHM with the FreshLIme skin which demands white Heading1 style on a green topic heading area

Then I publish to Webhelp with the BabyBlue skin. White Heading 1 is unacceptable since it it a white topic heading area.

I think what you are suggesting is that the, as designed method, of doing this is to change the project Style Heading1 before each time I publish. That's not workable.
I am at the moment, publishing CHM, then publishing Webhelp, then overwriting the published default.css file with my altered default.css file, so I see the Heading1 headings in the webhelp version.

Id' rather have one style for Heading1 but be able to publish with both skins to both environments without overwriting the .css file.

Are you saying that the method you describe addresses this and provides white font in the FreshLime/CHM and blue font in the BabyBlue/Webhlep output?
Alan

[Tim Green]

Hi Alan,

I'm afraid that is the case for the CHM skins, which are rather old. That's something that needs to be updated and I've made a note of it. Most of the newer skins set the text color of the topic header themselves to match their own design and ignore the color from the project. Using the Heading1 style in the body of the topic then gives you the normal color defined in your style.

[Tim Green]

Hi Alan,

You can update the CHM skin to have local color for the topic header text easily. Do this:

Open the skin in Toolbox or Help+Manual and edit the HTML Page Template. Locate this piece of code:

Code: Select all

<%TOPIC_HEADER%><IFNOT_TOPIC_HEADER><h1 class="p_Heading1"><span class="f_Heading1"><%TOPIC_TITLE%></span></h1></IFNOT_TOPIC_HEADER>

Delete that, being careful not to delete anything else, and replace it with this:

Code: Select all

<h1 class="p_Heading1"><span class="f_Heading1" style="color: #ffffff;"><%TOPIC_TITLE%></span></h1>

Note the style="color: #ffffff;" setting. That is for the skin you mentioned, which needs a white heading. You would need to change that accordingly for other skins requiring other colors.

[alanmcd]

Thanks that works the way I need now.
The extra " was a test I suppose

Code: Select all

style="color: "#ffffff";>

Alan

[Tim Green]

Thanks that works the way I need now.
The extra " was a test I suppose

Sorry, no. Typo... The semicolon was also in the wrong place. This is correct:

Code: Select all

<h1 class="p_Heading1"><span class="f_Heading1" style="color: #ffffff;"><%TOPIC_TITLE%></span></h1>