how to edit error page
-
I have failed to find a way of restyling the error page. i would like to change the colors and center align the error messages. I would also want to add some font awesome icon or a small custom icon to the template without overriding it. looked for some filters to achieve this via functions.php but did not find any.
Viewing 6 replies - 1 through 6 (of 6 total)
-
Well when i read the documentation, it led me to creating two files offline.php and 500.php at the address /themes/storefront-child/. however now on when the new offline page is served, website no longer auto reloads when an internet connection is restored. I have to scroll to refresh or click on reload button i added in the page. Below is the website link
https://wp.me/P9K2eD-81q<?php
// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="profile" href="https://gmpg.org/xfn/11" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh; /* Ensure full viewport height is covered */
margin: 0; /* Remove any default body margin */
padding: 0; /* Remove body padding */
background: #232f3e;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
overflow: hidden; /* Prevent scrollbars */
}
.error-template {
display: flex;
flex-direction: column; /* Stack children vertically */
align-items: center; /* Horizontally center children */
justify-content: center; /* Vertically center children */
background: transparent; /* Transparent background to match */
padding: 1em;
max-width: 100%; /* Ensure it doesn't exceed the screen width */
box-sizing: border-box; /* Include padding in size calculations */
}
.error-page {
color: #FFF;
background: #eeeeee;
padding: 20px;
border: 1px solid #1e4e4e;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
border-radius: 14px;
width: 90%; /* Allow it to shrink on smaller screens */
max-width: 700px; /* Cap the width */
box-sizing: border-box; /* Include padding in width */
text-align: center; /* Center all inline content */
}
img {
border-radius: 50%;
max-width: 80px;
height: auto;
}
h1 {margin-top: 30px;
font-size: 18px;
padding-bottom: 20px;
border-bottom: 1px solid grey;
}
}
h2 {
font-size: 16px;
}
h3 {
font-size: 14px;
}
p {
font-size: 12px;
}
.awesome-icon .fa-solid {
font-size: 30px;
}
.contact-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.contact-item {
display: flex;
align-items: center;
gap: 0 5px;
font-size: 14px;
}
.contact-item i {
color: #ffffff;
}
.retry-button {
padding: 5px 15px;
display: block;
margin: 20px auto;
text-align: center;
}
</style>
</head>
<body <?php body_class(); ?>>
<div class="error-template">
<div>
<img
src="<?php echo esc_url( 'https://www.example.com/wp-content/uploads/2025/01/256Icon.webp' ); ?>"
alt="<?php esc_attr_e( 'You are currently offline. Please reconnect to the internet.', 'pwa' ); ?>">
</div>
<div class="error-page">
<h1>
<?php esc_html_e( 'Offline', 'pwa' ); ?>
</h1>
<div class="awesome-icon">
<i class="fa-solid fa-tower-cell fa-beat-fade"></i>
</div>
<?php wp_service_worker_error_message_placeholder(); ?>
<button class="retry-button" onclick="<?php echo esc_js( 'location.reload()' ); ?>">
<?php esc_html_e( 'Retry', 'pwa' ); ?>
</button>
<h2>
<?php echo esc_html__( "Here's what you can do", 'pwa' ); ?>
</h2>
<h3>
<?php esc_html_e( 'Stay in Touch:', 'pwa' ); ?>
</h3>
<div class="contact-info">
<div class="contact-item">
<i class="fa-solid fa-envelope"></i>
<span><?php esc_html_e( '[email protected]', 'pwa' ); ?></span>
</div>
<div class="contact-item">
<i class="fa-solid fa-phone"></i>
<span><?php esc_html_e( '+000-200 00000', 'pwa' ); ?></span>
</div>
</div>
</div>
</div>
</body>
</html>above is my offline.php at /themes/storefront-child/offline.php
Viewing 6 replies - 1 through 6 (of 6 total)
- You must be logged in to reply to this topic.
