CSS Question

Tagged: CSS

This topic has 7 replies, 3 voices, and was last updated 5 years, 8 months ago by mila_support.

Viewing 8 posts - 1 through 8 (of 8 total)

Author
Posts
July 5, 2017 at 23:07 #14838
mail491786
Participant
Hi,
I’m hoping you can assist me with the following.
We are currently using the following CSS in our Custom CSS file to style all TablePress tables:
```
.tablepress thead th,
.tablepress tfoot th {
	background-color: #43a6df;
	color: #fff;
}

.tablepress-center {
	width: auto !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
```
I changed ‘tablepress’ to ‘supsystic-table’ to achieve the same effect, but it get’s overwritten by your default CSS so it doesn’t show a blue top row with white letters.
What can I do to change this?
Thanks,
Rob
July 6, 2017 at 14:18 #14844

mila_support
Member
Hi @mail491786
Please provide the link with Data Tables and I will try to answer what’s wrong.
July 7, 2017 at 08:26 #14850

mail491786
Participant
Thank you for your reply. Please see: https://www.pokemonunited.nl/sun-moon/berries/
July 7, 2017 at 16:15 #14854
mila_support
Member
Hello @mail491786
Thank you. Your issue was redirected to our developer.
And that’s an answer-
Each of data tables in html has a unique ID. So that you can specify your styles for each table. I wrote the code for the table with ID = 1. (you need to change it to your table ID)
```
#supsystic-table-1 thead th, #supsystic-table-1 tfoot th {
    background: #43a6df;
    color: #fff !important;
}
```
If you want to use that style for all your Data Tables you need to add these code:
```
.supsystic-table thead th, .supsystic-table tfoot th {
    background: #43a6df;
    color: #fff !important;
}
```
(The reason why your code did not work is in conflict with your theme – the theme styles overlapped table styles)
And about next part of your code:
```
.tablepress-center {
	width: auto !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
```
– Your table has a lot of content – so it still will be stretched to the full width of the page. What exactly do you need of table size?
July 8, 2017 at 12:47 #14855

mail491786
Participant
Thank you for the CSS, it was exactly what I needed!
I removed the center part of the code, because it is not needed with your wonderful plugin. It does it automatically.
July 10, 2017 at 10:18 #14859

mila_support
Member
Hello, @mail491786
No problems, it’s always a big pleasure to help our users.
Also, if you want, you can help us to make our solution better for you by leaving a good review on WordPress about our plugin –
https://wordpress.org/support/plugin/data-tables-generator-by-supsystic/reviews/
July 12, 2017 at 01:16 #14881

wil.korsia
Participant
Hi,
I would like to make the whole background transparent to have only the text and the borders. How can I do?
July 12, 2017 at 17:20 #14884
mila_support
Member
Hello, @wil.korsia
In order to make the whole table background transparent you need to add this code into CSS editor (CSS tab of Data Tables plugin) –
```
#supsystic-table-1 tbody tr {
    background-color: transparent !important;
}
```
where “supsystic-table-1” you need to change to your table ID (instead of 1).
Author
Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

CSS Question

Supsystic