Remove Write.as Branding from Footers

Feedback Feature requests
1

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

2

body footer nav {display:none}

Might sort that for you in your Custom CSS rules.

3 Likes
3

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/

4

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
5

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

1— Insert 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);
}

2— Customize 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
6

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.

5 Likes
7

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.

8

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
9

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

10

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.

11

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;
}
12 
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
13

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

14

:+1:

15

I can’t get any of the techniques in this thread (or others on the forum) to work. The current footer is stubborn, and won’t budge.

Has anyone tried this lately?

Has it been “patched” away as an option? Any movement on the feature request itself? I really think this should be an option - obviously only for paying customers.

It could also be implementet just like signatures (and even cost the same $10): Just have a similar field right under where you write your signature.

16

What do you want your footer to say? Or do you want to take out the footer entirely?

If you want to take out the footer text entirely, it’s as easy as adding this custom css:

body footer nav {
    display: none;
}
17

Yeah, that’s the only thing I got to work. =/
But I want to be able to have stuff there. Personally I think I’ll add some links elsewhere, but I think it should be a supported feature regardless of my needs. :slight_smile:

The best thing would of course be to just unlock a field like the signature one - but at least a reliable way to replace it from the CSS and/or JavaScript field would be good.

18
19

Yeah, that’s one of the many I’ve tried and that didn’t work.

However, now that I was more confident that it would work, I tried something I hadn’t tried:

Putting it before my script for checking for dark mode.

I’ve no idea why, but that worked! (And the dark mode check still works.)

Thanks! As most of the stuff I tried was from like 2019, so I thought the problem was that something had changed with the way write.as is built.

(It should still be a field, though. :wink: )