BUG: gjs-selected Style is Hardcoded

This definition:

https://github.com/artf/grapesjs/blob/88249c38577852dc3c42047356a70a12066ee6ca/src/canvas/view/FrameView.js#L303-L306

is always appended to the frame. It contains the color definition for selected elements (that blue outline). This color cannot be changed, because there’s an !important here. Since this is appended to the body, adding a stylesheet in the header does not override it, even when I use !important there as well.

For my use case, the critical issue is that I want to be able to print the document created in grapesjs, but printouts should not contain the selection outline. I can write @media print { .gjs-selected { outline: none !important; } }, but that won’t do anything since it’s overridden by this hardcoded css definition.

Also, being able to change the color to fit the page’s corporate identity would be good.

[artf]

Hi @anlumo you’re right, unfortunately, component status styles are rendered inside iframes. I’ve tried to put them outside by introducing this option but that doesn’t handle multiple selections yet. So, at the moment, the only way to handle them properly is to use this option:

grapesjs.init({
  // ...
  canvasCss: `
        .gjs-selected {
          outline: 3px solid red !important;
        }
   `,
})

[filipecheverrya]

Hi @mingxin-yang i belive that you have to follow the same rule that @artf said. But using the corresponding classes

grapesjs.init({
  // ...
  canvasCss: `
    .gjs-tools .gjs-badge { /* for the label */
      background-color: red;
    }
    .gjs-toolbar { /* for the toolbar */
      background-color: red;
    }
  `,
})