Change text color in Twenty Ten Theme

Resolved RSARA
(@rsara)

11 years, 2 months ago
I have been trying to change the text color in my Twenty Ten website at http://www.rsara.asn.au ….

http://www.rsara.asn.au

…. to color #800000

At present I have to use the Visual Editor Kitchen Sink toolbar in the Page Edit screen to change the color every time I make a change to the text.

I have created a child theme and imported the style sheet of the Twenty Ten theme with the code

@import url("../twentyten/style.css");

I managed to change the color of the site-title by inserting the follwing code into the child theme after the import rule.
```
#site-title a {
	color: #800000;
	font-weight: bold;
	text-decoration: none;
}
```
I have tried inserting a number of different sections of code after the foregoing site-title code in an attempt to change the color of the text in the body of the page but none of them worked.

I removed the fomatting inserted with the Kitchen Sink before I tested each change.

I could not find a solution when I searched this forum.

The following code was, suggested in someone elses two-year-old post but it didn’t work.
```
#content,
#content input,
#content textarea {
	color: #800000; !important;
	font-size: 16px;
	line-height: 24px;
}
```
I also tried inserting at the bottom of the child theme style.css a number of different variations of the following code without success:
```
/* Main global 'theme' and typographic styles */
body {
	background: #f1f1f1;
}
body,
input,
textarea {
	color: #666;
	font-size: 12px;
	line-height: 18px;
}
```
If I eventually manage to change the color of the text in the body of the static pages to #800000 I would like to push on and change the color of the Page-titles and Widgets.

But first things first. Page titles and widgets can come after I master the body text. Unless of course some kind person, to whom I shall be eternally grateful, can tell me how to change the color of the page-content-text, page-title and widgets all in a single response to this post.

Viewing 2 replies - 1 through 2 (of 2 total)

(@esmi)

Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.

Thread Starter

RSARA

(@rsara)

11 years, 1 month ago

I’m sure there are other novice website developers like me who spent a lot of time (without much success) 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 esmi “Theme Diva & Forum Moderator” 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 (e.g. 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 complete code for my Twentyten child theme that did the job on the website at .

/* ---------
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;

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Change text color in Twenty Ten Theme’ is closed to new replies.

Tags