When somebody wants to change his theme it’s mostly in the following compartiments:
Basic structure (477)
Page structure (523)
Header (538)
Navigation Menu (576)
Sidebar (610)
Footer (656)
Main Content and comment content (680)
Post formats (1065)
Comments (1163)
Widgets (1370)
In brackets the line number if you use a html editor (twenty twelve theme)
Let us for this training analyse the site header settings
/* Header */
.site-header {
padding: 24px 0;
padding: 1.714285714rem 0;
}
The padding on top is 24 px and o px left, right and at the bottom.
If the value is zero, you don't need to write it down. But if you would have want some padding around, the sentence would be:
padding: 24px 12 px 12 px 12 px;
The second line is the size defined in rem units.
.site-header h1,
.site-header h2 {
text-align: center;
}
The header h1 and h2 are aligned center
.site-header h1 a,
.site-header h2 a {
color: #515151;
display: inline-block;
text-decoration: none;
}
The text has the hex color as indicated (dark grey)
The display is an inline block (an alternative to floating) and there are no text decoration elements
.site-header h1 a:hover,
.site-header h2 a:hover {
color: #21759b;
}
The hover text has a different color (blue), the other elements are unchanged.
.site-header h1 {
font-size: 24px;
font-size: 1.714285714rem;
line-height: 1.285714286;
margin-bottom: 14px;
margin-bottom: 1rem;
}
The title has a size of 24 px and the bottom margin is 14 px.
.site-header h2 {
font-weight: normal;
font-size: 13px;
font-size: 0.928571429rem;
line-height: 1.846153846;
color: #757575;
}
The subtitle has a size of 13 px in normal font-weight and has the color indicated (a different dark grey)
.header-image {
margin-top: 24px;
margin-top: 1.714285714rem;
}
If you would have uploaded a picture the top margin would be 24 px.
Now, you want to have a different font for your site title(here the font was set in the repeatable patterns) you can change it by adding following command under
.site-header h1 {
font-family: times;
If you would like to change the color of your header title, change the color here
.site-header h1 a,
.site-header h2 a {
color: red;
You can indicate the color with its name, in RGB or better in hexcode
I hope that with this training you start to understand CCS a little bit more. There are a lot of free tutorials on Internet, if you would like to learn CCS and HTML.
Reply
