Before you ask please READ THIS

How to insert SVG Logo?

in PhotoProof Posts: 47
Hello Air,

I've recently installed Photoproof. So far everything's fine. However, I'm struggling with replacing the existing Photoproof logo with my personal one.

I couldn't find a solution working for me neither in the respective blog entry [1], theme documentation [2] nor existing support forum threads.

I've installed the cited Safe SVG plug-in. I've creating the logo with Adobe XS, exported the SVG and pimped that with SVGOMG. Next I've uploaded the logo, which worked. However, afterwards my custom font used I've in the logo is gone. Is that maybe because I used a local font (with my personal handwriting?). Instead the logo uses now a default font (e.g. Times New Roman?). Last but not least, the logo shows up only on two of my pages, where dark pages are (e.g. standard album page 'with tag filter'), but not where black text should be (e.g. standard contact-ii page or page 'Home'). I'm aware I might have to add also code to CSS, but yet don't know which? I can send screenshots, if there is a secure way.

My (maybe incorrect) laymen understanding of SVG logos were, the SVG file itself just contains the vector data, while the embedded XML code contains whatever is necessary to draw the lines, while within my CSS file, I can address these SVG content and format it with.

I'm puzzled. Maybe I'm simply too stupid to add it correctly. Is there any (non-freak-)HowTo I can follow which is idiots safe? I can code, but haven't planned to become an CSS master in order to add a simple logo. ;-)

Thanks in advance for an advise what and how to do it.

Marius

[1] https://apollo13themes.com/svg-logo-on-wordpress-site/
[2] https://rifetheme.com/apollo13-framework/docs/customizing-the-theme/header/svg-logo/

Comments

  • AirAir
    Posts: 10,143
    Hey Marius:-)

    Please send me a live link to your website where you have added the SVG logo. I will check what could be wrong.

    With kind regards.
  • edited October 9 Posts: 47
    Hi Air,

    thank you very much for your ultrafast response.

    The site is abc-abc.photo

    The logo should actually look like in the attached file with the hand-writing font. It does with macOS preview after export from Adobe XS. However, it doesn't in SVGOMG, though the font is listed in the file source code. Maybe there is already one fault?

    The file I've converted yesterday for test purpose with an online tool showed up in WordPress with my custom font style. However, that file showed up on the website detached somewhere with a distance of 200 px from the top. I blamed the online converter for this and thus tried it new following your blog entry.

    What I noticed: The file seems to be there also on white background pages. However, the color there seems to be white as well so that it's invisible.
    Post edited by MLG76 on
  • AirAir
    Posts: 10,143
    OK :-)

    Let's start with disabling logo color variants, so you will be sure you can see your logo and it is not hidden.

    Go to Appearance → Customize → Header Settings → Logo → Use logos from header variants → Disable.

    Next thing is your SVG : you have to export it as shapes. Currently, you have exported it as text, and even if it will be visible, it will not look like you intended, as used font will be missing.

    I don't know how to do it in your program, but you will find some info on Google.

    With kind regards.


  • Posts: 47
    I understand.

    Disabled "Use logos from header variants" and now at least the logo shows up also on white background pages! Great. I'll have to admit the admin of color variants confuses me. Didn't I need this setting to be enabled in order to make the logo white on the black backgrounded pages?

    Regarding the SVG I will fix that fault. Thanks for your advise. ;-)

  • edited October 9 Posts: 47
    Brief addition: Uploaded the correct SVG logo. Should have used Adobe Illustrator from the beginning. So that problem is fixed.
    Post edited by MLG76 on
  • edited October 9 Posts: 47
    One more addition: Where do I find the setting to alter the color of the SVG logo in the 'sticky header' upon scrolling down?

    Black logo on white background is nice, but with default setting once I scroll down and the transparent background pops up, the menu text changes to white (which is nice), but my SVG logo remains black.

    Post edited by MLG76 on
  • edited October 9 Posts: 47
    Muring Air,

    I suppose I need to add custom CSS [1].:-/

    Thus changed the layer name in the SVG from 'Ebene 1' to 'Ebene1' (to prevent eventual spacing problems in code) and added

    .a13-dark-variant .svg-logo path.Ebene1{
    fill:#86bc25;
    }

    for test purpose. However, that doesn't do anything upon scrolling down in sticky version. :-(

    [1] https://support.apollo13.eu/discussion/5838/svg-logo-change-in-header-using-variants

    Post edited by MLG76 on
  • AirAir
    Posts: 10,143
    MLG76 said: Didn't I need this setting to be enabled in order to make the logo white on the black backgrounded pages?
    You can read about header color variants here to know them better https://rifetheme.com/apollo13-framework/docs/customizing-the-theme/header/variant-light-dark-overwrites/


    I have seen your website and it almost looks as it should.

    Now let's add this custom CSS:
    .a13-sticky-variant .logo svg path {
        fill: white; /* for color */
    }
    .logo svg path {
        transition: fill .5s; /* for animation */
    }
    We should be good with it :-)

    With kind regards.
  • edited October 9 Posts: 47
    Air, the others had been right: You're the man! PERFECT! Now it works as it should. 🙏

    A BIG THANK YOU! : -)

    PS: What confused me was, that you can set for the logo in the sticky menu an individual size, but not the color, even though you can for the menu text.

    Post edited by MLG76 on
  • AirAir
    Posts: 10,143
    Thanks for the kind words and I am glad all is good now :-)
    MLG76 said: What confused me was, that you can set for the logo in the sticky menu an individual size, but not the color, even though you can for the menu text.
    Typically you can not change colors in the image logo, so there can't be a setting for it. Even in the case of SVGs - there are so many possibilities in creating them, that each case has to be taken individually.

    With kind regards.
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