How to Customize the Footer on a Write.as Website

January 16, 2021

There are two ways that I know of to customize the footer on a Write.as website. The first one is through CSS and the second one is through JavaScript. I'll go through those two options in this post.

Option 1: CSS

I got this idea of customizing the footer via CSS after looking at Robert Xu's Write.as powered site. It puzzled me that I could not highlight the text in the footer. After viewing the page source, I finally figured out that it was CSS trickery.

So, anyway here we are. To customize the footer using CSS, all you need to do is modify the following CSS script, then add it to the Custom CSS settings for your website.

footer nav::before {
    content: "Copyright © 2020 - 2021 by Your Name \A";
    white-space: pre-wrap;
}

Note the \A at the end of the content value. That basically functions like a line break (<br />) in HTML. Without that, the content value will show up to the left of the “published with write.as” footer text. With \A in place, the content value will show up above the “published with write.as” footer text.

That also means that through the use of \A, you can add however many lines of text you want into your footer.

So, the main thing I like about using CSS for a customized footer, is that even if JavaScript is disabled on the browser, it will still work. If all you really want is to display some text on the footer, this is the best option in my opinion.

Now the thing that I don't like about it, is that it doesn't allow you to add hyperlinks in your footer. If you want to do that, then you have to use JavaScript.

Option 2: JavaScript

As I mentioned above, one of the reasons to go with JavaScript for a customized footer, is that it allows you to add hyperlinks as part of the footer content. This means that you can add links to other websites, or to a license, etc...

To customize the footer using JavaScript, modify the contents of the customFooterHTML variable below, then copy and add the JavaScript code to the Custom Javascript settings for your website.

/* Custom Footer*/
var customFooterHTML = 'Copyright © 2019 - 2021 by <a class="home pubd" href="WebsiteUrl" target="_blank">Your Name</a><br />The opinions expressed herein are my own and do not represent those of my employer<br />or any other third-party views in any way.<br />published with <a class="home pubd" href="https://write.as/">write.as</a>';

var x = document.querySelector('footer').getElementsByTagName('nav')[0];
x.innerHTML = customFooterHTML;

For an example of this customized footer in action, scroll to the bottom of this page.

Note that I added class="home pubd" to my links (anchor elements). home and pubd are Write.as classes that have their own specific styling. I added them so that I won't run into padding issues in the footer. This also means that you can put in other class names that you can style via your own Custom CSS settings.

Also note that instead of using \A to force a line break, I use the regular HTML <br /> line break. This is one of the benefits of going with the JavaScript approach. You are pretty much working with HTML at this point. This also means that you can put any valid HTML elements in there.

Lastly, note that I also added published with <a class="home pubd" href="https://write.as/">write.as</a> as part of the value for customFooterHTML. That's because with this approach, you are replacing the content of the footer with the content inside the customFooterHTML variable. So, if I don't add it, that text won't show up.

Maybe that's something you don't want to include in the first place. If that's the case, then you can simply exclude it from the value of the customFooterHTML variable.

So, you already know what I like about this approach — the ability to use HTML and add hyperlinks. What about drawbacks?

Well, since this is done via the Custom Javascript settings for your website, if one of the scripts in there runs into an error, it is possible that your footer won't be rendered. Also, if someone is viewing your website on a browser with JavaScript disabled, then your footer also won't show up. It's not that big of a deal, but something to keep in mind when using this approach.

Tags: #HowTo #WriteAs #CSS #JavaScript

Discuss... or leave a comment below.