Text Colour

Discussion in 'Web Design and Development' started by JackT06, Aug 15, 2009.

  1. JackT06 macrumors 6502

    JackT06

    Joined:
    Jul 24, 2009
    #1
    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;
    }
     
  2. oli2140 macrumors 6502

    Joined:
    Jan 13, 2008
    #2
    Basically wherever it says 'color:....'
    Replace these dots with the html code for the colour of the text you want.
     
  3. nuxx macrumors member

    nuxx

    Joined:
    Jun 5, 2007
    Location:
    Tokyo
    #3
    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.
     
  4. shawnwilliams macrumors newbie

    Joined:
    Aug 27, 2009
    #4
    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.
     
  5. Joined:
    Jun 30, 2009
    #5
    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!
     
  6. jrock2004 macrumors 6502

    Joined:
    May 4, 2008
    Location:
    PA
    #6
    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
     
  7. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #7
    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
     
  8. Joined:
    Jun 30, 2009
    #8
    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.
     
  9. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #9
    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!
     

Share This Page