Issue #2950πŸ’¬ AnsweredOpened August 10, 2020by sircoko1 reactions

Edit panels styles (rookie question)

Quick answerby Joshmamroud❀ 1

> @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)

Joshmamroudβ€’ August 10, 2020

@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!

Joshmamroudβ€’ August 10, 2020

@sircoko Can you provide some code examples of what you have and explain in more detail what you're confused about?

sircokoβ€’ August 10, 2020

@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.

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...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins β†’
Premium option

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.

All tutorials β†’

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.