Custom Colors Using CSS Variables
C
Christopher Stetson
I have a convention of creating global CSS variables that use a primary brand hue to automatically generate a visually pleasing color palette. In the old color picker, I just used "var(--color-primary)" and it worked flawlessly. The new one does not allow me to do that, but I've found a workaround by creating custom fields for "var(--color)" and then using that in the color picker and declaring the variable value in the custom CSS. This is fine, but it's a huge pain in the @$$. I do like the new color picker interface, but it would be nice to still allow the css variables. (This is also a great case for global stylesheets)
Log In
S
Sales & Marketing
Merged in a post:
Add 'Custom CSS' option in Side Panel in Page Builder (important for Global and Universal Sections)
A
Alan Ristić
ISSUE
As we don't have 'Custom CSS' option on Element level (or sectino/column/row) in Website/Funnel Page Builder we must use Page-level CSS option.
Good for 1-page website/funnel, not good for universal/global/template sections where section/element expectation is to carry with them custom CSS.
Currently we must copy&paste custom CSS from page to page. Or use hack-ish solutions (like 'Custom Code Block', self-hosted files for global css, etc.)
There's a simple fix...
SOLUTION (MVP)
Add simple 'code box' to every Element in Page Builder's Side Panel. This would automatically carry over every CSS that's inside that element. No new functionallity necesarry for now. Ideal MVP, solves the problem instantly.
SOLUTION (ULTIMATE)
- copy Bricks Builder & their Custom CSS in Side Panel
- 'code box' supports Custom Values
- 'code box' supports default & our custom added Element Classes 'placeholders' (ie '%root_class%', '.my_custom_element_class')
- any change is reflected in Page Builder instantly (like current Page-level custom code)
RANT
Every page builder on the planet has Custom CSS option in Side Panel. Would LOVE to have this in GHL's Page Builder. Would save TONS of time.
Photo Viewer
View photos in a modal