• Resolved idmuse

    (@idmuse)


    Is that possible to change the text for a logo (a small one, of course) in the left, in the icon bar at the top ?

Viewing 11 replies - 1 through 11 (of 11 total)
  • sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    To have the logo be clickable as a return to the home page, like the text title is, I would suggest adding the image as a background to .site-title a and then do a large negative text-indent to move the text way off to the left outside the browser/device.

    .site-title a {
        background: url("URL_OF_IMAGE") no-repeat scroll 0 0 transparent;
        text-indent: -9999px;
        display: block;
        height: 60px;
    }

    Upload your image to your media library, get the URL of that image and replace URL_OF_IMAGE between the quote marks with that URL. I’ve arbitrarily done a height of 60px, but adjust that number to match the height of your image.

    Thx for the tips ?? Any way to make the display area of the logo wider? Right now mine is cut in the middle. ??

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    @cafeine, can we have a link to the site you are talking about? The site linked to your username is not using Sorbet.

    Indeed, it’s Asiavibes.info ?? And I just use text atm while waiting to fix this ?? Thx!

    Moderator Kathryn Presner

    (@zoonini)

    Cafeine – could you provide a link to the image you want to use for your logo?

    Sure ?? This is the 2X version (retina) https://www.dropbox.com/s/4cr5ng6c0uzkvz1/Asiavibes_logo_web_740x240.png?dl=0 and I have the one half the size. ??

    Moderator Kathryn Presner

    (@zoonini)

    Thanks! I reduced your image to 309 by 100px in a graphics program and then used this CSS to display it:

    .site-title a {
         background: rgba(0, 0, 0, 0) url("YOUR-URL-HERE/your-image-url.jpg") no-repeat scroll 0px 0px;
         display: block;
         height: 100px;
         width: 400px;
         text-indent: -9999px;
    }

    This is what it looks like – note that the URL refers to my test site where I uploaded your image, you’ll need to replace that with the real image path in your own Media Library:

    Asia Vibes K Pop J Pop C Pop Whatever Pop

    Thx a LOT ?? it’s all good now! Btw I love your blog. ??

    I’m curious and maybe asking too much but what should I do to provide a retina logo too? On my retina mac this one already looks blurry. :/

    Moderator Kathryn Presner

    (@zoonini)

    You could try experimenting with a second piece of CSS within a media query that detects retina screens. This tutorial explains how to do that:

    https://css-tricks.com/snippets/css/retina-display-media-query/

    It’s a bit more advanced but you can definitely experiment with it if you’re game!

    Btw I love your blog. ??

    Hey, thanks!

    Thanks a lot for your help ! And keep the great themes coming. ??

    Moderator Kathryn Presner

    (@zoonini)

    My pleasure!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Put a logo instead of the text?’ is closed to new replies.