Skins and Fonts and Cross-OS compability - SOLVED

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
bunnycat
Propeller Head
Posts: 70
Joined: Tue Nov 03, 2015 6:44 am

Skins and Fonts and Cross-OS compability - SOLVED

Post by bunnycat »

I'm having a challenge with Tripane/ TopNav HTML5 skins and cross-platform compatibility.

Our skins are normally defined to use Calibri, which is a Windows default font.
Some percentage of our customers use Macs, which of course, don't have Calibri. Because it can't use Calibri, it defaults to Times New Roman and looks terrible.


I've tried several times to add a list of font families into the skins like I do in the CSS, but it doesn't seem to work.

font-family: Calibri, Arial, san-serif;

Should I just tackle this in the CSS instead? Will !important override the Tripane skin tree node div code correctly?
Last edited by bunnycat on Thu Jan 18, 2018 5:20 am, edited 1 time in total.
simona
Propeller Head
Posts: 56
Joined: Wed Feb 27, 2013 3:16 am
Location: Bremen, Germany

Re: Skins and Fonts and Cross-OS compability

Post by simona »

Yes, I think this is done via the CSS. I'm trying to do something similar right now and stumbled over this: https://www.madcapsoftware.com/blog/201 ... e-outputs/

It's not yet working on my end, but maybe it helps you ;-)
Flare 2023 r3, Capture 7
TechWriter with 10+ years Flare experience (software)
99% remote
bunnycat
Propeller Head
Posts: 70
Joined: Tue Nov 03, 2015 6:44 am

Re: Skins and Fonts and Cross-OS compability - SOLVED

Post by bunnycat »

Weird, it was actually easier than I thought it was. In the Skin editor, I just added the list of fonts, separated by commas into the various fields. I honestly don't know why it hadn't worked earlier. 8)

The hidden gotcha was any master pages that had special in-line font adjustments. Had to adjust those on their own to make the whole thing look nice in Mac/Chrome.
SDWriterClmt
Propeller Head
Posts: 46
Joined: Wed May 30, 2018 1:22 pm

Re: Skins and Fonts and Cross-OS compability - SOLVED

Post by SDWriterClmt »

bunnycat wrote:Weird, it was actually easier than I thought it was. In the Skin editor, I just added the list of fonts, separated by commas into the various fields. I honestly don't know why it hadn't worked earlier.

The hidden gotcha was any master pages that had special in-line font adjustments. Had to adjust those on their own to make the whole thing look nice in Mac/Chrome.
I would not mind seeing this process described in more detail. I'm working in Flare 2018/2019 on a Win10 machine. My site's basic font is Calibri also. However, on my coworkers' Mac LTs the font is Times NR. I want to fix this.

BTW, this isn't actually affecting my sidebar navigation, which looks 'normal' to me. It's the text within the various topics that is not displaying correctly.

So what exactly was done here, if anyone knows, by saying, "added the list of fonts, separated by commas into the various fields"?
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: Skins and Fonts and Cross-OS compability - SOLVED

Post by Psider »

I think all you should need to do, given you say it's the topic content that looks strange, is edit the styles in your stylesheet so that everywhere you have font-family defined, instead of just saying "Calibri", it lists all the fonts you want, from highest to lowest preference. For example, "Calibri, Arial, Helvetica, sans-serif".

How many places you need to change will depend on how your stylesheet is set up.
SDWriterClmt
Propeller Head
Posts: 46
Joined: Wed May 30, 2018 1:22 pm

Re: Skins and Fonts and Cross-OS compability - SOLVED

Post by SDWriterClmt »

Thanks. Okay, so just to make it very clear to me... let's say I want to do as you describe with the 'p' style. You are saying to modify the font-family as indicated below?
FlareFontQuestion.png
You do not have the required permissions to view the files attached to this post.
SDWriterClmt
Propeller Head
Posts: 46
Joined: Wed May 30, 2018 1:22 pm

Re: Skins and Fonts and Cross-OS compability - SOLVED

Post by SDWriterClmt »

Okay, since I did the above and nothing blew up, I assume it's the way to go. So, would it be the smart thing to just duplicate this everywhere that Calibri has been specified? Granted there are more styles in my CSS than I will ever use in my current project.
FlareFontQuestion2.png
You do not have the required permissions to view the files attached to this post.
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: Skins and Fonts and Cross-OS compability - SOLVED

Post by Psider »

Based on your screenshot, you've changed the font-family tag for only the paragraphs (only the p tag).

It's hard to say what to change as so much depends on how your specific styles have been set up.

Try setting the same thing on the body tag and see if all (or most) of the other references update to the same. Then you should only need to change any that have been specifically set for a particular style (or reset/delete the value so it inherits instead). In the Advanced view, I think the property label will be black/bold if it has been specifically set for that style. If it's grey it will be inheriting the font family.

Mozilla also has tutorials for CSS that you could run through for general information about CSS. This page talks about the cascade and inheritance which might help. Feel free to jump back to the overview page and run through the entire tutorial. :)
https://developer.mozilla.org/en-US/doc ... nheritance
SDWriterClmt
Propeller Head
Posts: 46
Joined: Wed May 30, 2018 1:22 pm

Re: Skins and Fonts and Cross-OS compability - SOLVED

Post by SDWriterClmt »

Thanks Psider. Yes, correct, I only changed p so far.

Speaking of inheritance, I inherited this project and CSS from previous authors on this job. So it's mostly how I found it. I am not seeing any grayed values in Advanced View, so that there isn't any inheritance of attributes among these styles. I did change the font-family of body to the same as p. Didn't affect any other styles from what I am able to tell.

So, should I assume I can change any style using "Calibri" to that order-of-preference for the font?
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: Skins and Fonts and Cross-OS compability - SOLVED

Post by Psider »

Unless you're familiar with CSS, it might be easier to change every occurrence. A least that way you'll be sure everything is displaying the same way.

(Changing it would have the benefit of being easier to change in future, but it does have a small risk of breaking or missing something. You could always take a backup of the file, so you can copy it back in the event of an accident. Maybe you could make a small test project with three or 4 sample topics, and work on it on the side.)
Post Reply