Hello lovelies, hope you're all doing well. Today I'm sharing different codes for styling specific elements in your design as I myself have had to search for codes for ages, so I thought it would be helpful just to have as many as possible in one place. I will be updating this post regularly when I find any new codes so be sure to check back. Feel free to ask any questions or leave any requests in the comments below.
General customising
Use the following codes to customise the different elements to your heart's content (Not an exhaustive list).text-transform:normal/uppercase/lowercase;
letter-spacing:**px;
background-color: #colour code;
text-align: center/left/right;
font-size: **px;
font-style:italic/bold/line-through/underline;
color: #colour code !important;
line-height:**px;
border(-bottom/top):**px solid/dotted/dashed #colour code;
margin(-bottom/top/left/right):**px;
padding(-bottom/top/left/right):**px;
word-spacing: **px;
text-indent:**px;
font-family:name of font;
background: url(image link);Headers
// POST TITLE
<!-- copy from here --> h3.post-title{
text-transform:uppercase;
ANY OF THE GENERAL CUSTOMISING CODES
} <!-- to here on any code -->
// BOTH DATE AND SIDEBAR HEADERS
h2{
font-family:name of font;
ANY OF THE GENERAL CUSTOMISING CODES
}
// JUST SIDEBAR HEADERS
.sidebar .widget h2 {
border-top:1px solid #d4d4d4;
ANY OF THE GENERAL CUSTOMISING CODES
}
// JUST DATE HEADER
.date-header {
text-align:center;
ANY OF THE GENERAL CUSTOMISING CODES
}
// COMMENT HEADER
.comments h4{
letter-spacing: 2px;
ANY OF THE GENERAL CUSTOMISING CODES
}
Links
//POST HEADER
.post-title a{
color: #link colour !important;
}
.post-title a:hover{
color:#hover colour !important;
}
// COMMENT LINK
.comment-link{
color: #colour code !important;
}
.comment-link:hover{
color:#colour code !important;
text-decoration:none;
}
// LABELS LINK
.post-labels a{
color: #colour code !important;
}
.post-labels a:hover{
color: #colour code !important;
}
// OLDER POSTS
#blog-pager-older-link a{
color: #colour code !important;
}
#blog-pager-older-link a:hover{
color: #colour code !important;
}
// NEWER POSTS
#blog-pager-newer-link a{
color: #colour code!important;
}
#blog-pager-newer-link a:hover{
color: #colour code !important;
}
Post footer
.post-footer {
border-bottom:3px double #d4d4d4;
ADD ANY OF THE GENERAL CUSTOMISING CODES
}
No comments
Post a Comment
Thank you for taking the time to comment on my blog, I really appreciate it. I read all your comments and reply to any questions directly. Feel free to leave your blog link, I enjoy finding new blogs to read, however, please don't just leave "follow for follow" etc. Hope you have a lovely day xx