Customize the 404 page ("Oops! That page doesn't exist or is private")

Community wiki Developers
1

Before:

image
image1366×648 37.8 KB

After (categories on the right):

image
image1365×647 38 KB

Or categories on the left:

image
image1364×647 38.2 KB

  • page width increased
  • buttons and google search are always visible
  • categories aligned on the right (or left)
  • topics title cut if too long
  • added the content “Are you logged in?” as described here
  • tested only for desktop (not mobile)

Note: the code it’s still a work in progress!

Here the CSS I used:

/*-----------
GENERAL CSS
-----------*/

.span8 {
    width: 480px;
}

/*Categories aligned to topics title based on their styles*/

.not-found-topic a.badge-wrapper.box {top: 0px;}
.not-found-topic a.badge-wrapper.bullet, .not-found-topic a.badge-wrapper.bar {top: 7px;}
.not-found-topic a.badge-wrapper.none {top: 3px;}


/*Categories max width*/

.page-not-found-topics a.badge-wrapper {max-width: 100px;}


/*If topic titles are too long they will be cut off */

.not-found-topic > a {
    float: left; 
    max-width: 75%;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
}


/*Repositioning the "More" buttons*/

.span8 .btn {margin: 10px 65px 0px 0px;}


/*More margin top to Popular and Recent titles*/

h2.popular-topics-title, h2.recent-topics-title, .page-not-found-search h2 {margin-top: 6px;} 


/*----------------------------------------------
SMARTPHONES,IPAD AND BIG SCREENS MEDIA QUERIES
----------------------------------------------*/

@media only screen 
and (min-device-width : 320px)
and (max-device-width : 479px)  {
    .not-found-topic > a {max-width: 95%;}
    .span8 {width: 100%;}
    .span8 .btn {margin: 2% 65% 0% 0%;}
    .not-found-topic:nth-of-type(1n+6) {display: none;}
}

@media only screen 
and (min-device-width : 480px)
and (max-device-width : 599px) {
    .not-found-topic > a {max-width: 95%;}
    .span8 {width: 100%;}
    .span8 .btn {margin: 2% 70% 0% 0%;}
    .not-found-topic:nth-of-type(1n+6) {display: none;}

}

@media only screen 
and (min-device-width : 600px)
and (max-device-width : 799px){
    .not-found-topic > a {max-width: 95%;}
    .span8 {width: 100%;}
    .span8 .btn {margin: 2% 80% 0% 0%;}
    .not-found-topic:nth-of-type(1n+6) {display: none;}

}

@media only screen 
and (min-device-width : 800px)  {
    .not-found-topic > a {max-width: 75%;}
    .span8 {width: 100%;}
    .span8 .btn {margin: 2% 80% 0% 0%;}   
}

@media only screen 
and (min-device-width : 1023px)  {
    .not-found-topic > a {max-width: 75%;}
    .span8 {width: 480px;}
}

@media only screen 
and (min-device-width : 1440px)
and (min-device-width : 1600px) {
    .not-found-topic > a {max-width: 75%;}
    .span8 {width: 480px;}
}
20 Likes