where to put custom CSS

Beaver Builder
1

Sorry if this has already been answered but I have search the forums before posting. I can see that you can specify an ID or class on each element for custom CSS, what I’m not sure is what CSS file in wordpress to go and append the CSS to. specifically I want to remove bullet points from the pricing table with list-style-type: none;

2

Hi James,
there are various places where you can put your CSS classes.
If you’re using the Beaver Builder Theme, the most immediate option is to go to
Appearence > Customize > Code > CSS Code and write your styles there.

Another option that works with almost, in not all WP themes, and allows even more than you’re asking is to use http://codex.wordpress.org/Child_Themes , for a quick start you can download the Beaver Builder Child Theme from your BB account.

Regards,
Alessandro

3

should additions to /theme/style.css be recognised? because I tried this first but was unable to remove the bullets from the pricing table. Maybe by CSS was lousy but I tried

ul.pricetable {list-style-type: none;}

and then set pricetable as the class on the price table module.

4

by the way I am not using the beaver builder theme, I only purchased the basic license as I have my own theme

5

James, can you share an URL with your page?

6

[Content Hidden]

7

Here it is:

.fl-pricing-table-features > li {
    list-style-type: none;
}

this selector is general for any pricing table, if you need to be more specific add an ID to the container row and prefix the CSS selector with it, like

#mypricingtableID .fl-pricing-table-features > li { …

One more hint, http://getfirebug.com/ :slight_smile:

Regards,
Alessandro

8

thanks for your help. I went ahead and added the below into my style.css, and set “ptables” at the ID on the module but it has not had any effect. I also tried it the first way without an ID to no avail. Any ideas why that hasn’t solved it?

#ptables.fl-pricing-table-features > li {
list-style-type: none;
}

I did find the line below in my style.css, but if we’re setting a different ID on the beaver module it shouldn’t be an issue, right?

#content ul { list-style: disc; margin-left:20px;}

9

James, you miss a space after the #ptables identifier, it makes a big difference as you can read your selector as follows:
find all the “li” elements that are direct childs of an element that has both the “ptables” ID and the “fl-pricing-table-features” class

add the missing space and you can read the selector as:
find all the “li” elements that are direct childs of an element with class “fl-pricing-table-features” which is itself a direct or indirect child of an element with ID “ptables”

To go further http://www.w3schools.com/css/ seems a good resource.

Regards,
Alessandro

10

James, just to add to Alessandro’s answer: For development purposes you can append the !important to the rule just to see whether it works or not. This is not recommended for production. As Alessandro said you must find the selector with the right specificity to overwrite the existing rule. This is sometimes challenging but for me the fun part of CSS.

Alessandro’s source recommendation is mandatory and if you like video tutorials look at LevelUpTuts here: LevelUpTuts CSS. Scott explains specificity as well.

Regards,
Leo