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?
Skins and Fonts and Cross-OS compability - SOLVED
Skins and Fonts and Cross-OS compability - SOLVED
Last edited by bunnycat on Thu Jan 18, 2018 5:20 am, edited 1 time in total.
Re: Skins and Fonts and Cross-OS compability
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
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
TechWriter with 10+ years Flare experience (software)
99% remote
Re: Skins and Fonts and Cross-OS compability - SOLVED
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.
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.
-
- Propeller Head
- Posts: 46
- Joined: Wed May 30, 2018 1:22 pm
Re: Skins and Fonts and Cross-OS compability - SOLVED
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.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.
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"?
Re: Skins and Fonts and Cross-OS compability - SOLVED
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.
How many places you need to change will depend on how your stylesheet is set up.
-
- Propeller Head
- Posts: 46
- Joined: Wed May 30, 2018 1:22 pm
Re: Skins and Fonts and Cross-OS compability - SOLVED
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?
You do not have the required permissions to view the files attached to this post.
-
- Propeller Head
- Posts: 46
- Joined: Wed May 30, 2018 1:22 pm
Re: Skins and Fonts and Cross-OS compability - SOLVED
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.
You do not have the required permissions to view the files attached to this post.
Re: Skins and Fonts and Cross-OS compability - SOLVED
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
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
-
- Propeller Head
- Posts: 46
- Joined: Wed May 30, 2018 1:22 pm
Re: Skins and Fonts and Cross-OS compability - SOLVED
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?
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?
Re: Skins and Fonts and Cross-OS compability - SOLVED
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.)
(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.)