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 (){ ?>
<div class="calendaricon">
<? echo ‘<img src="http://www.thesishacker.com/wp-content/themes/thesis/custom/images /calendar.png" />’; ?>
</div>
<?
}

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 (){ ?>
<div class="calendaricon">
<? echo ‘<img src="http://www.thesishacker.com/wp-content/themes/thesis/custom/images/calendar.png" />’; ?>
<div class="month"><? the_time(’M') ?></div>
<div class="day"><? the_time(’j') ?></div>
<div class="year"><? the_time(’Y') ?></div>
</div>

Finally, I added the whole thing with a hook…

function calendar (){ ?>
<div class="calendaricon">
<? echo ‘<img src="http://www.thesishacker.com/wp-content/themes/thesis/custom/images/calendar.png" />’; ?>
<div class="month"><? the_time(’M') ?></div>
<div class="day"><? the_time(’j') ?></div>
<div class="year"><? the_time(’Y') ?></div>
</div>
<?
}
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;}

Dashboard —-> Appearance —-> Thesis Options….

Pick your choices from the drop down menus. Hit the save button.

In your custom.ss file add the following code. You can put it anywhere you want but I recommend putting it at the top. Remember, once you make the change, save it, and upload the new file to your server. Always describe what you’re doing by putting your descripton between the comment tags /* */ at the beginning shown below in green. The comments aren’t shown on your rendered page and it just makes things easier for you to remember…

/*headline meta styles*/
.custom .headline_meta {color: #888888 ;}
.custom .headline_meta {font-style: italic ;}
.custom .headline_meta {line-height: 1.8em ;}
.custom .headline_meta {font-size: 1em ;}

Change these or add more styles to get your desired effect

To learn more about these styles check out W3schools

Go to your dashboard —> appearance —> thesis options and find the section below…

Check or uncheck which ones give you the desired effect. Hit the save button.

]]> http://www.thesishacker.com/remove-headline-meta/feed 0 http://www.thesishacker.com/add-an-avatar-or-picture-next-to-your-title-and-byline http://www.thesishacker.com/add-an-avatar-or-picture-next-to-your-title-and-byline#comments Thu, 08 Jan 2009 08:10:31 +0000 Nasty http://www.thesishacker.com/?p=208 Before each post that I write on this site there’s a picture of the man, the legend, my fav,  the ass-kickin’ NastyCanasta.  You can put any image you want next to your posts.  Here’s how…

In your custom_functions.php file add this code. You can put it anywhere you want but I recommend putting it at the top after the <?php tag. Always describe the function and put it between the comment tags /*  */ at the beginning shown below in green. The comments aren’t shown on your rendered page and it just makes things easier for you to remember…

/*avatar next to title and byline*/
function FunctionName() {
echo ‘<img src=”the directory where your image is located/nastycanasta.jpg” class=”pick a name” />’;
}
add_action(’thesis_hook_before_headline‘, ‘FunctionName‘);

Note some key points here:

Name your function

Assign it a class name whatever you want

Place your function with a hook, this case before the headline, and hang on the hook what function you want there

Now you want to style the image so in your custom.ss file add the following code. You can put it anywhere you want but I recommend putting it at the top. Always describe what you’re doing by putting your descripton between the comment tags /*  */ at the beginning shown below in green. The comments aren’t shown on your rendered page and it just makes things easier for you to remember…

/*avatar styles*/
.custom .”the class name you gave it” { float: left; }

Some points here:

You want to float the image to the left so its moved over as far as possible and the title and byline wrap around it

If you want to move the image down a little or give more space between the image and the title and byline you can add a margin-top Xem, margin-right Xem,  where X=numerical value of whatever you want.

You can add margins, borders, colors, anything else you want to style it within those brackets