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

Skins and Fonts and Cross-OS compability - SOLVED

Postby bunnycat on Thu Jan 11, 2018 12:00 pm

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.
bunnycat
Propeller Head
 
Posts: 60
Joined: Tue Nov 03, 2015 6:44 am

Re: Skins and Fonts and Cross-OS compability

Postby simona on Fri Jan 12, 2018 9:24 am

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 2019, Lingo 11, Capture 7
Win10 ThinkPad
(Sole TechWriter for two Scrum teams in an agile software development environment)
simona
Propeller Head
 
Posts: 50
Joined: Wed Feb 27, 2013 3:16 am
Location: Hamburg, Germany

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

Postby bunnycat on Thu Jan 18, 2018 5:23 am

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.
bunnycat
Propeller Head
 
Posts: 60
Joined: Tue Nov 03, 2015 6:44 am

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

Postby SDWriterClmt on Thu Apr 11, 2019 11:48 am

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"?
SDWriterClmt
Propeller Head
 
Posts: 42
Joined: Wed May 30, 2018 1:22 pm

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

Postby Psider on Thu Apr 11, 2019 8:43 pm

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.
Psider
Propellus Maximus
 
Posts: 600
Joined: Wed Jul 06, 2011 1:32 am

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

Postby SDWriterClmt on Fri Apr 12, 2019 10:52 am

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: 42
Joined: Wed May 30, 2018 1:22 pm

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

Postby SDWriterClmt on Fri Apr 12, 2019 11:56 am

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.
SDWriterClmt
Propeller Head
 
Posts: 42
Joined: Wed May 30, 2018 1:22 pm

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

Postby Psider on Sun Apr 14, 2019 6:55 pm

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
Psider
Propellus Maximus
 
Posts: 600
Joined: Wed Jul 06, 2011 1:32 am

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

Postby SDWriterClmt on Mon Apr 15, 2019 2:52 pm

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?
SDWriterClmt
Propeller Head
 
Posts: 42
Joined: Wed May 30, 2018 1:22 pm

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

Postby Psider on Mon Apr 15, 2019 6:29 pm

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.)
Psider
Propellus Maximus
 
Posts: 600
Joined: Wed Jul 06, 2011 1:32 am


Return to Web-based Outputs

Who is online

Users browsing this forum: amitkapoor and 3 guests