I’m sure there are other novice website developers like me who wasted time using IE9 Developer Tools(F12) to identify the code to change the color of text in a website based on a Twentyten child theme.
I strongly ecommend you follow the advice in some of the posts elsewhere in this forum and use Firefox with Firebug add-on.
Personally, I have nothing against IE9 as a browser, and I still use it as a browser, but if you download and install Firefox, with Firebug add-on, you will save yourself a lot of trouble when trying to add code to a child theme.
The “Click an element on the page to inspect” facility in Firebug makes it so much easier.
Initially, being novice website developer, I thought the colors could be changed by one or two lines of code. Wrong! It turned out there were a lot of different areas where I had to change the color (site-title, site-description, links, widgets, page-title, page text, styles h1 …. h6, menu bar).
Firebug made it relatively easy to identify the code that had to be added to the Child them. It was nowhere near as daunting as I thought it would be.
Here is the coplete code for my Twentyten child theme that did the job.
/* ---------
Theme Name: Twentyten-Child
Description: Child theme for the twentyten theme
Author: XXXXXXXXXX
Template: twentyten
Version: XXX
------------
*/
@import url("../twentyten/style.css");
/*
---------- Change site title color from black hex #000 to to maroon hex #800000
-----------------------------------------------*/
#site-title a {
color: #800000;
}
/* ---------- site-description (info for members etc . . . .) add color #80000
---------------------------------- */
#site-description {
color: #800000;
}
/* -------- page-title -- change color from black #00000 to maroon #800000 -- line 575 ----------------
------------------------------------------*/
#content .entry-title {
color: #800000;
}
/* ------ Page text color (Content input textarea - line 475) -- color changed from grey #000000 to maroon #800000 ----------
------------------------------------------------ */
#content,
#content input,
#content textarea
{
color: #800000;
}
/* -------- Page text color for headings h1 h2 h3 etc - lines 506-519 -- color changed from #000 to #800000 ----------
------------------------------------------------- */
#content dt,
#content th {
color: #800000;
}
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
color: #800000;
}
/* --------- change widget title from black to grey (#ebebeb) on green background (#7f8000) ---------
--------------------------------------------------------*/
.widget-title {
font-family: Georgia, "Bitstream Charter", serif;
color: #ebebeb;
font-weight: normal;
background: #7f8000;
}
/* -------- change link color from blue to maroon #80000 and change visited link from blue to light maroon #cd0000 ----------
-----------------------------------------------------*/
a:link {
color: #800000;
}
a:visited {
color: #cd0000;
}
/* -------- change menu bar color from black (#000000) to green (#7f8000) ----------
-------------------------------------------------------*/
#access {
background: none repeat scroll 0 0 #7f8000;
