Best Answer

Is it possible to customize the 403 page?

  • 14 December 2021
  • 11 replies
  • 844 views

Userlevel 4
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

11 replies

Userlevel 6
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 4
Badge

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

Userlevel 4
Badge

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

Userlevel 4
Badge

@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;

}

 

Userlevel 7
Badge +5

Fabulous! It works!

 

Is it possible to reduce the margins on that image with margins or padding? See below:

 

 

Also, what does this line do?

.internal-error-content .error_image img {

     visibility: hidden;

}

.internal-error-content h1 {

     margin: none;

}

 

I’m trying to reduce margins without success.

 

Also, can anyone help with replacing the x/o background image too?

Userlevel 7
Badge +5

It looks like this also replaces the 404 image: @nick.tosto 

 

 

Userlevel 7
Badge +5

I’m trying to reuse this code to create a “default profile image” in the my-profile widget on the homepage (or at least, my homepage as configured by me)

Any idea why it isn’t working? the two .avatar lines didn’t work either.

 

 

/*default profile image - not working yet

.avatar__initials.bg-main.text-grey-superlight.ng-star-inserted

.avatar-clip.border-main.ng-star-inserted*/

div.avatar-container avatar {

    background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/default-profile-image.png) no-repeat !important;

    height: 100px;

    background-size: contain;

    width: 100px;

    background-position: top;

    margin: 0 auto;

}

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

Userlevel 2

Thank you everyone for sharing - this was really helpful!  Does anyone have ideas on how to also update the “x’s” and “o’s” in the background? Thanks in advance!

Userlevel 7
Badge +5

Thank you everyone for sharing - this was really helpful!  Does anyone have ideas on how to also update the “x’s” and “o’s” in the background? Thanks in advance!

/* custom background on all pages - hollywood photo backdrop*/
@media {
body {
background-image: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/bknd-generic.png);
}
}
body.fr-view {
background-image: none !important;
}/*don't show bknd image in html or text-entry boxes*/

 

Reply