Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Change Individual Letter Color in Site Title


Recommended Posts

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

Link to comment

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

 

Edited by billydupee
Link to comment

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?)

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

 

Screenshot 2020-03-31 at 11.32.27.png

Link to comment
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>

 

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

@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.

Edited by Unlikely_IT

Happy Building wishes from unlikely IT 🖥️

If you find this post helpful, please do share a thumbs up. Many thanks!

Link to comment
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>

 

Happy Building wishes from unlikely IT 🖥️

If you find this post helpful, please do share a thumbs up. Many thanks!

Link to comment
  • 1 year later...

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

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

Happy Building wishes from unlikely IT 🖥️

If you find this post helpful, please do share a thumbs up. Many thanks!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...