I am soooo confused. I have a website where I want to use some custom CSS to control the looks & layout of a table – but only for the ONE PAGE I am working on. Which means, it makes NO SENSE to put my custom CSS in an area for the entire site.
On the page, I have 2 rows. The table is on the 2nd row, with the SiteOrigin Editor placed on the row.
I have tried to put
tr, td {border-collapse: collapse; border: 1px solid black;}
td {style=width: 33.3333%; vertical-align: top;}In both :
Row Styles / Attributes / CSS declarations
Widget Styles / Attributes / CSS declarations
but the code simply gets ignored.
Fwiw, on another site (which uses Elementor), I simply put the normal CSS mods for a page in and poof, they work. But I don’t want to have to convert this whole site over to Elementor if I don’t have to.
Hi Chris
Thanks for posting your question.
The code pasted above contains two CSS rules. CSS rules can only be inserted at AppearanceCustom CSS or CustomizeAdditional CSS.
The row and widget fields only accept CSS declarations.
A CSS declaration is made up a property and a value, for example font-size: 20px. font-size is the property and 20px is the value.
If you’d like to target only one page with your CSS rules you’ll need to prefix each rule with a custom class name or with the page ID. Find out more here Post: Unique Page Styling with Custom CSS Body Classes.
Well Andrew, that doesn’t really answer the question.
I specifically said I did not want to put it in a global CSS modification location. I do not want to modify the table css for every page on my website – only this SINGLE PAGE.
If siteorigin editor can’t do it, maybe I should migrate my site to Elementor?
Hi Chris
Thanks for your reply. In my last paragraph above, I replied to the page-targeting aspect of your question. Please see the guide here Post: Unique Page Styling with Custom CSS Body Classes.