Archived topic
Two-Color Site Header
15 replies · Started by John on July 7, 2021
Dear GP-Support,
The URL of my site is understand-culture(dot)com. I would like the Site Title to be my logo, by simply taking the two words and giving them different colors: UNDERSTAND (in caps) in gray ... and ... CULTURE (also in caps) in the same color of the clickable terms on the site, currently a kind of rusty orange ... with a space between the two words.
Is this possible?
John
Hi there,
its going to require adding some PHP and some CSS to the site.
This is the PHP Snippet:
add_filter( 'generate_site_title_output', function( $output ) {
$titleHTML = 'Understand <span class="site-title-accent">Culture</span>';
return sprintf(
'<%1$s class="main-title" itemprop="headline">
<a href="%2$s">%3$s</a>
</%1$s>',
( is_front_page() && is_home() ) ? 'h1' : 'p',
esc_url( apply_filters( 'generate_site_title_href', home_url( '/' ) ) ),
$titleHTML
);
});This doc explains how to add PHP:
https://docs.generatepress.com/article/adding-php/
Then some CSS to style the second word:
.main-title .site-title-accent {
color: #ff0000;
}Just change the #ff0000 to the hex color of your links.
All other styles are still set in the customizer.
It worked, David.
Thanks !
But how do I get the "UNDERSTAND" in gray?
John
Can you link us to the page in question?
I'm seeing this CSS from SCCSS that's causing the issue:
.main-title { font-size:18px; text-transform:uppercase }
.main-title a { color:red }
.main-title a:visited { color:blue }
.main-title a:hover { color:orange }Can you remove that?
Yes, Leo !
My good friend, Joe in California, had me put that in, so that I would see how CSS works. I forgot to remove it.
John
Ok, now how do we make the two words all-caps?
John
Can you try this option first?
https://www.screencast.com/t/S2hWUoEqewrb
It was already set on "none".
What if you set it to upper case?
You're so polite, Leo.
How about: "Hey, John, you bonehead. How about going back in and changing to upper case, as I had hinted at rather obviously?"
laughing out loud at myself.
Thanks, Leo !
John
Ah, but we ain't finished yet, Leo.
I set the font size at 18, thereby reducing it a bit. However, it still remains large on my iPhone.
John
You can use the mobile toggle to adjust the mobile font size:
https://www.screencast.com/t/gvXe4zW5lH8R
Let me know :)
Perfect.
You folks are super patient. I am watching a great show on YouTube while you and I converse via email. Which means that I am not putting in the effort to find the solutions right in front of my eyes.
Thank you, Leo !
John
