Using the CSS Styles Panel


#1

CSS Styles visual editor with instant preview functionality for rapid design.

Wappler has multiple ways to style your pages, from the App Structure properties panel using the built in pre-configured Bootstrap 4 styles, to the Design panel which gives you easier custom CSS style control, to the 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.

Below we will go through the Style panel basics to get you started.


 
Step 1: 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).


 
Step 2: 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.



 
Step 3: You can add an inline style by using either of the color pickers for color or background color.


 
Step 4: A graphical color picker appears.


 
Step 5: 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.


 
Step 6: You can see the changes you make immediately in the Design View. Disable or remove rules by clicking the checkbox(1) or the remove button(2) for the desired rule.


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


WapplerPrevious   WapplerNext



Wappler Official Documentation
Wappler - The Visual Web App Creator
Swiper - Responsive Options
API and JSON
automatically bumped #2

#3

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


#4

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.


#5

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.


#6

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


automatically bumped #14

automatically bumped #15