Sight Theme CSS

barracov · Member · Mar 31, 2014 at 7:21 pm
Copy link

Add topic to favorites
Hi,

I really need help with CSS. There is a list of stuff I am not sure of:
For my website title. I want it to be “blush.” but i want the period to be pink. Also, if i were to add an additional word, how can I change the colour and font of it?

How do I change the menu bar colour and font? Also, how do I change these things only when I hover over them.

When a person is on a page, how do I change the navigator menu and font colour.

Thank you so much!!!!!!

The blog I need help with is: (visible only to logged in users)
designsimply · Member · Apr 1, 2014 at 10:57 pm
Copy link
For my website title. I want it to be “blush.” but i want the period to be pink.

Here is an example that will change the site title color on the Sight theme:
```
.site-title a {
	color: #fef0f5;
```
I don’t see a period, but there is not a way to change the color for one word or character without also editing the HTML, and there is not a way to edit the HTML for site titles on WordPress.com—the HTML is decided by the theme.

If you wanted complete control over colors, you could make a graphic instead and upload it to your blog’s media library and I could show you how to replace the site title with the graphic using CSS if you’d like.
designsimply · Member · Apr 1, 2014 at 11:00 pm
Copy link
Also, if i were to add an additional word, how can I change the colour and font of it?

You can add plain text using what is called a pseudo elements. Here is an example using the “:after” pseudo element:
```
.site-title a:after {
	content: " hi";
	color: pink;
}
```
The space for the site title is too small for the font size though, so you could adjust the font size by adding this too:
```
.site-title a {
	font-size: 90px;
}
```
designsimply · Member · Apr 1, 2014 at 11:07 pm
Copy link
How do I change the menu bar colour and font? Also, how do I change these things only when I hover over them. When a person is on a page, how do I change the navigator menu and font colour.

My navigator menu, I think you mean the text in the menu items, such as “Home” and “About,” right?

Here is an example that reverses all the menu colors in the Sight theme:
```
.main-navigation li {
	margin-bottom: 0;
	padding-bottom: 1em;
}
.main-navigation {
	background: #000;
	border-top: 1px solid #fef0f5;
}
.main-navigation li {
	border-left: 1px solid #fef0f5;
}
.main-navigation a {
	color: #fff;
}
.main-navigation ul ul {
	background: #fff;
	border-top: 1px solid #000;
}
.main-navigation ul ul a {
	color: #000;
}
.main-navigation li:hover > a,
.main-navigation ul ul :hover > a,
.main-navigation ul ul a:hover {
	color: #000;
}
.main-navigation ul li:hover {
	background: #fff;
}
```
Adjust the color codes as needed.

Note that the rules with “:hover” in them affect the menu item background and font colors. Experiment with different color settings for each block in the Appearance > Customize > CSS editor until you find a good set of colors that you like.

No items found.