Custom Search In Tablepress

⌘K
  2. Home
  4. Docs
  6. Custom Search In Tablepre...
  8. general
  10. Plugin styling/custom CSS

Plugin styling/custom CSS

Styling a plugin is an important aspect of creating a cohesive user experience on your website. In this article, we will guide you through the process of customizing the CSS of your TablePress plugin or CSTP plugin.

Step 1: Finding the CSS editor in TablePress plugin

To customize the CSS of your TablePress plugin, you need to navigate to the TablePress plugin options page. Scroll down to the Frontend Options and Styling section, and you will see an option to add custom CSS.

Step 2: Changing appearance of TablePress plugin

if you want to make advanced changes to the table styling, you may need to refer to the TablePress plugin documentation for additional guidance on customizing the CSS of your tables.

For example, If you want to change the color of the table header, you can add the following CSS code:

.tablepress thead th,
.tablepress tfoot th {
	background-color: #ff0000;
	color: #00ff00;
}
.tablepress thead .sorting_asc,
.tablepress thead .sorting_desc,
.tablepress thead .sorting:hover {
	background-color: #00ff00;
	color: #00ff00;
}

Step 3: Custom Search In Tablepress plugin classes #

If you are using the CSTP plugin, you can use the following CSS classes to customize the styling of your plugin:

  1. “.tpcs-wrapper”: This is the main div that contains the search field, search button, table, and other elements of the CSTP plugin.
  2. “.tpcs-input-text”: This div contains only the search field and search button.
  3. “input.tpcs-search”: This is the CSS class for the search field.
  4. “button.tpcs-search”: This is the CSS class for the search button.
  5. “.tpcs-table-wrapper”: This is the main div that contains the search results, whether they are table results or no results.
  6. “.tpcs-default”: This is the div that contains the message displayed when there are no search results.
  7. “.tpcs-default-title”: This is the CSS class for the title of the no results message.
  8. “.tpcs-default-desc”: This is the CSS class for the description of the no results message.
  9. “.tpcs-table-wrapper”: This is the div that contains the table when there are search results.

For exampe, if you want to change the search button color add the following code:

button.tpcs-search {
    background-color: orange;
}

Customizing the CSS of your TablePress or CSTP plugin can help you create a more cohesive and visually appealing website. By following these steps, you can easily modify the CSS of your plugin and create a customized look and feel that matches your brand.

How can we help?