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

Change Individual Letter Color in Site Title

Recommended Posts

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. 

Screenshot 2020-03-29 at 17.14.50.png

Share this post


Link to post

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 

Share this post


Link to post

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

Share this post


Link to post
Posted (edited)

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

Share this post


Link to post

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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post

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

Share this post


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

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post

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

Share this post


Link to post
Posted (edited)
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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
Posted (edited)

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

Share this post


Link to post

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?

Share this post


Link to post
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!

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...