Design panel, CSS and general front end design in Wappler

[twinklemagoo]

I’ve been struggling to wrap my head around how Wappler deals with styling of elements and in general how one should approach front end design in Wappler. If anyone knows of a video or written tutorial on the subject I would be most grateful. The documentation is quite sparse when it comes to that part from what I can tell.

I don’t expect the design panel to have every possible css option included, but there are some things I would have expected to be readily available and don’t really understand how to approach.

One example would be to style an individual text element. From what I can tell CSS for text elements are set up in the theme manager, which allows for header and base. However, if I insert a text element on a page and would like to change font and weight on that one element, it doesn’t seem like the design panel will allow for this as the listed fonts there are not the same as listed in the theme manager and weights aren’t available at all. I suspect that perhaps the fonts listed in the design panel are derived from a CSS file somewhere? But I can’t find a way to set that up through the UI.

Another example I’ve been struggling with. If I create a text input it will come in with (what I think is) default bootstrap CSS styling. The design panel will allow me to override some parts of that for example the border. But the focus event seems to be locked down and not changeable. The grey border seen in the image below.

From the style tab, I can see that this seems to be derived from the form-control class that is attached to the form (of which the text input is a child). If I delete the form-control class attached to the input element the border will go away (as will all other styling of the element of course).

From here I can create my own class, remove the generic blue border and make it so it expands 100% again. And I found I have to set the width attribute by adding it to the CSS file, changing width to 100% in the design tab does nothing.

But now I run into the issue that no parameter changed in the design panel have any effect on the element. For example if I want to change the border to only have a bottom border, changing that in the design panel has no effect on the actual element.

Another thing I tried was to keep the form-control class attached to the element, and add a second class (which I believed would have a higher hierarchy) and remove the outline from there, however that had no effect either.

I’m thoroughly confused as to how front end design is all dealt with at this point. I found an old video from the stellar user Ben, but it was also very basic and only showed how to set a canonical background colour through the theme manager. Any videos or thorough documentation for Wappler front end would be highly appreciated

[mebeingken]

Maybe these basic CSS points will help.

As the name implies, styles “Cascade”. So in Wappler that will (generally) mean that bootstrap is applied first, then theme manager, then entries in the style.css file and then element specific styles.

So if you have set the theme manager primary color to green, but then have a heading that you set to Blue, then blue wins.

To maintain consistency, you want to avoid element specific styles. I generally set theme manager for everything I can, then create classes or tag styles in the style.css for everything else and use element specific styling for the exceptions and one-offs that need to be different.

The design panel allows you to create classes or you can create them in the style.css manually. I find the panel to be harder than manual entry, but I know the style attributes.

The beauty of Wappler can sometimes allow for bad practice, like all those style properties that can be done on each element—avoid that temptation.

[twinklemagoo]

Thank you @mebeingken I’m with you that far. What I’m struggling with is where things are actually changed.

Take the text input example above. I would love to style my text input in the theme manager and have that applied to all my text inputs. However, for the life of me I couldn’t find a way to do that in the theme manager, and it also seemed that even if I had been able to find a way to style my text inputs in the theme manager, the form-control class derived from the form element would be overriding it anyway?

If, in the theme manager, I open the theme preview, I get a very nice (love that in fact) layout with all the various elements. Not sure if I’m supposed to use the design panel here to style my elements? When I do however, in the screenshot below… I select the default input and crank up the border, but that actually controls the border on the invalid input. The thing is, I’m quite comfortable with CSS, as in just writing it, but I can’t figure out how Wappler deals with styling through the UI at all

[mebeingken]

@twinklemagoo

Take the text input example above. I would love to style my text input in the theme manager and have that applied to all my text inputs.

I would do that in style.css. I do that often and usually have to include exceptions so it is easily done there.

@twinklemagoo

even if I had been able to find a way to style my text inputs in the theme manager, the form-control class derived from the form element would be overriding it anyway

Have a look in the browser dev console to see why this is. I suspect it will just be the rules of css precedence including the !Important flag. If you Want you can override the form-control class by manually entering into style.css since you know your way around.

@twinklemagoo

When I do however, in the screenshot below

I literally NEVER use that panel. I find it cumbersome given how easy it is to manually write. Maybe others can chime in with help for that.

[Sorry_Duh]

@twinklemagoo

the form-control class derived from the form element would be overriding it anyway?

I could be wrong but something to check on this is that on the layout page of your project if you go into code view and take a look in between <head></head> tags which style sheet appears first Bootstrap or Style.css if style is above bootstrap try move it below as i don’t think form-control uses many if any !important on the css for the class, again could be wrong I also don’t really use the design panel I just type into styles.css so can’t comment on the design panel.

[twinklemagoo]

Thanks @mebeingken that’s all great info.

@mebeingken

I literally NEVER use that panel. I find it cumbersome given how easy it is to manually write. Maybe others can chime in with help for that.

@Sorry_Duh

I also don’t really use the design panel I just type into styles.css so can’t comment on the design panel.

I think this is also what I’m a little bit confused about. To me, using a visual builder such as Wappler, Webflow etc. Isn’t so much not knowing how to code something, but to not having to code it. But from what I gather, it does seem almost easier to just just have your own .css file and not bother with the theme builder and design tab at all? But then… isn’t that the point of a visual builder? So I have to assume I just don’t understand how to use the tool as intended for front end design work.

[Sorry_Duh]

I think a lot of it comes down to a users personal workflow preference, I personally am mainly using standard bootstrap classes which can be done without the design tab. But when I do want that extra bit of customisation and detail I find it quicker to type the css rather than use the design tab, another reason is the design tab only currently allows one class to be selected at a time and no pseudo cases like :hover etc.

There is a feature request for these to be supported

But a user with very minimal knowledge on css might prefer to use the design tab as it helps them with the css creation so I think its mainly preference.

[twinklemagoo]

Gotcha! And when you say you type the css, do you mean in the styles tab? What determines what I can change there? Some of the classes in there I can edit, and some I can’t (not just the bootstrap.min.css).

here for example, I’m not able to edit .style42, although it seem to be part of my style.css file. But when I open the style.css file in a different editor, the height and width attributes are not in there.

I can add attributes to the element.style. As seen here, and wappler will strike out them in .style42 accordingly. However the element is not affected by element.style, which I believe should override any css.

And here I’ve set the font size in the design panel to 12, and the text is displayed at twelve. I then open the styles tab and manually change the font size to 200, but the text is still displayed at 12.

Not going to lie here, if I had any hair left I would be pulling it out right now

[Sorry_Duh]

@twinklemagoo

do you mean in the styles tab?

No i only ever use this if i am apply a basic piece of css to a single element as this will apply the css directly onto the element (inline css)

I open the actual css file which is where your design tab styles are actually sent to, if you hit the blue page icon top left of Wappler and then you see Pages Assets Files

Select Files
From here I then open public > css > style.css (might vary location depending on setup)

As for not been able to edit the other classes etc in the styles tab I am pretty sure this is meant to be used for Inline css which is why you just have element style everything below that is just to show you other classes and styles that are also effecting that element

[twinklemagoo]

right, then I think we’re in the same place, do I need to do something for that to take effect?

This is .style42 directly in the style.css

This is .style42 as seen in the style tab.

So bottom border is set to 10 in the style.css but 1px in the style tab, and the element on the page is displayed with 1px bottom border. What would account for that discrepancy? I’m sure I’m missing something very obvious here.

[Sorry_Duh]

They should show as the same in the tab and the stylesheet try create a new input and just enter background-color: red; in the style tab and see if it becomes red

[twinklemagoo]

@Sorry_Duh

They should be the same in the tab and the stylesheet try create a new input and just enter background-color: red; in the style tab and see if it becomes red

yup that worked. I guess it’s possible that the other input is so messed up at this point from all random tests I’ve done on it haha.

So part of this is just me being dumb here. I added a pseudo class for the focus event, just to see… and turns out the input does go blue, so it certainly works. But the grey outline is still there, I just assumed that to be an outline… but perhaps it is not? I have no idea where that is coming from then.

[Sorry_Duh]

Looks like it might be a box-shadow

Try:
box-shadow: none;

[twinklemagoo]

yeah damn it… it was a shadow not an outline haha.

[twinklemagoo]

OK… thank you so much for bearing with me here @Sorry_Duh for now I think I will just do what you’re doing and work directy in the style.css

At some point I would like to understand Wappler design methodology better. But working directly in the .css file is so much easier at the moment.

[Sorry_Duh]

No worries and feel free to ask anymore questions if needed we all learned it one day so definitely don’t feel afraid to ask

Glad you have managed to get styles working