- This topic has 15 replies, 3 voices, and was last updated 2 years, 8 months ago by Leo.
-
AuthorPosts
-
July 7, 2021 at 8:20 am #1847888John
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
July 7, 2021 at 8:45 am #1847911DavidStaffCustomer SupportHi 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.
July 7, 2021 at 10:29 am #1847995JohnIt worked, David.
Thanks !But how do I get the “UNDERSTAND” in gray?
John
July 7, 2021 at 10:47 am #1848020LeoStaffCustomer SupportCan you link us to the page in question?
July 7, 2021 at 11:54 am #1848082JohnJuly 7, 2021 at 11:58 am #1848084LeoStaffCustomer SupportI’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?
July 7, 2021 at 12:45 pm #1848112JohnYes, 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
July 7, 2021 at 12:47 pm #1848115JohnOk, now how do we make the two words all-caps?
John
July 7, 2021 at 12:55 pm #1848120LeoStaffCustomer SupportCan you try this option first?
https://www.screencast.com/t/S2hWUoEqewrbJuly 7, 2021 at 1:07 pm #1848125JohnIt was already set on “none”.
July 7, 2021 at 1:08 pm #1848126LeoStaffCustomer SupportWhat if you set it to upper case?
July 7, 2021 at 1:20 pm #1848131JohnYou’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
July 7, 2021 at 1:22 pm #1848132JohnAh, 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
July 7, 2021 at 1:30 pm #1848135LeoStaffCustomer SupportYou can use the mobile toggle to adjust the mobile font size:
https://www.screencast.com/t/gvXe4zW5lH8RLet me know 🙂
July 7, 2021 at 1:36 pm #1848154JohnPerfect.
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
-
AuthorPosts
- You must be logged in to reply to this topic.