In this video tutorial we are going to understand how to customize a table made with the very popular WordPress plugin: TablePress.
This is a very simple plugin that allows you to load and have tables displayed inside your WordPress pages or posts.
With this tutorial we will teach you how to customize the spacing, fonts and find a correct color scheme starting from your own brand color, a green in this case #009879.
Through CSS Hero we will easily get these essential color matching tools to spice up a boring data table.
First we need to define the spacing of all the rows. Let’s click the table and refine the custom CSS element:
html .tablepress td
Once we have fixed the vertically aligned text, let’s fix the title row:
html .tablepress thead th
Here, we will apply our brand color #009879 and turn it into a color variable.
CSS Hero will automatically create a palette with matching colors (shades, triadic etc… which will come in handy later.
The color text will be taken from this tool, to increase the contrast ratio.
Then, move on to customizing the odd rows.
A very useful effect when we have dozens of rows is to use Zebra Striped Tables.
In this case we are going to re-style the odd rows, clicking on the html selector:
html .tablepress .odd td
We will apply a green background but we’ll make it brigher and we’ll choose a darker color to the text.
As a final modification we are now going to change the hover effect of the mouse over the rows.
We need to generate the right TablePress selector which in this case is .tablepress .row-hover tr:hover td
NOTE: Remember to activate this option in the option setting panel in TablePress.
Once we have created this CSS selector, choose a triadic color palette.
In this case we’ve selected a color close to brown and a yellow.
Starting from this color move the luminosity through the HSL.
We do the same thing for the text but using the full triadic color to achieve an optimal contrast ratio over the background.
CSS Hero can help you deeply and quickly customize the TablePress Plugin, solving some common issues like:
- How to customize fonts in the TablePress WordPress Plugin, to make font biggers or change typeface for titles and header texts
- How to change CSS background image on the TablePress WordPress Plugin and build background fades
- How to change colors and styles on TablePress WordPress Plugin