Add Logo Image Next To Title In StudioPress Themes

Nov 2, 2013

—

Brad Dalton

There’s different ways you can add a logo or any other image inline with your sites title.

You can filter the default function for the title using PHP code and then add styling for your new title and image.

Or you can simply add a background image to your existing title and modify the default CSS code.

In this tutorial, we’ll use the CSS method and the Metro Pro theme by StudioPress as an example:

Here’s the result of what this solution produces using an image which is 200px width by 100px height:

And here’s an example of what the default text title looks like without the image.

Default Site Title CSS

Here’s the default CSS code we need to modify in your child themes style.css file starting at Line 935:

.site-title {
    font-family: 'Oswald', sans-serif;
    font-size: 48px;
    font-size: 4.8rem;
    line-height: 1;
    margin: 0 0 16px;
    margin: 0 0 1.6rem;
    text-transform: uppercase;
}

.site-title a,
.site-title a:hover {
    background-color: #f96e5b;
    color: #fff;
    display: inline-block;
    padding: 16px;
    padding: 1.6rem;
    text-decoration: none;
}

Customized CSS Code

After uploading the logo image to your child themes images folder and adding CSS code, here’s the working CSS you can add at the end of your child themes style.css file or replace with the default.

.site-title {
        background-image: url(images/image.png);
    background-repeat: no-repeat;
    font-family: 'Oswald', sans-serif;
    font-size: 68px;
    font-size: 6.8rem;
    line-height: 1;
    margin: 0 0 16px;
    margin: 0 0 1.6rem;
    text-transform: uppercase;
    float: left;
}

.site-title a {
    background-color: #f96e5b;
    color: #fff;
    display: inline-block;
    padding: 16px;
    padding: 1.6rem;
    text-decoration: none;
    float: none;
    margin-left: 200px;
}

CSS For Hover Effect

You could also add this code and modify the values for the background color and text color when the title is hovered:

.site-title a:hover {
    background-color: #E4E4E4;
    color: #2A93C2;
    display: inline-block;
    padding: 16px;
    padding: 1.6rem;
    text-decoration: none;
    float: none;
    margin-left: 200px;
}

And here’s the hover view.

To make the title area the same height as your image, simply change the font size for the site-title.

Mobile Responsiveness?

This will depend on the dimensions of your image however its not difficult to add a class for your image with different values when viewed on different sized screens/devices to the existing Media Queries included in all Pro themes.

Comments

9 responses to “Add Logo Image Next To Title In StudioPress Themes”

Tom

January 18, 2014

is there a chance to get the logo clickable ?

Log in to Reply
Paul

January 2, 2014

Hey there – I can’t get this to work with the new Outreach Pro – can you give it a shot and let me know if i’m missing something. thanks so much – yours is my Favorite tuts site for genesis!

Log in to Reply
1. Brad Dalton
  
  January 2, 2014
  
  Just tested on the new Outreach Pro theme and works perfectly.
  
  Log in to Reply
  1. Paul
    
    January 2, 2014
    
    hey Brad – thanks for the speedy reply – your graphic above is showing the logo in the Nav Gar – the tutorial above is for Next to Site Title – this is what I’m hoping to do. can you give me an example of that? thx again!!
    
    Log in to Reply
    1. Brad Dalton
      
      January 2, 2014
      
      Sorry. Confused there for a minute.
      
      I will need to test the solution with the new theme to make sure it works but i think its going to be pretty much the same.
      
      Make sure your image path and file name are correct.
      
      Log in to Reply
      1. Paul
        
        January 2, 2014
        
        the image path / file name is correct – the logo shows up, but sits behind the Site Title text, not next to it. thx
      2. Paul
        
        January 4, 2014
        
        hey there Brad – any luck on this yet? thx so much – your site is great!
      3. Brad Dalton
        
        January 4, 2014
        
        Hard to say Paul.
        
        Would need to look at all your code and test it locally using the same theme you’re using.
        
        When i tested it and took the screenshots, i was using Metro Pro. May need tweaking for other themes.
Zimbrul

November 3, 2013

This is a brilliant idea! My company intranet’s website uses this technique to place announcements and they are always clicked.

Log in to Reply