-
Posts
-
Hi there,
I’ve uploaded 2 .svg logo files. The first one is in color and is used when the header is scrolled or on pages where it’s not transparent. The second logo is white and used when the header is transparent.
The problem is that part of the colored version of the logo is being drawn in white, which it shouldn’t be. It looks to me like one of the classes (.st0) is being overwritten by the colors of the white version.
I managed find a workaround for this problem by adding the following to the quick CSS:#header:not(.av_header_transparency) path.st0 { fill: #c2c7c9 !important; }However, now the transitions in the color changes between the scrolled/non-scrolled header seem off. Some parts of the logo change faster than others. I’ve attached 2 videos and a link to the website for you, so you can check it yourselves. I’ve removed my quick-fix from the CSS again, so that you can see the original problem.
Thank you.
have a look inside your svg code – i guess both will have the same st classes ( these are former illustrator standard classes) in the mean-time it is cls. But different name same shit.
if you inspect my test page: https://webers-testseite.de/
i only use my colored svg logo – have unique classes set and the transparency logo isn’t a different one but just different fill:.html_header_transparency #header:not(.header-scrolled) .buchstabe { fill: #FFF; }may i see your page it concerns?
Hey Guenni,
thank you very much for your offer, but unfortunately I can’t share the URL publicly. Is there a way to send it to you privately?
Also,the theme allows to upload a logo for a transparent and non-transparent header and should therefore be able to display the 2 correctly and if it can’t, then I guess it’s a bug that needs to be fixed.if you use both options this should work. But if only fill color is different then it might not be necessary to use them both – as you can see on my example page.
If you use both: look with a good text editor (for windows : notepad++ or for mac : sublimetext ) inside both svg files – there are the same classes used – as usually by illustrator – these are the st0, st1 etc.Now the transparency logo comes later in the DOM – so this fill rules inside the transparency logo rules the css for st0.
Or aslong your external css does not differ between both logo files – these rules are woring on both files.
The one for non transparency case is ( .avia-svg-logo > a > svg ) – and the one for transparency is at ( .avia-svg-logo-sub > svg )Yes – send me the link to your page via e-mail. Everything is under my nick.
Hey Guenni,
wow.. that was one hell of a crash course on .svg files and now everything makes sense. I’ve never really used them that much before. I knew what they were and how they worked in theory, but I didn’t even know you could edit them in a text editor, I simply renamed the .st0 class in the white logo file to .st0-white and now everything’s working just fine.
Appreciate the help!
- You must be logged in to reply to this topic.