Using the CSS Styles Panel

CSS Visual Editor

Wappler has multiple ways to style your pages. From the App Structure properties panel using the built in pre-configured Bootstrap styles, to the Design panel which gives you easier custom CSS style control. We also offer more granular adjustments of the Styles panel which will give you full control of any and all CSS style properties and attributes you may need.

Where to find the CSS Styles panel

In order to use the visual CSS Styles integrated in Wappler you just need to open it by clicking Styles (1) and then select the element you’d like to style (2).

How to add a new style property

You can add a new style property, edit an existing style or remove a property from the selected element. Choose whether to add the style inline from the element.style {} rule, or in an existing CSS file, or choose whether to attach a CSS file you already have, or create a new CSS file and set the rule within.

Add new propery

Adding styling

You can add an inline style by using either of the color pickers for color or background color. A graphical color picker appears.

Edit tools

Or you can click directly in the rule and enter a CSS property with it’s value. Autocomplete popups appear when you start typing to speed up your task.

type css styles

You can see the changes you make immediately in the Design View. Disable or remove rules by clicking the checkbox or the remove button for the desired rule.

Deleting css styles

Options panel

In Wappler’s Options panel you can setup options for the CSS styles editor. You can enable the CSS autoprefixer and select the browser versions you want to support. On save the required prefixes will be added automatically. Also you can enable CSS prettify on save.

5 Likes

CSS has come so far. Amazing to think it was originally intended for documents.

1 Like

being able to add/edit these css properties visually would be much easier and much faster.
is there a provision for it - if not, can it be made?

something like this, with support for setting separate values for each breakpoint.

1 Like

Hello @nshkrsh,
As i explained you in another topic, the Design Panel is work in progress, but soon it will be finished and all of the options will be available there.

You can already see the new design panel if you enable the experimental features in the options.

Also the bootstrap 4 property inspectors have similar visual editing controls for their properties

1 Like