Best Answer

Is it possible to customize the 403 page?

  • 14 December 2021
  • 7 replies
  • 193 views

Userlevel 3
Badge

This default page is ominous, any way we can provide better information to a user, like adding our own support contact info? How do I overhaul this 403 page?

 

icon

Best answer by nick.tosto 14 December 2021, 18:24

View original

7 replies

Userlevel 5
Badge +1

You can use the Localization Tool to look for the words “Forbidden” and “You don’t have permission to access this page” and change it to something more illuminating.

If you’d also like to change the image that appears there you can do so with CSS:

.internal-error-content .error_image {
background: url(https://pics.clipartpng.com/midle/Cat_PNG_Clip_Art-2690.png) no-repeat;
height: 300px;
background-size: contain;
max-width: 200px;
background-position: top;
margin: 0 auto;
}

.internal-error-content .error_image img {
visibility: hidden;
}

Just paste that code in the custom styles area of the Configure Branding & Look page. You may or may not want to replace the image I chose as the replacement- but if you do, you can just change the image link in the background: url() property. Docebo can also be used to host images.

Userlevel 7
Badge +3

Hey @rogergreenlee, you can update the text on the 403 page via the localization tool.

 

Navigate to ⚙️ Admin Menu > Localization Tool > Select Translate (the hamburger icon) next to English > search for You don't have permission to access this page. You’ll find the key under the standard module. You can then translate that text to whatever you’d like.

 

You can also translate Forbidden by following the same instructions above. See example below:

 

Example customized 403 error page

 

Userlevel 7
Badge +3

@nick.tosto Jinx! 

Userlevel 3
Badge

@nick.tosto @Adam Ballhaussen Thanks to both of you!

Userlevel 3
Badge

@Adam Ballhaussen @nick.tosto Any way to edit or remove the big “403” altogether with CSS?

Userlevel 3
Badge

@rogergreenlee I haven’t tried in this particular scenario (against the 403 page/verbiage) but I wanted to share that you can use the Localization tool to input HTML. So, it could be possible to insert a link into the language translation for the Key you are finding for “You don’t have access...”. Could be a way to provide a link to support email (mailto:) or a direct link out somewhere else for help.

Userlevel 1

@Adam Ballhaussen @nick.tosto Any way to edit or remove the big “403” altogether with CSS?
 

Here’s what I’ve had success with:

/* hide big bold 403 on the 403 error page */
.internal-error-content h1 {
display: none;

}

 

Reply