colour change of fonts

dubaiquilter · Member · Dec 14, 2014 at 1:53 pm
Copy link

Add topic to favorites
I am using the connections theme and would like to change the font colours in the menu
Can I get the code for this please.
Thanks
thesacredpath · Member · Dec 14, 2014 at 6:07 pm
Copy link
Hi, to change the non-hover font color on the menu on connections, go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS and then edit the hex color code as desired.
```
#topnav li a:link, #topnav li a:visited {
    color: #bbc4a3;
}
```
If you wish to also change the color of the links when you hover a mouse over them, add the following and edit.
```
#topnav li a:hover, #topnav li a:active, #topnav li.current-menu-item > a, #topnav li.current-menu-ancestor > a, #topnav li.current_page_item > a, #topnav li.current_page_ancestor > a {
    color: #f7f3ed;
}
```
dubaiquilter · Member · Dec 15, 2014 at 4:06 am
Copy link
Thank you. Can you tell me where to edit the hex colour code?
thesacredpath · Member · Dec 15, 2014 at 4:37 am
Copy link
It is the part after color: in the above CSS. The two existing colors are #bbc4a3 and #f7f3ed.

Here is a link to an online hex color chart.
dubaiquilter · Member · Dec 15, 2014 at 6:01 am
Copy link
Thanks. I still cannot change the colour on my Menu on the top of the page or the menu widgets at the sidebar.
staff-happychia · Staff · Dec 15, 2014 at 8:49 am
Copy link
dubaiquilter,

Could you share the link to your blog?
galois · Member · Dec 15, 2014 at 10:55 am
Copy link
I guess the blog is https://dubaiquiltersguild.wordpress.com/
dubaiquilter · Member · Dec 15, 2014 at 1:00 pm
Copy link
Thank you Galois that is correct.
The top of the menu on the top of the page and the widget sidebar is in green which I would like to change. This is probably a default of the connections theme.
thesacredpath · Member · Dec 15, 2014 at 3:17 pm
Copy link
@dubaiquilter, your title and first posting here indicated you wished to change the font color. The green is an image used as the background of the menu. You can use the following to remove the background image and then apply any color you wish. I’ve used a red as a demo color.
```
#topnav {
    background-color: #cc0000;
    background-image: none;
}
```
dubaiquilter · Member · Dec 15, 2014 at 4:39 pm
Copy link
Thank you so much. I have now sorted the background colour and I know how to change the colours using the online hex colour chart.
On the sidebar where I have Archives that is still green as well as when I open a page for example the Home Page the date and title are still in green. Is there another code to change these.
Many thanks
thesacredpath · Member · Dec 15, 2014 at 10:06 pm
Copy link
There is another background image behind the widget titles, so we can do the same thing as above using the correct CSS selector like this, and add a color declaration to turn the text navy.
```
#sidebar h2 {
    background-color: #1e90ff;
    background-image: none;
    color: navy;
}
```
The chevron style bar at the bottom of the widget is also an image. To get rid of that and the widget green background color, add the following. I included background color and border color declarations in case you wish to set those as well.
```
#sidebar ul {
    background-image: none;
    background-color: #ffffff;
    border-color: navy;
}
```
For the post and page titles, you can change the color of those here.
```
#content .page-title a, .post-title a:link, .post-title a:visited, .post-title a:hover, .post-title a:active {
    color: navy;
}
```
Post date and background:
```
.post-date {
    background: #1e90ff;
    color: navy;
}
```
dubaiquilter · Member · Dec 16, 2014 at 2:21 pm
Copy link
Brilliant thank you so much.
dubaiquilter · Member · Dec 16, 2014 at 2:45 pm
Copy link
I am so close to having the site in a uniform colour except Archives is still green. I have added everything you sent me and it all worked and I now know I can change the colours later but does this still need a codes I can change it?
thesacredpath · Member · Dec 16, 2014 at 7:31 pm
Copy link
You need to add a background-image: none; to #sidebar ul, as I have in my example above.

Also, I don’t see this in your CSS, which changes the background color and text color for the widget title (archives).
```
#sidebar h2 {
    background-color: #1e90ff;
    background-image: none;
    color: navy;
}
```
dubaiquilter · Member · Dec 16, 2014 at 7:34 pm
Copy link
Thank you.
thesacredpath · Member · Dec 16, 2014 at 7:39 pm
Copy link
You are welcome.
barbadosunderground2 · Member · Dec 18, 2014 at 11:15 am
Copy link
Can I ask how do you remove the background text (shade) behind the Recent Post widget in the Bold News Theme please?

https://barbadosunderground.wordpress.com/

It seem like a good place to ask without opening another topic.
staff-happychia · Staff · Dec 18, 2014 at 5:50 pm
Copy link
@barbadosunderground2,

Please try the following CSS:
```
media="all"
.widget_recent_entries ul li a {
background-color: white;
}
```
barbadosunderground2 · Member · Dec 18, 2014 at 10:40 pm
Copy link
Thanks, I pasted:media=”all” .widget_recent_entries ul li a { background-color: white; }to CSS but the background colour behind the Recent Posts and Blogroll sidebar/widgets was not removed.
staff-happychia · Staff · Dec 18, 2014 at 10:56 pm
Copy link
I can’t see custom CSS being used on your blog at this time.

Let’s get rid of the default medial=”all” and try the following CSS:
```
.widget_recent_entries ul li a {
background-color: white;
}
```

No items found.