Hide Font Awesome Styles in Style Dropdown

[MelissaF]

I implemented Font Awesome into my Flare projects using Options > Stylesheet Links. The Font Awesome icons are working great, except that the Font Awesome styles have hijacked my style dropdown (under Home > Styles). When I click the dropdown, I see about 30 Font Awesome styles, and then the whole dropdown list becomes greyed out, which prevents me from even scrolling down further to select my non-Font Awesome styles (see attached screenshot).

For clarification, this only happens with the Style drop-down under Home > Style. (If I use either F12 or the CTRL + SHIFT + H shortcut within a topic, the Font Awesome styles still appear, but I can at least scroll down to my other styles).

Here are my failed attempts to resolve this:

1.In the Stylesheet Editor, I've gone to Options > Disable Styles, but unfortunately the Font Awesome styles aren't even listed there as styles for me to disable.

2.I've ma]nually set the mc-hidden property to "hidden" for the individual Font Awesome styles in both the font-awesome.css and the font-awesome.min.css. The style dropdown behavior remains the same.

Ideally I'd like to hide the Font Awesome styles from the dropdown entirely since this is my team's preferred method for selecting styles. Has anyone run into this problem or know how to hide imported styles in the dropdown?

Thanks!

[Mike Kelley]

Welcome to the forum, Melissa!

I'm glad to see you're successfully using Font Awesome! Unfortunately, that's kind of the price you pay - all of the styles defined in its stylesheets are loaded into the Style Picker. But, did you know the Style Picker accepts keyboard input? Meaning, after you bring up the dropdown list (Ctrl + Shift+ H), you can just start typing to match entries in the list. For example, if I select a word in the XML editor that I want to make red, and I have a style for it, I bring up the Style Picker via the keyboard shortcut, and tap period (.) - "r" - "e" - "d" which instantly selects the ".red" style class. Then I press [Enter] and that style is applied to my selection - all without ever having to have my hands leave the keyboard!

It's not a solution to your problem, unfortunately, and I don't think there is one. But hopefully this tip might lessen your pain.

[NorthEast]

Couple of suggestions:

1) You can 'pin' styles in the list, so that they always appear at the top of the list.

2) If you include the stylesheet links in your master page (and not your topic), then those styles will not be displayed in the style list. Whilst they will also not use the style in the editor, they will be correct in the preview and output.

[ChoccieMuffin]

Would it help to use the Style Window? That way you can pin all your preferred styles to the top of the list so you don't even have to see the other styles.

[NorthEast]

Would it help to use the Style Window? That way you can pin all your preferred styles to the top of the list so you don't even have to see the other styles.

You can pin styles in the dropdown list as well as the Style window.

[MelissaF]

Would it help to use the Style Window? That way you can pin all your preferred styles to the top of the list so you don't even have to see the other styles.

You can pin styles in the dropdown list as well as the Style window.

To Choccie Muffin, yes, right now the Style Window (F12) is the best solution because I can pin the styles, but my team prefers to use the style dropdown, so ideally I'd like to get that working.

To Dave Lee, I didn't realize you can pin the styles in the dropdown list! I just tried it; first I had to remove the link to the font-awesome css. Then I pinned my preferred styles to the top. Then as soon as I linked to the font-awesome css again, the whole style dropdown became greyed out again (like in my screenshot above).

[MelissaF]

Couple of suggestions:

1) You can 'pin' styles in the list, so that they always appear at the top of the list.

2) If you include the stylesheet links in your master page (and not your topic), then those styles will not be displayed in the style list. Whilst they will also not use the style in the editor, they will be correct in the preview and output.

Hey Dave, how can I link to the stylesheet through the master page? I added this to the head of my masterpage, but it doesn't seem to be working:

<link href="/Stylesheets/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
</link>

[NorthEast]

Hey Dave, how can I link to the stylesheet through the master page? I added this to the head of my masterpage, but it doesn't seem to be working:

<link href="/Stylesheets/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
</link>

The path in your href isn't correct; if you meant to go up to the parent folder, use "../" , e.g. "../Stylesheets/........"

The easiest way is just to click Stylesheet Links on the (home?) toolbar and set the link there.

[MelissaF]

Hey Dave, how can I link to the stylesheet through the master page? I added this to the head of my masterpage, but it doesn't seem to be working:

<link href="/Stylesheets/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
</link>

The path in your href isn't correct; if you meant to go up to the parent folder, use "../" , e.g. "../Stylesheets/........"

The easiest way is just to click Stylesheet Links on the (home?) toolbar and set the link there.

Thanks, Dave! I corrected the stylesheet link! In order for this method to work, I had to link my main css to the masterpage too. All the styles were properly hidden from the dropdown, but sadly my main css styles were hidden too. I guess it's all or nothing.

For now I'll settle with the Styles Window (F12) approach, and hope Flare adds more customization to the style drop down in the future.

[NorthEast]

You don't have to link your main stylesheet from the master page, just the one for font awesome.

I set my main stylesheet link in the topics, rather than there master page. Tip - to set the stylesheet for all topics, you can multi-select all topics in the project in File List pane, then set the stylesheet link.

[M_Mercer2015]

I'm not having this problem, but then again I'm not sure I've successfully embedded Font Awesome into my project.