Jump to content

Text color does not change after CSS code change


NJC

Recommended Posts

This is my code from my theme's CSS file. I've made a few changes in this code and all of the changes implement into my blog fine and dandy.Except the font/text color. I use TopStyle Lite for CSS changes and when I preview the code, the preview screen shows the font/text color as Dark Blue, but the web page still shows Maroon.Is something stopping this change implementing?

.entry-header{	margin: 5px 15px;	padding: 0px 0 0 17px;	background: url(entry-header-bg.gif) 0 0.35em no-repeat;	font-size: 22px;	font-weight: normal;	font-family: Pristina;	color: #00008B; <<<<<this is the code for dark blue, which doesn't seem to implement}
Link to comment
Share on other sites

You probably have that paged cached into your browser. Clear out your cache and refresh your page. It should work... as long as you made sure that you uploaded the correct style sheet you want to use.

Link to comment
Share on other sites

I checked the CSS file. It is correct.Re-uploaded the CSS file with SmartFTP.Then cleared cache in my Firefox.Refreshed the page. :angry::):blink::blink: No luck.The text still shows as Maroon instead of Blue.:blink::angry::blink: I was just looking at my blog on the main page. The text is still maroon.But when I click the Entry header and this takes me to the Individual Entry Archive, the Entry heading is, in fact, BLUE!!! :):(:):mellow: What is stopping the text color from changing in my main page entry heading??

Link to comment
Share on other sites

That would probably be another CSS style kicking your color out of wack. Can you post your whole CSS code?

Link to comment
Share on other sites

/* basic page elements */body{	font-family: 'trebuchet ms', verdana, sans-serif;	font-size: 11px;}a { color: #c00; text-decoration: none; }a:visited { color: #c00; }a:hover { text-decoration: underline; }#banner a {color: #FFFACD; text-decoration: none;}#banner a:visited {	color: #FFFACD;}#banner a:hover { color: #FFFACD; }.module-content a { color: #cc0000; text-decoration: none; }.module-content a:visited { color: #cc0000; }.module-content a:hover { text-decoration: underline; }.entry-footer a { color: #cc0000; }h1, h2, h3, h4, h5, h6{	font-family: 'trebuchet ms', helvetica, arial, sans-serif;	}.module-header,.trackbacks-header,.comments-header,.comments-open-header,.archive-header{    /* ie win (5, 5.5, 6) bugfix */    p\osition: relative;     width: 100%;    w\idth: auto;       margin: 0;    border-top: 1px solid #fff;    border-bottom: 1px solid #bbb;    padding: 6px 10px 5px 5px;    color: #fff;    background: #9b0000 url(module-header-bg.gif) left top repeat-x;    font-size: 12px;    font-weight: bold;    text-transform: none;}.module-header a,.trackbacks-header a,.comments-header a,.comments-open-header a,.archive-header a{	color: #fff;	text-decoration: underline;}.module-header a:visited,.trackbacks-header a:visited,.comments-header a:visited,.comments-open-header a:visited,.archive-header a:visited{	color: #fff;}.module-header a:hover,.trackbacks-header a:hover,.comments-header a:hover,.comments-open-header a:hover,.archive-header a:hover{	color: #c00;    background-color: #fff;}.entry-more-link,.entry-footer,.comment-footer,.trackback-footer,.typelist-thumbnailed{	font-size: 11px;}/* page layout */body{	color: #333;	background: #e4ae64 url(body-bg.gif) center top repeat-y;}#container { width: 760px; }#container-inner { margin: 20px 0; }#banner{	width: 720px;	margin: 0 0 20px 20px;	background: #9b0000 url(banner-bg.gif) left top repeat-x;}#banner-inner {  }.banner-user{	width: 70px;	margin-top: 4px;	font-size: 10px;}.banner-user-photo { border: 3px double #fff; }#banner-header{	margin: 0;	padding: 35px 15px 5px 15px;	color:  blue;	font-family: Papyrus;	font-size: 80px;	font-weight: normal;	line-height: 1;	text-align: center;}#banner-description{	margin: 0;	padding: 5px 15px 27px 15px;	color: #6495ED;	font-size: 30px;	font-family: Pristina;	line-height: 1.125;	text-align: center;	text-decoration: none;}#alpha, #beta, #gamma, #delta{	float: left;	margin: 0 0 0 20px;	background: #f0f0f0 url(sidebar-bg.gif) left top repeat-y;}#alpha-inner, #beta-inner, #gamma-inner, #delta-inner{	padding: 15px 0 25px 0;}#alpha { width: 255px; }#beta { width: 445px; }#gamma, #delta { width: 200px; }#beta-inner { background: #f0f0f0 url(content-side-bg.gif) left top repeat-y; }.date-header{	margin: 5px 17px 0 15px;	padding: 0 0 5px 0;	color: #cc6600;	background: url(date-header-bg.gif) left bottom repeat-x;	font-size: 10px;	text-transform: uppercase;}.entry-header{	margin: 5px 15px;	padding: 0px 0 0 17px;	background: url(entry-header-bg.gif) 0 0.35em no-repeat;	font-size: 22px;	font-weight: 500;	font-family: Pristina;	color: #00008B;}.entry-content {  margin: 0px 15px }.entry-more-link { font-weight: bold; }.entry-footer{	margin:   0 0 20px 0;	border-top: 1px solid Maroon;	padding-top: 2px;	font-size: smaller;	font-weight: normal;	background: threedface;	border-bottom: 2px solid Maroon;	text-align: right;}.content-nav { margin: 10px 15px; }/* modules */.module { color: #666; }.module-calendar .module-content { margin: 5px 10px 15px 10px; }.module-mmt-calendar .module-content table,.module-calendar .module-content table { font-size: 11px; }.module-powered { margin: 0; padding: 0; }.module-powered .module-content{	margin: 15px;	padding: 10px;	border: 1px solid #dfc78a;	background: #e7e2c6 url(alt-gradient-bg.gif) left center repeat-x;}.module-photo { border: 0; background: none; }.module-photo .module-content { margin: 10px; }.module-photo img { border: 0; }.module-list-item{	padding-left: 14px;	background: url(li-bg.gif) 0 0.45em no-repeat;}.typelist-thumbnailed { margin: 0 0 20px 0; }.typelist-thumbnailed .module-list-item{	margin: 1px 0;	border-top: 1px solid #fff;	border-bottom: 1px solid #bbb;	padding: 0;	background: #d2d2d2 url(gradient-bg.gif) left center repeat-x;}.typelist-thumbnail { background: #e3c69c; }.module-featured-photo { width: 445px; }.module-featured-photo .module-content { margin: 15px 0 5px 15px; }.module-featured-photo img { width: 415px; }.module-recent-photos { border: 0; }.module-recent-photos .module-content { margin-left: 15px; }.module-recent-photos .module-list { margin: 0; }.module-recent-photos .module-list-item{	width: 64px; /* mac ie fix */	margin: 0 6px 6px 0;	padding: 0;	background: none;}.module-recent-photos .module-list-item a{	border: #bbb 1px solid;	padding: 1px;	background: #e7e7ec;}.module-recent-photos .module-list-item a:hover{	border-color: #c00;	background: #e7e2c6;}/* calendar tweaks */	.layout-calendar #gamma { width: 195px; margin-left: 15px; }	.layout-calendar #beta-inner { padding-top: 0; }	.layout-calendar #gamma-inner { padding-top: 0; }	.layout-calendar #delta-inner { padding-top: 0; }	.module-mmt-calendar { width: 445px; margin: 0; }			.module-mmt-calendar .module-header,	.layout-timeline .module-recent-photos .module-header	{		margin: 0;		padding: 5px 15px;		color: #fff;		background: #9b0000 url(module-header-bg.gif) left top repeat-x;		font-size: 13px;		font-weight: bold;		text-align: right;	}		.module-mmt-calendar .module-content { margin: 15px; }		.module-mmt-calendar table	{		width: 415px;		background: #9b0000;	}			.module-mmt-calendar th	{		color: #fff;		border-top: 1px solid #fff;		border-right: 1px solid #e7e7ec;		border-bottom: 1px solid #bbb;		padding: 2px;		text-align: right;		font-weight: bold;	}		.module-mmt-calendar td	{		border-top: 1px solid #fff;		border-right: 1px solid #e7e7ec;		border-bottom: 1px solid #bbb;		padding: 2px;		text-align: right;		font-weight: normal;	   background: #d2d2d2 url(gradient-bg.gif) left center repeat-x;	}		th.weekday-7, td.day-7, td.day-14, td.day-21, td.day-28, td.day-35, td.day-42	{		border-right: none;	}		.day-photo a	{		border: #bbb 1px solid;		padding: 1px;		background: #e7e7ec;	}		.day-photo a:hover	{		border-color: #235961;		background: #e7e2c6;	}/* artistic tweaks */  	.layout-artistic #gamma, .layout-artistic #delta { width: 200px; margin-left: 15px; }     	.layout-artistic #gamma-inner { padding-top: 0; }  	.layout-artistic #delta-inner { padding-top: 0; }/* moblog1 tweaks */		.layout-moblog1 #alpha { width: 190px; }	.layout-moblog1 #beta { width: 325px; }	.layout-moblog1 #gamma { width: 165px; }		.layout-moblog1 #alpha-inner { padding-top: 0; }	.layout-moblog1 #gamma-inner { padding-top: 0; }   	.layout-moblog1 .module-recent-photos { margin: 0; }	.layout-moblog1 .module-recent-photos .module-content { margin: 10px 0 0 15px; }/* moblog2 tweaks */		.layout-moblog2 #alpha { width: 85px; }	.layout-moblog2 #beta { width: 280px; }	.layout-moblog2 #gamma { width: 194px; }	.layout-moblog2 #delta	{      width: 120px;      margin-left: 1px;      background: #e6e6e6 url(alt-sidebar-bg.gif) left top repeat-y;	}		.layout-moblog2 #alpha-inner { padding: 0; }	.layout-moblog2 #gamma-inner { padding-top: 0; }	.layout-moblog2 #delta-inner { padding-top: 0; }   	.layout-moblog2 .module-photo .module-content { margin: 10px; }	.layout-moblog2 .module-photo .module-content img { width: 100px; height: auto; }		.layout-moblog2 .module-recent-photos { margin: 0; }	.layout-moblog2 .module-recent-photos .module-content { margin: 10px 0 0 10px; }/* timeline tweaks */	.layout-timeline #alpha { width: 310px; }	.layout-timeline #beta { width: 390px; }	.layout-timeline #gamma { width: 170px; margin-left: 15px; }	.layout-timeline #delta { width: 170px; }   	.layout-timeline #beta-inner { padding-top: 0; }	.layout-timeline #gamma-inner { padding-top: 0; }	.layout-timeline #delta-inner { padding-top: 0; }		.layout-timeline .module-recent-photos .module-content { margin: 10px 0 0 15px; }	.layout-timeline .module-recent-photos .module-list-item { margin: 0 10px 10px 0; }/* one-column tweaks */	body.layout-one-column { background-image: url(body-bg-1.gif); }		.layout-one-column #container { width: 600px; }	.layout-one-column #banner { width: 560px; }		.layout-one-column #alpha { width: 560px; }		.layout-one-column #container-inner	{		margin: 20px 10px 0 0;		background: none;	}/* two-column-left tweaks */	.layout-two-column-left #alpha { width: 200px; }	.layout-two-column-left #beta { width: 500px; }   	.layout-two-column-left #alpha-inner { padding-top: 0; }/* two-column-right tweaks */	.layout-two-column-right #alpha	{		width: 500px;		background: #f0f0f0 url(content-bg.gif) left top repeat-y;	}		.layout-two-column-right #beta	{		width: 200px;		background: #f0f0f0 url(sidebar-bg.gif) left top repeat-y;	}   	.layout-two-column-right #beta-inner { padding-top: 0; }/* three-column tweaks */		.layout-three-column #alpha { width: 180px; }	.layout-three-column #beta { width: 320px; }	.layout-three-column #gamma { width: 180px; }   	.layout-three-column #alpha-inner { padding-top: 0; }	.layout-three-column #gamma-inner { padding-top: 0; }		.comments-content .commentbg-x 	{	background-color: #FFFACD;	border: solid 1px  Maroon;	padding: 2px 15px;	margin-bottom: 1px;	font-family: 'trebuchet ms', Verdana, Helvetica, Arial, sans-serif;	font-size: smaller;	text-align: justify;} 		.comments-content .commentbg-y 	{	background-color: #FFF5EE;	border: solid 1px Maroon;	padding: 5px 15px;	margin-bottom: 1px;	font-family: 'trebuchet ms', Verdana, Helvetica, Arial, sans-serif;	font-size: x-small;	text-align: justify;} 		.comments-content .commentbg-z 	{	background-color: #FFFFF0;	border: 1px solid Maroon;	padding: 5px 15px;	margin-bottom: 1px;	font-family: 'trebuchet ms', Verdana, Helvetica, Arial, sans-serif;	font-size: x-small;	text-align: justify;}		.comment-footer,{	font-size: small;	text-align: right;}

Link to comment
Share on other sites

I saw 2 body styles in there, but other then that, everything seemed fine. Try changing the color value to "darkblue" instead of #00008B. This also might be an html problem, either you have overlapped your html with different classes over each other (e.g. <div class="header"><span class="color">Text</span></div>). If that's the case make sure one class is not overriding the other one. :)Also I would like to recommend adding mesurement heights (e.g. px, em, etc.) for your sizes on your line-height on:

#banner-header{margin: 0;padding: 35px 15px 5px 15px;color: blue;font-family: Papyrus;font-size: 80px;font-weight: normal;line-height: 1px;text-align: center;}

and on your very last CSS class (.comment-footer) that comma on the very end isn't needed.

Link to comment
Share on other sites

This is my HTML code pertaining to entries in my Main entry template in my MT3.2 config. Having looked at it, it does seem a bit convoluted, but that's just my being a relative novice at these things! blink.gif

<MTEntries lastn="10"><$MTEntryTrackbackData$><MTDateHeader><h2 class="date-header"><$MTEntryDate format="%x"$></h2></MTDateHeader><a id="a<$MTEntryID pad="1"$>"></a><div class="entry" id="entry-<$MTEntryID$>"><h3 class="entry-header"><a href="<$MTEntryPermalink archive_type="Individual"$>"><$MTEntryTitle$></a><img alt="user_edit.png" src="http://www.notjustcricket.com/images/user_edit.png" width="16" height="16" /></h3><div class="entry-content"><div class="entry-body"><$MTEntryBody$><MTEntryIfExtended><p class="entry-more-link"><a href="<$MTEntryPermalink$>#more">Continue reading "<$MTEntryTitle$>" »</a></p></MTEntryIfExtended><p class="entry-footer"><span class="post-footers"><span class="separator"></span><a class="permalink" href="<$MTEntryPermalink$>"><img alt="folder_link.png" src="http://www.notjustcricket.com/images/folder_link.png" width="16" height="16" /></a> | <MTIfPingsActive><a href="<$MTEntryPermalink$>#trackback"></a></MTIfPingsActive><MTIfCommentsActive><a href="<$MTEntryPermalink$>#comments"><img alt="user_comment.png" src="http://www.notjustcricket.com/images/user_comment.png" width="17" height="17" /><$MTEntryCommentCount$></a> | </MTIfCommentsActive> <img alt="clock_red.png" src="http://www.notjustcricket.com/images/clock_red.png" width="16" height="16" /> <$MTEntryDate format="%H:%M "$> | <img alt="calendar_view_day.png" src="http://www.notjustcricket.com/images/calendar_view_day.png" width="16" height="16" /> <$MTEntryDate format="%b %d "$> | <b>Posted to: <MTEntryCategories glue=" | "><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a></MTEntryCategories> </b></span></p></div></div></div></MTEntries>

Link to comment
Share on other sites

<h3 class="entry-header"><a href="<$MTEntryPermalink archive_type="Individual"$>"><$MTEntryTitle$></a><img alt="user_edit.png" src="http://www.notjustcricket.com/images/user_edit.png" width="16" height="16" /></h3>

That's the only entry-header I could find on that html you gave me. The only text I see there is a link, the other thing is an image. Going by this, and your CSS, your default color for your links is in fact Maroon.

a { color: #c00; text-decoration: none; }a:visited { color: #c00; }a:hover { text-decoration: underline; }

So your link colors are throwing your text colors off. To prevent such an occurence, you can add this to your css:

.entry-header a, .entry-header a:visited,.entry-header a:hover, .entry-header a:active {  color: darkblue;}

This will make all your links inside the entry-header class darkblue... thus sloving your problem. If you want to get really specific though, you can add the h3 infront of each of those styles classes I gave you (e.g. h3.entry-header a), this would be good if you had other entry-header classes that you didn't want to get mixed up with that don't start with an h3 tag. I hope that helped you out.:)

Link to comment
Share on other sites

@ RaHXephon!I am needed helped. I am free! Thank you. Thank you. Thank you. Thank you. Thank you.Did I say 'Thank you'??Thank you. Thank you. Thank you. Thank you. Thank you.Appreciate your help and time on this issue. Finally solved and more importantly, very simply.Much appreciated.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...