Text Colour

JackT06 · Aug 15, 2009

At the moment i use a template for my website but im chaning the colours ect on it. One thing that i cant see on it is how i change the text colour on the header and menu bit. Here is my syle sheet i use :

Code:

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
	margin: 0;
	padding: 0;
	background: #544C40 url(images/img01.jpg) repeat left top;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #FFFFFF;
}

h1, h2, h3 {
	margin-top: 0;
}

h1 {
	font-size: 1.6em;
	font-weight: normal;
}

h2 {
	font-size: 1.6em;
}

h3 {
	font-size: 1em;
}

ul {
}

a {
	text-decoration: none;
	color: #AF9371;
}

a:hover {
	border-bottom: none;
}

a img {
	border: none;
}

img.left {
	float: left;
	margin: 0 20px 0 0;
}

img.right {
	float: right;
	margin: 0 0 0 20px;
}

#header {
	width: 1000px;
	margin: 0 auto;
	height: 193px;
	background: #D0EFF3
}

/* Header */

#logo {
	width: 970px;
	height: 150px;
	margin: 0 auto;
	padding: 0 10px;
}

#logo h1, #logo p {
	float: left;
	margin: 0;
	color: #0D171A;
}

#logo h1 {
	padding: 50px 0 0 0;
	text-transform: lowercase;
	font-weight: normal;
	font-size: 3em;
}

#logo p {
	text-transform: uppercase;
	padding: 72px 0 0 3px;
	font-size: 10px;
	color: #0D171A;
}

#logo a {
	border: none;
	text-decoration: none;
	color: #0D171A;
}

/* Menu */

#menu {
	width: 1000px;
	margin: 0 auto;
	padding: 10px 0;
	height: 30px;
}

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	display: block;
	float: left;
	margin: 0 3px 0 0;
	padding: 6px 15px 10px 20px;
	border-right: 1px #0D171A solid;
	text-decoration: none;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
}

#menu a:hover {
	margin: 0 3px 0 0;
	color: #FFFFFF;
}

#menu .current_page_item a {
	margin: 0 3px 0 0;
	color: #FFFFFF;
}

/* Wrapper */

#wrapper {
}

/* Page */

#page {
	width: 1000px;
	margin: 0 auto;
	padding: 20px 0 0 0;
	background: #110E0F;
}

#page-bg {
}

/* Latest Post */

#latest-post {
	padding: 20px;
	border: 1px solid #E7E7E7;
}

/* Content */

#content {
	float: left;
	width: 560px;
}

.post {
	padding-bottom: 15px;
	line-height: 200%;
}

.post h1 {
	font-weight: normal;
}

.title {
	margin: 0;
	padding: 10px 0 0 20px;
	font-weight: normal;
}

.title a {
	border-bottom: none;
	color: #FFFFFF;
}

.title a:hover {
	border-bottom: 1px dotted #000000;
}

.byline {
	border-bottom: 2px solid #000000;
	margin: -10px 20px 20px 20px;
}

.tag {
	padding: 0 15px;
}

.entry {
	padding: 0 20px;
}

.links {
	padding: 4px 20px;
	text-align: left;
	font-weight: bold;
	background: #000000;
}

.links a {
	border: none;
}

.links a:hover {
}

/* Sidebars */

#sidebar1 {
	float: left;
}

#sidebar2 {
	float: right;
}

.sidebar {
	float: left;
	width: 220px;
	padding: 0;
	font-size: 12px;
}

.sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebar li {
	padding: 0 0 20px 0;
}

.sidebar li ul {
}

.sidebar li li {
	margin: 0 20px 0 15px;
	padding: 8px 0px;
	border-bottom: 1px #423525 dashed;
}


.sidebar li h2 {
	margin: 0 0 0 0;
	padding: 10px 15px;
	background: #000000;
	font-size: 13px;
	color: #AF9371;
}

.sidebar a {
	color: #FFFFFF;
}

/* Search */

#searchform {
	margin: 0;
	padding: 0 0 0 0;
}

#searchform br {
	display: none;
}

#searchform h2 {
}

#s {
	margin: 10px 0px 0 15px;
	padding: 2px 2px;
	width: 110px;
	height: 18px;
	border: 1px solid #423525;
	background: #000000;
	font-size: 10px;
	color: #CCCCCC;
}

#x {
	margin: 0;
	padding: 2px 5px;
	height: 25px;
	background: #000000;
	border: 1px solid #423525;
	text-decoration: none;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #CCCCCC;
}
/* Calendar */

#calendar_wrap {
	padding: 0 15px;
	text-align: center;
}

#calendar_wrap table {
	width: 100%;
}

#calendar_wrap th {
}

#calendar_wrap td {
}

#calendar_wrap tfoot td {
	border: none;
}

#calendar_wrap tfoot td#prev {
	text-align: left;
	font-weight: bold;
	border: none;
}

#calendar_wrap tfoot td#prev a {
	border: none;
}

#calendar_wrap tfoot td#next {
	text-align: right;
	font-weight: bold;
	border: none;
}

#calendar_wrap tfoot td#next a {
	border: none;
}

/* Footer */

#footer {
	width: 1000px;
	height: 55px;
	margin: 0 auto;
	background: #514334;
	border-top: 2px solid #423525;
}

#footer p {
	margin: 0;
	padding: 15px 0 0 0;
	text-align: center;
	font-size: smaller;
	color: #FFFFFF;
}

#footer a {
	color: #FFFFFF;
}

oli2140 · Aug 15, 2009

[deleted]

nuxx · Aug 15, 2009

Note that the colour values are in hexadecimal i.e. #ffffff is white. Some editors, like Dreamweaver, allow you to choose from a colour picker which automatically adds the hex value. If your editor doesn't do this you'll need to type the values.

As hex values aren't instantly recognisable you may find this useful, but there are plenty of other resources on the net.

shawnwilliams · Aug 27, 2009

Hi JackT06
Your Style sheet code is wrong and you have to check it step by step.
May you forget one of the attributes from the font properties?
So check it out.

Not Available · Aug 27, 2009

shawnwilliams said:
Hi JackT06
Your Style sheet code is wrong and you have to check it step by step.
May you forget one of the attributes from the font properties?
So check it out.

I'm sorry, neither me or the W3C CSS Validator (both level 2.1 and 3) are able to find any errors in the code, so would you kindly be more specific?

As to your problem, I'd say have a look over your CSS. Carefully. If you want to edit the header, and there's this big line reading /* Header */, with code under it, where should you look? Hmm...

Also, I'm assuming you're comfortable with HTML tags. That is, you do know that the text is mainly entered as <h1> through <h6>, as well as <p> tags. So again, if there's this line in the Header section reading #logo h1, #logo p {, containing this code color: #0D171A, what should you change? Answer: the code after the #. You can obtain it by using an HTML color picker. This is the first result returned by Google. Of course, there are many many others. Just... Google it! Links are entered using the <a> tag. Again, you can change the color property there as well. This is a good place to start learning about CSS links (not that there would be an awful lot to be known).

If you want to study this further, feel free to look over W3Schools' CSS Tutorial, as well as W3C's official CSS page. CSSPlay is also a nice resource for learning tricks. If you're looking for a book, I'd strongly recommend Head First HTML with CSS & xHTML

Good luck!

jrock2004 · Aug 27, 2009

Ok for the header you want to add this to your stylesheet

Code:

#header
{
     color: #fff;
}

Note: I am assuming that your header has an id of header

Now for your menu you would want to do this

Code:

.links a
{
    color: #fff;
}

Of course you can substitute #fff with any color you choose

SrWebDeveloper · Aug 27, 2009

The OP already has an id named header defined in their stylesheet as posted in this topic.

The OP showed us a style sheet and asked how to change the color of the "header and menu bit". But the OP didn't include the .tpl file or whatever file contains the HTML that renders the header. Nor did they even include a link to the page so we could determine the correct ID or classname to help them identify the matching selector in the stylesheet.

I think the most helpful answer to this query at this time is not to add any code (yet), or to guess at it, rather to say:

OP, please include a link to your web page or post the relevant portion of the template file that renders the menu if you cannot identify the selector in the style sheet. All we'll do, which you could do on your own if you know HTML is view the source, find the menu portion, determine the class or ID for each menu item and then match the name in the stylesheet. Then, as others suggested, change the color using "color: #nnnnnn;" in hex color. Note: If you want white, use "color: #fff" - 3 f's is all you need, a short form for defining solid hex colors.

Remember CSS cascades so it is possible a color is set in the body or elsewhere and may or may not be overridden by a menu selector. It's up to you to identify this, and if lost, post the template and we'll help you.

-jim

Not Available · Aug 27, 2009

SrWebDeveloper said:
[...]

I think the CSS is commented/documented well enough in order for us to be absolutely sure about what each line does. Or at least, I'm pretty confident #logo h1 is modifying the page heading's properties.

SrWebDeveloper · Aug 28, 2009

Not Available said:
I think the CSS is commented/documented well enough in order for us to be absolutely sure about what each line does. Or at least, I'm pretty confident #logo h1 is modifying the page heading's properties.

But is guessing and making assumptions (even if "pretty" confident) really a resolution? The OP asked a very, very specific question. Be reminded, some of the basic concepts (selector name matching) are new to some users here, believe it or not. If this forum was named "Advanced Web Design and Development" you'd be right, but of course nobody would have posted the question to begin with!

Search

Search

Text Colour

JackT06

macrumors 6502

oli2140

macrumors 6502

nuxx

macrumors member

shawnwilliams

macrumors newbie

Not Available

Guest

jrock2004

macrumors 6502

SrWebDeveloper

macrumors 68000

Not Available

Guest

SrWebDeveloper

macrumors 68000

Our Staff