Changing color on widgets.

ammasarati · Member · Nov 11, 2014 at 12:07 pm
Copy link

Add topic to favorites
i am able to change the color on the title of the widgets by using ‘Inspect element’, but it doesn’t stay. When i refresh my blog the color is no longer there. How do i save the change?
I lost the colors that were there originally and now i am not able to put colors back :-(

The blog I need help with is: (visible only to logged in users)
ammasarati · Member · Nov 11, 2014 at 1:27 pm
Copy link
is this a response to my inquiry? If it is i have no idea what it means.
Could you illustrate. Does this affect colors?
jeremeylduvall · Member · Nov 11, 2014 at 6:17 pm
Copy link
You should be able to change the color of your widgets by using the following CSS code:
```
h3.widget-title {
	color: #fff;
}
```
Just change the hexcode “fff” to whatever color you would like to use. Here’s a hexcode reference guide:

http://www.webmonkey.com/2010/02/color_charts/

Just input that under Appearance -> Customize -> CSS. Also, just for future reference, we have a forum devoted to CSS customizations here:

https://en.forums.wordpress.com/forum/css-customization

In case you’re interested to learn a bit more, we have some information and resources here:

http://en.support.wordpress.com/custom-design/editing-css/

Let me know if you need anything else!
ammasarati · Member · Nov 13, 2014 at 10:50 am
Copy link
Thank you Jeremy. i did what you suggested and it worked.
Now i will check out the links you gave and see about changing the font to bold.
jeremeylduvall · Member · Nov 13, 2014 at 8:22 pm
Copy link
This bit of CSS should turn the widget titles to bold:
```
.wf-active .widget-title {
		font-weight: bold;
}
```
Can you give that a try?
ammasarati · Member · Nov 14, 2014 at 1:30 pm
Copy link
Hi Jeremy, It worked… :-)
Here’s another one for you, if you want…
I want to change the Font color on both the Site Title and tag line. I got this from one of the forums, but it isn’t doing anything.

.site-title a {
color: #990066;
}

Is it not possible in the 2011 theme to change the color of these 2 lines, or is this code not correct?
jeremeylduvall · Member · Nov 14, 2014 at 4:48 pm
Copy link
Here’s another one for you, if you want…

Always up for the challenge! :)

I want to change the Font color on both the Site Title and tag line.

Try using the following:
```
#site-title a {
font-color: #fff;
}

#site-description {
color: #fff;
}
```
ammasarati · Member · Nov 15, 2014 at 10:14 am
Copy link
Super awesome. Now the page looks more like a painting!!! :-)

So here is another one…. should you choose to take this on…
I thought that if
.wf-active .widget-title {
font-weight: bold;
}
worked to make the widget title bold then ‘logically’
.wf-active .site-title {
font-weight: bold;
}
would work to make the site title bold.
Apparently not. So what did i miss?
jeremeylduvall · Member · Nov 15, 2014 at 3:36 pm
Copy link
Ah the site title is a bit different. The specific site title font you have set (Fertigo Pro) doesn’t appear to have a bold option. You can see the italic and regular options here:

https://typekit.com/fonts/fertigo-pro

So, the best option here would be to try to add a numerical font weight like this:
```
.wf-active #site-title a {
font-weight: 800;
}
```
That seems to work on my side. Can you give that a try?
ammasarati · Member · Nov 17, 2014 at 6:53 am
Copy link
Wow Jeremy, It worked and this painting keeps getting richer and richer.

Question… i’m curious why this css code works to change the site-title but when i put the same code in with site-description the system did not recognize it at all.

I got it!!! I needed to take out the ‘a’ and the code worked. But i don’t like how it looks with the description in bold so i’m leaving with just the title in bold.

Yay!!! i am getting a little understanding of how this works.

Thank you so much Jeremy

Also i’m taking the Blogging 101 class and i want to share the css changes i’ve done and i want to acknowledge your support and contribution.
Would you let me know how this would be for you, and if it is okay?
jeremeylduvall · Member · Nov 17, 2014 at 7:12 pm
Copy link
I got it!!! I needed to take out the ‘a’ and the code worked. But i don’t like how it looks with the description in bold so i’m leaving with just the title in bold.

Great! Yep, the site description isn’t a link (denoted by the “a”) so you would want to leave that out.

Also i’m taking the Blogging 101 class and i want to share the css changes i’ve done and i want to acknowledge your support and contribution.
Would you let me know how this would be for you, and if it is okay?

Kudos on taking the Blogging 101 class! You’re more than welcome to reference this thread.

No items found.