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