Change color of specific page title

reamalmquist · Member · Feb 28, 2018 at 4:13 pm
Copy link

Add topic to favorites
Hi,

I want to change the color of one specific page title, but keep everyone else white. How can I do that with CSS?

Also how do I change the hover color on the menu?

Thanks in advance!

The blog I need help with is: (visible only to logged in users)
shubhamgmath · Member · Feb 28, 2018 at 5:09 pm
Copy link
Hi reamalmquist

I am tagging this post as ‘modlook’ for WordPress.com staff attention as your site is protected so we can’t have look on the issue so please wait for some time staff will get back to you on this.
gemmacevans · Member · Feb 28, 2018 at 5:27 pm
Copy link
Hi reamalmquist,

Which page title would you like to change the colour of?

If you let me know, I’ll look at some CSS for you :)
reamalmquist · Member · Feb 28, 2018 at 9:48 pm
Copy link
Hi, I’ve changed the settings now so it should be visable to you :)
gemmacevans · Member · Mar 1, 2018 at 10:10 am
Copy link
Hi reamalmquist,

Your site can be kept private if you prefer, I will still be able to access it from my side :)

Let’s start with the colour of the page titles. You mentioned keeping them all white apart from one, are you referring to the links in your menu?
reamalmquist · Member · Mar 1, 2018 at 10:53 am
Copy link
Hi Gemma,

No, I’m talking about the large page titles with brackets around them. If you scroll down it first says ‘about me’ then ‘Resume’ then ‘Work’, and last ‘contacts’.

I want to change ‘Work’ to black, is that possible?
skobraf · Member · Mar 1, 2018 at 11:08 am
Copy link
Hi

After the staff permission i would like to help with my answer.

If you want to change the color of the “Work” block into black color instead of the image, you can add this line fo CSS to your code and i hope it will help
```
.pique-panel-background:before {
background: black;
}
```
If you are not familiar with how to add custom CSS then you can read this guide here and it will help : https://en.support.wordpress.com/custom-design/editing-css/

If needed further help please let us know

Regards,
Skobraf
gemmacevans · Member · Mar 1, 2018 at 1:36 pm
Copy link
Hi reamalmquist,

No, I’m talking about the large page titles with brackets around them

Oh I see, thanks for clarifying :) I’ve written some CSS for you to make this change:
```
.pique-panel3 .pique-panel-content h2 {
	border: 2px solid #000000;
	border-bottom: 0;
}

.pique-panel3 h2 {
	color: #000000
}

.pique-panel3 h2::before,
.pique-panel3 h2::after {
	border: 1px solid #000000
}
```
Paste it into My Sites > Customise > CSS, then click “Publish”. This will change the colour of the text and the brackets to black.

See what you think and I can help you tweak it if needed. Your plan includes direct support so I can follow up with you by email if you prefer.

The CSS @skobraf provided will change the panel backgrounds to black — but it won’t change the colour of the Work text.

Let me know how you get on.
reamalmquist · Member · Mar 1, 2018 at 1:51 pm
Copy link
Hi Gemma,

Thanks for your answer! It worked!

Is there any way to make the space smaller between these page titles and the page content?
gemmacevans · Member · Mar 2, 2018 at 10:06 am
Copy link
Hi reamalmquist,

That’s great to hear! This CSS can be used to reduce the gap between the panel titles and content on the homepage:
```
.home .pique-panel-content .entry-footer {
    display: none;
}

.home .pique-panel-content .entry-content {
    margin: 0 auto;
}
```
reamalmquist · Member · Mar 2, 2018 at 10:14 am
Copy link
Thanks a lot!

I have only two more things I need help with:

– I’d like to change the hover color of the font in the menu at the top of my page.

-Also when I scroll down at the page the menu has a brown back ground color, how can I change this?

Thanks in advance!
gemmacevans · Member · Mar 2, 2018 at 11:15 am
Copy link
Hi reamalmquist

I’d like to change the hover color of the font in the menu at the top of my page.

This CSS will change the hover colour:
```
.main-navigation a:hover {
	color: #000000;
}
```
#000000 (black) can be replaced with any colour you like.

Also when I scroll down at the page the menu has a brown back ground color, how can I change this?

That can be changed without CSS in My Sites > Customise > Colour and Backgrounds, then click on “Palettes”.

The first circle on the left corresponds to the “Panel & Menu Background colour”. Clicking it will give you the option to pick your own colour (underneath the coloured squares).

No items found.