...

View Full Version : CSS Heading Colour



andrewmc
10-24-2011, 10:52 PM
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.



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

teedoff
10-24-2011, 11:34 PM
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.

andrewmc
10-25-2011, 01:04 AM
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?

Excavator
10-25-2011, 02:10 AM
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.

andrewmc
10-25-2011, 09:55 AM
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.


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

teedoff
10-25-2011, 02:40 PM
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.

Excavator
10-25-2011, 02:59 PM
/*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 (http://css-tricks.com/855-specifics-on-css-specificity/).

In your case, to make the heading text color white you will need to make your CSS look like this -
/*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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum