Logo in header instead of text in SimpleMarket

I am trying to replace the text in the header with a company logo, which is basic functionality offered by any theme out there.
However, not easy on SimpleMarket.
I created a child theme and modified header.php, but if it could be done by CSS I guess would be more elegant?

Can't believe the themes from WPMU don't offer this. Or other simple settings, like changing the colors and fonts, most themes offer these things these days, including social media integration, SEO, responsive design and so on. All your themes are in desperate need of updating and rewriting to remotely compete with modern theme development.

To get back to the particular problem, there is a header image there, which also insists in getting cropped/stretched to 1102 × 350. I need a logo above the "site-actions", inside the "side-logo" div, but would love to have a flexible implementation regarding size. I could just hard code the width and height myself and stick an image in there, but doesn't seem elegant.

Thank you,
Silviu

  • Alexander
    • DEV MAN’s Mascot

    Hi @SCS,

    The header can set to use an image using some CSS image replacement techniques. This for example will replace the H1 text with the image from the URL, and still maintain the h1 text in the page for SEO purposes.

    #site-logo h1 {
    background: url('https://premium.wpmudev.org/wp-content/themes/wpmudev-new/i/screen/logo-home.png');
    width: 318px;
    height: 78px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    }

    Is this what you needed? Let me know if there's anything else I can take a look at here.

    Thanks for being a WPMU DEV member.
    Best regards, Alexander Rohmann

  • Alexander
    • DEV MAN’s Mascot

    Hi @SCS,

    I don't have a solution that adds an option to your dashboard. However, it is possible to upload an image, and within the CSS style you can reference that location. That way it would be hosted from the image library. You would still need to make sure it is the proper dimensions ahead of time.

    As for clicking on it, let me check on this. I'll have to do some testing with this theme specifically and get back to you.

    Best regards

  • Alexander
    • DEV MAN’s Mascot

    Hi again @scs,

    Here's the CSS for making the link clickable. You can use this instead of what I mentioned before.

    #site-logo  a {
    display: block;
    background: url('https://premium.wpmudev.org/wp-content/themes/wpmudev-new/i/screen/logo-home.png');
    width: 318px;
    height: 78px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    }

    Let me know how it goes!

    Best regards,

  • SCS
    • WPMU DEV Initiate

    Thank you Alexander,
    I really appreciate it. The thing is any pictures hard coded in the CSS are not flexible.
    For instance, I work on my site on my computer WAMP, and then have to upload it to the live server.
    I use Duplicator plugin to move the website and it works beautifully, but it only updates the base URL in the database.

    Pictures linked inside CSS files seem like a not very flexible solution in my opinion.

    So I will look for a solution where the picture link will use the base url, now that will allow the flexibility I am looking for.

    What do you think? Am I asking too much here?

    Have a nice day!

  • Alexander
    • DEV MAN’s Mascot

    @SCS,

    To prevent issues with the duplicate you could place the image in the themes image folder and have the CSS reference it relatively. This way if the site address changes you won't have a problem.

    Then the background rule would be more like:
    background: url('images/logo.png');

    Would this work for you?

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.