Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Sidebars & Widgets »

[SOLVED] Changing text color of a single widget


  #1  
Old Nov 9, 2009, 01:35 PM
thesis
 
46 posts · Nov 2009
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?
  #2  
Old Nov 10, 2009, 04:16 AM
juggledad's Avatar
juggledad
 
23,632 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
try
div#categoryposts-8 ul li.cat-post-item {
color: #006699;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Nov 10, 2009, 05:49 AM
thesis
 
46 posts · Nov 2009
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!
  #4  
Old Jan 12, 2010, 06:36 AM
thesis
 
46 posts · Nov 2009
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...
  #5  
Old Jan 12, 2010, 06:44 AM
juggledad's Avatar
juggledad
 
23,632 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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;
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Jan 13, 2010, 01:41 AM
thesis
 
46 posts · Nov 2009
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;
  #7  
Old Jan 13, 2010, 04:44 AM
juggledad's Avatar
juggledad
 
23,632 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Jan 13, 2010, 09:56 AM
rickheck
 
139 posts · Oct 2009
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...
  #9  
Old Jan 13, 2010, 11:37 AM
juggledad's Avatar
juggledad
 
23,632 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #10  
Old Jan 15, 2010, 09:01 AM
thesis
 
46 posts · Nov 2009
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;


------------------------------------
  #11  
Old Jan 15, 2010, 01:43 PM
juggledad's Avatar
juggledad
 
23,632 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Get rid of the 'display: list-item;' at the end
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Changing font color in the Upcoming Events/Calendar widget missmacphisto Sidebars & Widgets 3 Feb 1, 2010 12:39 AM
[SOLVED] Unable to change font color of Tubepress widget text Topcat1 Plugins & Atahualpa 10 Oct 28, 2009 10:16 PM
changing the background color of the main menu widget tenn10 Sidebars & Widgets 1 Oct 27, 2009 12:06 PM
Changing the links default title text to an image jpg of text veenublue Sidebars & Widgets 2 Jun 5, 2009 06:05 AM
Changing a widget display from block to inline (Twitter Text Widget) Flur Sidebars & Widgets 2 May 7, 2009 11:45 AM


All times are GMT -6. The time now is 06:38 PM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.