Multiple Title Colors

Resolved altere987
(@altere987)

6 years, 12 months ago

I’d like to be able to have two separate colors for the site title.
{-=Masaki=-}

something like:
<font color="#000000">{-=</font><font color="#740000">Masaki</font><font color="#000000">=-}</font>

Also, using Eighties theme currently.

The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

Edward Caissie
(@cais)

6 years, 12 months ago
@altere987 – The default way to show a site’s name is to use the text found in settings although the reality is that text does not lend itself to adding in usable CSS elements to accomplish what you are describing.

The simplest method to get around this is most likely going to be to create a child-theme and instead of using the codified version of displaying the “site title” hard code the actual text you want to use and apply the appropriate CSS elements to allow you to change the text as needed.

Change this (in header.php):
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

to this (in your new child-theme’s header.php file):
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">{-=<span id="main-site-title-text">Masaki</span>=-}</a></h1>

Now you can change the “Masaki” text to a different color by using the #main-site-title-text selector.

Hope that helps…

~ Cais.

PS: Feel free to use whatever unique ID you like for the selector.
- This reply was modified 6 years, 12 months ago by Edward Caissie.
mrtom414
(@mrtom414)

6 years, 12 months ago
When you say 2 colors are you wanting a linear gradient? It can be done but probably won’t be Comparable on all browsers. The CSS code to make Linear-gradient background is :
```
h1.site-title a {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    color: transparent;
    background: linear-gradient(#ff0101,#000000);
    -webkit-background-clip: text;
}
```
you can also change the background to a image by switching linear-gradient to url(<<your image>>)

I’m not sure if this what you want. You can also increase the stroke with to make the text pop. You cannot add a text shadow with this method. If you add a text shadow everything will go black.
- This reply was modified 6 years, 12 months ago by mrtom414.
- This reply was modified 6 years, 12 months ago by mrtom414.
Thread Starter altere987
(@altere987)

6 years, 12 months ago
@cais Too bad I have to hard code it, but yes. This is the result I was looking for. Thanks.
- This reply was modified 6 years, 12 months ago by altere987.