Thesis Hacker » fonts

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

Change the size of the comments #

Nasty — Fri, 06 Feb 2009 03:31:00 +0000

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

Change the sidebar titles and headlines to lowercase

Nasty — Tue, 03 Feb 2009 00:18:30 +0000

Check out the screenshots below and take notice of the headline style of “categories” and “pages”…

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…

/*sidebar title normal case*/
.custom h3 { font-variant: normal ; }

Change the font in the footer

Nasty — Fri, 30 Jan 2009 20:47:29 +0000

To change the font in your footer go to…

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