FYI: Posts will be sparse around here until I replace my laptop.... Coming back to work after Christmas break apparently was too hard and it quit on me!

24 April 2012

Tuesday's Tips - Customizing Post Title Format

(I've got a whole list of topics to cover for Tuesday's Tips, thanks for requesting them! It is time for me to get back on track with these...)

To customize the post title format you're going to look for this code in your template:
.post h3

The CSS inside the brackets {} following that code will control what your post titles look like.
You can customize the code however you'd like--be creative! You can use my CSS Basics posts on Borders, Backgrounds, Text, and Padding & Margins for specific codes. If you have any questions on how to do something specific, ask in a comment and I'll get back as soon as I can.

For example, my current post title code looks like this:
.post h3 {
  margin-top: -85px;
  background:none;
  color: #0586a2;
  font-family: Arial;
  font-variant: small-caps;
  font-size: 30px;
  line-height: 25px;
  font-weight: normal;
  letter-spacing: 1.5px;
  padding: 8px;
  text-transform:none;
  text-align:right;
  background-color: #ffffff;
  border-bottom:0px dashed #8f8f8f;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
  color: #0586a2;
  font-family: Arial;
  font-variant: small-caps;
  font-size: 30px;
  font-weight: normal;
  letter-spacing: 1.5px;
  background:none;
  text-transform:none;
}

.post h3 strong, .post h3 a:hover {
  color: #8f8f8f;
  font-family: Georgia;
  font-variant: small-caps;
  font-style: italic;
  font-size: 30px;
  font-weight: normal;
  letter-spacing: 0px;
  text-transform:none;
}

2 comments:

Marcia

so glad you are doing these again! I can't tell you how much these have helped me! And I was looking for this the other day! ♥

Photographer Ruby J. Plank

Check out mine!

Post a Comment

Leave your thought...