Vary header colors – swiftideas

swiftideas

ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

This topic has 37 replies, 5 voices, and was last updated 9 years by Rui Guerreiro – SUPPORT.

Viewing 15 posts - 1 through 15 (of 38 total)

1 2 3 →

Back to forum

Posted in: Joyn
September 20, 2015 at 6:58 pm #214792

adventures
Member

Post count: 41

Hello, is there a way to have the header color change for different pages? I’m trying to do it through CSS but I’m running into trouble with changing the font colors. I’d like to have the white header on the home page and some interior pages and have another color on some interior pages.

September 21, 2015 at 9:12 am #214841
Mohammad – SUPPORT
Moderator

Post count: 27441
Hi,
Please use also this code to change the header text color for dark header’s pages.
```
//Just change the page id.
.page-id-2 .full-center nav.float-alt-menu ul.menu > li > a, .full-center #header nav.std-menu ul.menu > li > a {
    padding: 0px 15px;
    display: block;
    color: #fff !important;
}
```
Thanks
Mohammad
September 23, 2015 at 3:18 am #215574

adventures
Member

Post count: 41

Thanks! Unfortunately that changes the header text to white on all pages, not just the one dark page specified. I copy/pasted your code exactly. Is it missing something?

September 23, 2015 at 7:01 am #215585

Mohammad – SUPPORT
Moderator

Post count: 27441

Hi,
You need to change the page id and color for each page in my css code.
Thanks
Mohammad

September 25, 2015 at 4:58 am #216347

adventures
Member

Post count: 41

I tried it for a few pages and it didn’t work for me.

September 25, 2015 at 8:10 am #216366

Kyle – SUPPORT
Moderator

Post count: 35880

Hi

You need to add the page id before .full-center as well

– Kyle

September 27, 2015 at 11:50 pm #216685

adventures
Member

Post count: 41

This isn’t working, either. Here’s a sample of what I tried the second time:

.page-id-1006 .full-center nav.float-alt-menu ul.menu > li > a, .page-id-1006 .full-center #header nav.std-menu ul.menu > li > a {
padding: 0px 15px;
display: block;
color: #fff!important;
}

September 28, 2015 at 8:16 am #216736

Kyle – SUPPORT
Moderator

Post count: 35880

Which is the page with the dark header so I can check for you

– Kyle

September 30, 2015 at 4:47 am #217357

adventures
Member

Post count: 41

An example of the dark header is under home-office-furnishings/living-room/sofas-v6/

Basically I’d like the home page to be white with dark text and have the option of making interior pages a dark header (orange) with white text. Am I doing something wrong in the CSS?

Thank you so much for your help! It’s very appreciated.

September 30, 2015 at 8:10 am #217397

Kyle – SUPPORT
Moderator

Post count: 35880

It does have white text? http://d.pr/i/1cywB/VW72HRR5

– Kyle

September 30, 2015 at 3:27 pm #217604

adventures
Member

Post count: 41

The contact pages, too. I’m running into trouble with the hover/active states on the menu. If the page is selected on the white background, the hover/active state is orange. On the orange/dark header, I’d like it to be black hover/active.

September 30, 2015 at 3:34 pm #217611

Kyle – SUPPORT
Moderator

Post count: 35880

Sorry can you be more specific? This is how it is for me on the orange background http://d.pr/i/1jYyZ/1xO0RrBf

– Kyle

October 6, 2015 at 3:49 am #218666

adventures
Member

Post count: 41

I’m not able to specify the hover/active states differently on the dark/light backgrounds. I’d like the white background to have orange hover/active states for the text and navigation, and I’d like the orange background to have black hover/active states and navigation. Does that make sense? Right now on the dark background the hover is orange, so the text disappears (see screenshot).

Also, I used the same code for white text on the contact pages as I did on the sofa pages and the contact text is black. /contact-v3/ (see other screenshot)

Thanks!

Attachments:
You must be logged in to view attached files.

October 6, 2015 at 8:28 am #218695
Kyle – SUPPORT
Moderator

Post count: 35880
Try adding this to your custom css:
```
.page-id-820 nav .menu > li.menu-item:hover > a, .page-id-820 nav.std-menu .menu > li:hover > a {
  color: #ffffff!important;
}
```
– Kyle
October 6, 2015 at 8:46 am #218698

adventures
Member

Post count: 41

That works to make most of the contact page nav white, but the active state on the contact page is still orange. When I move the mouse over the contact dropdown menu, a white “Contact” appears (it doesn’t stay black like the rollover) and it’s missing the white line above it. Any other ideas?

Thank you for your time!

Attachments:
You must be logged in to view attached files.
Back to forum

Posted in: Joyn