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.

This can be done from the WPCLOUDDEPLOY → SETTINGS → APP: WORDPRESS SETTINGS → WHITE LABEL tab.

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

Wrapup

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