Is there a way to have custom style settings?

Technical Questions CMS
1

First, I can’t seem to get any of the examples on Extending Builder.io with Plugins - Builder.io to work. Is this stuff deprecated or something?


Builder.register('editor.settings', {
  hideAnimateTab: true,
  hideDataTab: true,
  hideHeatMap: true,
  hideInsertTab: true,
  hideMainTabs: true,
  hideOptionsTab: true,
  hidePageUrlEditor: true,
  hideStyleTab: true,
  hideTargeting: true,
  hideToolbar: true
})

Second, is there a way to register custom styles? Or global / shared options across all components in some way?

2

Hey @OutThisLife - these options should work, but note they have to run in the context of a plugin (not, for example, your site code). For instance try running the example plugin code locally and running Builder.register(...) from there

Re: custom styles, there are a couple approaches here. One is to create a global stylesheet for your site and use those classes in Builder layers (from the style tab enter the class names for “custom class name” and you can save those layers as templates to reuse). Then when the global CSS changes, all Builder layers using those styles will update.

Alternatively, you could use a component library like ThemeUI and register those components in Builder as well.

3

Can you explain more how to create a global custom style sheet all within Builder (the first option you described)? I see in each page the DATA » CSS/JS option but it doesn’t carry over to other pages. Would love to edit one of these that affects all pages. Maybe I’m missing it somewhere.

1 Like
4

@pageperfect you can see more about using global styles here: How do I use my site's css and classes on elements in Builder pages?

Since Builder will integrate into your existing web page the global styles applied on that page should trickle down to anything coming from builder. Hopefully that helps!