Replace PNGs with SVGs in HTML5 - Top Navigation skin

This forum is for all Flare issues related to styles, stylesheets and XML.

Replace PNGs with SVGs in HTML5 - Top Navigation skin

Postby arthurdent on Fri Jun 28, 2019 1:42 am

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
arthurdent
Jr. Propeller Head
 
Posts: 4
Joined: Sun Apr 14, 2019 10:11 pm

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

Postby Dave Lee on Tue Jul 02, 2019 4:16 am

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.
Dave Lee
Master Propellus Maximus
 
Posts: 5743
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

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

Postby arthurdent on Wed Jul 03, 2019 1:30 am

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).
arthurdent
Jr. Propeller Head
 
Posts: 4
Joined: Sun Apr 14, 2019 10:11 pm

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

Postby Dave Lee on Wed Jul 03, 2019 6:17 am

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.
Dave Lee
Master Propellus Maximus
 
Posts: 5743
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

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

Postby arthurdent on Thu Jul 04, 2019 3:07 am

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).
------------------------------------------------
arthurdent
Jr. Propeller Head
 
Posts: 4
Joined: Sun Apr 14, 2019 10:11 pm


Return to Styles, Stylesheets and XML

Who is online

Users browsing this forum: No registered users and 2 guests

cron