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
  • July 28, 2013 at 3:12 am #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
    July 30, 2013 at 1:09 am #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

    August 2, 2013 at 12:58 am #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

    August 2, 2013 at 3:37 am #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.

    August 19, 2013 at 6:55 pm #138555

    Caroline Moore

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

    September 3, 2013 at 6:42 pm #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

    September 17, 2013 at 9:30 pm #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.

  • Author
    Posts
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.