(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;
}
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:
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! ♥
Check out mine!
Post a Comment
Leave your thought...