10-Apr-2024
.
Admin
Hi, Dev
In this guide, I'll demonstrate the process of crafting personalized error pages for various error codes within a Laravel 11 application. With Laravel 11, it's possible to revamp error pages such as 404, 500, 503, 419, and 401, tailoring them to suit the aesthetic and functional needs of your project. Let's delve into the steps for this customization.
Laravel comes with default error pages that are simplistic in design. However, there are instances where you might require a custom error page that aligns with your project's unique design theme. In this tutorial, I'll guide you through the process of creating a personalized error page step by step within your Laravel 11 application.
You can create the following error pages in laravel 11:
401 Error Page
403 Error Page
404 Error Page
419 Error Page
429 Error Page
500 Error Page
503 Error Page
You can see the default 404 and 500 page designs below:
Default 404 Error Page
Default 500 Error Page
Now, let's see how to change the design of 404 and 500 error pages.
Step 1: Install Laravel 11
This step is not required; however, if you have not created the Laravel app, then you may go ahead and execute the below command:
composer create-project laravel/laravel example-app
Step 2: Publish Error Page Default Files
In this step, we will run the Laravel command to create the default error page blade file. When you run the command below, Laravel will create an "errors" directory with all error pages in the views folder. So, let's run the command below:
php artisan vendor:publish --tag=laravel-errors
Step 3: Update 404 Error Page Design
You can update 404 error page design with following code:
resources/views/errors/404.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>404 Server Error Page</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:700,900" rel="stylesheet">
<style type="text/css">
body {
padding: 0;
margin: 0;
}
#notfound {
position: relative;
height: 100vh;
}
#notfound .notfound-bg {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
}
#notfound .notfound-bg:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: #BC3E25;
}
#notfound .notfound {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.notfound {
max-width: 910px;
width: 100%;
line-height: 1.4;
text-align: center;
}
.notfound .notfound-404 {
position: relative;
height: 200px;
}
.notfound .notfound-404 h1 {
font-family: 'Montserrat', sans-serif;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 220px;
font-weight: 900;
margin: 0px;
color: #fff;
text-transform: uppercase;
letter-spacing: 10px;
}
.notfound h2 {
font-family: 'Montserrat', sans-serif;
font-size: 22px;
font-weight: 700;
text-transform: uppercase;
color: #fff;
margin-top: 20px;
margin-bottom: 15px;
}
.notfound .home-btn, .notfound .contact-btn {
font-family: 'Montserrat', sans-serif;
display: inline-block;
font-weight: 700;
text-decoration: none;
background-color: transparent;
border: 2px solid transparent;
text-transform: uppercase;
padding: 13px 25px;
font-size: 18px;
border-radius: 40px;
margin: 7px;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
.notfound .home-btn:hover, .notfound .contact-btn:hover {
opacity: 0.9;
}
.notfound .home-btn {
color: rgba(255, 0, 36, 0.7);
background: #fff;
}
.notfound .contact-btn {
border: 2px solid rgba(255, 255, 255, 0.9);
color: rgba(255, 255, 255, 0.9);
}
@media only screen and (max-width: 767px) {
.notfound .notfound-404 h1 {
font-size: 182px;
}
}
@media only screen and (max-width: 480px) {
.notfound .notfound-404 {
height: 146px;
}
.notfound .notfound-404 h1 {
font-size: 146px;
}
.notfound h2 {
font-size: 16px;
}
.notfound .home-btn, .notfound .contact-btn {
font-size: 14px;
}
}
</style>
</head>
<body>
<div id="notfound">
<div class="notfound-bg"></div>
<div class="notfound">
<div class="notfound-404">
<h1>404</h1>
</div>
<h2>We are sorry. But the page you requested was not found</h2>
<a href="#" class="home-btn">Go Home</a>
<a href="#" class="contact-btn">Contact us</a>
</div>
</div>
</body>
</html>
404 Error Page New Design:
Step 4: Update 500 Error Page Design
You can update 500 error page design with following code:
resources/views/errors/500.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>500 Server Error Page</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:700,900" rel="stylesheet">
<style type="text/css">
body {
padding: 0;
margin: 0;
}
#notfound {
position: relative;
height: 100vh;
}
#notfound .notfound-bg {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
}
#notfound .notfound-bg:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: #BC3E25;
}
#notfound .notfound {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.notfound {
max-width: 910px;
width: 100%;
line-height: 1.4;
text-align: center;
}
.notfound .notfound-500 {
position: relative;
height: 200px;
}
.notfound .notfound-500 h1 {
font-family: 'Montserrat', sans-serif;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 220px;
font-weight: 900;
margin: 0px;
color: #fff;
text-transform: uppercase;
letter-spacing: 10px;
}
.notfound h2 {
font-family: 'Montserrat', sans-serif;
font-size: 22px;
font-weight: 700;
text-transform: uppercase;
color: #fff;
margin-top: 20px;
margin-bottom: 15px;
}
.notfound .home-btn, .notfound .contact-btn {
font-family: 'Montserrat', sans-serif;
display: inline-block;
font-weight: 700;
text-decoration: none;
background-color: transparent;
border: 2px solid transparent;
text-transform: uppercase;
padding: 13px 25px;
font-size: 18px;
border-radius: 40px;
margin: 7px;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
.notfound .home-btn:hover, .notfound .contact-btn:hover {
opacity: 0.9;
}
.notfound .home-btn {
color: rgba(255, 0, 36, 0.7);
background: #fff;
}
.notfound .contact-btn {
border: 2px solid rgba(255, 255, 255, 0.9);
color: rgba(255, 255, 255, 0.9);
}
@media only screen and (max-width: 767px) {
.notfound .notfound-500 h1 {
font-size: 182px;
}
}
@media only screen and (max-width: 480px) {
.notfound .notfound-500 {
height: 146px;
}
.notfound .notfound-500 h1 {
font-size: 146px;
}
.notfound h2 {
font-size: 16px;
}
.notfound .home-btn, .notfound .contact-btn {
font-size: 14px;
}
}
</style>
</head>
<body>
<div id="notfound">
<div class="notfound-bg"></div>
<div class="notfound">
<div class="notfound-500">
<h1>500</h1>
</div>
<h2>Opps! Internal Server Error. Something is wrong.</h2>
<a href="#" class="home-btn">Go Home</a>
<a href="#" class="contact-btn">Contact us</a>
</div>
</div>
</body>
</html>
500 Error Page New Design:
I hope it can help you...
#Laravel 11
