Adding an image to the left of site title

Home Forums Automattic ThemeMin Adding an image to the left of site title

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #107636 Resolve

    kevinrowley

    Hello, I’m using ThemeMin and I’d really like to add a custom logo to the left of the site title. Is this possible with this theme? If so, would it be possible for someone to give very explicit instructions? I’m still a novice at writing code and CSS, so I need it spelled out for me. Thanks a lot.

    The blog I need help with is deadlineauthority.com
    #137473

    Michelle

    Hi there,

    The easiest way to achieve this would be to use an image editor to create an image that is 960 pixels wide by 180 pixels high. You can arrange the logo and site title text on this image, and then upload it as a Custom Header image for your site.

    It’s possible to use CSS however, but it’s a bit more tedious. If you’d prefer using CSS, let me know and I’ll provide you with the steps!

    Cheers,

    Michelle

    #137666

    kevinrowley

    Thanks Michelle, but I’m unable to resize to those specifications. Would you mind walking me through the CSS steps? Thanks again.

    Kevin

    #137691

    Michelle

    Hi Kevin,

    Here’s an example of how this can be done with CSS. You may need to tweak the image width and height to match your actual image.

    Before jumping into the CSS, upload your image to your Media Library, and make note of its URL.

    Next, paste the following CSS into the CSS Editor (Appearance > Customize > CSS).

    #branding hgroup:before {
    background: url( 'http://path/to/your/uploaded/image') #ccc;
    content: "";
    display: block;
    float: left;
    height: 80px;
    margin-right: 20px;
    width: 100px;
    }
    #site-title,
    #site-description {
    clear: none;
    }

    This adds a box that’s 100px wide by 80px high to the left of the site title. Depending on the size of your image, you can adjust the height, width, and right margin values. Once you have the image positioned the way you want, you can remove the “#ccc” from: background: url( 'http://path/to/your/uploaded/image') #ccc;. The color is there to help you position the box.

    Let me know if I can provide further help as you work through this.

    #138555

    Caroline Moore

    Howdy! Just checking in; have you had any luck with the above solution?

    #139423

    Michelle

    Howdy, Kevin!

    I’m just checking in with you one more time. Are you all set or do you still need assistance?

    Cheers,

    Michelle

    #140435

    Kathryn P.
    Happiness Engineer

    Hi there, I’m closing this thread but feel free to start a new one if you need help with anything else.

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Adding an image to the left of site title’ is closed to new replies.