1. Home
  2. Docs
  3. Data Publisher
  4. Manual styling

Manual styling

Manual styling and fine tuning is available for all styling types, free and premium, and can be used to overwrite and improve the css of a publication. Below are some styling examples. Please scroll down for a more detailed explaination of the publication structure, elements and selectors. A video tutorial “how to add custom css to a WordPress site” is available at the end of this page for users who are new to css styling with WordPress.


Change font size for all publications

.dataTables_wrapper {
	font-size: 14px;

Change font size for a specific publication (publication id = 7, table name = customer)

#customer7_wrapper {
	font-size: 12px;

Change font weight and color for column student_lastname

th.student_lastname, td.student_lastname {
	font-weight: 900;
	color: green

Change alignment for numeric column salary (publication id = 8, table name = employee)

#employee8_wrapper th.salary, td.salary {
	text-align: right


To style or fine tune publications or specific publication elements, we first need to know the structure of a publication. The following image shows all free and premium elements a publication can have.


  1. Search Builder (premium)
  2. Search Panes (premium)
  3. Export and display buttons (premium)
  4. Page length
  5. Search box
  6. Processing text (only visible when a query is actually performed)
  7. Table
  8. Summary
  9. Pagination

Styling elements requires us to know the selectors for each element.


All publication elements are accessible through their classes. Most can also be accessed through their unique ID. The ID selector allows unique styling per publication. The ID is prefixed with the table name, publication id and an underscore.

Search Builderdtsb-searchBuilder
Search Panesdtsp-panesContainer
Page lengthtable1_lengthdataTables_length
Search boxtable1_filterdataTables_filter
Processing texttable1_processingdataTables_processing
Tabletable1wpda-datatable dataTable

Each table cell belongs to a certain table column. The column name is added to the cell as a class. This allows us to style each column separately.

Please use the inspector to examine publication element details for fine tuning.

Don’t know how to add custom CSS to your WordPress theme?

It’s easy to learn in just a few minutes! Watch the video below…

Was this article helpful to you? Yes No

2 Replies to “Manual styling”

  1. Is it possible to add a conditional css where an entire row will be color red if the content IF one cell is equal to something

Leave a Reply

Your email address will not be published.