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?
Answer
Is it possible to customize the 403 page?
Best answer by nick.tosto
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.
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.
+7Hey
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:
+7
Here’s what I’ve had success with:
/* hide big bold 403 on the 403 error page */
.internal-error-content h1 {
display: none;
}
+6Fabulous! 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?
+6It looks like this also replaces the 404 image:
+6I’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!
+6Thank 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*/
Log in to Docebo Community
Enter your email address or username and password below to log in to Docebo Community. No account yet? Create an account
Docebo Employee Login
or
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.