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. 
If you’re having some difficulties in applying this tutorial or some question about your Genesis child theme, let me know in the comments below.
Should You Upgrade Your Genesis Theme to HTML5?
How to Install Your First Genesis Child Theme
StudioPress TV Tutorials to Make Your WordPress Website Way Better
Why a Rat is Still Smarter than Google?
Hello,
Installed the eleven40 theme last night. I’ve used 3 other Genesis themes so I’m fairly familiar with them. For some reason I haven’t been able to get my custom logo to show. I created a logo that fits within the specified px limits, uploaded it via FTP. I used logo.png for file name, FTP program asked if I wanted to replace logo.png (the default one) with my new logo.png and I said yes. It appears to have been replaced when I look in filezilla but its still not showing. I’ve refreshed my browser, cleared cache, checked via smart phone and also my work computer….new logo still not showing up. Any ideas would be much appreciated. I’m a little frustrated right now.
Hi James,
Have you selected “Image logo” in your dashboard like described under #1?
Yes sir…and I hit save.
I was going to try and just type the exact image path into address bar and see what shows up
As I can see, it didn’t switch from dynamic text to image logo in your header. This should be done automatically after you selected “Image logo” and you said you did. This is strange and I suggest you contact StudioPress support at my.studiopress.com.
Thanks
Hi James,
I just checked at StudioPress forum about your issue, and all you need is to put a widget into the header right sidebar. I’m using navigation in that sidebar and you can put (blank) text, search widget, social icons…
I followed your instructions and it doesn’t work. What appears is a blank warped image of the logo background.
I notice you also don’t use a custom logo. Are you sure this works?
Hi Joseph,
I’m sure this works. Could you send me the link of your website? Did you put a widget into the header right sidebar?
I’m using a custom logo sprite that makes my logo fade in and out when you hover over it.
Hi Dragan,
Thanks for the response. My website is here: http://www.quarterview.com. And yes I did add a widget to the right sidebar.
Also, here’s a link to what it looks like when I replace logo.png:http://imgur.com/yMa1aP3
If you could help solve his problem for me I would be extremely grateful. Spent 2-3 hours researching how to try to fix it.
You’re using eleven40 with version 1.1 that has slightly different CSS code than V.1.0.
So to get your logo to show up go here – replace the background with:
background: url(images/logo.png) no-repeat;
#title {
background: url(images/logo-texture.png);
border-top: 0;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
display: inline-block;
font-family: ‘Oswald’, arial, serif;
font-size: 30px;
line-height: 1;
min-height: 33px;
margin: 0;
padding: 18px 25px 17px;
position: relative;
text-shadow: 0 1px #96430d;
}
And you might want to delete this line:
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
THEN… scroll down and remove this:
#title:before (all of it)….
…then remove:
#title:after (all of it)….
and SAVE
You da man!!!
background: url(images/logo.png) no-repeat;
am I replacing that in the #title properties?
http://www.904rents.com
That’s correct Tyler. Let me know how it went.
hey
I am having the same problem as Joseph
I followed the first steps and got the same looking problem he had.
Im confused on the 2nd instruction you told him to do. Is that code? Where do I go to fix that? Could anyone post a 30 second video walk through?
I just payed for a logo design and I cant upload it! Im pulling my hair out
If your custom logo has the same dimensions like on demo then you need to change the CSS style code (like on the 2nd instruction).
Locate the file: wp.content > themes > eleven40 > style.css
When you open your style.css file do exactly what I said on the 2nd instruction to Joseph.
Actually Greg below is correct. You have to do what he says to the specific theme color section to get the logo to appear:
“Look for
.eleven40- #title {
background: url(images/blue/logo-texture.png) no-repeat;
Change that URL to the location of your logo image, after you upload it.”
I also added “no-repeat” above. Also place logo.png in the eleven40 theme color folder e.g., for me: /wp-content/themes/eleven40/images/red/
Once you do the above it’ll work. You can see it working on my website:
http://quarterview.com
Hey Dragan.
I am using the editor on my wordpress admin page
went to editor
went into the css
did everything you said
no luck
http://thebarberguide.com/
any advice ?
update..
I did this
Upload your image and then edit the css to change the URL to your image.
Look for
.eleven40-blue #title {
background: url(images/blue/logo-texture.png);
Change that URL to the location of your logo image, after you upload it.
and got what is on the website currently..
the logo is sitting kinda low
any advice on that?>
thanks for your help by the way
Can you switch to home page so I can see what’s going on.
Greg, thanks for the info. I got my page to work now.
Is your logo.png 60 pixels high? If not, then that’s why. Resize it then you should be fine.
I still have not been able to get my logo working. Do you have an article on changing post title fonts and also adding a favicon?
It’s funny I have other genesis sites that I have changed the logo, favicon ect. but for some reason the eleven40 is not taking to change.
Hi Steve,
I’m preparing an update of this tutorial because there are two versions of eleven40. This tutorial is written for V1.0 i.e. bought before 1/26/2012.
I suppose you have a version V1.1. (if not you can use my comment here) so I’ll make a quick how to change your custom logo.
Note, before you start I advice you to backup your style.css file, you never know.
For example, if your new logo is let say 300x60px and your color theme is blue then you need to upload you new logo.png here:
wp.content >themes >eleven40 >images >blue
…and change a few things in your style.css:
“#title:before“, “#title:after“, “.eleven40-blue #title:before” and “.eleven40-blue #title:after” delete completely.
In “.header-image #title-area, .header-image #title, .header-image #title a” put this
height: 60px;
width: 300px;
And finally, change
.eleven40-blue #title {
background: url(images/blue/logo-texture.png);
text-shadow: 0 1px #17579b;
}
into
.eleven40-blue #title {
background: url(images/blue/logo.png) no-repeat;
}
That should work now.
How to Change Your Genesis Favicon:
1. Fire up FTP.
2. Drag and replace your newly created favicon.ico into your root directory. Simply click on the “public_html” folder.
3. Install your favicon into Genesis: public_html –> wp-content –> themes –> genesis –> images
4. Install your favicon into your Genesis child theme as well: public_html –> wp-content –> themes –> [your child theme] –> images.
I did it, check my website http://tricknology.tk
Thanks……
You’re welcome Arif,
I’m glad to see this tutorial worked for you.
Thanks allot, I got the favicon but I still cannot get the logo unfortunately. It’s unreal why genesis makes it so difficult to change a logo out.
How did you change your title font or better yet, what font is that your using its much nicer then stock.
I agree, things became a little complicated with the updated version v1.1. As I said, I’ll soon make an update of this post where everything will be much clearer.
I made a new logo in Photoshop and used Blanch font.
If you’d like you can send me the link of your site so I can see what’s going on with your logo. (You can PM me through contact form)
Hi Dragan, The logo is cool, but I was referring to the post titles. This font is different from the font that came with my version of eleven40. You can see the difference here
repossessionhq
Let me know if you changed your font or is it just bad luck that the newer version is just bad. lol
Honestly, I can’t see the difference. The font of the post titles (by default) is the same in both versions (font-family:Oswald).
I haven’t changed anything, so I’m not sure what you’re referring to.
Thanks for this Dragan, I re-branded my site and had to make some changes to the logo. Still working on tweaking it. What is the font you used for yours and did you do it yourself?
Hi John,
Yes, I made my logo in Photoshop and used Blanch font.
Hi Dragan,
I ended up ordering a new logo on Fiverr for my Podcast and had it modified to use as a logo for the site as well. I kept mine simple and did try playing around with the transitions a bit from the tutorial you provided but couldn’t get it to work right.
I’m probably just going to leave it as is now, I think it looks pretty good and blends in well with the black background.
I like the way it is now, simple and clean. You can always play with some fancy fonts-here’s a good resource.
That tutorial worked for me and if you change your mind I can take a look at my code (just send me PM).
Hi Dragan,
Firstly amazing how you just help random people fix their problems! We’re very grateful.
I’ve read all of the above but I’m still unsure how to insert my own logo, getting rid of all the original texture logo. I’ve FTPd the logo ready to go. I’m using the blue version, though I’ve changed the colouring slightly to match the logo I’m trying to insert!
I’d also like it to be a little lower – starting underneath the black strip.
While I’m okay changing font colours, size, etc, in CSS, I’m not particularly familiar with other parts of CSS.
Your help would be appreciated.
Website is http://kristenbarnes.com.au/ It’s in its very early stages.
Thank you.
Hi Lisa,
Yes, those tags as explained in 4.2/1 need to be deleted because if not, orange strips everlay your custom logo.
As I can see you’re using default color option with the custom blue link color.
When I saw you logo I suppose you’d like to be a little up rather then lower so it fits into the black header.
Anyway there are two ways to adjust the logo:
1. To make it up or down you can put the dimension here (line 192):
background: url(images/Logo-texture2.png) no-repeat scroll 0 -6px;
Now, where -6px is, with minus you’re going up and without you’re going down.
2. Since you’re using logo dimension like on demo 265x78px, your custom logo doesn’t fit to this dimension. Your height is much smaller.
I suggest you resize your logo to height of 60px and then follow the step 4.2/3.
Give it a try to find out what best fits your needs.
Thank you Dragan. After I posted, I attempted the instructions again and it seemed to work but it does seem the logo needs a tweak which I’ve passed on to a graphic designer to do for me.
Many thanks again.
When I apply the changes, I have a menu in the header right widget and it kind of messes it up. any workarounds?
Hi Randy,
I suppose when you put all 8 links in the header right widget there’s no enough space because you’re using 400px wide logo.
Try to reduce number of links. And I love your logo, fits very nice although I’d change to blue color layout.
Hi again Dragan,
This isn’t a logo question but it is a question about the eleven40 theme. The website you helped me on previously looks terrible when viewed on an iPhone, yet the theme is supposed to be responsive. Can you think of any reason why it wouldn’t be? Only looks marginally better on a tablet.
http://kristenbarnes.com.au/
Thank you.
Lisa
Hi Lisa,
First, you need to put the code in your CSS as described in step 4.3 (Keeping your logo mobile responsive).
Then we’ll see how it looks.
Thanks, I did that but it looks no better.
Something in style sheet is interfering to output that code. Could be a plugin. Try to deactivate all plugins and then check.
If still looks bad, send me your style.css file so I can compare with mine which is working good. (I’ll email you my address).
Thank you so much for your very easy 1-2-3 tips on the eleven40 theme. I’m not a computer designer or programmer but I was able to change the logo using your tips. More power to your tutorials! A fan, Maxine
I’m glad this tutorial worked for you Maxine.
Quiet informative, you described the whole procedure at a very easy manner.
I am also using Eleven40, and this tutorial will help me in near future to change my current text based logo to image based logo.
Dragan! You Rock.
I just can’t explain you in words how you have helped me. Changing the logo had become a nightmare for me; but you made it a cake walk. With the help of your tutorial I was able to change the logo of my site in just a few minutes.
Thanks a lot dear.
You’re welcome. I’m glad this tutorial was helpful for you.
Thanks Garud for your comment, I appreciate it.
hey I have version 1.0
I did whatever u said..
even the logo changed…but its not coming completely….
my height of logo is 95px
and it is showing only till 60px
why?
is it necessary to have the height of 60px?
please tell me the way to change the height…
Hi Pankaj,
You can change the min-height under the #header .wrap to lets say 100px and it will come up completely in height.
Now, that 60px is limited with the black stripe and for the simplicity of this tutorial I didn’t want to change that. So I suggest you to reduce your logo to 60px height.
If you still want to keep your logo with 95px height, contact me and I’m sure we can arrange something.
~ Dragan
Thanks man it works like a charm on my blog..Again thanks i really appreciate it..
You’re welcome Adrian. I’m glad you find this tutorial useful and btw I like your eleven40 blog design.
Hi There,
Thanks for this great information! I would like to change the theme colour to yellow (it is not an option to choose from at the moment), could anybody help me with changing the theme colour?
Thanks a lot!
best regards!
Hi Pieter,
Changing the theme color requires to change a couple of things. Not only to your style.css but to change logo-texture, gradient… which requires work in Photo Shop.
If you want just to change the colors of your hyperlinks, find this line in your style.css:
/* Hyperlinks
———————————————————— */
a,
a:visited {
color: yellow;
text-decoration: none;
}
Of course, in your theme settings you need to change the color style from green to default.
Anyway, if you’d like to change the logo and buttons, contact me and I’m sure we can arrange something.
thanx for best eleven logo info.
You’re welcome! I’m glad you find it useful.
Thanks,Dragan!This is my favourite theme!
Thanks, this is very helpful, I really needed that. Can you also provide the steps for minimising the first post from home page which is showing full article as of now. I want to see it excerpts. Thank you.
Hey, its what you can do!
So, let’s get started!
Logging into your dashboard, go to appearance, click on editor, after that then click on home.php and use the below codes to set yours! I think it should perfectly work like the one on my blog.
I’ll be waiting for your REPLY.
1,
‘feature_image_size’=> 0,
‘feature_image_class’ => ‘alignleft post-image’,
‘feature_content_limit’ => 250,
‘grid_image_size’=> ‘grid-featured’,
‘grid_image_class’=> ‘grid-featured’,
‘grid_content_limit’ => 250,
‘more’=> __( ‘[Continue reading]’, ‘eleven40’ ),
) );
} else {
genesis_standard_loop();
}
}
genesis();
Your’s is way too far better than mine!
http://intelblogger.com please, how can I get the type of your logo and how did you position your pages under your logo ???
This is a matter of a custom design I applied on my logo.
Thanks a lot Dragan!
I got there too late has I have gone for a customized logo which was built for me by a friend!
I still don’t know how to upload a favicon to my blog (I’m using the eleven40 pro genesis child theme… I’d be thankful if you can help me.
Hi John,
I’ve already answered this question in the comments but never mind I’ll repeat it:
How to Change Your Genesis Favicon:
1. Fire up FTP.
2. Drag and replace your newly created favicon.ico into your root directory. Simply click on the “public_html” folder.
3. Install your favicon into Genesis: public_html –> wp-content –> themes –> genesis –> images
4. Install your favicon into your Genesis child theme as well: public_html –> wp-content –> themes –> [your child theme] –> images.
That’s it.
Thanks over and over again! You’re great… I did everything you ask! I think it worked perfectly!
Thanks once again!
Hello Dragon Flow,
I am very thankful to you.
Your theme customization tips
On eleven40 really helped me to customize my blog.
Keep sharing the info.
As we re beginners. We really needed people likes you.
Thank you.
Hello Dragan Palla !
Its really Nice post you have Publish.I need a favor.Do you have eleven40 child theme 1.1 Version.I have the latest one but want to use 1.1.If you have please Share.
Thank you in advance.
I just purchased eleven 40 child theme and i couldn’t figure out how to change a logo after googling it i found yor site and i maneged to change it.Thank you very much for your helpful content.
I have a round logo and it is not getting git in the header section.