Get the most out of your Centmin Mod LEMP stack
Become a Member

40x / 50x Error Pages (Dark)

Discussion in 'Feature Requests & Suggestions' started by Jimmy, May 12, 2017.

  1. Jimmy

    Jimmy Well-Known Member

    1,788
    390
    83
    Oct 24, 2015
    East Coast USA
    Ratings:
    +990
    Local Time:
    11:39 PM
    Alternate template for 40x and 50x files. Includes fontawesome if you want to change the warning icon.

    Dark Version.


    Enjoy!

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <script src="https://use.fontawesome.com/a2089a23b5.js"></script>
        <title>403</title>
    
        <style type="text/css">
            @import url('https://fonts.googleapis.com/css?family=Roboto');
            body {
                background: #212327;
                color: #D7D7D7;
                font: 16px/1.3 "Roboto", sans-serif;
            }
            header {
                width: 100%;
                margin:0px auto;
            }
            h1 {
                text-align: center;
                color:#D7D7D7;
                font: 100px/1 "Roboto";
                text-transform: uppercase;
                margin: 5% auto 5%;
                margin-bottom: 35px;
            }
    
            article { display: block; text-align: center; width: 650px; margin: 10px auto; }
    
            @media screen and (max-width: 720px) {
                article { display: block; text-align: center; width: 450px; margin: 0 auto; }
                h1 { font: 70px/1 "Roboto";}
                .wrap {margin-top: 50px;}
            }
    
            @media screen and (max-width: 480px) {
                article { display: block; text-align: center; width: 300px !important; margin: 0 auto; }
                h1 { font: 50px/1 "Roboto";}
                .wrap {margin-top: 50px;}
    
            }
        </style>
    
        <!--[if IE]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    
    </head>
    <body>
    <div class="wrap">
        <h1>403<i class="fa fa-exclamation-triangle fa-fw"></i></h1>
    </div>
    </body>
    </html>
    Screenshot from 2017-05-11 20-56-38.png
     
  2. eva2000

    eva2000 Administrator Staff Member

    54,945
    12,240
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +18,812
    Local Time:
    1:39 PM
    Nginx 1.27.x
    MariaDB 10.x/11.4+
  3. Jimmy

    Jimmy Well-Known Member

    1,788
    390
    83
    Oct 24, 2015
    East Coast USA
    Ratings:
    +990
    Local Time:
    11:39 PM
    No problem. Wasn't much work. Figured I could utilize fontawesome so people could use the icon of their choice.
     
  4. Jimmy

    Jimmy Well-Known Member

    1,788
    390
    83
    Oct 24, 2015
    East Coast USA
    Ratings:
    +990
    Local Time:
    11:39 PM
    Just an FYI that fontawesome link in the doc is linked to my email address - well I had to enter my email to get the cdn address - not that I signed up for an account of something. Maybe you want to replace that with a centmin mod acquired cdn link.

    Get Started with Font Awesome
     
  5. eva2000

    eva2000 Administrator Staff Member

    54,945
    12,240
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +18,812
    Local Time:
    1:39 PM
    Nginx 1.27.x
    MariaDB 10.x/11.4+
    ah will do :D

    edit: done :)
     
    Last edited: May 12, 2017
  6. joshuah

    joshuah Member

    121
    14
    18
    Apr 3, 2017
    Ratings:
    +17
    Local Time:
    2:39 PM
    They look awesome. How would I go about making them global?
     
    Last edited by a moderator: May 12, 2017
  7. eva2000

    eva2000 Administrator Staff Member

    54,945
    12,240
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +18,812
    Local Time:
    1:39 PM
    Nginx 1.27.x
    MariaDB 10.x/11.4+
    Right now they're per vhost at nginx vhost creation time, so replacing the existing nginx vhosts copies will suffice. New nginx vhosts will use the updated templates if you ran centmin.sh menu option 23 submenu option 2 to update 123.09beta01 branch
     
  8. Jimmy

    Jimmy Well-Known Member

    1,788
    390
    83
    Oct 24, 2015
    East Coast USA
    Ratings:
    +990
    Local Time:
    11:39 PM
    @eva2000 what do you think about adding a 401 template? That way if someone sets up password protection there will be a custom error page for the 401 notice.
     
  9. eva2000

    eva2000 Administrator Staff Member

    54,945
    12,240
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +18,812
    Local Time:
    1:39 PM
    Nginx 1.27.x
    MariaDB 10.x/11.4+
    ah don't know why I didn't add that before LOL

    added to 123.09beta01 :D
     
  10. noly

    noly Member

    106
    16
    18
    Jul 24, 2017
    Germany
    Ratings:
    +28
    Local Time:
    4:39 AM
    1.18.x
    10.2.x
    In that case the 503.jpg which is integrated in each vhost public folder is a leftover from earlier days, right?

    If there is no need for it maybe exclude it?!
     
  11. eva2000

    eva2000 Administrator Staff Member

    54,945
    12,240
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +18,812
    Local Time:
    1:39 PM
    Nginx 1.27.x
    MariaDB 10.x/11.4+
  12. noly

    noly Member

    106
    16
    18
    Jul 24, 2017
    Germany
    Ratings:
    +28
    Local Time:
    4:39 AM
    1.18.x
    10.2.x
    Can't see any reference to the 503.jpg in maintenance.html o_O
     
  13. eva2000

    eva2000 Administrator Staff Member

    54,945
    12,240
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +18,812
    Local Time:
    1:39 PM
    Nginx 1.27.x
    MariaDB 10.x/11.4+
    ah you maybe right :)

    will eventually remove it :D