Docs for Custom CSS - Available classes / variables to edit

[willianjusten]

Hi there o/

I'll need to fully customize the visual of the editor to match my company's brand. I saw I can pass the customCSS property and it works, but I'd like to know if there's documentation on which classes/CSS variables should I edit or not.

Things like that works, but not sure if that's the best/only way to do it.

.blockbuilder-preview {
  background-color: yellow;
  background-image: none;
}

.blockbuilder-tools-panel .tab-content {
  background-color: red;
}

[brunolemos]

Hey @willianjusten!

We don't have the class names documented. You can do it the way you are doing, by inspecting the elements and writing selectors. Just make sure to not rely too much on specific tree structures (> div > div > p), use mainly the friendly class names.

In the future we plan to accept a theme object as an option, but for now customCSS is the way to go.

[willianjusten]

Great thanks! One thing that I saw from Beefree and would be really good to have, it's a Gist with those classes you already have for example, like this: https://gist.github.com/BeefreeSDK/44daee53546a9f48ecad7f52784efa55

But I can inspect and work out, that's fine, thanks! =)

[brunolemos]

Hi @willianjusten how's it going? Are you actively using the editor and custom css? We have a re-design coming up and some css selectors may change, let me know if you want early access! Thanks.

[willianjusten]

Oh hi @brunolemos ! Sorry, I just saw this message now! The customization went well so far, we're working with other backend/services, but now I'm a bit worried about those changes you're saying =o

Can you give me this early access so I can check what's going to break? Unlayer will be a critical point in our new product, so I really need to have everything working well!

Btw, you're one of our customers (Appcues) xD

[brunolemos]

@willianjusten oh nice that we are mutual customers! 💪

Sure, please pass this to your initialization options:

unlayer.init({
    version: 'latest', // default: 'stable'
    appearance: {
        theme: 'modern_light' // default: 'classic_light'
    }, 
});

We've just created this small article about it: https://docs.unlayer.com/page/introducing-new-unlayer-editor

Let me know your thoughts once trying it! Thanks.

[willianjusten]

Awesome, we'll add a story next iteration to update and I'll let you know if there's anything =)