Edit panels styles (rookie question)
> @sircoko Can you provide some code examples of what you have and explain in more detail what you're confused about?Well, not code but I can explain my needs quite better with an image...In a few words, I want to go from here: https://imgur.com/a/3UseHB6to something like this: https://imgur.com/Z2B4DR4As you see, the...
Read full answer below βQuestion
Hi all, I would like to get some guidance about the code I should add/edit in order to change the way panels look. In general, I will need to change all the UI styles, but I want to start with blocks, layers, and style managers.
I want to be able to change the layout, colors, etc in order to make it fit my brand image.
I tried to read in the issues questions and either the docs. But I feel quite lost withing the names.
Could anyone help me with this journey?
Thanks in advance
Answers (3)
@sircoko Can you provide some code examples of what you have and explain in more detail what you're confused about?
Well, not code but I can explain my needs quite better with an image... In a few words, I want to go from here: https://imgur.com/a/3UseHB6
to something like this: https://imgur.com/Z2B4DR4
As you see, the elements on the panel are placed in a different layout, with different styles, etc.. That's what I need to change
@sircoko To style it this way I believe you'll need to override the default gjs style with your own css. See theming guide to help get you started.
For the title I believe you'll need to add a new trait type to make it a textarea. See the guide in the docs.
As far as the order of the traits & styles you can just set up a custom layout as shown in the getting started guide.
Hope this helps!
@sircoko Can you provide some code examples of what you have and explain in more detail what you're confused about?
@sircoko Can you provide some code examples of what you have and explain in more detail what you're confused about?
Well, not code but I can explain my needs quite better with an image... In a few words, I want to go from here: https://imgur.com/a/3UseHB6
to something like this: https://imgur.com/Z2B4DR4
As you see, the elements on the panel are placed in a different layout, with different styles, etc.. That's what I need to change
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1639
[Question]: Would it be possible to have change settings under style manager in a way that it has href when a link is created?
I'm using preset newsletter with built-in RTE (do not want to use ck editor like the demo) In order to make any text to link, i need to cli...
Issue #3600
[Question]: Event listener to visibility(eye) icon in the Layer Manager
I would like to listen to the eye icon in the layer manager from the editor, based on which, I need to write the custom styles. Is there an...
Issue #2097
New views question
Hello all, Is there is any simple way to add a new view right next to the style manager? I would like to create a new view that will show s...
Issue #2012
[question] how to add script for all widgets(like protectedCss)
I want to add some functions for all components accessible. when initialize editor, there is a option like protectedCss. Isn't there a way...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins βPremium plugins ship with support, regular updates, and production-ready features β save days of integration work.
Browse premium plugins βRelated tutorials
In-depth guides on the same topic.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor
CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline β both $69.
Tutorial
Embed GrapesJS in Your SaaS: A Weekend Guide
Embed GrapesJS in your SaaS and ship a white-label page builder over a weekend. Honest tradeoffs, real code, and the plugins that close the UX gap.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.