Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    CSS Heading Colour

    Hello everyone,

    I was wondering if someone could help me regarding changing the background and text colour of the H1, H2 headings on my website www.goodbyetodepression.com

    On the CSS style sheet, I have tried to change it but it never seems to work and the grey background colour remains.

    Code:
    body {
    max-width: 1050px;
    min-width: 700px;
    background-color: #DCDCDC; 
    background-repeat: repeat-x;
    font-family: Arial, Verdana,  sans-serif;
    font-size: 85%; /*sets the overall base size of your fonts.*/
    color: #000000;
    margin: auto;
    padding: 0;
    text-align: center;
    }
    
    
    .max-width {
    width:expression(document.body.clientWidth < 702? "700px" :document.body.clientWidth > 1052? "1050px": "auto" );
    }
    
    /*the font size is 100% of the body font setting So while it says 100%, this is actually 100% of whatever we set in the body selector. By default, that is 85%. No need to touch this if you dont want to */
    table {
    font-size:100%; /*leave this font size, change the individual cells below, if the default size isnt to your liking*/
    color: inherit;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    text-align: left;
    }
    
    table.border{ /*this sets the border around your main content table*/
    border: none;
    width:95%; /*this sets how wide your content table will be. Change to 100% for full screen width*/
    }
    
    
    
    /* this is a custom class for using graphics as bullets. Replace the image with your own. 
    If you prefer to have stock standard bullets instead, simply delete  The 2 classes below,
    and your bullets will show as normal. In that case, of course you need to remove the class name from the lists on
    your actual html page*/
     
    ul {
    list-style-type: none;
    padding-left: 0;
    margin-left: 30px;
    }
     
    li.custom {
    background: url(../images/bullet.gif) left top no-repeat; 
    padding-left: 20px;
    margin-bottom: 10px;
    }
    
     
    /* this area below is for your  Link-text and headings. You can change the font type and size, the color of each of them
    as well as the a:hover, which is the text for a link, once the pointer passes over it*/
    
    a { font-family: Arial, Verdana, sans-serif; 
    font-size: 100%; color: #000000; 
    text-decoration: underline;
    }
    
    a:visited { font-family: Arial, Verdana, sans-serif;
     font-size: 100%; 
     background-color: transparent;
     color: purple;
     }
    
    a:hover { font-family: Arial, Verdana, sans-serif;
     font-size: 100%; 
     background-color: transparent;
     color: green;
     }
    
    /* this is for your transparent clickable header gif */
    #header-link{
    text-align: center;
    }
    
    #header-link a{
    text-decoration: none;
    }
    
    #header-link a:hover{
    background-color: transparent;
    }
    
    
    *these are your headings. Note that if you use the hbg class in your headings, then these styles may not apply
    to those H tags */
    h1 { font-family: Arial, Verdana, sans-serif; font-size: 150%;  color: #000; text-align:center; margin-top:0}
    h2 { font-family: Arial, Verdana, sans-serif; font-size: 116%;  color: #000; text-align:center; margin-top:0}
    h3 { font-family: Arial, Verdana, sans-serif; font-size: 108%;  color: #000; text-align:center; margin-top:0; margin-bottom: 2px}
    /* This is for the heading background color....your H1, H2, and H3 tags*/
    .hbg{
    background-color:#666; 
    color: #fff;
    width: auto;
    }
    
    
    /* Below, is the background colors and styling for your table cells.*/
    
    
    .header {
    background-color: #fff;
    background-image: url('../images/header-demo.jpg');
    background-position: top left;
    background-repeat: no-repeat;
    height: 186px;
    margin: 0;
    padding: 0;
    }
    
    .spacer {
    background-color: #fff;
    width: 20%;
    }
    
    .content {
    background-color: #fff;
    border-left: 1px solid #cccccc;
    border-right: 1px solid  #cccccc;
    border-top: none;
    border-bottom: 1px solid  #cccccc;
    font-size: 93%; 
    color: inherit;
    padding: 20px 10px 20px 10px;
    width: 60%;
    }
    
    .right {
    font-family: Arial, Verdana,  sans-serif;
    font-size: 86%;
    color: inherit;
    background-color: #fff; 
    padding: 5px;
    width: 20%;
    }
    
    .left {
    font-size: 86%;
    color: inherit;
    background-color: #fff;
    padding: 15px; 
    }
    
    .footer {
    font-size: 86%;
    color: inherit;
    background-color: #fff;
    padding: 5px; 
    }
    
    .bottom-strip {
    background-color: #666;
    font-size: 86%;
    color: #000;
    text-align: center;
    }
    
    
    
    /* THIS SECTION IS FOR YOUR LEFT NAVIGATION LINKS*/
    
    .navigator {                        /*the navigator is the area surrounding your link buttons. Basically a box that you can style*/
    background-color: transparent;
    border: transparent;
    width: auto;
    padding: 2px;
    text-align: left;
    }
    
    
    
    .navlink a {
    font-family: Arial, san-serif;
    margin-top: 3px; /*sets the gap between your nav panel links. */
    margin-right: 3px;
    margin-bottom: 3px; /* if both top and bottom margins are set to 3px, then you have a total gap of 6 px between each link*/
    margin-left: 3px;
    }
    
    
    
    
    /* this sets the font weight, which will be inherited by all of the different links states.
    Main choices are bold, normal, and light. We don't
    have to add this property/value to each individual link state*/
    
    .navlink {
    font-weight: bold;
    }
    
    
    /* this part is for the colors of your buttons "at rest".*/
    
    .navlink a {
    padding: 3px;
    text-decoration: none;
    display: block;
    color: #407495; /*this is where you change the link font color*/
    background-color: transparent;
    border: transparent;
    }
    
    /*this part is how the links look, once the pointer passes over them. */
    
    .navlink a:hover {
    color: black; 
    background-color: transparent;
    }
    
    
    /********************************
    THIS NEXT SECTION IS FOR YOUR TOP HORIZONTAL NAVIGATION LINKS */
    
    
    .top-nav  {
    text-align: center; 
    font-family: Verdana, Arial, sans-serif;
    font-weight: bold;
    font-size: 85%;
    position: absolute;
    top: 164px;
    left: 10px;
    }
    
    
    .top-nav  ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    }
    
    .top-nav  ul li {
    border: none;
    display: inline;
    background-color: transparent;
    padding: 4px;
    margin: 5px;
    }
    
    .top-nav  a {
    color: blue;
    text-decoration: none;
    text-align: center;
    }
    
    .top-nav  a:visited {
    color: purple;
    text-decoration: none;
    }
    
    .top-nav  a:hover {
    color: red;
    background-color: transparent;
    }
    
    
    /*THIS IS THE CSS TO GET YOUR TOP NAVIGATION LINKS DISPLAYING
    IN A VERTICAL FORMAT. THE CSS BELOW HAS BEEN COMMENTED OUT, SO
    IT IS NOT WORKING. IF YOU WANT TO HAVE VERTICAL LINKS IN THE HEADER AREA,THEN
    REMOVE THESE COMMENTS, AND DELETE THE CSS ABOVE. 
    IF YOU WANT TO HAVE HORIZONTAL LINKS, THEN YOU CAN DELETE THIS CSS BELOW*/
    
    
    
    /*
    .top-nav  {
    font-family:  Verdana, Arial, sans-serif;
    font-weight: bold;
    font-size: 85%;
    position: absolute;
    top: 0px;
    right: 0px;
    }
    
    
    
    .top-nav  ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    }
    
    .top-nav  ul li {
    border: 1px solid #000;
    background-color: #ccccff;
    margin: 5px;
    }
    
    .top-nav  a {
    color: black;
    text-decoration: none;
    text-align: right;
    padding: 5px 20px;
    display: block;
    }
    
    .top-nav  a:visited {
    color: purple;
    text-decoration: none;
    }
    
    .top-nav  a:hover {
    color: red;
    background-color: #ccffcc;
    }
    
    */
    
    
    
    
    /*THIS CLASS IS FOR THE TOP DIV, THAT SERVES AS A REFERENCE POINT
    TO POSITION THE TOP NAV LINKS. YOU WON'T NEED TO CHANGE ANYTHING HERE,
    EXCEPT POSSIBLY THE HEIGHT */
    
    div.top-nav-position{ 
    width: 100%; 
    background-color: transparent; 
    height: 40px; 
    position: relative;
    top: 0; 
    left: 0;
    margin: 0; 
    padding: 0; 
    }
    
    
    
    
    /* THIS SECTION IS FOR STYLING ALL THE BOXES. */
    
    		
    div.center-box {
       width: 60%;
       background-color: #ffffcc;
    	 margin:5px auto;	
    	 padding: 15px;
       border: 1px dotted #000066;
    	}
    
    
    div.full {
       background-color: #ccccff;
    	 margin: 15px 10px 10px 10px;
    	 padding: 15px;
       border: 1px solid #000;
    	}
    	
    div.full2 {
       background-color: #ffffaa;
    	 margin: 15px 0px 10px 0px;
    	 padding: 15px;
       border: 1px solid #000066;
    	}
    
    
     div.half-left {
      background-color: #ffffff;
    	margin: 5px 5px 5px 5px;
    	border: 1px solid #000066;
    	padding: 10px;
    	width: 50%;
    	float: left;
    	}
    	
    
    div.half-right {
      background-color: #ffffff;
    	margin: 5px 5px 5px 5px;
    	border: 1px solid #000066;
    	padding: 10px;
    	width: 50%;
    	float: right;
    }
    
    
    
    /* the border of the image  can be changed.
    Its set to #000066 at the moment. You can also change the solid
    to either dashed or dotted if you want to*/
    
    /*** 2 classes to float an image to the right or left ***/
    .img-left {
    	float: left;
    	padding: 2px;
    	margin-right: 5px;
    	border: 2px solid #000066;
    }
    .img-right {
    	float: right;
    	padding: 2px;
    	margin-left: 5px;
    	border: 2px solid #000066;
    }
    
    /*** Clearing of a float ***/
    div.clear {
    	clear: both;
    	width: 100%;
    	height: 1px;
    }


    I'd be really grateful if anybody could give me any pointers.

    Many thanks in advance!

    Andrew

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    What color would you like them? You have assigned a class of .hbg to one of the <h2> tags, and have a color of #666666 on it.

    If you change that on, say to something like #ccc. then it changes fine for me.
    Teed

  • #3
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    What color would you like them? You have assigned a class of .hbg to one of the <h2> tags, and have a color of #666666 on it.

    If you change that on, say to something like #ccc. then it changes fine for me.
    Thanks for the reply.

    I changed it as follows:

    /*these are your headings. Note that if you use the hbg class in your headings, then these styles may not apply
    to those H tags */
    h1 { font-family: Arial, Verdana, sans-serif; font-size: 150%; color: #000; text-align:center; margin-top:0}
    h2 { font-family: Arial, Verdana, sans-serif; font-size: 116%; color: #000; text-align:center; margin-top:0}
    h3 { font-family: Arial, Verdana, sans-serif; font-size: 108%; color: #000; text-align:center; margin-top:0; margin-bottom: 2px}

    /* This is for the heading background color....your H1, H2, and H3 tags*/
    .hbg{
    background-color:#ccc;
    color: #ccc;
    width: auto;
    }


    However, it still comes out with exactly the same grey colour as it does on the main website when you go on it. www.goodbyetodepression.com

    Do you know why this is? How does the edited code look when you change it?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello andrewmc,
    The only reason I can think that your changes aren't taking affect is you're not properly saving your edited .css file to the server. Make sure the most currently edited version is what the website is looking at.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    andrewmc (10-25-2011)

  • #5
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello andrewmc,
    The only reason I can think that your changes aren't taking affect is you're not properly saving your edited .css file to the server. Make sure the most currently edited version is what the website is looking at.
    Thanks, it's now working. I don't know what I was doing wrong before, but seemingly the edited file wasn't being uploaded correctly.

    I've changed the header to the grey colour, but now the text has disappeared and is only visible when you highlight it!

    I've tried to change the text colour to white by changing it to FFF and it should show up, but it doesn't on the website.

    Code:
    /*these are your headings. Note that if you use the hbg class in your headings, then these styles may not apply
    to those H tags */
    h1 { font-family: Arial, Verdana, sans-serif; font-size: 150%;  color: #ffffff; text-align:center; margin-top:0}
    h2 { font-family: Arial, Verdana, sans-serif; font-size: 116%;  color: #ffffff; text-align:center; margin-top:0}
    h3 { font-family: Arial, Verdana, sans-serif; font-size: 108%;  color: #ffffff; text-align:center; margin-top:0; margin-bottom: 2px}
    
    /* This is for the heading background color....your H1, H2, and H3 tags*/
    .hbg{
    background-color:#ccc; 
    color: #ccc;
    width: auto;
    }
    -----

    On the template I've been editing there is the message:

    /*these are your headings. Note that if you use the hbg class in your headings, then these styles may not apply
    to those H tags */

    Does that have any significance in terms of why the text in the header isn't changing colour?

    Many thanks for your help! :-)

    Andrew

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    You have your background color the same as your text color. Not sure you want #ccc AND #ccc or even white text, since the #ccc is a light gray and not very much contrast.
    Teed

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    /*these are your headings. Note that if you use the hbg class in your headings, then these styles may not apply
    to those H tags */

    Does that have any significance in terms of why the text in the header isn't changing colour?
    Yes it does. In your case, using the class hbg takes specificity away from the heading tag. See specificity here.

    In your case, to make the heading text color white you will need to make your CSS look like this -
    Code:
    /*these are your headings. Note that if you use the hbg class in your headings, then these styles may not apply
    to those H tags */
    h1 { font-family: Arial, Verdana, sans-serif; font-size: 150%;  color: #ffffff; text-align:center; margin-top:0}
    h2 { font-family: Arial, Verdana, sans-serif; font-size: 116%;  color: #ffffff; text-align:center; margin-top:0}
    h3 { font-family: Arial, Verdana, sans-serif; font-size: 108%;  color: #ffffff; text-align:center; margin-top:0; margin-bottom: 2px}
    
    /* This is for the heading background color....your H1, H2, and H3 tags*/
    .hbg{
    background-color:#ccc; 
    color: #fff;
    width: auto;
    }
    Like Teed says though, #fff on #ccc may not be enough contrast for your headings.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •