[Resolved] Two-Color Site Header

Home Forums Support [Resolved] Two-Color Site Header

Home Forums Support Two-Color Site Header

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1847888
    John

    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

    #1847911
    David
    Staff
    Customer Support

    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.

    #1847995
    John

    It worked, David.
    Thanks !

    But how do I get the “UNDERSTAND” in gray?

    John

    #1848020
    Leo
    Staff
    Customer Support

    Can you link us to the page in question?

    #1848082
    John

    Hi Leo,

    http://www.understand-culture.com

    Do you need Admin-access to the backend of the site?

    John

    #1848084
    Leo
    Staff
    Customer Support

    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?

    #1848112
    John

    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

    #1848115
    John

    Ok, now how do we make the two words all-caps?

    John

    #1848120
    Leo
    Staff
    Customer Support

    Can you try this option first?
    https://www.screencast.com/t/S2hWUoEqewrb

    #1848125
    John

    It was already set on “none”.

    #1848126
    Leo
    Staff
    Customer Support

    What if you set it to upper case?

    #1848131
    John

    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

    #1848132
    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

    #1848135
    Leo
    Staff
    Customer Support

    You can use the mobile toggle to adjust the mobile font size:
    https://www.screencast.com/t/gvXe4zW5lH8R

    Let me know 🙂

    #1848154
    John

    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

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.