Thesis Hacker

Make any page your home page

Nasty — Thu, 21 May 2009 16:22:45 +0000

You can make any existing page you have, or make a new page your homepage…

If you want to create a brand new page and have it be your homepage, create a page and publish it. Then go to Dashboard—>Settings—>Reading…

From here…

If you pick your latest posts to display, you’ll have to change the features and teasers to what you want it to be

If you pick a static page, you have the choice to chose any page that you have created already

Add a date stamp with an icon on your post

Nasty — Wed, 20 May 2009 16:00:24 +0000

Check out the little icon with the date of the post in the top right corner. Here’s how I made it…

The first thing to do is gather the php code that will generate the time of the post…

the_time(’M') gets the month of the date
the_time(’j') gets the day of the date
the_time(’Y') gets the year of the date

For more info on the date code check out this

Next, I made the little icon in photoshop. You can make your own or find free icons by doing a search. I uploaded the image to my custom/images file

Next, I created a function, added the image, wrapped it in div tags, and gave it a class name…

function calendar (){ ?>

}

Next, I added the date code, and gave each one a class name so I could style each one separately in my css

function calendar (){ ?>

Finally, I added the whole thing with a hook…

function calendar (){ ?>

}
add_action(’thesis_hook_before_headline’, ‘calendar’);

Now in my custom.css I can style each part of the date stamp including the day, month, year, and the image…

.custom .calendaricon {float: right;
margin-top: -1em;}
.custom .month {text-transform: uppercase;
font-family: arial;
margin-top: -5.5em;
margin-left: 2.2em;}
.custom .day {font-family: arial;
margin-left: 2.99em;
padding-top: .3em;
padding-bottom: 2.2em;}
.custom .year {font-family: arial;
margin-left: 2.1999em;
margin-top: -2.2em;}

Remove comments are closed statement

Nasty — Tue, 19 May 2009 17:03:46 +0000

If you want to get rid of this…

Put this in your custom.css…

.custom .comments_closed p {display: none ;}

If you want to remove that statement on only certain individual pages, check out how to style any page or post differently than all the rest HERE

The easiest way to add a “clickable” header image

Nasty — Mon, 18 May 2009 19:16:46 +0000

I wrote an earlier tutorial about showing the easiest way to add a header image HERE. I had a lot of feedback saying that it wasn’t clickable. That’s absolutely correct because it isn’t. That tutorial shows how to add a header image and that’s it. It never said anything about being clickable.

The following tutorial, in my opinion, is the easiest way to add a clickable header image….

First, make sure your image is in your custom.css file…

Next, in your custom_functions.php file, create a simple function and assign it a div tag with a unique name so you can style the header area in your custom.css…

function myheader() {?>

}

Next, add the image to the function with the complete file path to the image and give it a class name so you can style the image size in your custom.css…

function myheader() {?>

}

Next, wrap the image with the link to where you want the header image to click to…

function myheader() {?>

}

Finally, remove the default header and replace it with your new one…

function myheader() {?

>/div>
}
remove_action(’thesis_hook_header’,'thesis_default_header’);
add_action(’thesis_hook_header’,'myheader’);

Change the color of the tagline in the header

Nasty — Fri, 15 May 2009 16:04:32 +0000

I’ve gotten a lot of requests for changing the color of the tagline and moving the tagline. To change the color, keep reading. To change the position, go HERE.

In your custom.css add this…

.custom #header #tagline {color: #000000;}

Change the hexadecimal number to whatever gives you the desired effect

Move the tagline to a different spot in the header

Nasty — Fri, 15 May 2009 16:02:56 +0000

There are a couple of different ways you can move the tagline inside your header.

One way is to just play around with the different margins on all sides. In your custom.css add this…

.custom #header #tagline {
margin-left: Xem;
margin-right: Xem;
margin-top: Xem;
margin-bottom: Xem;
}

Replace X with a number that gives you the desired effect

The only drawback with this is that when you play around with the top and bottom margins it will increase or decrease the total height of your header area as you increase or decrease the top and bottom margins.

The alternative, give the tagline an absolute position and then place it along it’s x and y axis’ from the top of the page with the following in your custom.css…

.custom #header #tagline {
position: absolute;
top: Xem;
left: Xem;
}

Replace X with a number that gives you the desired effect

Add a drop cap to your post or page

Nasty — Tue, 12 May 2009 17:29:29 +0000

The letter “T” that begins this sentence is an example of a drop cap. This was made by just assigning the very first letter of the sentence a unique class name and styling it in my custom.css file. You can make a class for the drop cap and use it over and over again on any post or page on your site. Here’s a really simple way to create your own individual drop cap.

The first thing you want to do is assign a unique name to the drop cap class and put it in your custom.css. I named mine simply “dropcap”…

.custom .dropcap {}

Next, figure out where you want to place the drop cap and insert the following tags with the unique class name…

For example, I wanted to put a drop cap at the beginning of the opening paragraph of this post..

T he letter “T” that begins this sentence is an example of a drop cap. This was made using the Arial font. You can make a class for the drop cap and use it over and over again on any post or page on you site. Here’s a really simple way to create your own individual drop cap.

Now in my custom.css I add some styles to the drop cap to make it look like the way I want…

.custom .dropcap {
color: blue;
float: left;
font-size: 4.8em;
margin: .3em .2em .1em 0;
}

You can pick and chose how you want your own drop cap to look with your own styles

Now you can place this in any post or page. When you’re writing or editing a post or page, make sure you’re in the html editor…

and simply apply the tags from the example above and wrap them around whatever letter you want to do it to

Highlight any part of your post or page

Nasty — Tue, 12 May 2009 00:01:21 +0000

You can highlight anything from individual words, to sentences, to entire paragraphs. First thing you’re going to do is figure out a class name. This name will be used over and over again to put the highlight anywhere in any post or page

I named mine “my-highlight”

Add the name to your custom.css and chose a color you want for the background

.custom .my-highlight {background: #fefdaa ;}

Now, when you write a post or page and you want to insert the highlight anywhere you want make sure you’re in the html editor…

Pick where you want the highlight to start and type in this with the name you gave the class for the highlight…

Where you want the highlight to stop just add this…

For example I want to add a highlight to this sentence you would do it like this…

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

Now it doesn’t matter what post or page you’re writing because you have the selector in your custom.css so all you have to do is call it with the class name you gave it.

Place a row of ads on your page

Nasty — Thu, 07 May 2009 19:17:11 +0000

This is cool and simple way of placing as many ads as you want on your site…

First thing is to upload your ads into the custom/images folder on your server

The ads in this example are 125 x 125 which is pretty typical

Next, create a simple function in your custom_functions.php to add the ads, put div tags for the ads, and give it a class name…

function ad(){?>

}

Next, add an unordered list of the ads your going to use between the two div tags and include the path to the image. Your path may be different than the example below…

function ad(){?>

}

I decided to put them right under the header so I placed them with the appropriate hook. Here’s how the entire function looks…

function ad(){?>

}
add_action(’thesis_hook_after_header’,'ads’);

Next, add the class to your custom.css and include one for the unordered list of images…

.custom .ads{}
.custom .ads ul li{}

These are the properties and values I used, yours may be different…

.custom .ads{padding: 1em; width: 94em; height: 10em;}
.custom .ads ul li{display: inline; margin-right: 1em;}

This is a really simple, fast, and effective way of placing ads on your site. Remember you can add as many ads as you want. you can also place them vertically, or in the sidebar, in the footer, in the header, etc. The possibilities are endless.

Style any post differently than the rest with the css class box

Nasty — Tue, 05 May 2009 18:29:26 +0000

There is a really cool feature in Thesis that is greatly overlooked and underused. It’s the css class option located below the editor on the “add new post” page…

What this does is it allows you to give the post your writing or editing a unique class name. Once you do this, you can give it whatever styles you want in your custom.css.

For example, let’s say I’m writing a new post and I when that post gets published I want it to have a red sidebar. No other posts on my site have a colored sidebar but I want this one to.

Knowing that I’m going to style this post different than any other post I’m going to give it a class name of “red post” so in the css class box I type in

red-post

Now, you have to figure out what you want to style and then put those selectors in the custom.css. I know that I want to make one of my sidebars red so in my custom.css I drop this code in…

.red-post #sidebar_2 {background-color: red;}

My sidebar 2 changes to red and it’s the only post on my site that has a red sidebar

You can style any selector you want on the page.

The css class is a very powerful feature and highly underused. You can literally make every single page on your site completely different from all the rest. Let your imagination do the styling. The possibilities are endless..