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;}

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 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…

<span class=”dropcap”> </span>

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

<span class=”dropcap”> T </span>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

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…

<span class=”my-highlight”>

Where you want the highlight to stop just add this…

</span>

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

Lorem ipsum dolor sit amet, <span class=”my-highlight”>consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt</span> 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.

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 description 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…

/*submit form text color*/
.custom #commentform .form_submit { color: #ff3300 ;}

Use whatever hexidecimal color gives you the desired effect

Use the cool picker app in the tool box to find a color you like..

]]> http://www.thesishacker.com/change-the-color-of-the-submit-form-button-text/feed 2 http://www.thesishacker.com/change-the-size-of-the-comments-number http://www.thesishacker.com/change-the-size-of-the-comments-number#comments Fri, 06 Feb 2009 03:31:00 +0000 Nasty http://www.thesishacker.com/?p=1048

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 description 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…

/*change the comment # size*/
.custom .format_text .to_comments span { font-size: 5em ; }

Change the number of em’s to whatever gives you the desired project

To make it the same size as the comment text you can add the following code so that it inherits the style from it’s parent…

.custom .format_text .to_comments span { font-size: inherit ; }

Go to Dashboard —-> Thesis Options…

Type in whatever you want in the subscribe box, 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
description 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…

/*colorize the teaser text*/
.custom .teaser .format_teaser {color: #ff33ee ;}

Chose whatever hexidecimal color gives the desired effect

Go to Dashboard —-> Appearance —->Design Options…

Type whatever you want to display inside the white box, 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…

/*remove border from blockquote*/
.custom blockquote { border: none ;  }