Smaller boxes, icons, etc…

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.