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?
Ask, Submit, and other pages created in the Customize section will be detected as "not found" with this code.
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
{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*/
}
{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;
}
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.