• Resolved jhoveland

    (@jhoveland)


    I’m not good with CSS, so I’m sure a lot of you will roll your eyes at this one.

    I am trying to figure out how to make the output look different. I would like to use much smaller boxes and / or icons instead of the large boxes that is uses by default. I am trying to make a dashboard for our Intranet that will display all major systems in one corner of the main page.

Viewing 1 replies (of 1 total)
  • Plugin Author rehhoff

    (@rehhoff)

    Hello.

    Thank you for using the plugin ??

    You can adjust the sizes, look and feel of the server status boxes with CSS.
    This requires a bt of coding knowledge to understand.

    This will adjust the padding of all boxes, this making it smaller.
    Change the 10px/20px values accordingly to your liking

    .server-box {
        padding-top: 10px;
        padding-right: 20px;
        padding-bottom: 10px;
        padding-left: 20px;
    }

    If you want to adjust colors or add icons to a server box with specific type of response you have to add the “condition” too.

    Please refer to https://www.w3schools.com/cssref/pr_background-image.asp for documentation about background images.

    For example:

    .server-box.is-up {
        background-image: url("/wp-content/path/to/icon.png");
        background-position: center 15px;
        background-repeat: no-repeat;
    }
    .server-box.checking {
        /* Style while box is checking (yellow state) */
    }
    .server-box.is-up {
        /* Style for a successful check (green state) */
    }
    .server-box.is-down {
        /* Style for a failed check (red state) */
    }

    You can also apply generel style for a select server box like so.

    .server-box.server-XXXX {
        /* Replace XXXX with the ID of your server,
           visible in Server status admin screen */
    }

    Or even make a combination of both for more advanced use cases.

    .server-box.is-up.server-XXXX {
        /* Replace XXXX with the ID of your server,
           visible in Server status admin screen */
    }

    Depending on your theme this will have to go in the appropriate .css file,
    usually that would be style.css in your theme.

    If you’re not using a custom theme or a child-theme, you can put it in the wordpress customizer
    Found at: Appearence > Customize > Additional CSS`

    Kind Regards
    – Allan

    • This reply was modified 3 years ago by rehhoff.
Viewing 1 replies (of 1 total)
  • The topic ‘Smaller boxes, icons, etc…’ is closed to new replies.