[Resolved] How to have several colors in the site title?

[Nicolas]

This is the layout of my site header: https://snipboard.io/oNuWGV.jpg

I Only the “circle and fist” is an image. For the rest, I’m using the default text option provided by GP.
How can I get the 2 letter “de” in black while keeping “sports” “combats.org” in red?

Thanks

[David]

Hi there,

it would require some PHP to add the main-title to include the necessary HTML to style it like that.

1. Add this PHP Snippet:

add_filter( 'generate_site_title_output', function( $output ) {
    $titleHTML = 'sports<span class="accent-one">de</span>combat.org';
    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
    );
});

How to add PHP: https://docs.generatepress.com/article/adding-php/

This wraps the string de in a span tag with class of accent-one.

2. You can then add some CSS to style it different eg.

.main-title .accent-one {
    color: black;
}

[Nicolas]

Thank you David.

As you can see on the URL shared in the Private Info, it works for the page title next to the logo.

But it does not replicate on the [sitename] used on this Elements.

[David]

Is that [sitename] shortcode a custom PHP snippet ?
Can i see it ?

[Nicolas]

Hello,

It comes from this extension.
Note: I’m not a coder myself.

[David]

Unfortunately i can’t assist with that, as i am not sure how it returns it site title.
Why not remove the shorcode and manually add the title there ?
Then you can use the Highlight option in the Blocks Toolbar to set a different color.

[Nicolas]

Why not remove the shorcode and manually add the title there ?

I just did this but how can I get “de” in black in “sport de combat” (that is all in red)?

[David]

Highlight the 2 de with your mouse, and in the block toolbars drop down menu you can select Highlight and set it to a different color.

[Nicolas]

David, you taught me something.
Merry X-mas.

[David]

Glad to be of help and Merry Christmas !

[Author]

Posts