(Last updated in 21/04/2019) - (Versão em Português deste tutorial aqui!)
I've been searching for a way to customize "Not found" pages on themes for Tumblr for a while. I found a few tutorials about it, but none of them would work in every blog, they would only work for blogs of a certain language (since the code would select the page basing on the error phrase that it shows, and this phrase changes according to the language of the blog, making it impossible for the script to find it in blogs that are set in other languages).
Until one day, as I was studying JQuery (thanks to W3Schools), I found a method that could work for any blog on Tumblr, since it selects the page based on its status (whether it's an error page or not). I tried it and it worked! 🙌 So, to anyone interested, here is my tutorial on how to customize "not found" pages on Tumblr using Ajax.
Tutorial:
If you're not familiar with editing themes:
If you still don't know the search bar from Tumblr's HTML editor, go to the Customize page of your blog and click on “Editar HTML” to open the HTML of your theme. Click anywhere in the code (only to select/focus the code "window", 'cause otherwise it won't work) and press CTRL+F (or Command+F). And this tab will appear at the top of the code:
Throughout the tutorial I'll be talking about some codes that you need to find in inside the HTML of your theme. You can use this search bar to find them more easily.
HTML:
Go to the Customize page of your blog, click on "Edit HTML", and paste the following code right before </body>:
<!---- CUSTOM "404 NOT FOUND" PAGE (by www.anyhs-themes.tumblr.com) ---->
<div id="page-not-found" style="display: none;">
<h1> There's nothing to see here :( </h1>
<p> <a href="/">Clique here to go back</a> </p>
</div><!-- #page-not-found -->
<!---- CUSTOM "404 NOT FOUND" PAGE (by www.anyhs-themes.tumblr.com) ---->That part I highlighted in the code above is the part you can customize. That's where you'll put the content you want to show inside the post box in the error page, just like in the image you saw in the beggining of this post (here).
You don't need to modify anything in this part, if you don't want to. But if you want, unfortunately I can't give you an entire HTML e CSS course here (if you don't know HTML and CSS), neither can I guess what everybody would like to know so I could teach only what they need. But, if you know what you want to change, you can contact me through this form to ask my help and I will answer you when I have time.
Scripts:
Now, you will need to have JQuery installed in your theme. If you're using one of my themes, they already have JQuery in them.
If you're using someone else's theme, use CTRL+F (or Command+F) to search for "jquery" in the code of your theme. If you can't find anything, then your theme doesn't have JQuery in it. In this case, simply paste the following code right after <head>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- jquery -->Right after the JQuery code, you must paste the script that will make your custom error page work. This is the script:
<!---- CUSTOM "404 NOT FOUND" PAGE (by www.anyhs-themes.tumblr.com) ---->
{block:PermalinkPage}
<script>
$(document).ready(function(){
$.get(location.href, function(){
return false;
});
$(document).ajaxError(function(e, xhr, opt){
var pageStatus = xhr.status + " " + xhr.statusText;
if(pageStatus == "404 Not Found" || pageStatus == "404 error"){
var pageContent = $("#page-not-found").html();
$(".caixa:first-of-type").html(pageContent);
}
});
});
</script>
{/block:PermalinkPage}
<!---- CUSTOM "404 NOT FOUND" PAGE (by www.anyhs-themes.tumblr.com) ---->
In the script above, I highlighted a part where it's written ".caixa". This is the class that I use for the post boxes on my themes. If you're using one of my themes, you don't need to do anything with this. but if you're using someone else's theme, you'll need to know or find out the class or ID of the post boxes on the theme you're using, so you can put it in there, otherwise the script will not work properly.
