HTML 5 top nav toolbar icons cannot be svg?
-
- Propeller Head
- Posts: 21
- Joined: Thu Aug 24, 2017 9:05 am
- Location: Los Angeles, CA
- Contact:
HTML 5 top nav toolbar icons cannot be svg?
We'd love to have scale independent svg icons for the topic toolbar icons in HTML 5 top-nav - but the skins editor doesn't seem to allow for that possibility - anyone find a way to get this to work?
Gerard Falla
Tech Whirler & 3D Generalist: I do occasionally write. Really.
Flare Newbie
CADDmin Consulting
https://www.linkedin.com/in/gerard-falla-2017
https://www.behance.net/GerardFalla
Tech Whirler & 3D Generalist: I do occasionally write. Really.
Flare Newbie
CADDmin Consulting
https://www.linkedin.com/in/gerard-falla-2017
https://www.behance.net/GerardFalla
-
- Propeller Head
- Posts: 21
- Joined: Thu Aug 24, 2017 9:05 am
- Location: Los Angeles, CA
- Contact:
Re: HTML 5 top nav toolbar icons cannot be svg?
We've been trying to use an approach outlined by the great and powerful Oz to switch out header logo from png to svg to address this topic-toolbar issue in the top-nav HTML 5 output, but we're still seeing some troubles - anyone have any more "legitimate" MadCap ideas for achieving this goal?
Gerard Falla
Tech Whirler & 3D Generalist: I do occasionally write. Really.
Flare Newbie
CADDmin Consulting
https://www.linkedin.com/in/gerard-falla-2017
https://www.behance.net/GerardFalla
Tech Whirler & 3D Generalist: I do occasionally write. Really.
Flare Newbie
CADDmin Consulting
https://www.linkedin.com/in/gerard-falla-2017
https://www.behance.net/GerardFalla
Re: HTML 5 top nav toolbar icons cannot be svg?
I've found a workaround for this, because this still is an issue four years later.
I want my search input button and the hamburger menu to be SVG to avoid image artifacts when scaling, but the Flare skin editor doesn't allow me to. Hence, I have resorted to exchanging the icon files as follows:
1. Create all output files for your online target. (Make sure to have PNG files referenced in the skin editor for the icons you want to replace with SVGs later.)
2. Generate your online target.
3. Look in the following stylesheets for the PNGs you would like to replace:
\<your Flare project>\Output\...\<your target>\Skins\Fluid\Stylesheets
> Styles.css
> Mobile.css
> Tablet.css
For instance, the search submit icon is currently found in this CSS class:
Alternatively, you can use the F12 developer tools function of your browser to figure out which classes to modify.
4. Place your SVGs with which you would like to replace the PNGs in a suitable image folder.
5. Copy the CSS style from the Flare stylesheet to your own stylesheet.
6. Replace the PNGs with the SVG files by pointing to them in their image folder. Don't forget to add important! to override the MadCap style.
For the search submit button, this would currently look like this:
I want my search input button and the hamburger menu to be SVG to avoid image artifacts when scaling, but the Flare skin editor doesn't allow me to. Hence, I have resorted to exchanging the icon files as follows:
1. Create all output files for your online target. (Make sure to have PNG files referenced in the skin editor for the icons you want to replace with SVGs later.)
2. Generate your online target.
3. Look in the following stylesheets for the PNGs you would like to replace:
\<your Flare project>\Output\...\<your target>\Skins\Fluid\Stylesheets
> Styles.css
> Mobile.css
> Tablet.css
For instance, the search submit icon is currently found in this CSS class:
Code: Select all
.search-bar.search-bar-container .search-submit
4. Place your SVGs with which you would like to replace the PNGs in a suitable image folder.
5. Copy the CSS style from the Flare stylesheet to your own stylesheet.
6. Replace the PNGs with the SVG files by pointing to them in their image folder. Don't forget to add important! to override the MadCap style.
For the search submit button, this would currently look like this:
Code: Select all
.search-bar.search-bar-container .search-submit
{
width: 2em;
background: #<your color> url('../<your image folder>/your-svg-icon.svg') no-repeat center center !important;
-pie-background: #<your color> url('../<your image folder>/your-svg-icon.svg') no-repeat center center !important;
}
Last edited by Corinna on Fri Sep 03, 2021 7:29 am, edited 9 times in total.
Re: HTML 5 top nav toolbar icons cannot be svg?
If you're using a Top Nav or Side Nav skin, then you can modify the icons from your own stylesheet - without needing to manually edit the output.Corinna wrote:I've found a somewhat tedious workaround to this, because this still is an issue four years later.
For example, to modify the image used by the print button:
Code: Select all
button.print-button div.button-icon
{
background: transparent url('../Images/YourImage.svg') !important;
}
* The !important is required to override Flare's CSS.
Use your browser's dev tools (F12) to find the class names of the toolbar buttons, which use this sort of structure:
Code: Select all
<button class="button needs-pie print-button" title="Print">
<div>
<div role="img" class="button-icon-wrapper" aria-label="Print">
<div class="button-icon"> </div>
</div>
</div>
</button>
Re: HTML 5 top nav toolbar icons cannot be svg?
Thanks, Dave, I just figured that out myself. I wasn't sure if my stylesheet would override the Flare default stylesheets and only later found another thread covering the same topic.
viewtopic.php?f=6&t=31745&p=137469&hilit=SVGs#p137402
viewtopic.php?f=6&t=31745&p=137469&hilit=SVGs#p137402