post styling – Thesis Docs

Style Lists and List Items

Shelley — Mon, 11 May 2009 12:34:30 +0000

All Lists ∞

Place this code in custom.css as a starting point:

.custom ul {
   list-style-image: none;
   list-style-position: outside;
   list-style-type: square;
}

.custom li {
   padding-bottom: 5px;
}

Post Content Lists Only ∞

Place this code in custom.css as a starting point:

.custom #content ul {
   list-style-image: none;
   list-style-position: inside;
   list-style-type: disc;
}

.custom #content li {
   padding-bottom: 5px;
}

Sidebar Widgets Only ∞

Place this code in custom.css as a starting point:

.custom #sidebars li.widget ul {
   list-style-image: none;
   list-style-position: inside;
   list-style-type: disc;
}

.custom #sidebars li.widget li {
   padding: 5px;
}

Related Resources:

CSS List Properties from W3 Schools

Implement and Style Drop Caps

Shelley — Wed, 08 Apr 2009 22:15:39 +0000

Using Drop Caps in Posts ∞

When composing your posts, start them off like this (be sure you’re using the HTML Editor, not the Visual Editor!):

This is my paragraph.

Customizing Drop Caps Styles ∞

Place this code in custom.css as a starting point:

.custom .format_text .drop_cap {
  font-family: Verdana;
  font-weight: bold;
  font-size: 1.8em;
  color: #555555;
}

Create Pullquotes in Posts

Shelley — Tue, 07 Apr 2009 00:20:36 +0000

Thesis provides a pre-existing style for pullquotes; just assign a class of either right or left to the blockquote tag.

Example of Right Pullquote

This is a right pullquote.

This is a right pullquote.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam egestas, mauris id dignissim dignissim, leo augue rutrum lacus, id condimentum nisl elit ut nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi.

Example of Left Pullquote

This is a left pullquote.

This is a left pullquote.

Styling Pullquotes

If you want to customize the default styles Thesis applies to your pullquotes, use the following CSS declarations in your custom.css as a starting point:

.custom .format_text blockquote.left {
   border: 3px double #aaa;
   color: #111;
   background-color: #eee;
}

.custom .format_text blockquote.right {
   border: 3px double #aaa;
   color: #111;
   background-color: #eee;
}