Changing Your Genesis Eleven40 Theme Logo

The Genesis eleven40 theme comes with a pre-made logo in the top left corner of your header section.

I’ve been asked by a number of people how to change that orange logo with the custom one.

So I’ve decided to write this tutorial and show how you can do it yourself.

Before we begin, for the love your own sanity, do a backup of your style.css. Don’t say I didn’t warn you.

1. Check your theme version

Eleven40 initially came with the version V1.0 which was updated on 1/26/2012 with V1.1. There is a difference in CSS code between these two versions and I’ll explain each.

In your style.css check at the top which version you have.

2. Select “Image logo” in your dashboard

You have to make sure you select Image logo in your dashboard.

It’s located in Dashboard > Genesis > Theme > Settings > Header. After selecting it, don’t forget to press Save Settings button.

3. Check your theme color style

As you may know eleven40 comes with 4 theme colors: orange (default), blue, green and red. To change your logo it’s important what theme color is selected.

To check that out go to your Dashboard > Genesis > Theme > Settings > Color Style.

4. Changing your eleven40 theme logo with V1.1 and orange color style

If your theme color is set to default orange color then changing your logo with the custom one is different if you’ve chosen blue, green or red. So one step to another.

For the purpose of this tutorial I created a very simple logo in Photoshop 300x60px (you can download it here). The height is 60px because it fits nicely into the black header, but you can choose what ever you like.

The point is, where I mention the width of 300px and height of 60px you’ll put your own logo dimension.

The final look of my logo is shown below. I know, it’s not something but will serve the purpose. 😉

Before you make any changes, create your custom logo and save it by what ever name you want but make sure it has .png extension. For example, customlogo.png.

4.1 Locate your images folder

Now you have to locate your images folder. Maybe the most simple way to accomplish this is from your cpanel hosting account. I personally use FTP program but the path to this folder is the same.

Locate the folder: wp.content > themes > eleven40 > images

Upload your new logo and place it in the images folder.

After you’ve completed the above simply rename your old logo.png (it’s also in your images folder) to logo1.png or what ever you like. I preffer logo1.png because it’s very easy to revert the old name if you want.

Find the new logo you just uploaded and rename it to logo.png. (In my example it would be customlogo.png to logo.png).

4.2 Let’s dive into CSS

After you’ve uploaded your new logo edit in your style.css sheet.

1. Find and completely delete the following code with all its content: #title:before and #title:after

2. Find #title and replace background: url(images/logo-texture.png); with this background: url(images/logo.png) no-repeat;

3. To change that new logo dimension find this tag .header-image #title-area, .header-image #title, .header-image #title a and only change the width and height according to your dimension. So in my case it looks like this height: 60px; and width: 300px;

4.3 Keeping your logo mobile responsive

Eventually you want your new logo to be mobile responsive because every successful business use mobile responsive design. It’s a fact!

Scroll all the way at the bottom of your style sheet and put this code in your responsive design where says @media only screen and (max-width: 800px).

That’s it! Refresh your page and enjoy your new logo.

5. Changing your eleven40 theme logo with V1.1 and blue/green/red color style

If you’ve selected one of these three theme colors, blue or green or red (see step #3), procedure is the same – only you need to apply changes according to your selected color.

I’ll take the blue color as an example.

Go through step #4
Upload your custom logo.png to this images folder: wp.content > themes > eleven40 > images > blue. If you’re using red or green color you will upload your logo in red or green images folder.
Find and completely delete the following four tags with all its content: #title:before, #title:after, .eleven40-blue #title:before, .eleven40-blue #title:after
Find .eleven40-blue #title and replace background: url(images/blue/logo-texture.png); with this background: url(images/blue/logo.png) no-repeat;
To change that new logo dimension find this tag .header-image #title-area, .header-image #title, .header-image #title a and only change the width and height according to your dimension. So in my case it looks like this height: 60px; and width: 300px;
And finally go through step #4.3

6. Changing your eleven40 theme logo with V1.0 and orange color style

Go through steps #4 and #4.1
Find #header .wrap and change min-height to 60px
Find this tag .header-image #title-area, .header-image #title, .header-image #title a and make these two changes: width to 300px, height delete
And finally go through step #4.3

7. Changing your eleven40 theme logo with V1.0 and blue/green/red color style

I’ll take the blue color as an example. Where the name blue is mentioned you will search and apply your chosen color (green or red).

Go through step #4
Upload your custom logo.png to this images folder: wp.content > themes > eleven40 > images > blue. If you’re using red or green color you will upload your logo in red or green images folder
Find #header .wrap and change min-height to 60px
Find this tag .header-image #title-area, .header-image #title, .header-image #title a and make these two changes: width to 300px, height delete
And finally go through step #4.3

Note: This tutorial is updated on July 26, 2013 because previous was written only for eleven40 with V1.0. I noticed many of you have V1.1 so I covered all combinations. Anyway, don’t be puzzled by the comments before the update.