The front-end grids and lists are easy to style with custom css. There are a number of ways you can apply custom css in WordPress:
We also have a text box in our settings screen (on the WHITE LABEL tab) where you can add custom css.
Below are some examples of what you can do with custom css.
The default width for the server and app grid/list is 1400px. But, if your content area for your theme is larger, you can force the grid to occupy the full width.
.wpcd-grid-table-rows .wpcd-grid-table-row { max-width: 100% !important; }
We set both the server and app grid to use three columns on larger screens. You can force it to a different number (eg: 4).
.wpcd-grid-table .wpcd-grid-table-columns, .wpcd-grid-table .wpcd-grid-table-rows .wpcd-grid-table-row { grid-template-columns: 1fr 1fr 1fr 1fr !important; }
.wpcd-grid-table-rows .wpcd-grid-table-row { /* Main Container Background */ background-color: #0D091A !important; } .wpcd-grid-table .wpcd-grid-table-cell { /* Background for individual cards */ background-color: #292929 !important; } .wpcd-grid-table button { /* Buttons need a lighter color since our default is dark. */ background-color: #E91E63 !important; } .wpcd-grid-table { /* Text color needs to be white since our default is dark. */ color: white !important; } .wpcd-grid-table .wpcd-server-col-element-label-server_app_link { /* Background color on the app count card needs to be dark. */ background-color: #0D091A !important; } #wpcd_public_wrapper button.wpcd_action_install_app { /* Fix border weirdness in install wordpress button. */ border-color: #E91E63 !important; }
The end result should be something that looks like this:
/* Full width .*/ .wpcd-grid-table-rows .wpcd-grid-table-row { max-width: 100% !important; } } /* Three Columns */ wpcd-grid-table .wpcd-grid-table-columns, .wpcd-grid-table .wpcd-grid-table-rows .wpcd-grid-table-row { grid-template-columns: 1fr 1fr 1fr !important; } /* Two rows in a column */ .wpcd-grid-table-rows { grid-template-columns: 1fr 1fr !important; }
If you’re asking for things like site name and other info on the checkout page, here’s a simple set of styles that will help break up the default checkout page a bit better:
/* WPCD custom checkout fields on checkout page.*/ #wpcd_sites_custom_checkout_fields_wrap { border:solid 1px #EBFAF2; border-radius:7px; padding:2em; background-color:#EBFAF2; }
This will result in something that looks like this: