Index

  1. Home
  2. Docs
  3. Index
  4. Data Publisher
  5. 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.

Examples

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
}

Structure

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.

Elements

  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.

Selectors

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.

ElementIDClass
Publicationtable1_wrapperdataTables_wrapper
Search Builderdtsb-searchBuilder
Search Panesdtsp-panesContainer
Buttonsdt-buttons
Page lengthtable1_lengthdataTables_length
Search boxtable1_filterdataTables_filter
Processing texttable1_processingdataTables_processing
Tabletable1wpda-datatable dataTable
Summarytable1_infodataTables_info
Paginationtable1_paginatedataTables_paginate

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

Leave a Reply

Your email address will not be published.

5 − 1 =