Individual list styles

Tips and Tricks
1

Hi,

I would like to know whether I can add styles to blocs of your own symbols as lists?
I would like to create lists with their own symbols or icons.
I wish something like this (without using your own CSS classes extra to create it):

There’s a possibility in blocs, or would be possible in the next release for it’s a function to install? Similar to the normal icons, I can insert.

Thanks

1 Like
2

There’s a very simple way to do this by cheating. Just have the list without any form of bullet, and use a character symbol as the first character of the text.

3

bric: HTML Widget

<ul>
  <li>please</li>
  <li>fix</li>
  <li>break</li>
  <li>points</li>
</ul>

menu> page> setting> Add Cord

<style>
ul {
  border: solid 2px skyblue;
  border-radius: 5px;
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
}

ul li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}

ul li:before {
  font-family: FontAwesome;
  content: "\f138";
  position: absolute;
  left : 1em;
  color: skyblue;
}</style>

then preview

2 Likes
4

THANKS A LOT

I have changed the ul li into ul.myClass li an then i call the list via <ul class=“myClass”> … otherwise also the menu has the icons before

5

This is great as I start to understand overwriting of the CSS in Blocs. When I tried it out it also affected the navigation menu with that style. I tried several ways to change the object name from li, but did not work.
How would one create a naming in the css and html widget to generate a style with a unique naming?
Thank you in advance

6

bric: HTML Widget

<ul class="yourclass">
  <li>please</li>
  <li>fix</li>
  <li>break</li>
  <li>points</li>
</ul>

menu> page> setting> Add Cord

<style>
ul.yourclass {
  border: solid 2px skyblue;
  border-radius: 5px;
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
}

ul.yourclass li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}

ul.yourclass li:before {
  font-family: FontAwesome;
  content: "\f138";
  position: absolute;
  left : 1em;
  color: skyblue;
}
</style>

then preview :smiley:

1 Like
7

Thank you so much & most helpful. Got it working, missed the li part and now I can go bananas on custom css :slight_smile: