Our site is progressing fast now. It’s about time we dress up the header. After all, the header is a primary focus point of a website. A header image or logo is often used for branding a site. So in this step we’ll upload a header image in Thesis 2 using only CSS. In the past this step might require custom PHP. Not with Thesis 2.
I will assume you already have an image for use. In my case I’m using a 150×150 pixel image file with a transparent background. I’m also going to continue to use the Site Title and Site Tagline that is native to WordPress.
From the WordPress Dashboard navigate to the Thesis 2 Imges page.
Click on the “Choose File” button. Navigate to the folder on your computer where you stored your header image. Click on the header image file then click “Open”.
Click the green “Add Image” button.
Your file will now appear in the Thesis 2 Images library. Note the “CSS Reference” column. You will want to copy the “images/your_image.png” for future reference. Also note the width and height. Another thing to take note of with Thesis 2 is when you are working with images in your CSS, you will upload them here and not in the standard WordPress Media Library.
Next, go to the Thesis 2 CSS page.
Look for the “Header” Package and click on it.
The Header CSS will open in a pop-up. Scroll down to the “Background” and click on the black arrow. In the “Background Image” line paste the image location that we copied from above.
Scroll down and select “no repeat” in the “Background Repeat” section.
Now scroll down to “Padding”. My image is 150x150px. If we don’t add some padding, the Site Title and Site Tagline elements will overwrite our image. I chose 160px to put 10px between my image and the text. You can experiment to see what works best for you. If you have any Margin set in the Margin section, remove those values as well.
Click “Additional CSS”. I added a line to make the height of the header match the height of my image. Click the green “Save” button as we are done editing the Header CSS.
We will now edit the “Site Title” CSS. Click on the “Site Title” CSS Package.
For my site I’m going to change the Site Title Text Color to white for contrast against my header background color.
Next I’m going to add some Top Padding to my Site Title to bring it down from the top of the Header. You will need to experiment here to see what looks best on your site.
For the final Site Title step I’m going to change the color of the “a” HTML tag. Since the Site Title is a link, just changing the Font Color won’t work. This reference will make sure the title is displayed as white. I am leaving the default “a:hover” color because I want site visitors to notice that the title is a link when they hover over it. Now click the green “Save” button.
We are done with the Site Title. We’ll work on the Site Tagline as our final step in this process. Click on the “Site Tagline” CSS Package.
I’m changing the Text Color to white. Click the green “Save” button.
Don’t forget to click the green “Save CSS” button.
We’re finished adding a header background image using Thesis 2 CSS.