Before you ask please READ THIS

SVG logo change in header using variants

in Rife Posts: 161
Hi Air

Still having fun using rife and element or and have less an dless issues.
But no zero :) I am using an svg logo in the header (dark variant for the page) and another svg logo in the sticky variant. Unfortunately it always uses only the logo in "logo" and not the one set in the variant.. any idea?

Link: https://beta.baselathome.ch

Thanks, Pascal

Comments

  • edited March 15 Posts: 161

    Thought it was a cache issue.. but no.. still an "real" issue
    Post edited by FLYART on
  • Posts: 161
    After lloking deeper into it I think it probably has to do with the svg? Any other settings I use in the dark Variant is beeing used properly... help :)
  • Posts: 161
    Another update: sticky variant DOES use the logo set in that variant BUT it seems to have issues with transparency ... looks like any color but black it being displayed transparently ...
  • AirAir
    Posts: 9,696
    Hey :-)

    Please check that you have enabled logo switching in header color variants :
    Appearance → Customize → Header Settings → Logo → Use logos from header variants.

    With kind regards.
  • Posts: 161
    Hey Air.. I checked and I did.. as just noticed it seems to be an issue with transparency (if I use another svg logo in sticky variant it's being displayed but only the black parts!
  • AirAir
    Posts: 9,696
    Yes, it looks like green on green. The logo has green parts and the header is also green.
    For me, your normal logo, dark and sticky all look the same.

    Do they differ at all in colors?

    With kind regards.
  • Posts: 161
    Yes the do.. for the transparent header (dark variant with the green parts= is fine.. for the sticky header the logo uses white for the green parts .. so there are two different versions for the tow variants
  • AirAir
    Posts: 9,696
    OK. but in the source code, all are identical. Can you check that you have indeed selected different logos for each variant?

    Or maybe you were changing the color of these parts with CSS? If you like I can help you use just one SVG and change colors with CSS.
    This way you will only have to use 1 logo:-)

    With kind regards.
  • Posts: 161
    Hi.. maybe that's the issue? Because when I look into variants I see the different logo very well (I just put in a different logo > here you can see that the white part becomes green "KURIER" is actually white in medias and in settings for sticky variant).. so maybe it's a bug? But of course help on how to set this up with css is cool.. how?¨
    Thanks, Pascal
  • AirAir
    Posts: 9,696
    Could you send me access? Private message as usual :-) I will check if it is a bug, and also prepare custom CSS for you right in the panel :-)

    With kind regards.
  • Posts: 161
    Cool, thanks! I just sent you access to admin
  • Posts: 161
    and I also put back the correct logo in sticky variant.. there you can see the the green parts are white :)
  • AirAir
    Posts: 9,696
    Haha :-)

    The issue is that each SVG contains CSS, and each logo overrides previous rules added by the previous logo. If each logo had different classes for paths it will work fine. Now each logo has .cls-1 and try to style it.

    Using inline SVGs is tricky :-)

    I will switch you to one logo with color to variants done in CSS.

    I will update you soon :-)

    With kind regards.
  • AirAir
    Posts: 9,696
    Please check now. I have added such custom CSS, only for a dark variant:
    .a13-dark-variant .svg-logo path.cls-1{
    	fill:#86bc25;
    }
    With kind regards.
  • Posts: 161
    Hey Air! You da man! Very cool and very sleek! Just started ventuing with svg and I love it but looks like I have a lot to learn :)
    Thanks very much for your appreciated and fast help!
  • AirAir
    Posts: 9,696
    Great that we could solve it so fast :-)

    SVGs are tricky, but that is why you got us to help if something is getting confusing :-)

    Have a great weekend Pascal :-)
  • Posts: 161
    Could you plese tell how and where you did this. It now looks you only use the svg in Logo and disabled the "use logos from header variants". Where did you add the class to the logo? and how were you able to tell the svg that only the white parts have to become green?
    Thanks, Pascal
  • AirAir
    Posts: 9,696
    I write about it in documentation https://rifetheme.com/help/docs/customizing-the-theme/header/svg-logo/

    If you will open SVG in the text editor you will see all its markup.

    And CSS is added in Custom CSS: Appearance → Customize → Custom CSS.

    With kind regards.
  • Posts: 161
    Thanks again! Best support ever!!
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion