How to customize tumblr 404 URL not found page - html

Question

It seems Tumblr does not provide a div tag to customize the look and feel of the 'url not found' page.
Is there any way other way to customize the 404 (URL NOT FOUND) Page?

Answer 1

Edit: this method only works on tumblogs that don't have pages.
Ask, Submit, and other pages created in the Customize section will be detected as "not found" with this code.
Description
Tumblr uses the normal {block:Posts} loop for static pages but without assigning any variables like {PostID}. If we use a class like post{PostID}, on 404 pages all static pages we'll see a .post element, whereas on posts the elements will be something like .post125678
Example
{block:Posts}
<div class="post{PostID}">
{block:Photo}all your blocks here{/block:Photo}
</div>
{/block:Posts}
Using javascript:
var is404 = document.getElementsByClass('post').length;
Using CSS:
.post {
/*this is a 404 page, customize it*/
}
Cool javascript-less example
{block:Posts}
<div class="post{PostID}">
{block:Photo}all your blocks here{/block:Photo}
</div>
{/block:Posts}
<div class="fill-me"></div>
In CSS:
.post { /*Hide Tumblr's 404 message*/
display: none;
}
.post + .fill-me:before { /*use your message and style*/
content: 'This page was not found!';
font-size: 2em;
}
Edit: Possible fixes
To fix this method, we should find a {tag} that is only shown on pages but not on 404 pages.
{ShortURL}, if it weren't buggy, could be used since in theory 404 pages shouldn't have a ShortURL.
I also tried {Permalink} but it behaves like {PostID} in this case.

Answer 2

Sadly there isn't an official way to do this.
However, if your using javascript / jQuery, you could sniff for the following text:
The URL you requested could not be found
Example jQuery code:
$(document).ready(function() {
$("p:contains(The URL you requested could not be found.)").html('YOUR TEXT HERE');
});
I would be more incline to add a class to the parent / body element so you can style the whole page differently.
Hope that helps.

Answer 3

This worked for me
<script type="text/javascript">
/* Works for me */
var text_posts = document.getElementsByClassName("regular");
var text_404 = "The URL you requested could not be found.";
var title_404 = "Not Found";
if(text_posts.length == 1){
var bodyNode = text_posts[0].lastChild;
if(bodyNode.previousSibling.textContent == text_404) {
// titleNode.innerHTML = "<a href='/'>Not Found</a>";
var blog_loc = "http://" + document.domain + "/";
var query = window.location.href.slice(blog_loc.length);
var tokens = query.toLowerCase().split('/');
var keyword = tokens.join(" ");
var bodyContent = "Looks like you came from an old bookmark, or just looking for a page that doesn't exist. Were you looking for <span class='tg'><a href='/search/"+ escape(keyword) +"'>"+keyword+"</a></span>";
bodyNode.previousSibling.innerHTML = bodyContent;
}
}
</script>

Answer 4

I was research this problem too, and I found a answer.
If you gotta to 404 Error page, that post is no have any PostID,
so you can just check {PostID} is null or not to check it is 404 page.