How to override CSS defaults in Wappler

Wappler General Need Help
1

As a long-time user of dreamweaver I entered the wappler world with curiosity.
I design small websites and do not use complex technical tools. In dreamweaver I use some DMX extensions such as Bootstrap, Lightbox, Responsive text, Html5 Slideshow.

The best way to learn is that of trial and error, but sometimes I do not succeed after hours of searching. So, in the coming days, questions from me will regularly appear on the forum.
Here comes the first question.
I want to make an ordered list with square bullits.
In Wappler I insert a List Group and a List Item . I see the text but the List-Item has no bullits.
I think maybe because list-group has a default display:flex property.

In mystyle.css I add the following line:
ul.list-group
{list-style-type: square; list-style-position: outside; display: block}
This has no effect in the list: no square bullits.

I do see bullits when I remove the class “list-group” in the ul but then the ul-structure disappear in the App Structure of Wappler.
A small problem with which I have been sweet for hours :slight_smile:

2

Be sure that your custom CSS file is after the bootstrap CSS file in your page head tags.

3

I am aware of that. It is the last line.
Other custom css does work.

4

I just read your post closer. :wink:

So, the list group disappearing from the App Connect Panel is the only issue? That would be because once altered it no longer fits the App Connect structure. It should still be listed and selectable in the DOM Tree Panel?

5

I would like to keep the Wappler list-group and overriding the default properties in mystyle.css. Not possible?

6

Should be no problem. Did you create your own CSS file on your own or use the Wappler CSS Designer panel?

https://wappler.io/docs/#Using-CSS-Designer

7

I created my own.
Now I try the Wappler CSS Designer and get this
image

8

Now I realise Wappler inserted UL as a list-group.
I changed manually the code to OL but nothing changed.

9

image
image

Even the background-color has not been adjusted.

10

Hello @vdweyer,
I think you are confusing the list-group component with the regular unoredered litsts.

The idea of the .list-group class is to style the regular ul like this and to get rid of the default ul>li structure styles. Your list-style property is not displayed as the Bootstrap 4 styles for .list-grup-item class makes them: display: block instead of the default: display:list-item;

Also - applying a background color to the ul won’t change anything as the Bootstrap 4 styles are applied to the child li items with the class of .list-group-item.

I think you just need to use regular ul>li structure and not the styled Bootstrap 4 list group component.

11

Use !important in the css to override the default rules in the css.

12

Thank you. I finally find the solution with your help. This is how i styled the list-group in my CSS

.list-group {
display:block;
}

.list-group-item{
display:list-item;
list-style-position: inside;
background-color:#e67676;
}

With this result:

Image3
Image3.gif1250Ă—334 10.5 KB

2 Likes