How to change the color of the page header

bronco7777

I'm trying to change the color of the main header of the pages (not the blog or menu) and I don't see where I can do that. The areas I see to change color affect the menu and the blog titles but not the page titles. Because my theme background is white, you don't see the page names clearly. Please advise. Thanks.

Air

In Hypershot Theme->Apperance ->Customize header there you can set background colors of header:-)

With regards.

bronco7777

I don't want to change the background color of the header. I want to change the actual words (type color). I want to keep the background color white.

Air

Try this custom CSS

.add-ons, .add-ons a, #head-widgets .handle {
    color: #000000;
}

With regards.

bronco7777

That didn't work. The header text is still white. I changed the color number to the color we want also and it didn't change. Don't think it did anything at all.

Air

I see you have added code, and it is working, but I ams tarting to feel that you mean something else by 'header'. Could you please show it on screen shoot what you mean?

With regards.

bronco7777

What she meant by header is actually the page title. For example if you click on the Blog page in the menu....when the blog page comes up, the word "Blog" that serves as the title to the page is white and since our background is all white it's almost not visible. The only way we can even tell it's there is because the Font has a light shadow that makes it slightly stand out from the background. I will try to generate a specific screen shot to demonstrate and load soon but in the meantime maybe my description here may help along with our website link:

http://gator222.hostgator.com/~virimage/blog-2/

bronco7777

See attached image to view what we are describing.

Air

Yes, that can be problematic. To change this to black use this custom CSS:

.info-bar .page-title {
    color: #000;
}

With regards.

ananda

Thanks so much for this! It worked for me also. I do have a quick follow up question: is there a way to also get rid of the thin outline (shadow) around these titles? Thank you so much!

ananda

Another follow up question: is there a way to overwrite the default settings for these titles on an individual page?

For example, I would have the "Blog" Title be black here:
http://www.life-beautifully.com/sample-post-with-gallery/

But the title "Sample page" be white here:
http://www.life-beautifully.com/sample-page/

Thank you so much!

Air

To remove shadow
Use this custom CSS:

.info-bar .page-title{
    text-shadow: none;
}

Individual colors
It is harder. I bet there is some plugin for inserting additional CSS for each post/page then you could insert different colors. That is why we added text-shadow, to ensure that it will be always better visible. We made it very light but it is possible also to make it much harder.

With regards.

ananda

Perfect! Thank you so much!

Thanks so much for the tip on the individual colors too! I'll look into it and post here if I find anything.

Thank you!

cherrymulti

Where do you add this custom css exactly?

Air

http://apollo13.eu/docs/hypershot/#!/modification_of_theme_custom_css_plugin

7188photo

Hi! I added the CSS for changing the text color of the title as written here in the child theme style.css but it didn't work. Then I tried the custom CSS plug-in, as mentioned in the hypershot manual, but it still doesn't work. Any ideas?

Air

As you can imagine there must be something wrong:-)
As you can also imagine I can't guess what is wrong, without live link to see what you exactly did:-)

With regards.

7188photo

As described above, I want to change the title type ("BLOG") to be in black (or another color), not as the default white. So I added this code you posted to the child theme's style.css, which didn't work, and I also added the code using the custom CSS plug-in, as mentioned in the hypershot manual, but it still didn't work.

The code is

.info-bar .page-title {
color: #000;
}

and the URL of my blog is http://7188photography.com/blog

As you can see, the white type is barely visible against the grey.

Air

Hello

I don't know why it didn't work with child theme, but for custom CSS plugin I can see that its file is not there http://7188holgerferoudj.com/wood/wp-content/plugins/pc-custom-css/custom.css?pc_custom_css_ver=1372177596

It often has something to do with permalinks, please try to change them. It could also be some other plugin affecting this as cache plugin.

You can also try again with child theme.

Please check it out:-)

With regards.

7188photo

Custom CSS shows up just fine - no idea what file you can't find

Also, I re-checked the child theme style.css and now I also added the code to the main theme's style.css - but it still doesn't work.

It also doesn't work on another browser/machine with fresh cache.

Ideas?

Air

OOo man you are doing so many things and then get back to old situation:-)

7188photo said: Custom CSS shows up just fine - no idea what file you can't find

Click link I posted and you will see that plugin can't create its own style file. That is why it is not working:-)

As for child theme - are you using it now?

7188photo said: Also, I re-checked the child theme style.css and now I also added the code to the main theme's style.css - but it still doesn't work.

style.css?:-) It would work if you would switched to uncompressed styles http://apollo13.eu/docs/hypershot/#!/advance_menu_use_compressed_js_amp_css

You can try to add it to compressed.css.

But most ideally would be for you to decide on one solution, and then we could spot what is going on:-)

Hope that this time you will achieve what you wish.

With regards.