Discuss

Using the Design Panel

On this page

Design panel provides you with visual tools to style your page content. You can design for different screen sizes, which creates the required styles and media queries for the selected device.


Adding Custom CSS Styles File

The design panel requires you to add a custom CSS file, where the styles are being written and saved. This can easily be done, by selecting your custom CSS file in the Project Settings.

Select the project settings icon, at the bottom left part of Wappler window:

Screenshot_2|690x421

There are two options for the custom CSS Style File - create new or select an existing one. We have already created one, so we select to include an existing CSS Style File:

Screenshot_3|690x421

Browse to it, select it and click Open:

Screenshot_4|690x421

Then click the Save button. The custom CSS Styles file is now selected for your project and all the styles made in the Design Panel will be saved there:

Screenshot_5|690x421

Now let's include it on our page. Open the Design Panel:

Screenshot_6|690x421

And click the Attach Style File button. This will include the custom CSS Styles File to the page you are working on. You can attach this Styles File to any page, where you need it:

Screenshot_7|690x421

Creating a Custom Class and Styling Content

In order to style an element on your page, first you need to create a CSS Class. That's really easy in Design Panel. Select the element which you want to style:

Screenshot_8|690x421

Click inside the Class Selector input:

Screenshot_9|690x421

Here you need to add your Custom CSS Class Name. We enter product-title and then we click the option saying - Create product-title. This will create the Custom CSS Class in your Stle File and will assign it to the selected element:

Screenshot_10|690x421

You can see the CSS Class applied to the selected element:

Screenshot_11|690x421

You can add some styling to your element, it will be added to the Custom CSS Class which we created and saved in your Styles File. We add some padding bottom:

Screenshot_12|690x421

Then we change the text color:

Screenshot_13|690x421

The changes are visible immediately in Design View! You can style the selected element as you need it.

Reusing CSS Classes

You can easily reuse any of the CSS Classes created in your Styles File. In order to apply an existing CSS Class, just select the element you want to apply it to:

Screenshot_14|690x421

Click inside the Class Selector input:

Screenshot_15|690x421

Then start typing the CSS Class name. You will see a list of CSS Classes that match what you are typing. Simply click the class which you need to uss, under Existing Class:

Screenshot_16|690x421

You can see the class has been successfully added to the element you selected:

Screenshot_17|690x421

Removing CSS Class From Elements

Removing CSS Classes applied to your elements is a matter of two clicks. Select the element, then click in the Class Selector input, after the applied Class:

Screenshot_18|690x421

Hit the backspace button and you are done, the class has been removed:

Screenshot_19|690x421

Styling Element States (Pseudo Classes)

You can style an element state, such as active, hovered, focused or visited. First select the element which you want to style, in our case that's our title with a CSS Class of product-title, then select a state. We select hovered:

Screenshot_20|690x421

Style the element as you need it to look for the selected state. In our case, we want to change its color to pink, when hovered:

Screenshot_21|690x421

You can see the results in Design View:

ezgif-1-da6c5d29df85|600x424

If you are curious, the code which is created by Design Panel can be found in the Custom CSS Styles File:

Screenshot_1|625x324

Responsive Styling

With the Design Panel you can apply different styles to your elements, depending on device sizes/media queries. By Default, for Bootstrap 4 based pages, the styles are applied for the selected devices size and up. You can select the device size in the top center part of the Wappler window:

Screenshot_2|690x421

Working in Full View (last icon) applies styles to all the devices sizes. We want to change the font size of our product-title for Tablets and bigger devices. So we select Tablet size:

Screenshot_3|690x421

Then we set the new size:

Screenshot_5|690x421

And we are done. For smaller screens the default size will be used:

Screenshot_1|690x421

This applies to all the properties you are customizing!

That's how easy it is to use the Design Panel in Wappler.