Overide theme styling for Tablepress button

Hi,

thanks for your post, and sorry for the trouble.

Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

Regards,
Tobias

Hi Tobias

No problem at all!

You can see this via the link below, on the final row of table #1 (called Theo Wanne Datta”

https://jazzfuel.com/best-saxophone-mouthpieces-for-jazz/

Please note: I’ve temporarily changed my site-wide (divi) button style to match very closely the AAWP buttons so you won’t notice a huge difference. But I would like to match this style in the Tablepress CSS and turn my theme button style back to what it was.

FYI this is the code I’m using in Tablepress options:

.tablepress-id-2 .column-4 a {
border: 0 solid #000000;
white-space: normal;
color: white;
font-size: 12px;
font-weight: normal;
text-align: center;
padding: 5px;
border-radius: 5px;
background-color: #3598DC;
}

Al the best

Matt

Hi Matt,

I just checked that page, and from what I can see, the only things from this CSS that is not being applied to your buttons is the border, right?
Or what do you see?

Regards,
Tobias

Hi Tobias,

That’s just because I’ve edited the overall website button style to match. I’ve turned it off now (but left the Tablepress CSS unchanged) so you can see.

Matt

Hi,

I’m still a bit confused. I see many buttons in that table that are light blue, with white font, and and that is green.
What exactly is not working as desired here?

Regards,
Tobias

Hi Tobias

The blue buttons are all inserted using AAWP codes such as [amazon fields=”B0003681OZE” value=”button”] and are fine.

The green button should be blue and match the others exactly. It’s inserted using a standard link like <a> href ="https://test.com/">Check price</a> and this is the one I thought could be controlled via the Tablepress plugin options css? Whatever I do with the options in that CSS (ie change the color hex), it doesn’t change anything in the Tablepress table

Thanks

Matt

• This reply was modified 4 years, 2 months ago by Steven Stern (sterndata).
• This reply was modified 4 years, 2 months ago by jazzfuel.

Hi,

ah, now I understand, thanks! ??

The reason for this is other CSS code on the site, probably from the theme. You’ll have to raise the priority of your CSS commands, by using the !important flag. For example, please try using

background-color: #3598dc !important;

instead of

background-color: #3598dc;

Regards,
Tobias

Perfect, that works great thanks.

One last thing (I’ll send another tip for the support) is there a way to specifiy a range of tables inside that first CSS line tablepress-id-2 .column-4 a without specifying all? At the moment I’m copying and pasting the code for each individual table I need it on.

Thanks

Matt

Hi Matt,

good to hear that this helped!

From what I can see, you are giving the button links the CSS class .button. This means that it should actually be sufficient to use

.tablepress .button {

as the first line and target all buttons in all tables by that.

Alternatively, you could target multiple tables like this:

.tablepress-id-2 .column-4 a,
.tablepress-id-7 .column-4 a,
.tablepress-id-14 .column-4 a,
.tablepress-id-27 .column-4 a {

Unfortunately, CSS doesn’t offer “ranges” but this is shorter than copying the full CSS code.

Regards,
Tobias