Restyling Gutenberg table-how to stop all tables on site being affected?

Author Posts

Simon November 28, 2021 at 9:25 pm

Hi I really want to be able to style a Gutenberg table as a Pros and Cons table which I can then cut and paste to other posts and enter new data etc.
When I styled one table all the tables on my site were affected. Not surprising I guess but is there someway of limiting it to this particular table ie can it be given a specific identifier?
I also need to remove the CSS that I added. I could not find out how to delete the CSS and so had to uninstall the Microthemer plugin. So I also now need to delete the CSS code that I added. I could view it in a big window but selecting it and pressing delete did not delete it.
I would be really grateful for help, Thank you Simon

Sebastian November 28, 2021 at 10:04 pm

Hey Simon,

No problem at all. All of the styles you create with Microthemer are added to folders – you can manage those from the top left of the interface. Please see the folders video which explains how to delete things.

Styling is global by default, but you can ensure that your selectors only target a single page using the page-id modifier shown in this video. However, if you want to use the table on other pages, that option isn’t suitable. So instead, I recommend adding a class to the table in Gutenberg. You can do that from the Block options. Go to Advanced > Additional CSS class(es). Add something like this:

pros-and-cons

Then, when you select the element, check the list of selector suggestions in the top toolbar. You can search it to filter the options. So if you start typing “pros” the number of options will reduce.

The option you want if selecting the whole table would be:

.pros-and-cons

The option you want when selecting the table headings or cells will have that class at the beginning, followed by something else e.g.

.pros-and-cons td

Or

.pros-and-cons td:nth-of-type(1)

By choosing selectors that start with your custom class, you limit the scope of your CSS to only the tables you want. And if you add that table with the custom class to future posts, the styling will apply automatically.

I hope that helps. And that my advice on AppSumo for styling columns a particular way was easy enough to follow. Let me know if not!

Cheers,
Sebastian

P.S. you might find the history panel useful for rolling back sometimes 🙂

You must login or register to reply to this topic.