How to customize tumblr 404 URL not found page

Andrea Sindico picture Andrea Sindico · May 22, 2013 · Viewed 8.5k times · Source

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

fregante picture fregante · Mar 19, 2014

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.