default icons 'beheaded' in HTML5-output

[Tom]

Hi
I'm working in Flair 9 using HTML5-output. When I use the standard icons for buttons like 'Related topics' and 'Concept links' the (line)space in the top is too little for the icon. So it looks a bit 'beheaded' (see attachment). Editing the class in the project-css doesn't make a diffrence. How can I proceed to make the icon fit? In the old HTML-output and WebHelp it looks allright.
greetings,
Tom

[TheGreatAndPowerfulOz]

I saw the same issue with the "See Also" (concept) links in my project topics and it really bugged me!

I just added the following to my main style sheet and it took care of it:

Code: Select all

span.MCHelpControl-ConceptHotSpot_
{
	padding-top: 3.00px;
}

Here's the result!

SeeAlsoFix.png

[Tom]

Hi,
Thanks.
But editing my master stylesheet in the project, by adding the padding does'nt work (changes are overruled, I think).
What do you mean bij your "main style sheet"?
Tom

[TheGreatAndPowerfulOz]

Tom,

I made the specified change in the Master Stylesheet for my project (Project Properties dialogue > "Defaults" tab > "Master Stylesheet" designation).

I discovered which class to apply the changes to ("span.MCHelpControl-ConceptHotSpot_") by using Google Chrome's right-click "Inspect element" functionality, which allows you to see where the various properties of any given element are defined. In the case of the "See Also" concept links, it's in the Flare-generated "Topic.css" file:

Code: Select all

277 .MCHelpControl-ConceptHotSpot_
278 {
279 	background-position: left;
280 }
281 
282 .MCHelpControl-Concept .MCHelpControl-ConceptHotSpot_
283 {
284 	background-image: url('ConceptLink.gif');
285 	padding-left: 21px;
286 	padding-right: 0px;
287 	background-position: left;
288 }

As I examine the "span.MCHelpControl-ConceptHotSpot_" element in my project output using Google Chrome's "Inspect element" feature, I can see that in my case the definition for "padding-top" I added to my Master Stylesheet isn't overwritten.

If you have Chrome installed on your computer, try right-clicking the concept link in your output and choosing "Inspect element". Then, take a look at the "Computed Style" pane on the right of the inspection window. This will tell you whether or not your changes are taking effect or being overwritten somehow. Here's what it looks like for my output:

SeeAlsoCSS.png

Given that our two projects are different, you may also have other CSS declarations in your project that could affect the "span.MCHelpControl-ConceptHotSpot_" element's display in output. Using the "Inspect element" functionality is a good way to help you get to the bottom of it.

You might also try temporarily applying some other property to the element (say, a background color and/or border) that will be more evident to you as you view the output. It might look like the following in your Master Stylesheet:

Code: Select all

span.MCHelpControl-ConceptHotSpot_
{
	padding-top: 3.00px;
	background-color: green;
	border: 1px solid red;
}

If your changes to the element's definition appear in output, at least you'll know that you're attacking the issue in the right place! Again, since our projects are no doubt different in many ways, It may be that you need to increase the "padding-top" value (e.g., you might need to make it "4px", "5px", etc.).

Hope this helps!

[Tom]

Hi again,

Thanks. This makes things more clear.
I found the class in 'Topic.css' and I added the 'padding'. It works. Point is, that I can only find the class in the Topic.css in the OUTPUT (and that's the file I changed).
Nowhere else (not in ProgramFiles in the Flare.app/recources). There are some files called 'Topic.css', but non of them containes the class. So I'll have to search further I'm afraid.

The attachment is a screendump of Google Crome.

Tom

[TheGreatAndPowerfulOz]

Tom,

Specifying the padding in the "Topic.css" file in your output isn't the best way to go, since you'll have to re-do your work every time you create output (the "Topic.css" file will be overwritten every time).

I'm not sure why a padding definition for the ".MCHelpControl-ConceptHotSpot_" class in your Master Stylesheet (if you put it there) isn't coming through in the output. Do you know if *any* of the definitions in your Master Stylesheet are affecting content in your output?

Perhaps you should try it again, but this time add "! important" to the declaration, as such:

Code: Select all

span.MCHelpControl-ConceptHotSpot_
{
   padding-top: 3.00px ! important;
}

I'd be interested to see what the "Computed Style" properties are for the element (your screen shot only shows the "Styles" pane of the Google Chrome inspector window). Would you be willing to generate your output to some publicly-accessible location (temporarily, of course) so I could take a peek under the covers? It would be a lot easier to diagnose/fix if I could actually see the underlying code.

Thanks!

[Tom]

Hello Austin,

The Master Stylesheet is working all right. On text-level I can do what I want.

I tried the 'important-add' but still it's overruled.

I made a small target, with very few topics, the zip-file is about 11.5 Mb. It's based on the same configuration as my other targets. Probably you could explain me how to send it to you (I remember you had an upload possibility a few years ago).

Thanx,
Tom

[TheGreatAndPowerfulOz]

Tom,

I added the following to the "unit4_corporate_typography.css" stylesheet in the sample output you sent me. If you include it anywhere in that stylesheet, you should be all set when you generate your actual output:

Code: Select all

span.MCHelpControl-ConceptHotSpot_,
span.MCHelpControl-RelatedHotSpot_
{
	padding-top: 3.00px;
}

This will handle both your "concept" links and your "related topics" links.

Here's an example of the result I see after making the change:

ConceptLinkFix.png

By the way, you'll note that this is the same CSS code I initially suggested you add to your Master Stylesheet (presumably, the "unit4_corporate_typography.css" stylesheet), only with the addition of "span.MCHelpControl-RelatedHotSpot_" to also handle your "related topics" links.

It's curious that this change seemed to have no effect for you when you attempted to add it previously, which causes me to wonder by what means you're adding the code... Do you use Flare's built-in CSS editor, or do you edit the stylesheet manually? I tend to edit my stylesheets manually (in a regular text editor), and that's what I did with the "unit4_corporate_typography.css" stylesheet you sent me with your sample output. If you use the Flare CSS editor, perhaps you're not doing something quite right, which is causing the content in output not to respect the changes. Try making the change manually and see what happens.

[Tom]

Hi Austin,

I tried it as you said (editing as always in the text-editor) made it 10px to exaggerate:


MCHelpControl-ConceptHotSpot_,
MCHelpControl-RelatedHotSpot_
{

padding-top: 10.00px;

}

It appeared in the output .css.

The only point is, the output won't listen in my case Even when change the px in the output-file, it's still teh same.

[TheGreatAndPowerfulOz]

I'm afraid I don't know what else to try at this point, Tom.

Though unlikely, the only thing I can imagine is that the sample output you sent me is somehow missing one or more key elements which, in your "real" output, cause the CSS changes to be overridden or ignored. Without direct access to the actual project output (where this apparently still remains an issue), I don't know what else I can do to troubleshoot...

Is there any possibility of you publishing your complete output to a publicly-accessible (but not publicly-known) location, where I might take another look? If so, you could send me a private message with the URL and I'd be glad to continue investigating.

[Tom]

Hi Austin,

The output I send you was exactly the same project as I work in. The only thing I did before buidling the TestTarget, is copying an exisiting TOC and deleting almost all of the topics an copying a target whith that TOC. That's all. Sending you the whole project, would only be 'more of the same' (I think ).
The moment I copy your code in the 'Topic.css' in the output (in the 'official' versions of the project), it works fine.

I must admit that I'm working in a project having it's roots in WinHelp, later converted to html-help in RoboHelp and than converted to Flair (2.0?). So I can imagine it needs a bit 'cleaning' .
I propose we leave it where it is. Six times copy-paste in 'Topic.css' in the release versions of the build will do the job.

Thanks,
Tom