Closed anlumo closed 1 year ago
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;
}
`,
})
but in output shows with blue outlined
how to set all the blue to red? @artf
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;
}
`,
})
Posted Free plugin for set colors
Borders: https://gjs.market/products/borders-color-around-selected-component
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.