Remove Write.as Branding from Footers

Would like a premium option to remove the Write.as logo/link from the footers.

body footer nav {display:none}

Might sort that for you in your Custom CSS rules.

3 Likes

It worked! Thanks!

Question: Is there a way to add some text under the horizontal line/rule that is at the bottom of my pages now?

Example: https://write.as/dlkr/

Not without adding HTML. Because you have hidden the body footer nav it is now, well, hidden…

Via JScript - probably… @Aris or @matt would be better placed to inform on this, than I.

Via CSS - What you could do is write body footer nav a {display:none;} this would hide the link but leave the powered by ref.

Then add to your CSS rules: body footer nav::after {content: 'xyz';}

1 Like

@fjhvio @lhl

I’m not a JS guru :sunglasses: I can just hack @matt code…

Here is an example custom footer after the content area…

1Insert your content in the JavaScript

var topP = document.createElement("p");
//topP.style.textAlign = "center";
topP.innerHTML = '<hr><div class="custom-nav"><a href="https://mamot.fr/@aris">Mastodon</a> // <a href="https://aris.papatheodorou.net">Blog</a> // <a href="#">Haut de page</a></div>';
var cont = document.getElementById("wrapper");
if (cont !== null) {
    // Add to blog index and tag pages
    cont.appendChild(topP);
} else {
    // Add to individual blog post page
    cont = document.getElementById("post-body");
    cont.insertAdjacentHTML("afterend", topP.outerHTML);
}

2Customize the CSS

.custom-nav {
  text-align: center;
  text-transform: uppercase;
  font-family: 'Open Sans', 'Segoe UI', Tahoma, Arial, sans-serif;
  color: #666;
}
.custom-nav a:link, .custom-nav a:visited, .custom-nav a:hover, .custom-nav a:active {
   color: #eee;
}
.custom-nav a:hover, .custom-nav a:active {
   text-decoration: underline;
}

You can see the result on my tech blog… à the bottom of the page.

Note 1 — The custom content must be placed in this JS string:

topP.innerHTML = 'HTML CONTENT GOES HERE'

Note 2 — This is inserted before the normal footer (" published with write.as") because… I don’t know how to insert this after with JS.

All this is just a dirty hack from Matt’s code here:

5 Likes

I already hit the vote button, but I wanted to add my voice to this as well. As a Pro user running on a custom domain, I really want to be able to control the footer; which at minimum means no branding unless I want it, and ideally also includes being able to put navigation links down there.

2 Likes

Navigation links are possible, but requires adding code to the CSS and JavaScript fields of your blog.

Personally, I’d like to be able to control he footer without having to deal with code.

Agreed. I’d rather have a defined area for common sidebar options - paragraph of about, top 10 most popular posts, top 3 most recent posts, etc. - without using JavaScript and CSS to jam things in places where write.as never meant them to go.

I’d rather have it supported than kludged in there, but I’m glad there are options in the meantime; the footer removal (display:none) works a treat.

1 Like

Just want to say big thanks for this too! Very helpful, been looking for a way to do this!

Dunno if you’ll get a notification from this @digitalgyoza since you’ve moved on, but do you still have the code you altered to use icons? I went to just view source on your now-former Write.as site but of course that bit is no longer on the page. Thanks.

Hi @bix, I managed to find @digitalgyoza’s custom JS and CSS for the footer on his blog. Check out the below (also put the footer on a test blog as a reference here):

JavaScript:

var topP = document.createElement("p");
//topP.style.textAlign = "center";
topP.innerHTML = '<div class="custom-nav"><hr>ELSEWHERE ON THE WEB...<br><br><a href="https://digitalgyoza.carrd.co/"><img border="0" alt="Carrd" src="https://i.snap.as/Du3fp83.png" width="48" height="48"></a>    <a href="https://mastodon.art/@digitalgyoza"><img border="0" alt="Mastodon" src="https://i.snap.as/M4YUqvS.png" width="48" height="48"></a>    <a href="https://twitter.com/DigitalGyoza"><img border="0" alt="Twitter" src="https://i.snap.as/9qmxoQE.png" width="48" height="48"></a><br><br><br><a href="#">Back to top</a></div>';
var cont = document.getElementById("wrapper");
if (cont !== null) {
// Add to blog index and tag pages
cont.appendChild(topP);
} else {
// Add to individual blog post page
cont = document.getElementById("post-body");
cont.insertAdjacentHTML("afterend", topP.outerHTML);
}

CSS:

.custom-nav {
text-align: center;
text-transform: uppercase;
font-family: Roboto, sans-serif !important;
font-weight: bold;
}
.custom-nav a:link, .custom-nav a:visited {
color: #000;
}
.custom-nav a:hover, .custom-nav a:active {
color: #999;
text-decoration: none;
}
var topP = document.createElement("p");
//topP.style.textAlign = "center";
topP.innerHTML = '<div class="custom-nav"><hr>ELSEWHERE ON THE WEB...<br><br><a href="___"><img border="0" alt="___" src="___" width="48" height="48"></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="___"><img border="0" alt="___" src="___" width="48" height="48"></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="___"><img border="0" alt="___" src="___" width="48" height="48"></a><br><br><br><a href="#">Back to top</a></div>';
var cont = document.getElementById("wrapper");
if (cont !== null) {
    // Add to blog index and tag pages
    cont.appendChild(topP);
} else {
    // Add to individual blog post page
    cont = document.getElementById("post-body");
    cont.insertAdjacentHTML("afterend", topP.outerHTML);
}

Replace the “___” with the relevant urls, alt text and image urls.

The spaces inbetween were a crude way to pad out the images lol.

As @cjeller1592 mentioned, then theres some CSS

.custom-nav {
text-align: center;
text-transform: uppercase;
font-family: Roboto, sans-serif !important;
font-weight: bold;
}
.custom-nav a:link, .custom-nav a:visited {
color: #000;
}
.custom-nav a:hover, .custom-nav a:active {
color: #999;
text-decoration: none;
}
2 Likes

Thanks for the help @digitalgyoza. Sorry for the overlap in posting there! Hope that all helps @bix!

:+1: