UPDATE this is only for versions of Thesis prior to 1.7.
Hey guys and gals! I am kicking off my new series of posts Thesis for WordPress 101. As you probably could guess right now I am BIG Thesis nut. Mainly because I once was like you, scared and timid of messing with my sites design. What did I know, I went to school for Graphic Design, not Web! Well, a many moons ago WordPress came along, ok, not that long ago, but you get my drift, and if you didn’t know jack about web design all you could pretty much do is change your header on the Kubrik theme. Now, so many developers are making it easier for people will little to no skills what-so-ever create and customize their WordPress site. Thesis is just that. A framework that is technically a WordPress theme, but it is really just a framework that let’s you customize the crap out of it! Take for instance my site. It’s Thesis, and so are 99% of the sites in my portfolio.
Why I use Thesis
1. The main reason I use Thesis is because it is light and airy. A lot of plugins that I would have to add to a site for SEO are already there.Things it replaces: all-in-one SEO pack, no-follow plugin, SEO date exclusion, etc. etc. Plugins can slow your site down, become incompatible with other plugins and almost always seem to cause an error. With Thesis it is all built right in. Pretty nifty!
2. Design, Design Design-It is incredible you can take a theme and turn it into infinite possibilities. In my portfolio you can see the diversity that is Thesis.
3. User Friendly- I train clients on how to blog for SEO purposes, and also so people can be able to update and manage their site themselves. This is kind of a “mission” for me. I was that person back in the day too that had to call someone to change some text or graphic that I made on my site. No MORE! I said. Although I could change anything on any theme or what have you. I feel the learning curve for Thesis is much better for my clients.
Ok, Ok, Get on With it Show Us Already How to Add Our Header
Watch the Video and my 1.2.3 steps are below.
Below I show you how to install your already made header into Thesis. If you don’t have a header graphic I make them for a mere $45 bucks. I picked this as the first tutorial in my series, because a header is pretty much one of the best things to transform a site. It tells a story, shows who you are, and sets you apart from everyone else. Even if it is ugly :p
1. Have a header graphic made. If you don’t know what size to tell your designer, or me ( hehe) I suggest using this AWESOME Firefox plugin called Measure-It.
a. Install it
b. Restart FF
c. You will see it in your lower right hand tool bar.
d. Click on it and drag it across the header area on your website.
2. After you got the size figured out. Do some magic to your graphic, or wait to receive your 3 header revisions from your designer.
3.Upload your header graphic in your FTP or file manager. I normally make a file called “images” inside of my “custom” folder in Thesis. That way when I go to code the path into my .css all I have to type is /images/header.jpg. ( Remember the path to the image, and the image name. I just copy and paste into notepad, so I have it handy)
4. Log into your Thesis WordPress site.
5. Scroll down to Thesis Options>Custom File Editor. * Make sure you have your permissions set in your FTP to 666 or it will not directly edit from your WordPress dashboard. Check out how to change file permissions for Thesis if you don’t know how.
6. You are going to add this code to your custom.css and click save after you paste in: .custom #header
{
height: 250px;width: 850px;
background: url(‘/images/header.jpg’) left top no-repeat;
}
A couple things to remember. Change the height and width to the size that you made your header, and change the file name if you did not make yours header.jpg.
*Some things you might encounter:
1.The site title and tagline are still showing. Very easy go to Thesis Option>Thesis Options> Display Options> Header> Uncheck show title and tagline, then click your big ass save button.
2. There is padding around your header and you want it to be flush with your sidebars, borders, and navigation. Simply add padding:0px; to your header code like so:.custom #header
{
height: 250px;width: 850px;
background: url(‘/images/header.jpg’) left top no-repeat;padding:0px;
}
Also you can look inside Thesis Options>Design Options>Framework Options> .HTML Framework>Select Full Width, Then >Outter Page Padding and bring the padding down to 0.5 or 0, then click your big ass save button.
You DID IT!
I also can do this for you if you have thrown your hands in the air, and also can also make custom headers and graphics for you.
Contact me for info. Happy Thesis Designing!
Similar Phoenix SEO,Web Design Phoenix and WordPress Designer Tips:
- Remove tiny space between header and navigation in Thesis So it took me probably 3 whole weeks to figure...
- Customizing Thesis Theme for WordPress 102 | Firefox Add-On Tools Welcome to my 2nd tutorial in my new series,”Customizing Thesis...
- Customize WordPress Thesis Theme with Icons…I’ve gone icon crazy! I was searching around trying to find some really great...
- WordPress Designer Tip #3 How to Add Pics to Your Thesis Teasers Section Hey everyone, long time no blog post. I sure have...
- Submitting Your Thesis WordPress Site, Sitemap, and Setting up Analytics for Google. It is super important that you don’t forget to submit...
{ 2 comments… read them below or add one }
Thanks for making this so incredibly easy, Rachel — AND for giving me exactly the header I asked for. It was such a piece of cake to upload, thanks to your clear instructions. Gracias!
You are so very welcome Janet!