Issue #428Opened October 17, 2017by asvine-p0 reactions

Change the background of the body

Question

Hello,

First of all, I want to thank you for this amazing project! I have few a questions regarding the editor, and more precisely the newsletter preset:

  • I want to add a button in the block manager which can give a quick access to change the background of the body (without going to the component tree).

  • Furthermore, how can I reorganize the commands buttons in the panel manager? (I want to change positons and delete some) -> I'm using the newsletter preset

  • I don't know if there is a way to resize the preset "button" block after changing its style. Or if I add a custom block "button", how can I make it resizable and add the href property to it?

Thanks for your support!

Answers (3)

GeczyOctober 17, 20170 reactions

Here's how I remove buttons

editor.Panels.getButton('views', 'open-sm').set('active', false)
asvine-pOctober 17, 20170 reactions

@Geczy, thanks but the set("active", boolean) method only switches the highlight mode of the button. Actually It doesn't remove it.

artfOctober 18, 20170 reactions

Hi @asvine-p

I want to add a button in the block manager which can give a quick access to change the background of the body (without going to the component tree).

Once the editor is loaded you can add/remove stuff with JS (your button will be binded with some handler)

Furthermore, how can I reorganize the commands buttons in the panel manager? (I want to change positons and delete some) -> I'm using the newsletter preset

Here is an example from the newsletter preset how I change/remove buttons https://github.com/artf/grapesjs-preset-newsletter/blob/master/src/buttons.js#L36-L37

I don't know if there is a way to resize the preset "button" block after changing its style. Or if I add a custom block "button", how can I make it resizable and add the href property to it?

You can't "change" (besides playing with paddings) its size because the built-in "Button" block is a link (inline element), but you can add your custom block and set, for example, in style "display: block" (or inline-block) this will allow editing it size

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.