Hard time understanding how to use the Style panel

I can’t seem to change any of the elements css on the page the panel shows the elements css but no matter where i look or what I do I can’t understand how to make any changes.

I have also attached my own new style sheet and can’t add to that file either.

What am I doing wrong, this should not be this difficult.I have tried to follow the How to use style panel but that never seem to help either

22

I’m no expert, but will try to start to give back to this community.

I’ve not had luck editing the Styles panel of Wappler either but will usually just edit things directly in my styles.css file that I’ve created and attached for the project.

A couple of times I’ve had the problem you describe where you can’t make any changes to the file, this usually happens after I’ve had the program open for a while (maybe over a day+ etc). I just close Wappler, quit the app from my navigation bar (windows user) and restart the program

That will usually fix it, and then I can edit the css file manually as per normal.

Hope this helps.

Maybe you can check the usage guide:

2 Likes

Have reviewed the Using the CSS Styles Panel several times. I am looking to change some pf the CSS for the header- Menus - column or Containers. Now have any luck there with the templates found within Wappler.

Had to restart Wappler as suggested by someone else and can now code the custom CSS page. But what I don’t see is a way to visually work with CSS coding like in Dreamweaver (i know different product but it did set standards on doing things) Right now the only way I can rapidly create a css file is to do it in DW.

Will the Design Panel be enhanced any further soon ?

Usually the design panel can cover all the basic needs for css styling all visually.

The styles panel is indeed only used for very specific custom css coding.

Are you missing something in the design panel?

I can’t create anything in a custom css page. I must manually create it all. Just assumed Wappler would allow me to create css coding much like dreamweaver does or did.

Hello @mikeRM
What do you mean by:

What do you call a 'css page' ? What do you need to create manually?
Are you sure you checked the docs explaining how to use the Design Panel?

Wappler Documentation - Using the Design Panel

Can you please be a little more detailed what are you trying to do and what the issue is?

I have spent the last 4-5 days reading and rereading the design panel docs.
By css page I mean one saved as such - sample.css

meant styles panel

I have a feeling that your are doing something totally wrong. Can you:

Also which part of the Design Panel docs is unclear for you?

I am now confused, are we talking about the same thing?
Design Panel or Styles Panel? The question above is still valid.

I would like to change the background color for the header area, I would like to change the look of a column. I would like the available css styles to show up to add or adjust. I can’t even see what styles are within a style sheet attached much less apply them to anything.

So, which part of the docs which George posted is not working?

Right now I’ll have to take a completed page and format the styles in Dreamweaver as I don’t have time to play with this within wappler.

I need to learn how to work with Dynamic data in wappler which is more important for me at this time.

nothing as far as I can tell from a layout perspective

Sorry but your explanation tells us nothing.
“It doesn’t work” doesn’t really help us understand what your issue is.

Which step of the documentation George linked to is not working?

You can try explaining it like: "I am trying to add a background color, but it’s not possible to select a color. I am doing this and that … "

I suspect you would be better off ignoring the Style panel for the moment.

To change the background colour, you might also want to ignore the Design panel - at least, first see if what you want is available without creating additional/superfluous styles. You mentioned changing the background colour - if the colour you want is one of the Bootstrap theme colours (and there are a number of themes available, and an infinite number which could be created), click on the object and select the colour:

If you want to choose a different colour or want more options, use the Display panel: click on the object and select the colour/options you want:

image

This style will be created in the stylesheet you’ve defined.

Edit: I should have included this part of the Design panel:

1 Like

I agree with Tom on this Mike, i literally find personal happiness in trying to use as many framework preconfigured styles as possible, and use the styles panel as an absolute last resort whenever I can.

The way the Wappler panels are laid out makes it pretty easy.

App Structure panel gives you access to most of the allowed properties of whatever element you have selected (contextual), and adds the appropriate class for whatever framework you are using.

The Design panel gives you access to most custom CSS you may need in a great user interface to make it easier, and as Tom said, use the “create new class” or “select existing class” before you make changes in this panel, or it will make very generic class names for you, that are difficult to track down later on.

Only if after using both of these, you still do not get what you are looking for then,
The Styles panel gives you very fine granular control where you absolutely need it, and if you have already created a new class in the Design panel, then you have access to that classes properties from within here, otherwise if you jumped directly to the styles panel before making a class, you would be limited to creating non reusable inline styles on every element, which is not ideal in a real world website.

I hope this helps your Dreamweaver migration to Wappler go a little smoother.

1 Like

I am in the same point. I really appreciate the css design panel but in my opinion need to be more flexible. Or have a advanced and basic css that allow you to select your own colors and font size not only what comes in the theme css. Maybe I don’t find the way to use properly. At the end I decide to make all the css over Dreamweaver and import files to wappler but that is not the point.