Change Individual Letter Color in Site Title

Site URL: http://www.billydupee.co.uk

Hi there, I'm trying to change the color of individual letters in my Site Title to match my email signature. See below. However, it wont allow me within the Site Style section. I have seen there is Custom CSS that can do this but not sure what it is or exactly how to implement it. Please do let me know if this is possible and how I can add the CSS. 

This might help you :

https://stackoverflow.com/questions/17341670/change-color-of-one-character-in-a-text-box-html-css

Great thanks so much for your help. Just one last question as that thread you provided doesn't say how to allocate the CSS to the Site Title specifically. How do I do this?

Thanks 

If this is site wide you put it in custom css under design. If it is for one page its a bit different you put it in advance for that page with <style> at both ends of the code. 

Hi there Derrick, thanks so much for the replies on this!

Its for all pages as i want it to apply to the Site Title, which is in the site header on all pages. However, I just want the code to be specific to the Site Title so how do I allocate the colouring to specifically this in the code?

Thanks again

Hi there,

I found this code, but it doesnt seem to change the colour of the site title:

span.site-title-text {
       color: red;
   }

Also can you help with how to separate out each letter and assign a specific colour to it?

Thanks

In this case, I think you need to use JavaScript to replace current title with HTML title. Then you able to change letter colors

(Need Business Plan or higher. Which plan do you use?)

Hi there Tuan, 

I use the Business plan currently - if you could let me know the code to implement this it would be a real help!

Thanks so much

2 hours ago, billydupee said:

Hi there Tuan, 

I use the Business plan currently - if you could let me know the code to implement this it would be a real help!

Thanks so much

Add to Home > Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('.site-title a:contains("BILLY DUPÉE")').text('<span class="tuan">T</span><span>U</span><span>A</span><span>N</span></a>');
	});
</script>

and this to Code Injection > Header

<style>
  .tuan span:nth-child(1) {
  	color: red;
  }
    .tuan span:nth-child(2) {
  	color: green;
  }
    .tuan span:nth-child(3) {
  	color: violet;
  }
    .tuan span:nth-child(4) {
  	color: blue;
  }
</style>

Hi there Tuan, 

Sorry that hasn't worked I'm afriad... See the screen shot attached. Any idea how I can make it to work?

I had changed the code where you had inputted TUAN to my name but it still doesn't work. What areas of the code do I need to tweak to my site for it to work?

Thanks

2 hours ago, billydupee said:

Hi there Tuan, 

Sorry that hasn't worked I'm afriad... See the screen shot attached. Any idea how I can make it to work?

I had changed the code where you had inputted TUAN to my name but it still doesn't work. What areas of the code do I need to tweak to my site for it to work?

Thanks

remove above code, and add this to Code Injection Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $(function(){
  $(".site-title a").each(function(){
    $(this).html($(this).text());
  });
});
</script>
<script>
  $(document).ready(function() { 
		$('.site-title a:contains("BILLY DUPÉE")').text('<span class="tuan">T</span><span>U</span><span>A</span><span>N</span></span>');
	});
</script>

Add this code to Code Injection Header

<style>
  .tuan span:nth-child(1) {
  	color: red;
  }
    .tuan span:nth-child(2) {
  	color: green;
  }
    .tuan span:nth-child(3) {
  	color: violet;
  }
    .tuan span:nth-child(4) {
  	color: blue;
  }
</style>

@billydupee You don't need to load the entirety of jQuery just to apply this style.

Use the following. it's shorter and doesn't require an outside library (So your site will load faster). Place it in the same place.

 

<script>
(() => {
    [...document.querySelectorAll('.site-title a')]
    .forEach((uit) => {
        let title = '';
        uit.innerText.split('').forEach((item) => title = `${title}<span>${item}</span>`);
		uit.innerHTML = title;
	});
})();
</script>

Then for your CSS, go to the custom CSS tab found here: DESIGN -> CUSTOM CSS

Then use the following. Now this is just a template, you'll need to fill in the colors you'd like to use.

.site-title a {
	span:nth-child(1) {
		color: #333; /* the "B" */
	}
	span:nth-child(2) {
		color: #333; /* the "I" */
	}
	span:nth-child(3) {
		color: #333; /* the "L" */
	}
	span:nth-child(4) {
		color: #333; /* the "L" */
	}
	span:nth-child(5) {
		color: #333;  /* the "Y" */
	}
	span:nth-child(6) {
		color: #333;  /* the space */
	}
	span:nth-child(7) {
		color: #333;  /* the "D" */
	}
	span:nth-child(8) {
		color: #333; /* the "U" */
	}
	span:nth-child(9) {
		color: #333; /* the "P" */
	}
	span:nth-child(10) {
		color: #333; /* the "E" */
	}
	span:nth-child(11) {
		color: #333;  /* the "E" */
	}
}

I would like to point out that another option to avoid all this is just create a logo image and use that. Just make sure it's a high enough resolution so it won't become pixelated.

Happy building
Erin

** edit **
Please note that you can delete my comments in the CSS (Thats anything between the /* */). As it's just there to make it clear what each span should be linked to

** Second edit **
@billydupee I tweeked to JS for a compatibility issue.

Hi there 

The site looks as it should when I added that in but the Site Title is still all black, even if I change the #Colour Codes.

Any final ideas?

17 minutes ago, billydupee said:

Hi there 

The site looks as it should when I added that in but the Site Title is still all black, even if I change the #Colour Codes.

Any final ideas?

Yes, the JavaScript is in the head instead of the footer.  So it runs before the title HTML element exists 🤣. Whoops, sorry about that.

Use this instead:
 

<script>
window.Squarespace.onInitialize(Y, () => {
    [...document.querySelectorAll('.site-title a')]
    .forEach((uit) => {
        let title = '';
        uit.innerText.split('').forEach((item) => title = `${title}<span>${item}</span>`);
        uit.innerHTML = title;
    });
});
</script>

YES! That worked. Thank you all so much. Stay well and safe!

Hi @Unlikely_IT, I'm trying to use a modified version of your solution here to change the font weight of only one word in the site title, but I'm not having any luck. Even if I apply it to individual letters using nth-child, no luck. Do you have any suggestions? 

Thanks,

john

On 9/23/2021 at 2:26 AM, polizzi said:

Hi @Unlikely_IT, I'm trying to use a modified version of your solution here to change the font weight of only one word in the site title, but I'm not having any luck. Even if I apply it to individual letters using nth-child, no luck. Do you have any suggestions? 

Thanks,

john

Can you share link to your site? We can take a look

On 9/23/2021 at 3:26 AM, polizzi said:

Hi @Unlikely_IT, I'm trying to use a modified version of your solution here to change the font weight of only one word in the site title, but I'm not having any luck. Even if I apply it to individual letters using nth-child, no luck. Do you have any suggestions? 

Thanks,

john

Hey @polizzi 👋,

Which theme are you using

But basically what's happening is the script I wrote grabs the site title by grabbing the anchor element with a parent element with the class "site-title". Then it chops up the title into ```span``` elements which can be targeted by CSS. But this script is old and is used with older themes.

Tell me which theme you're using and I'll be able to tweak it for you. The site URL also works as well. If the site is under construction pass the URL and the public password (remember turn on the public password.