|
[SOLVED] Changing text color of a single widget
Hello,
I need to change the text color in just a single one of my widgets. Its the 'News' widget on the homepage, which needs to be with blue text: http://twh.net.au/pp/ I found another post which a similar question, and using the information there I managed to change the title/headline color. But I'm having a lot of trouble getting it to work with the body text (on my site its currently in dark red, but should be blue). Heres the post I found: http://forum.bytesforall.com/showthread.php?t=727 So I added this to my CSS inserts to change the headline color: div#categoryposts-8 div.widget-title h3 { color: #006699; } But this doesn't seem to work for the body text. I know that I need to replace "div.widget.title" with the relevant code. I have already looked in Firebug and tried the various things I can see there, such as "cat-post-item", "post-title" but its not working. Am I on the right track? |
try
div#categoryposts-8 ul li.cat-post-item { color: #006699; } |
hi Juggledad, I really appreciate your help.
Your suggestion didn't actually make the text blue, but it DID help me to understand the code a lot better and look in the right place! So I tried a few other things and this is what finally worked: div#categoryposts-8 ul a.post-title { color: #006699; } Again, thanks for your help! |
Hiya,
I'm bumping this thread, because the problem has reared its head again. Heres the site: www.proportionfoundation.org The problem is in the headline and the underline of the 'News' widget on the homepage. They should both be blue, which I managed to solve originally using a CSS insert (see thread above). This worked fine until there was a news item added, which caused both headline/underline to revert back to default color. I checked in the code and the DIV element is still named the same as before (categoryposts-8), so thats not the problem... |
Actually this is a different issue. Your first issue was dealing with the color in the widget on the home page.
If you want the post titles to be blue, just go to 'ATO->Style POSTS & PAGES->HEADLINE Box: Text' and add color: #006699; |
I think you interpreted that I wanted to change the headline color of the posts/pages.. but I'm actually dealing with the News widget on the homepage.
Right now the 'News' headline and the underline is orange, which is my theme setting for headlines. I'm trying to change this to blue (but only on the News homepage widget) I have managed to do this before with a CSS insert, but for some reason it stopped working as soon as there was a news item added, and changed back to the default orange. Here is the code I'm using: div#categoryposts-8 div.widget-title h3 { color: #006699; } div#categoryposts-8 ul a.post-title { color: #006699; |
You have several problems in your code
1) you have multiple <body> tags. Only one <body> tag per page is valid. Do not put <bod. or <html> tage in widgets 2) your CSS Inserts are a mess. You have extra '}' you have CSS rules without selectors Clean this up and then see what happens |
To change the colors (or any other css item) in a widget... couldn't you use a text box before and after the widget? In the 'before' text box, use a <div style="color:blue;"> , and in the 'after' text box, use a </div> to close it.
Or, if the widget uses it's own CSS settings, look at the generated page (view source), find the CSS div class used in the widget, and add that class code to the Atahualpa CSS code block (via Add HTML/CSS code blocks). Or am I missing something (not uncommon...)? ...Rick... |
Rick,
in this case they have some messed up css inserts (veiw the source of the page and you can see it) they had successfully changed the color using CSS, but the additional CSS with errors is causing the remaining CSS to be ignored, thus causing the issue. |
you were right juggledad, it was the CSS inserts causing the issue, many thanks for your help!
I followed your advice and removed some doubled up "}" characters, and despite the fact that I didn't completely understand the rules of code, this fixed the problem - the widget headline changed back to blue (as it should be). With CSS I'm learning as I go... so its true that my code is probably quite messy! Since the main problem is fixed, this thread can be marked as 'solved'.. However I'll post my updated code just in case juggledad or anyone can point out other mistakes that I'm missing: ------------------------------------ img#wpstats{width:0px;height:0px;padding:0px;borde r:none;overflow:hidden } div#categoryposts-8 div.widget-title h3 { color: #006699; } div#categoryposts-8 ul a.post-title { color: #006699; } div#menu1 { border: solid #ffffff; } td.logoarea-logo { width: 100%; } img.logo { float: right; } .coltwo { width:100%; } div#menu1 ul.rMenu li a:link, div#menu1 ul.rMenu li a:hover, div#menu1 ul.rMenu li a:visited, div#menu1 ul.rMenu li a:active { } h1 {font-size: 1.6em; color: #d98e22; margin-top: -10px;} h2 {font-size: 1.6em; color: #d98e22; width: 100%; padding-bottom: 10px; border-bottom: 2px solid} h3 {color: #d98e22; width: 100%; line-height: 28px; padding-bottom: 4px; border-bottom: 1px solid} h4 {font-size: 1.2em; color: #cccccc; width: 95%; padding-bottom: 4px; border-bottom: 1px solid} h5 {font-size: 1.2em; font-weight: bold; color: #660033; margin-top: -10px; margin-bottom: -5px; width: 100%; padding-bottom: 4px; border-bottom: 1px solid} h6 {font-size: 0.9em; font-weight: bold; color: #d98e22;} } .widget ul li a:link, .widget ul li a:visited, .widget ul li a:active, .widget ul li a:hover { } border-left: 0 !important; padding-left: 0 !important; } .widget ul { list-style-type: none !important; padding-left: 0; margin-left: 0; } .widget ul li { background: url(http://proportionfoundation.org/wp-c...link-arrow.png) no-repeat 0 5px; padding-left: 0px; } display: list-item; ------------------------------------ |
Get rid of the 'display: list-item;' at the end
|
| All times are GMT -6. The time now is 12:32 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.