Customizing Title with Prepended Unicode Character

[salis]

Hello!

Trying to add a unicode character, ☵, before the title. So far, I was able to append it, using this custom Javascript derived from a footer customization thread found here (shared by @matt)

var topSpan = document.createElement("span"); topSpan.style.textAlign = "center"; topSpan.innerHTML = '<a href="/"> ☵</a>'; var cont = document.getElementById("blog-title"); if (cont !== null) { // Add to blog index and tag pages cont.appendChild(topSpan); } else { // Add to individual blog post page cont = document.getElementById("post-body"); cont.insertAdjacentHTML("afterend", topSpan.outerHTML); }

I’d want that to appear before the title, not after And this is where my knowledge ends (all of it, all of my life knowledge).

P.s. So far this only shows up on the home page. It’d be great if it also appeared on regular post/pinned pages.

[salis]

Update, solved the homepage with this: still can’t get it to show up with post/pinned pages.

var topSpan = document.createElement(“span”);
topSpan.style.textAlign = “center”;
topSpan.innerHTML = '☶ ';
var cont = document.getElementById(“blog-title”);
if (cont !== null) {
// Add to blog index and tag pages
cont.insertAdjacentHTML(“afterbegin”, topSpan.outerHTML);
} else {
// Add to individual blog post page
cont = document.getElementById(“post-body”);
cont.insertAdjacentHTML(“beforebegin”, topSpan.outerHTML);
}

[cjeller1592]

Hi @salis! So the code you have for prepending the title looks good. The problem is that there’s an error in a previous part of your Custom JavaScript — the custom email message part.

I’d recommend replacing this line:

 var text = esub.getElementsByTagName('p')[0].innerHTML = '<div style="text-align:center;width:100%;">Get via <a href="https://sim.show/subscribe/">RSS/Fediverse</a>.</div>Or type your email here and you will receive words whenever I share words.';

With this:

var text = esub.getElementsByTagName('p')[0].innerHTML = '<div style="text-align:center;width:100%;">Get via <a href="https://sim.show/subscribe/">RSS/Fediverse</a>.</div>Or type your email here and you will receive words whenever I share words.';

document.getElementById("emailsub").insertAdjacentHTML('afterend', text);

That should allow the code you have to run, letting the custom unicode to show on the post/pinned pages. If you don’t like the placement of the email sub message, replace the 'afterend' with 'beforeend'. Let me know if that does the trick and if not, we’ll keep tinkering until it shows!

[salis]

@cjeller1592, thank you again for your super help. If I understood correctly, this is the cumulative code I should try to run.

// Replacing Footer Text
x = document.querySelector('footer').getElementsByTagName('nav')[0];
x.innerHTML = '© 2020 Sim Salis.<br/><br/>Licensed under <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike</a>.<br>Which means you can share this stuff unless you make money off of it. For exceptions, <a href="/contact">get in touch</a>.';

// Replacing Text from Email Sub
if (document.getElementById("emailsub") !== null) {
    var esub = document.getElementById('emailsub');
    var text = esub.getElementsByTagName('p')[0].innerHTML = '<div style="text-align:center;width:100%;">Get via <a href="https://sim.show/subscribe/">RSS/Fediverse</a>.</div>Or type your email here and you will receive words whenever I share words.';
    document.getElementById("emailsub").insertAdjacentHTML('afterend', text);
}


// Replacing Title

var topSpan = document.createElement(“span”);
topSpan.style.textAlign = “center”;
topSpan.innerHTML = '☶ ';
var cont = document.getElementById(“blog-title”);
if (cont !== null) {
// Add to blog index and tag pages
cont.insertAdjacentHTML(“afterbegin”, topSpan.outerHTML);
} else {
// Add to individual blog post page
cont = document.getElementById(“post-body”);
cont.insertAdjacentHTML(“beforebegin”, topSpan.outerHTML);
} 

With this one running, everything actually disappears: Unicode both on home and pinned pages/plus custom home signup text.

So far, this has been the most succesful attemp I’ve been able to run, which modified unicode on the home, plus email signup text. If I can entirely replace the title like with the code below, that works too, since that would allow for a custom, longer meta title, while still keeping it clean and short on all pages:

// Replacing Footer Text
x = document.querySelector('footer').getElementsByTagName('nav')[0];
x.innerHTML = '© 2020 Sim Salis.<br/><br/>Licensed under <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike</a>.<br>Which means you can share this stuff unless you make money off of it. For exceptions, <a href="/contact">get in touch</a>.';

// Replacing Text from Email Sub
if (document.getElementById("emailsub") !== null) {
    var esub = document.getElementById('emailsub');
    var text = esub.getElementsByTagName('p')[0].innerHTML = '<div style="text-align:center;width:100%;">Get via <a href="https://sim.show/subscribe/">RSS/Fediverse</a>.<br/>Or type your email here and you will receive words whenever I share words.</div>';
}

// Replacing Title

if (document.getElementById("blog-title") !== null) {
    var esub = document.getElementById('blog-title');
    var text = esub.getElementsByTagName('a')[0].innerHTML = '☶ sim.show';
}

[cjeller1592]

Got it — we’re one step closer! So it looks like the problem is here in your most successful attempt:

var text = esub.getElementsByTagName('p')[0].innerHTML = '<div style="text-align:center;width:100%;">Get via <a href="https://sim.show/subscribe/">RSS/Fediverse</a>.</div>Or type your email here and you will receive words whenever I share words.';

There is no 'p' element in the email sub initially (before the JavaScript runs), which is why it brings up the error that text doesn’t exist. So for that line in your most successful attempt, we can fix it by removing the esub.getElementsByTagName('p')[0].innerHTML = so it looks like this:

var text = '<div style="text-align:center;width:100%;">Get via <a href="https://sim.show/subscribe/">RSS/Fediverse</a>.</div>Or type your email here and you will receive words whenever I share words.';

I did this because you already add the custom message in the second line anyway. This way the first line defines the message and the second adds it rather than both lines trying to do the same thing. I think that will solve things (though of course you can’t be 100% sure with programming). Let me know if that does the trick this time.

[salis]

Great! It all works with the code below, except one thing: the original email sub text is still up, on top of the input box. Can’t point what I’m doing wrong. Thanks for your patience CJ!

// Replacing Footer Text
x = document.querySelector('footer').getElementsByTagName('nav')[0];
x.innerHTML = '© 2020 Sim Salis.<br/><br/>Licensed under <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike</a>.<br>Which means you can share this stuff unless you make money off of it. For exceptions, <a href="/contact">get in touch</a>.';

// Replacing Text from Email Sub
if (document.getElementById("emailsub") !== null) {
    var esub = document.getElementById('emailsub');
    var text = '<div style="text-align:center;width:100%;">Get via <a href="https://sim.show/subscribe/">RSS/Fediverse</a>.<br/>Or type your email here and you will receive words whenever I share words.</div>';
    document.getElementById("emailsub").insertAdjacentHTML('beforeend', text);
}

// Replacing Title

if (document.getElementById("blog-title") !== null) {
    var esub = document.getElementById('blog-title');
    var text = esub.getElementsByTagName('a')[0].innerHTML = '☶ sim.show';
}