Easy Fitness Websites is a Wordpress blog running on the Thesis theme. The Thesis theme is really amazing, but it can be a bit tricky learning how to use the hook system.
What are hooks? Hooks are the commands you use to modify certain areas individually. It takes the stress out of CSS exact configurement, however it does use php which isn’t the easiest internet language to learn. However almost anything you want to do with Thesis can be found somewhere on the internet.
So since fitness professionals might be using Thesis as their theme, it would be nice if they could find those tutorials right here, right?
Lets start with putting a custom header image into the Thesis header section.
The header image we will enter will be a clickable one, using the code below. In your Thesis Custom Editor => custom.css copy and paste the following code:
/* This line sets up our clickable background image based on the site title’s link */
/* Adjust the height & width below to reflect the actual size of your image */
/* Change the filename of your image to reflect the actual header’s file name */
.custom #header #logo a { display: block; height: 225px; width: 950px; background: url(‘images/header.jpg’) no-repeat; outline: none; }
/* This line gets rid of the site title & tagline by casting them out to the far left */
.custom #header #logo, .custom #header #tagline { text-indent: -9999px; }
/* This line collapses the vertical space of the tagline so that there isn’t unnecessary white space after the header image */
.custom #header #tagline { height: 0; }
/* This line removes the padding from the header so that the background image sits close to the nav menu, the bottom border of the header, and the sides of the content */
.custom #header { padding: 0; }
There are a few items you will need to change according to your image though. In the first line .custom #header #logo you need to adjust the height and width settings to match your header image.
Furthermore you need to adjust the background url to the location of your image. You’ll see the one above is pointed to the folder “images” and the image file named header.jpg. Leave all the other code the same and you now have a new Thesis header image.
Are you running Thesis theme on your blog? If not what theme are you running?
{ 1 trackback }