如何在 WordPress (Moderne) 的网站标题中显示单独的颜色？

Question

I have a WordPress site that is running the Moderne theme - https://wordpress.org/themes/moderne/ .

It's definitely my favourite so far and really matches what I want my site to be. But what I'm struggling to figure out is how to change my site title so that I can have separate colours, to match my logo, which is white-yellow-white.

I know that I can edit the colours itself through style.css, but I just can't seem to figure out how to separate out the sections.

This is my site: http://nobetterdan.com/ .

Ideally, what I want to try and do is -

• no in white
• betterdan in yellow
• the full stop at the end in white

It's probably super easy, but just not sure.

Answer 1

This can be accomplished via javascript.

 var _title = document.querySelector("#site-title a"); _title.innerHTML = _title.innerHTML.replace("no","<span class='logo-white'>no</span>").replace("betterdan","<span class='logo-yellow'>betterdan</span>").replace(".","<span class='logo-white'>.</span>");

 body{background:#000}.logo-yellow{color:yellow}.logo-white{color:white}

 <h1 id="site-title"><a href="http://nobetterdan.com/" rel="home">nobetterdan.</a></h1>

Answer 2

This is a little more complex than it seems, because in CSS, you can only target the first letter but the not each individual letter inside a word:

h1::first-letter {}

https://www.w3schools.com/cssref/sel_firstletter.asp

You have to seperate the page title to the units you want to have (header.php in the folder of your theme):

<h1 id="site-title">
    <a href="<?php echo get_home_url(); ?>" rel="home">no<span class="yellow">betterdan</span>.</a>
</h1>

So you can target this characters in your CSS:

.site-title { color: white; }
.yellow { color: yellow; }

This way you cannot make use you the <?php echo get_the_title(); ?> <?php echo get_the_title(); ?> function in the header.php of your theme. But if it is a ok for you to write the title with no dynamic value, you can simply adjust this in the file that contains your h1 tag.

Important : You are using a theme, which can have updates sometimes. Keeping this up to date is important, so if you are doing changes in your theme files, make sure to have a child theme running, so your parent theme files are overwritten and can be update when needed. This is a nice and easy tutorial for creating a child theme: https://www.smashingmagazine.com/2016/01/create-customize-wordpress-child-theme/

---

Another way would be to use javascript for the coloring of your headline. There also is a jquery plugin for this: http://letteringjs.com/ But I think for this single use case, for styling the title of your page, this would be an overload and much code you actually don't need. So the way using the span and css would be the more appropriate way.