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.
- Open filezilla ftp software enter host as ftp.yoursitename.com.
- Login with your hosting company (like hostgatar) cpanel username and password then hit quick connect button.
- Once it connected to your web server choose your logo image file from your computer location.
- 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.
- Then click wp-content/themes/thesis 16/custom. Under custom folder select ‘images’ you have to upload your logo in this folder.
- 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.
Related Tutorials:
{ 28 comments… read them below or add one }
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
yes we will help. once again you can do the same process. now surely you can get it.
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.
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..
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
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..
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.
Hi mate
i have a problem of using this function with the widgetized header
can you shed some light?
thank you
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..
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?
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 ..
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?
hai katie kowalski,
First paste the code and leave the comment i will check it and tell you the solution..
Hi Saif Hassan,
Have you missed any link in your previous comment?
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
hai Dan,
Are you made any protection in any of your directories like wp-content?..
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.
hai Dan,
In you custom.css file header background image path you add is the ftp path.
Just replace the path with
Thanks Suresh. That worked.
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.
Never mind I just figured out by trial and error how to adjust the block width.
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
Great Post, very helpful…Thanks.
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
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..
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
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
Hello fourblogger, how to change my header into full widht (like yours) with background image?
Thanks a lot