How to set up tumblr 404 page URL not found

Question

Tumblr doesn't seem to provide a div tag to customize the look of the url not found page. Is there any other way to customize a 404 page (URL NOT FOUND)?

Answer 1

Edit: this method only works with thumbs that don't have pages.

Set , Submit , and other pages created in the "Settings" section will be detected as "not found" with this code.

---

Description

Tumblr uses the regular {block:Posts} loop for static pages, but without assigning any variables like {PostID} . If we use a class like post{PostID} , on 404 pages of all static pages we will see the .post element, while in messages the elements will look 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; 

CSS usage:

 .post { /*this is a 404 page, customize it*/ } 

Cool example without javascript

 {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 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 need to find the {tag} that only appears on pages, but not on 404 pages.

{ShortURL} , if this were not a mistake, it could be used, since in theory 404 pages should not have ShortURL.

I also tried {Permalink} , but in this case it behaves like {PostID} .

Answer 2

Unfortunately, there is no official way to do this.

However, if you use javascript / jQuery, you can smell the following text:

The requested URL was not found.

JQuery sample code:

 $(document).ready(function() { $("p:contains(The URL you requested could not be found.)").html('YOUR TEXT HERE'); }); 

I would be more inclined to add a class to the parent / body element so that you can style the whole page in different ways.

Hope this helps.

Answer 3

It 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 also researched this problem and I found the answer. If you need a 404 Error Page, this message has no PostID, so you can simply check that {PostID} is null or does not check that it is a 404 page.