Front-end Styling Options

In WPCD 5.0 we introduced a very robust set of tools for your customers to manage their servers and sites.

One of the ‘hidden’ features is that the list of servers and sites are rendered inside of a CSS grid which makes it very very easy to customize to match your vision and your brand.

In this article we will illustrate some examples of styles that are easy to create.

Lets start off with the baseline style for SERVERS. This is our default – it sets a maximum width of 1400px and makes liberal use of whites and shades of gray. It consist of six cards spread across two rows for each server.

With a few lines of CSS (see documentation) we can quickly turn this into dark mode:

Showing More Data

The six cards work fine if your customers have only one or two servers or sites. If they have more, you might want to reduce the amount of data so that they can fit more rows on the screen. You can do this by removing cards (WPCLOUDDEPLOY → SETTINGS → APP: WORDPRESS SETTINGS → FRONT END FIELDS).

Making Use of Full Width Pages

You can also show more data on a single line by simply increasing the width to occupy more of the horizontal space. Here we increased the amount of horizontal space we occupy and added another card.

The full width option is dependent on your WordPress theme allowing a full-width page template.

Add / Remove Cards

You can easily add and remove cards from the settings area: WPCLOUDDEPLOY → SETTINGS → APP: WORDPRESS SETTINGS → FRONT END FIELDS.

Removing cards allow you to fit more servers or sites into your theme’s content area.

Setting Brand Colors

Basic colors can be set without resorting to custom CSS.


The tooltips next to some of the labels explain what elements each color affects.


With our new front-end functionality for your customers it’s easier than ever to customize and apply your own vision and brand.

Was This Article Useful? Or do you have questions or comments about it (or our products & services)? We'd love to hear from you!

Please enter your name.
Please enter a message.
You must accept the Terms and Conditions.
Please check the captcha to verify you are not a robot.

Automatic Notification Of New Articles

Sign up to get automatic notifications of new articles.  This is a different list than our standard list - you only get new articles once a week (usually on Mondays).  No other emails will be sent unless you sign up for our general list as well.

Posted in ,