[Resolved] Open Canvas Menu + Simple Custom CSS

[John]

Hello !

See the logo on
http://www.understand-culture.com

I’d like to swap colors.
Understand in red/orange.
Culture in gray/black.

And please send me the
Custome CSS for that so I can
add that to two additional sites.

I looked for it under Customize
but could not find it and did
not want to goof anything up.

Thanks !

John

[David]

Hi there,

so you site title used some PHP and custom CSS from this topic:

https://generatepress.com/forums/topic/two-color-site-header/#post-1847911

The color of the first word set in Customizer > Colors -> Site Title.
The color of the second word comes from the custom CSS:

.main-title .site-title-accent {
    color: #ff0000;
}

[John]

Hi David,

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”>
%3$s
</%1$s>’,
( is_front_page() && is_home() ) ? ‘h1’ : ‘p’,
esc_url( apply_filters( ‘generate_site_title_href’, home_url( ‘/’ ) ) ),
$titleHTML
);
});

That worked beautifully, except for the colors.
UNDERSTAND should be in the click color (red-orange)
and CULTURE in gray/black.

I was not sure where to make a change in your code.

[John]

David,

I’ve made things more complicated
that they need to be.

I took another look at the current logo:
http://www.understand-culture.com
and decided to leave the colors as is.

However, I’d like the logo on
http://www.discuss-culture.com
to have the same look as on
http://www.understand-culture.com:
i.e. font, size, stlye, etc.

How do I duplicate that?

I’ll do the same for another site
in the making:
http://www.apply-culture.com

Three sites:
understand-culture
discuss-culture
apply-culture . . .

each with the exact same look.

Thanks !

[David]

OK

1. The PHP Snippet each site requires:

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
    );
});

The code above includes the title for: understand-culture

For the other sites you need to use the above PHP snippet but with an update to this line of code:

$titleHTML = 'Understand <span class="site-title-accent">Culture</span>';

1.1 For discuss-culture it becomes:

$titleHTML = 'Discuss <span class="site-title-accent">Culture</span>';

1.2 For apply-culture it becomes:

$titleHTML = 'Apply <span class="site-title-accent">Culture</span>';

2. The styling to match the Understand Culture site.
Go to Customizer > Typography –> select the Site Title element and make the:

Font size: 16px
Font weight: Normal

[John]

Perfect, David.

However, I could not find Site Title
under Customizer > Typography.

Instead I get Body and Headings.

[David]

Click the Add Typography button, and you can search for the Site Title element

[John]

Click the Add Typography button ….

“Add Typography” I do not see.

[David]

OK… if you got to Customizer > General do you see the Dynamic Typography option ?

[John]

I just found it: Dynamic Typography.

Ok, let’s see if I can set to 16pm and Normal.

[John]

In General is chose Dynamic.

When I now go into Typography I get:

Font Manager
Typography Manager
Content
Off-Canvas Panel
Other

then button: Add Typography

Where do I go from here?

I sense that I have gone too far.
Am fooling around with stuff I should not.

[John]

In General is chose Dynamic.

When I now go into Typography I get:

Font Manager
Typography Manager
Content
Off-Canvas Panel
Other

then button: Add Typography

Where do I go from here?

I sense that I have gone too far.
Am fooling around with stuff I should not.

[David]

See here:

https://docs.generatepress.com/article/dynamic-typography-overview/#typography-manager

In brief:

a. click Add Typography it will open a pop up.
b. in the pop under Target Element, cliock the Select box ( search elements )
c. in the select drop down choose the Site Title
d. Now you can apply the font size and weight to the Site Title
e. Once you have done click the Close button on the Pop Up

[John]

Done !

At the very beginning of Leo’s video
I realized that I had already created
“Site Title” as an option.

I guess that’s what “Add Typography” means. 🙂

Thanks for your patience, David.

[David]

Glad to be of help!

[Author]

Posts