billydupee 6 Share Posted March 29, 2020 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. Link to post
derricksrandomviews 455 Share Posted March 29, 2020 This might help you : https://stackoverflow.com/questions/17341670/change-color-of-one-character-in-a-text-box-html-css Link to post
billydupee 6 Author Share Posted March 30, 2020 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 Link to post
derricksrandomviews 455 Share Posted March 30, 2020 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. Link to post
billydupee 6 Author Share Posted March 30, 2020 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 post
billydupee 6 Author Share Posted March 30, 2020 (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 March 30, 2020 by billydupee Link to post
tuanphan 8,936 Share Posted March 30, 2020 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 detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
billydupee 6 Author Share Posted March 31, 2020 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 Link to post
tuanphan 8,936 Share Posted March 31, 2020 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 detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
billydupee 6 Author Share Posted March 31, 2020 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 Link to post
tuanphan 8,936 Share Posted March 31, 2020 (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 March 31, 2020 by tuanphan You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
Unlikely_IT 311 Share Posted March 31, 2020 (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 March 31, 2020 by Unlikely_IT billydupee and tuanphan 1 1 Happy Building wishes from unlikely IT 🖥️ If you find this post helpful, please do share a thumbs up. Many thanks! Link to post
billydupee 6 Author Share Posted March 31, 2020 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? Link to post
Unlikely_IT 311 Share Posted March 31, 2020 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 post
billydupee 6 Author Share Posted March 31, 2020 YES! That worked. Thank you all so much. Stay well and safe! Link to post
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment