WPCloudDeploy Documentation

White Label Colors

Introduction

For most users, one of the simplest ‘white-label’ things you can do is change the colors to match your brand (or personal preference).  WPCloudDeploy includes a tab in the SETTINGS area for just such a purpose.

To access it, navigate to WPCloudDeploy → SETTINGS → APP: WORDPRESS SETTINGS → WHITE LABEL

In there, you’ll see two sets of colors – the first set applies to the wp-admin area.  The second set applies to the front-end features.  However, the things that colors affect on the front-end varies a bit vs what gets affected in wp-admin.

This document will give you an idea of what gets affected in each area:

WP-ADMIN Colors

Primary Brand Color

  • Color of text on menu tab when tab is selected or hovered upon.
  • Color of Section header text in settings area.
  • Background color of buttons at the top of the site details screen.
  • Color of certain warning or error messages (eg: when an API key is not setup).
  • Color of the WEB SERVER name chiclet at the top of the server details screen.
  • Labels for data at the top of the server details and app details screen.
  • Color of title of cards and section headings in server details and app details screen.
  • Background color of buttons when hovered over.
  • Color of the tooltip icon when hovered over.
  • Color of the APP COUNT link at the top of the server detail screen.

Secondary Brand Color

  • Color of domain name at the top of the site detail screen.
  • Color or server name, region and provider in the area below the site detail header box.
  • Color of the border and hover background of the count of apps at the top of the server detail screen.

Tertiary Brand Color

  • Background color of the INSTALL WORDPRESS button (located on the SERVER LIST screen).

Accent Background Color

  • Default background color for most buttons.
  • Background color of left menu bar in the server and site details screen.
  • Part of the subtle gradient definition used for highlighting the current tab.  Applies to servers, sites and settings.

Alternate Accent Background Color

  • Part of the subtle gradient definition used for highlighting the current tab.  Applies to servers, sites and settings.

Medium Background Color

  • Background color in body area of tab.

Medium Accent Background Color

  • Border of card used in tabs.

Light Background Color

This is only currently used for the TEXT color in the GIT ‘chicklet’ status that is shown at the top of a SERVER screen.

Yes, we know, the irony of a ‘background’ color being used for foreground text.  It was either this or create yet another color option just use ‘white’.  If this gets a lot of complaints we’ll change it to ‘white’.

Positive Color

  • Generally used where we want to invoke a positive feeling – for example the background color when the PHP version is 8.1 or later.

Negative Color

  • Generally used where we want to invoke a negative feeling – for example the background color when the PHP version is lower than 8.1.

Alt Negative Color

  • Generally used where we want to a brighter negative color.  Eg: warnings on the server CONSOLE tab or when a server requires a restart.

White

  • This gives you the ability to change the shade of white used in many areas of the application.

Front End Overrides

Primary Brand Color

  • Color of text on menu tab when tab is selected or hovered on.
  • Background color of buttons at the top of the site details screen.
  • Color of the WEB SERVER name chiclet at the top of the server details screen.
  • Labels for data at the top of the server details and app details screen.
  • Color of title of cards and section headings in server details and app details screen.
  • Background color of buttons when hovered over.
  • Background color of certain buttons when hovered over on the server and site list screens.
  • (no) Color of the tooltip icon when hovered over.
  • Color of ADMIN LOGIN and VIEW SITE buttons on the app list screen.

Secondary Brand Color

  • (no) Color of domain name at the top of the site detail screen.
  • (n/a) Color or server name, region and provider in the area below the site detail header box.
  • (no) Color of the border and hover background of the count of apps at the top of the server detail screen.

Tertiary Brand Color

  • Does nothing for now.

Accent Background Color

  • Default background color for most buttons.
  • Background color for some buttons on the server and site list  screens.
  • Background color of left menu bar in the server and site details screens.

Alternate Accent Background Color

  • Background color of the entire tabbed section in the site and server detail screens.  This encompasses the tabbed area, the header area and the buttons for ALL APPS or ALL SERVERS.  This element of this color feature is not available in wp-admin.
  • (no) Part of the subtle gradient definition used for highlighting the current tab.  Applies to servers, sites and settings.

Medium Background Color

  • Background color in body area of tab.

White Color

  • Does NOT override in left menu bar on server and site pages  – that area will use the ‘white’ setting for wp-admin.

Custom CSS

As you might expect, you don’t need to use any of our settings to customize colors or other aspects of the UI.

For example, you can use the following CSS in the White Label settings area (or your custom CSS style sheet).  This will:

  • Make the data cards square, replacing the rounded edges and
  • Give the borders a different color (black)
.wpcd-wpapp-actions .wpcd-card-group {
     border-radius: 0px;
     border-color: black;
}

This document applies to WPCloudDeploy 5.7 or later

 

Share:

See Also

Customizing Front-end Styles
White Label