twenty ten, how to change the body background color and font
-
I’m new at the code game, wanting to learn, any good book recommendations for beginners are welcome.
I have been over the forum, looking for an answer to this question. I am aware that you can change the blog background from the appearance menu.
I want to change the body color of the posts and will need to change the font color too.
I found an article that said I should create a style.css child, so that I wouldn’t crash my site while attempting these edits. I followed the instructions, creating a twenty-ten folder in my file manager under wp-content/themes, then I added a style.css file to that folder with the code. This child is not appearing in my theme editor drop down menu.
I then started looking for threads on editing the style sheet directly, living dangerously. It seems that some people are saying that you don’t go into the style.css for twentyten, but that there’s a separate file for appearance tweaks.
Looking at the files in the editor, there is one called Visual Editor Stylesheet. Is this where I’d make changes to the background color, font color, and font type? Or do I do it in the Style.css file?
Here’s the Visual editor code, says it’s used to edit the TinyMCE:
‘/*
Theme Name: Twenty Ten
*/
/*
Used to style the TinyMCE editor.
*/
html .mceContentBody {
max-width:640px;
}
* {
font-family: Georgia, “Bitstream Charter”, serif;
color: #444;
line-height: 1.5;
}
p,
dl,
td,
th,
ul,
ol,
blockquote {
font-size: 16px;
}
tr th,
thead th,
label,
tr th,
thead th {
font-family: “Helvetica Neue”, Arial, Helvetica, “Nimbus Sans L”, sans-serif;
}
pre {
font-family: “Courier 10 Pitch”, Courier, monospace;
}
code, code var {
font-family: Monaco, Consolas, “Andale Mono”, “DejaVu Sans Mono”, monospace;
}
body, input, textarea {
font-size: 12px;
line-height: 18px;
}
hr {
background-color: #e7e7e7;
border:0;
height: 1px;
margin-bottom: 18px;
clear:both;
}
/* Text elements */
p {
margin-bottom: 18px;
}
ul {
list-style: square;
margin: 0 0 18px 1.5em;
}
ol {
list-style: decimal;
margin: 0 0 18px 1.5em;
}
ol ol {
list-style:upper-alpha;
}
ol ol ol {
list-style:lower-roman;
}
ol ol ol ol {
list-style:lower-alpha;
}
ul ul,
ol ol,
ul ol,
ol ul {
margin-bottom:0;
}
dl {
margin:0 0 24px 0;
}
dt {
font-weight: bold;
}
dd {
margin-bottom: 18px;
}
strong {
font-weight: bold;
color: #000;
}
cite,
em,
i {
font-style: italic;
border: none;
}
big {
font-size: 131.25%;
}
ins {
background: #ffffcc;
border: none;
color: #333;
}
del {
text-decoration: line-through;
color: #555;
}
blockquote {
font-style: italic;
padding: 0 3em;
}
blockquote cite,
blockquote em,
blockquote i {
font-style: normal;
}
pre {
background: #f7f7f7;
color: #222;
line-height: 18px;
margin-bottom: 18px;
padding: 1.5em;
}
abbr,
acronym {
border-bottom: 1px dotted #666;
cursor: help;
}
ins {
text-decoration: none;
}
sup,
sub {
height: 0;
line-height: 1;
vertical-align: baseline;
position: relative;
font-size: 10px;
}
sup {
bottom: 1ex;
}
sub {
top: .5ex;
}
a:link {
color:#0066cc;
}
a:visited {
color:#743399;
}
a:active,
a:hover {
color: #ff4b33;
}
p,
ul,
ol,
dd,
pre,
hr {
margin-bottom:24px;
}
ul ul,
ol ol,
ul ol,
ol ul {
margin-bottom:0;
}
pre,
kbd,
tt,
var {
font-size: 15px;
line-height: 21px;
}
code {
font-size: 13px;
}
strong,
b,
dt,
th {
color: #000;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #000;
margin: 0 0 20px 0;
line-height: 1.5em;
font-weight: normal;
}
h1 {
font-size: 2.4em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.4em;
}
h4 {
font-size: 1.2em;
}
h5 {
font-size: 1em;
}
h6 {
font-size: 0.9em;
}
table {
border: 1px solid #e7e7e7 !important;
text-align: left;
margin: 0 -1px 24px 0;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
tr th,
thead th {
border: none !important;
color: #888;
font-size: 12px;
font-weight: bold;
line-height: 18px;
padding: 9px 24px;
}
tr td {
border: none !important;
border-top: 1px solid #e7e7e7 !important;
padding: 6px 24px;
}img {
margin: 0;
max-width: 640px;
}
.alignleft,
img.alignleft {
display: inline;
float: left;
margin-right: 24px;
margin-top: 4px;
}
.alignright,
img.alignright {
display: inline;
float: right;
margin-left: 24px;
margin-top: 4px;
}
.aligncenter,
img.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignleft,
img.alignright,
img.aligncenter {
margin-bottom: 12px;
}
.wp-caption {
border: none;
background: #f1f1f1;
color: #888;
font-size: 12px;
line-height: 18px;
text-align: center;
margin-bottom: 20px;
padding: 4px;
-moz-border-radius: 0;
-khtml-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
}
.wp-caption img {
margin: 5px;
}
.wp-caption p.wp-caption-text {
margin: 0 0 4px;
}
.wp-smiley {
margin:0;
}’Thank you.
- The topic ‘twenty ten, how to change the body background color and font’ is closed to new replies.