The reason I am writing this tutorial on changing default eleven40 logo is the unavailability of a complete step by step guide which works. I figured it out by myself. There is no point in reinventing the wheel. So I am writing for you. I will not waste your time saying how good eleven40 is or why do you need a logo for your site. I am assuming you have your genesis child theme eleven40 installed and already have an amazing logo stored in your hard drive.

clickymind logo

It’s pretty easy and not time intensive at all.

First, you have to look at the dimension of your logo because it will be required while you will be editing the style.css file. For example your logo dimension is 200X100

Well. First open your FTP software or access your theme files through control panel. Go to wp-content>Themes>Eleven40>images

elen40logoftpAs you can see logo.png file is there inside the image folder. You will have to replace this image with your logo. Or you may upload your logo with any name.

Now go to appearance>Editor from inside your wordpress dashboard. You can also download the style.css file from eleven40 folder and then edit. It’s your choice. Following changes are required to be done.

#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;

#title:before {
background: url(images/logo-vert-left.png) repeat-y;
content: “”;
display: block;
height: 66px;
left: 0px;
position: absolute;
top: 0px;
width: 7px;

#title:after {
background: url(images/logo-vert-right.png) repeat-y;
content: “”;
display: block;
height: 66px;
position: absolute;
right: 0px;
top: 0px;
width: 7px;

Find these three block of codes. Remove the second and third block of codes. And change the logo url of the first block of code from logo-texture.png to logo.png or whatever name and extension your logo has.

You have to customize another piece of code which is,

/* Image Header – Partial Width
———————————————————— */

.header-image #title-area,
.header-image #title,
.header-image #title a {
display: block;
float: left;
height: 90px;
overflow: hidden;
padding: 0;
text-indent: -9999px;
width: 265px;

Here comes the role of dimension of the logo that you have uploaded. As you can guess, you have to change the width and height accordingly.

Another simple thing you need to do is going to Genesis settings and changing an option.

genesis eleven40 logo changeSelect image logo instead of Dynamic text and save changes. Congratulation, you got a custom logo for your website. Thanks for reading. Share your opinion in the comments. Let me know if you are facing any problems. I will try my best to solve any issues you have in this regard.