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
Replace PNGs with SVGs in HTML5 - Top Navigation skin
-
- Jr. Propeller Head
- Posts: 4
- Joined: Sun Apr 14, 2019 10:11 pm
Re: Replace PNGs with SVGs in HTML5 - Top Navigation skin
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'.
The search icon uses the correct selector, so probably just needs an !important on the background.
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;
}
-
- Jr. Propeller Head
- Posts: 4
- Joined: Sun Apr 14, 2019 10:11 pm
Re: Replace PNGs with SVGs in HTML5 - Top Navigation skin
Hello Dave,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'.
The search icon uses the correct selector, so probably just needs an !important on the background.Code: Select all
nav.title-bar .menu-icon span { background-image: url('../Images/Isonet_Images/_Menu.svg') !important; }
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).
Re: Replace PNGs with SVGs in HTML5 - Top Navigation skin
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 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.
-
- Jr. Propeller Head
- Posts: 4
- Joined: Sun Apr 14, 2019 10:11 pm
Re: Replace PNGs with SVGs in HTML5 - Top Navigation skin
Hello Dave,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.
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).
------------------------------------------------