Replace PNGs with SVGs in HTML5 - Top Navigation skin

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
arthurdent
Jr. Propeller Head
Posts: 4
Joined: Sun Apr 14, 2019 10:11 pm

Replace PNGs with SVGs in HTML5 - Top Navigation skin

Post by arthurdent »

Hello,
I want to replace the image "Menu.png" (Burger) in the title-bar and the image "SearchIcon.png" in the search-bar with *.svg-images. In the "HTML5 - Top Navigation" skin this is not possible. The SVGs are accepted and displayed in the draft, but during runtime they are replaced by the defaults. In my Main.css I want to overwrite them. Unfortunately I miss the CSS structures of both elements. The displayed structures in the browser do not lead to any success, e.g.:

nav.title-bar .menu-icon
{
background-image: url('../Images/Isonet_Images/_Menu.svg');
}
----------------------------------------
.search-bar .search-submit or
.search-bar.search-bar-container .search-submit
{
background-image: url('../Images/Isonet_Images/_SearchIcon.svg');
}

Can anyone give me a hint? Thank you
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Replace PNGs with SVGs in HTML5 - Top Navigation skin

Post by NorthEast »

For this sort of work, try pressing f12 in your browser and use the developer tools to inspect the HTML and CSS.

The selector for the menu icon is nav.title-bar .menu-icon span. You'll probably also need to add !important to the background property, as Flare's CSS is more specific and would otherwise 'win'.

Code: Select all

nav.title-bar .menu-icon span
{
background-image: url('../Images/Isonet_Images/_Menu.svg') !important; 
}
The search icon uses the correct selector, so probably just needs an !important on the background.
arthurdent
Jr. Propeller Head
Posts: 4
Joined: Sun Apr 14, 2019 10:11 pm

Re: Replace PNGs with SVGs in HTML5 - Top Navigation skin

Post by arthurdent »

Dave Lee wrote:For this sort of work, try pressing f12 in your browser and use the developer tools to inspect the HTML and CSS.

The selector for the menu icon is nav.title-bar .menu-icon span. You'll probably also need to add !important to the background property, as Flare's CSS is more specific and would otherwise 'win'.

Code: Select all

nav.title-bar .menu-icon span
{
background-image: url('../Images/Isonet_Images/_Menu.svg') !important; 
}
The search icon uses the correct selector, so probably just needs an !important on the background.
Hello Dave,
thank you for your help. The selektor and the !important I had already tried (and other selektoren), unfortunately without success. The stylesheet of Flare seems to be the most important. Obviously Flare has a general problem with SVG. For example:
MadCap|dropDown
{
mc-closed-image: url('../Images/DropDownClosed.svg');
mc-open-image: url('../Images/DropDownOpen.svg');
}
generates an error message when compiling (I have already reported a bug).
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Replace PNGs with SVGs in HTML5 - Top Navigation skin

Post by NorthEast »

arthurdent wrote:Hello Dave,
thank you for your help. The selektor and the !important I had already tried (and other selektoren), unfortunately without success. The stylesheet of Flare seems to be the most important.
It works fine for me - I used some in CSS the same format as the example I provided, and it replaced the menu icon with the SVG image.
arthurdent
Jr. Propeller Head
Posts: 4
Joined: Sun Apr 14, 2019 10:11 pm

Re: Replace PNGs with SVGs in HTML5 - Top Navigation skin

Post by arthurdent »

Dave Lee wrote: It works fine for me - I used some in CSS the same format as the example I provided, and it replaced the menu icon with the SVG image.
Hello Dave,
Your tip was right. I made a mistake by choosing the wrong medium (default). The MenuIcon and the SearchIcon are now displayed as SVG (Medium: tablet and mobile). Thanks a lot for that.
Do you have a hint about my second problem?
------------------------------------------------
MadCap|dropDown
{
mc-closed-image: url('../Images/DropDownClosed.svg');
mc-open-image: url('../Images/DropDownOpen.svg');
}
Replacing PNGs with SVGs generates an error message when compiling (I already reported this as a bug).
------------------------------------------------
Post Reply