Создание 404.php с CSS оформлением

Далее нам нужно задать стиль для этой страницы. Для этого в файл 404.css нужно эти стили описать. В моем случае там написано следующее:

* {
 padding: 0px;
 margin: 0px;
 font-family: 'Tahoma';
 text-decoration: none;
}
body {
 width: 1000px;
 margin: 0 auto;
}
.navbar-inner {
 position: relative;
 min-height: 42px;
 background-image: url('../img/nav_bg.png');
 background-repeat: repeat-x;
 border: 1px solid #d4d4d4;
 border-top: none;
 border-left: none;
 -webkit-border-bottom-right-radius: 5px;
 -webkit-border-bottom-left-radius: 5px;
 -moz-border-radius-bottomright: 5px;
 -moz-border-radius-bottomleft: 5px;
 border-bottom-right-radius: 5px;
 border-bottom-left-radius: 5px;
 text-transform: uppercase;
 font-size: 12px;
 font-weight: bold;
}
.nav {
 float: left;
}
.nav > li {
 list-style: none;
 float: left;
 height: 42px;
 position: relative;
 border-right: 1px solid #c9c9c9;
}
.nav > li > a {
 padding: 14px 25px 14px;
 color: black;
 display: block;
}
.nav > .active > a,
.nav > .active > a:hover,
.nav > .active > a:focus,
.nav > li > a:hover {
 background-color: #cae285;
 background-image: -moz-linear-gradient(top, #cae285, #9fcb56);
 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#cae285), to(#9fcb56));
 background-image: -webkit-linear-gradient(top, #cae285, #9fcb56);
 background-image: -o-linear-gradient(top, #cae285, #9fcb56);
 background-image: linear-gradient(to bottom, #cae285, #9fcb56);
 border: 1px solid #9fcb56;
 border-left: none;
 border-right: none;
 border-color: #aec671 #9fbb62 #87ac4a;
 -moz-box-shadow: inset 0px 1px #d7e9a4;
 -webkit-box-shadow: inset 0px 1px #d7e9a4;
 box-shadow: inset 0px 1px #d7e9a4;
 padding: 13px 25px 14px;
}
.leftBorder, .rightBorder {
 display: none;
 position: absolute;
 width: 1px;
 height: 43px;
 background-color: #9fbb62;
 top: 0px;
 z-index: 1000;
}
.leftBorder {
 left: -1px;
}
.rightBorder {
 right: -1px;
}
.active .leftBorder,
.active .rightBorder,
.nav > li:hover > .leftBorder,
.nav > li:hover > .rightBorder {
 display: block;
}
.first, .first a {
 -webkit-border-bottom-left-radius: 5px; /* уголок снизу-слева */
 -moz-border-radius-bottomleft: 5px;
 border-bottom-left-radius: 5px;
}
.first a {
 border-left: 1px solid #d4d4d4;
}
.first.active, .first a:hover {
 border-left: 1px solid #9fbb62!important;
}
.first.active a:hover {
 border-left: 0px solid #9fbb62!important;
}
/*соц кнопки*/
.soc-icons {
 float: right;
 padding: 9px 7px 0 10px;
}
.soc-icon {
 float: right;
 margin-left: 4px;
 width: 24px;
 height: 24px;
 background-repeat: no-repeat;
}
.google {
 background-image: url('/wp-content/themes/mystique2/images/google.png');
}
.vkontakte {
 background-image: url('/wp-content/themes/mystique2/images/vkontakte.png');
}
.twitter {
 background-image: url('/wp-content/themes/mystique2/images/twitter.png');
}

После этого сохраняем файлы и загружаем на хостинг и наблюдаем изменения. Повторюсь, что внешний вид, а именно строка меню была найдена в интернете со всеми стилями, поэтому вы можете поменять ее на любой другой стиль. Можете на основе этого придумать свой стиль.  На мой взгляд, страница ошибки на моем блоге выглядит гораздо лучше, чем была. Кстати вы можете подойти к процессу креативно и написать что нибудь этакое 🙂