How to Upload Header Image or Logo in Thesis Theme

Updated: For Thesis Theme 1.8.2 You can upload the header image easily via Thesis-> Header Image .

We know thesis theme is simple and clear in order to make our site looks pretty we need add image or logo in the header section. Here I am going to explain how to change header image in thesis. First save your site logo as a image file like .jpg, .png, .tif and etc.Then you need FTP software to upload your logo into the site. Here I used filezilla ftb software to upload header logo.

The default thesis theme logo is like the below image.

  1. Open filezilla ftp software enter host as ftp.yoursitename.com.
  2. Login with your hosting company (like hostgatar) cpanel username and password then hit quick connect button.
  3. Once it connected to your web server choose your logo image file from your computer location.
  4. The select the remote site path in which you need to upload logo. For this select puplic html under this folder select your site name example fourblogger.com.
  5. Then click wp-content/themes/thesis 16/custom. Under custom folder select ‘images’ you have to upload your logo in this folder.
  6. Then select logo file in your computer location and right click file you have option upload just click it.


After finished uploading process now open your wordpress site admin page example type fourblogger.com/wp-admin in address bar and login with your wordpress username and password.

Select custom file editor tab under thesis options part in left side bar of the dashboard.

Choose custom.css file and click on ‘edit selected file’

Here you need to copy and paste the following code.

/*logo change code paste it in custom.css file*/

.custom #header #logo a { display: block; height: 130px; width: 480px;
background: url(http://fourblogger.com/wp-content/themes/thesis_16/custom/images/four1.PNG) no-repeat; outline: none; }
.custom #header #logo, .custom #header #tagline { text-indent: -9999px; }
.custom #header #tagline { height: 0; }
.custom #header {border:0.2em solid #9c9c9c;
height:120px;
padding:5px;
}

The above code change the background url as your uploaded logofile path.

In this code you can change Header logo height and width in the header area. You can also add you heading tag line here and border also.

Then enter the save the custom file editor. Now visit your site with new logo.

{ 28 comments… add one }

Leave a Comment

  • Jay December 31, 2009, 10:56 PM

    Hi I placed the code exactly like you said and now when I click on custom file editor I dont see any code at all, can you please help

    Reply
  • Pascal December 31, 2009, 11:34 PM

    yes we will help. once again you can do the same process. now surely you can get it.

    Reply
  • Mike February 21, 2010, 1:00 AM

    Great job for the image, but I still want to the title to be displayed. How can I place the to the right or left of the image? Thanks.

    Reply
  • Suresh February 21, 2010, 1:26 PM

    hai mike,

    remove the previously applied custom.css code add the below code in custom_functions.php file
    and replace with your link and image size. i send you code via email..

    Reply
  • mona April 14, 2010, 10:56 PM

    Thank you so much for these detailed instructions. I used the exact code that you listed. I wanted to have my logo be a bigger size, but there is a box around the logo. How do I remove the box and make my logo bigger? My website is http://www.brightstarsolar.net

    Reply
  • Suresh April 15, 2010, 7:19 PM

    hai,
    I saw your site there is no box around your logo if you want to increase the height on the logo just increase height in custom.css. if you want your logo in full width of the header, give your logo image is a background of header section..

    Reply
  • mona April 15, 2010, 7:32 AM

    Nevermind. I’m very green to wordpress. I looked at the code you wrote and just took out the border and made the logo bigger.

    Reply
  • Yiannis April 28, 2010, 11:04 PM

    Hi mate

    i have a problem of using this function with the widgetized header

    can you shed some light?

    thank you

    Reply
  • Suresh April 29, 2010, 7:34 PM

    hai,

    header image code you should place in custom.css file. It will increase the header height.

    It wont create any problem with widgetized header.. some times header widget appear top or bottom place in side the header. if you want to adjust header widget use padding. in header widget..

    Reply
  • katie kowalski May 13, 2010, 12:07 AM

    hey there- this was great, all the way up to the end. I replaced your url with mine and now I just have a blank header. Any idea what I could be missing?

    Reply
  • Suresh May 14, 2010, 12:39 AM

    hai katie kowalski,

    I checked your site. There is no logo code in your custom.css file.

    Have you pasted the above post mentioned code in custom.css file?
    check this ..

    Reply
  • katie kowalski May 14, 2010, 7:44 AM

    Yes- I pasted it and then removed it since it left a blank header. Would it be possible to coordinate a time/window for you to look at it again?

    Reply
  • Suresh May 14, 2010, 3:29 PM

    hai katie kowalski,

    First paste the code and leave the comment i will check it and tell you the solution..

    Reply
  • Pascal May 15, 2010, 10:37 PM

    Hi Saif Hassan,

    Have you missed any link in your previous comment?

    Reply
  • Dan June 15, 2010, 6:57 AM

    The code works for me, but when I go to my website a box pops up asking for my FTP site password. It won’t load the image without the password. I put it in the correct folder and the images that came with a skin I had briefly used didn’t have any problems loading. Any ideas?

    Thanks

    Reply
  • Suresh June 15, 2010, 5:26 PM

    hai Dan,

    Are you made any protection in any of your directories like wp-content?..

    Reply
  • Dan June 15, 2010, 5:53 PM

    There doesn’t appear to be any protections. I was previously able to upload pictures from wp-content, but for some reason I can’t now.

    Reply
  • Suresh June 15, 2010, 6:25 PM

    hai Dan,

    In you custom.css file header background image path you add is the ftp path.

    Just replace the path with

    Reply
  • Dan June 15, 2010, 6:29 PM

    Thanks Suresh. That worked.

    Reply
  • KL August 25, 2010, 1:34 AM

    Following your steps I was able to get my custom header image to display on the page, however, it gets cut off by a box at the top of my page. I have tried adjusting the size of the image but it does not impact this box at all. I want my header image to stretch across and fill the box there. See site for example.

    Can you or anyone help me with this? I use Thesis 1.7 with Wordpress 3. I am really grateful that your assistance has brought me this far. Thank you for any response.

    Reply
  • KL August 25, 2010, 2:49 AM

    Never mind I just figured out by trial and error how to adjust the block width.

    Reply
  • Martyna Bizdra February 9, 2011, 6:06 PM

    hi:)

    Would you know how to link the header to a specific URL of a page? the header is normally linked to a homepage , but for a specific period of time I want it to go to a different page?

    I appreciate your help
    thanks, Martyna

    Reply
  • Brad Maver March 2, 2011, 4:21 AM

    Great Post, very helpful…Thanks.

    Reply
  • michelle November 10, 2011, 7:46 AM

    http://secretweaponcopywriting.com/

    Hi I put your code in on my website and all I got was a box. Can you tell me how to get the logo to show up please.

    This is the path that it is on http://secretweaponcopywriting.com/wp-

    content/themes/thesis_182/custom/images/logo.jpg and I did plug it in but it is not showing up.

    Thanks for your help!

    Michelle

    Reply
  • FourBlogger November 10, 2011, 9:32 AM

    Hi Michelle,

    In Latest Thesis Theme 1.8.2, it’s very easy to upload your image.
    Go to Thesis -> Header Image-> Upload your Header image.. Thesis Will automatically resize..

    Reply
  • michelle November 10, 2011, 7:35 PM

    I read your ebook which said not to put the logo in the header image area. That has changed for the new version of thesis?

    Also I did what you said and the logo is there but it is black on the site http://secretweaponcopywriting.com/

    But this is what it is supposed to look like:
    http://secretweaponcopywriting.com/wp-content/themes/thesis_182/custom
    /images/logo.jpg

    what should I do to make it look right?

    Thanks for your help!

    Michelle

    Reply
  • michelle November 10, 2011, 7:36 PM

    I think you will need to copy and paste the code in because it is getting cut off.

    http://secretweaponcopywriting.com/wp-content/themes/thesis_182/custom/image/logo.jpg

    Reply
  • ary March 4, 2012, 8:58 PM

    Hello fourblogger, how to change my header into full widht (like yours) with background image?

    Thanks a lot

    Reply