Site title – two colours and bold

[Pete Baker]

Hi,

I’ve just started using the GeneratePress theme and I’m loving it. I’ve bought the full add-on package but this doesn’t give me control over adding another colour to my site title. My title is ‘cycle tour store’, I would like to have ‘cycle’ in bold, ‘tour’ in the orange that I’ve used elsewhere on the site and ideally the ‘tour’ in just plain.
I was hoping to not have to get involved in code, can anyone advise.
Thanks in advance

[Tom]

Hi Pete,

Unfortunately the Customizer won’t let you do specific changes to words like that, but we can do it in GP hooks.

1. First, hide the site title and tagline in the “Header Content” section of the Customizer.

2. Now go to “Appearance > GP Hooks” and open the “Before Header Content” hook.

3. Now add this HTML into the hook:

<div class="site-branding">
      <p itemprop="headline" class="main-title"><a rel="home" title="Cycle Tour Store" href="Your homepage URL"><strong>Cycle</strong> <span style="color:#YOUR_COLOR_HEX;">Tour</span> Store</a></p>
      <p class="site-description">Your tagline if needed</p>
</div>

Not codeless – but simple enough and gives you full control over each letter and word.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Pete Baker]

Hi,
Thanks Tom, that’s great! Looks just as intended. Only slight problem is that it now no longer works as a link back to the home pg. Is there away to reinstate it?
Thanks again,
Pete

[Tom]

Hi Pete,

Look for this part of the code: href=”Your homepage URL”

You want to add your URL in there.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Pete Baker]

Of course! Thanks Tom. Great help.

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Manuel]

Works really great.
Any chance to put the navbar next to it on the right?
Similar to navbar float right in GP premium?

[Leo]

Try this: https://generatepress.com/forums/topic/menu-next-to-logo/#post-241435

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Manuel]

Wow Leo, fast reply.
It doesn’t work for me.
Here is a link to my site. I want to put the menu next to “DEMO”.

[Leo]

You need to set the navigation location to float right first.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Manuel]

It is. I’ve put the “site-branding” in the hook wp_head cause i want a two color Site Title.

[Leo]

Try the before header content hook as Tom suggested instead.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Manuel]

Ooooh, I know.
It works. Thanks a lot 🙂

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Diogenes]

Hello, I congratulate you for this wonderful theme.

It is possible to apply this same effect in the sticky bar (where the logo is located), I am trying it with a hook in that position, but I do not see any.

Thanks in advance.

[Author]

Posts