Change the colour of only one character in the site title?

Hello there @wordzebra!

Although with Highlight this is possible with a paragraph or heading, it’s not possible for the site title. Using a paragraph or heading, you can highlight the letter you want to change the color of, then on the toolbar, click More and select Highlight where you can change a particular letter’s text color and background.

Changing one color of the text on the site title is also not possible with CSS code. If you want to change the color of one letter only, you can either:

• Add the texts in a paragraph or heading and use Highlight instead of a site title.
• Or use an image with the texts on it.

Hi @kel-dc !

Thanks for the answer!

I tried adding a regular paragraph in place of the title and it has the controls like you suggested. However, the options under Typography are limited – there are four fonts only and after trying all combinations, I can tell that neither of them corresponds to the one that was used for the title, and also after I publish it the dash is shown longer like an n-dash, and the whole looks worse than the original title without the colour accent. Any idea if I can allow the original title font for paragraphs as well, so that I can achieve what I had originally planned?

Hello @wordzebra!

You’d like to use paragraph for the site title, and use the font on the site title to the paragraph, is that correct?
I tested this on my test site and in Styles settings > Typography, there are several fonts that can be used for both site title and paragraph.

Please share more details:

• What font are you using for the site title that you want to use for the paragraph?
• When you got to the editor > Styles settings > Typography, what fonts are available in the site title that are not in paragraph? Share screenshots if possible. Thanks!

Hey @kel-dc

Yes, that is the way I tried to do it.

I am using the defaults for everything – the only change that I made so far was to remove the underlying from links, so that it doesn’t underline my title when I use a paragraph with a link behind it in place of the Site Title.

Those are the available fonts for paragraphs: Inter, Cardo, System Sans-Serif, System Serif.

Under Styles, I can modify what fonts apply to Text, Links, Headings, Captions or Buttons, but there’s no Site Title there to see what settings apply to it.

The Theme Fonts there seem to be the same as for paragraphs, although none of the combinations of size, bold vs. not bold etc. that I tried gives the same result.

Here are two screenshots showing the original Site Title on the right and the one I added as a paragraph on the left:

https://snipboard.io/4Qzc1u.jpg

https://snipboard.io/4o2bzU.jpg

The first one shows the end result when published, where you can see how the hyphen gets larger and becomes a dash for some reason, while the other one shows the titles in the editor, where the hyphen stays as it’s supposed to be.

Hi @wordzebra!

To have more font options, you can consider using a font plugin.

Under Styles, I can modify what fonts apply to Text, Links, Headings, Captions or Buttons, but there’s no Site Title there to see what settings apply to it.

The styles applied to Headings will be applied to the Site Title. If you want a specific style just for the site title and not all headings, you can create a custom CSS code for it.

The first one shows the end result when published, where you can see how the hyphen gets larger and becomes a dash for some reason, while the other one shows the titles in the editor, where the hyphen stays as it’s supposed to be.

I tested this and dashes with or without color appear the same size in the site editor. But if there’s color applied to the dash in a paragraph, on the live page, the dash is longer. If the whole text has a color applied to it, and not just the dash, the dash will appear the same size in the editor and live page. It looks like you’ve stumbled upon a bug! I’ve reported this here for enhancement: https://github.com/WordPress/gutenberg/issues/64237

In the meantime, you might want to explore further using an image, continue using the paragraph with color on the dash even it’s a bit longer on the live page, or make the whole paragraph with dash the same color.

Hi @kel-dc

The Headings seem to use the Cardo, which is a serif font, while the Site Title is clearly sans serif. From the available selection, it could only be Inter or System Sans-Serif, but none of those ends up looking the same way no matter what settings I apply to them for that paragraph.

Have you got any idea how to call the Site-Title style for that paragraph with CSS or vice-versa, or what you mean by that? Or what to type to simply make it apply the default Site-Title styles to all paragraphs added to the header?

Hello there @wordzebra!

Using a Paragraph block in place of a site title, the paragraph can have the fonts Default, Cardo, Inter, System sans serif and Sans serif.

Have you got any idea how to call the Site-Title style for that paragraph with CSS or vice-versa, or what you mean by that?

CSS is only necessary when you’d like to make changes to certain elements of the site that are not available through the settings. See Applying Custom CSS for more details.

In the case of using a paragraph block instead a site title, you can edit the color of the paragraph through the Color settings like in this guide: https://www.ads-software.com/documentation/article/colors-settings-overview/#how-to-access-color-settings

Or what to type to simply make it apply the default Site-Title styles to all paragraphs added to the header?

You can make all paragraphs in the header with the style you want, and also use the same header in other pages or posts by creating a new pattern:

• Create a new pattern in Appearance > Editor > Patterns > Add New Pattern > Add New Template Part
• Add a name, for this example let’s use “New Header”
• Under Area, select “Header” and click “Add”
  screenshot: https://www.ads-software.com/documentation/files/2022/01/Screen-Shot-2022-01-05-at-12.19.00-PM.png
• In the editor, create the header template part by adding the paragraphs in the header with the style that you want, then save.
• After creating the “New Header” template part, open the site editor in Appearance > Editor. Type in /new and select “New Header” on the list and “Save”.

If you also want your posts and pages to have the new header you’ve created, edit the post and page templates to add the “New Header” template part in them.