Custom Bullet List

Beaver Builder
1

I am new user of Beaver Builder Plugin, with very limited skillset in CSS.
Is there a guide for - How to Insert a “Custom Bullet List”?

2

Hi Sunil, what type of bullet list would you like to achieve? Do you have an example of style you are wanting?

This is a really great article on CSS tricks that gives you an idea on how to style your list “Bullet List”.

https://css-tricks.com/almanac/properties/l/list-style/

Codepen of list styling examples:
http://codepen.io/matt-west/pen/DCEzd

3

[Content Hidden]

4

Hey Sunil,

Welcome to the BB forums! :slight_smile:

Although there is an option to create landing pages, the BB Page Builder is not meant to be a landing page builder. All the features we have incorporated are those being used by common pages.

Re your script, you need to place the

ul.bullet li {
list-style-image:url('http://..................uploads/2015/10/check4.png');
}

part on your theme’s style.css file or any place for your CSS. If you’re using the BB theme, this can be placed directly under Theme Customizer > Code > CSS Code.

Hope this helps!

Ben

5

[Content Hidden]

6

Hey Sunil,

Yes, it can be done that way. But I actually thought you wanted it in a list tag. Should have offered you that solution instead. Anyway, glad you figured it out! Have fun with BB! :slight_smile:

Ben

7

Hey there, just in case someone else is looking for this, I did it this way:
In child theme CSS:


ul.tick li:before {    
    font-family: 'FontAwesome';
    content: '\f00c';
    margin:0 5px 0 -21px;
    color: #2fcc58;
}
ul.tick li {
  list-style-type: none;
}

In Website content:


<ul class="tick">
<li>List item 1</li>
<li>List item 2</li>
</ul>

Easy :slight_smile: Hope that helps!

8

Hey Simon,

Thanks for sharing! This is really awesome! :slight_smile:

KC