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.

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:

@nick.tosto Jinx! 

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

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

}

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?

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

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;}*/

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*/