CSS for old bullet styles

Hello,

I have a large amount of CSS I have to load on each page, just so I can show the arrow head bullet points in my pages (you removed this CSS style from your default theme files some time ago). You can see the CSS below which you gave me.

Would it not be better if I just use an HTML symbol of my choosing for the bullet points, so I do not have to load all that CSS on each page load? Can you advise me on that? Are HTML symbols supported in all modern browsers?

CSS for bullet points

.unordered-list ol>li,
.order-list>li,
.order-list ol>li,
.entry-content>ul ol>li,
.entry-content>ol>li,
.entry-content>ol ol>li,
.header-banner-container>ul ol>li,
.header-banner-container>ol>li,
.header-banner-container>ol ol>li,
.comments-area .comment-body ol>li,
.woodmart-entry-content>ul ol>li,
.woodmart-entry-content>ol>li,
.woodmart-entry-content>ol ol>li,
.portfolio-single-content>ul ol>li,
.portfolio-single-content>ol>li,
.portfolio-single-content>ol ol>li,
.textwidget>ul:not(.menu) ol>li,
.textwidget>ol:not(.menu)>li,
.textwidget>ol:not(.menu) ol>li,
.wpb_text_column .wpb_wrapper>ul ol>li,
.wpb_text_column .wpb_wrapper>ol>li,
.wpb_text_column .wpb_wrapper>ol ol>li,
.elementor-text-editor>ul ol>li,
.elementor-text-editor>ol>li,
.elementor-text-editor>ol ol>li,
.vc_toggle_content>ul ol>li,
.vc_toggle_content>ol>li,
.vc_toggle_content>ol ol>li,
.woodmart-text-block>ul ol>li,
.woodmart-text-block>ol>li,
.woodmart-text-block>ol ol>li,
.woodmart-more-desc-inner>ul ol>li,
.woodmart-more-desc-inner>ol>li,
.woodmart-more-desc-inner>ol ol>li,
.woocommerce-product-details__short-description>ul ol>li,
.woocommerce-product-details__short-description>ol>li,
.woocommerce-product-details__short-description>ol ol>li,
.wc-tab-inner>div>ul ol>li,
.wc-tab-inner>div>ol>li,
.wc-tab-inner>div>ol ol>li,
.term-description>ul ol>li,
.term-description>ol>li,
.term-description>ol ol>li,
.woocommerce-terms-and-conditions>ul ol>li,
.woocommerce-terms-and-conditions>ol>li,
.woocommerce-terms-and-conditions>ol ol>li {
list-style: decimal;
}
.unordered-list ol>li:before,
.order-list>li:before,
.order-list ol>li:before,
.entry-content>ul ol>li:before,
.entry-content>ol>li:before,
.entry-content>ol ol>li:before,
.header-banner-container>ul ol>li:before,
.header-banner-container>ol>li:before,
.header-banner-container>ol ol>li:before,
.comments-area .comment-body ol>li:before,
.woodmart-entry-content>ul ol>li:before,
.woodmart-entry-content>ol>li:before,
.woodmart-entry-content>ol ol>li:before,
.portfolio-single-content>ul ol>li:before,
.portfolio-single-content>ol>li:before,
.portfolio-single-content>ol ol>li:before,
.textwidget>ul:not(.menu) ol>li:before,
.textwidget>ol:not(.menu)>li:before,
.textwidget>ol:not(.menu) ol>li:before,
.wpb_text_column .wpb_wrapper>ul ol>li:before,
.wpb_text_column .wpb_wrapper>ol>li:before,
.wpb_text_column .wpb_wrapper>ol ol>li:before,
.elementor-text-editor>ul ol>li:before,
.elementor-text-editor>ol>li:before,
.elementor-text-editor>ol ol>li:before,
.vc_toggle_content>ul ol>li:before,
.vc_toggle_content>ol>li:before,
.vc_toggle_content>ol ol>li:before,
.woodmart-text-block>ul ol>li:before,
.woodmart-text-block>ol>li:before,
.woodmart-text-block>ol ol>li:before,
.woodmart-more-desc-inner>ul ol>li:before,
.woodmart-more-desc-inner>ol>li:before,
.woodmart-more-desc-inner>ol ol>li:before,
.woocommerce-product-details__short-description>ul ol>li:before,
.woocommerce-product-details__short-description>ol>li:before,
.woocommerce-product-details__short-description>ol ol>li:before,
.wc-tab-inner>div>ul ol>li:before,
.wc-tab-inner>div>ol>li:before,
.wc-tab-inner>div>ol ol>li:before,
.term-description>ul ol>li:before,
.term-description>ol>li:before,
.term-description>ol ol>li:before,
.woocommerce-terms-and-conditions>ul ol>li:before,
.woocommerce-terms-and-conditions>ol>li:before,
.woocommerce-terms-and-conditions>ol ol>li:before {
content: none;
}
.unordered-list>li,
.unordered-list ul>li,
.order-list ul>li,
.entry-content>ul>li,
.entry-content>ul ul>li,
.entry-content>ol ul>li,
.header-banner-container>ul>li,
.header-banner-container>ul ul>li,
.header-banner-container>ol ul>li,
.comments-area .comment-body ul>li,
.woodmart-entry-content>ul>li,
.woodmart-entry-content>ul ul>li,
.woodmart-entry-content>ol ul>li,
.portfolio-single-content>ul>li,
.portfolio-single-content>ul ul>li,
.portfolio-single-content>ol ul>li,
.textwidget>ul:not(.menu)>li,
.textwidget>ul:not(.menu) ul>li,
.textwidget>ol:not(.menu) ul>li,
.wpb_text_column .wpb_wrapper>ul>li,
.wpb_text_column .wpb_wrapper>ul ul>li,
.wpb_text_column .wpb_wrapper>ol ul>li,
.elementor-text-editor>ul>li,
.elementor-text-editor>ul ul>li,
.elementor-text-editor>ol ul>li,
.vc_toggle_content>ul>li,
.vc_toggle_content>ul ul>li,
.vc_toggle_content>ol ul>li,
.woodmart-text-block>ul>li,
.woodmart-text-block>ul ul>li,
.woodmart-text-block>ol ul>li,
.woodmart-more-desc-inner>ul>li,
.woodmart-more-desc-inner>ul ul>li,
.woodmart-more-desc-inner>ol ul>li,
.woocommerce-product-details__short-description>ul>li,
.woocommerce-product-details__short-description>ul ul>li,
.woocommerce-product-details__short-description>ol ul>li,
.wc-tab-inner>div>ul>li,
.wc-tab-inner>div>ul ul>li,
.wc-tab-inner>div>ol ul>li,
.term-description>ul>li,
.term-description>ul ul>li,
.term-description>ol ul>li,
.woocommerce-terms-and-conditions>ul>li,
.woocommerce-terms-and-conditions>ul ul>li,
.woocommerce-terms-and-conditions>ol ul>li {
position: relative;
list-style: none;
}
.unordered-list>li:before,
.unordered-list ul>li:before,
.order-list ul>li:before,
.entry-content>ul>li:before,
.entry-content>ul ul>li:before,
.entry-content>ol ul>li:before,
.header-banner-container>ul>li:before,
.header-banner-container>ul ul>li:before,
.header-banner-container>ol ul>li:before,
.comments-area .comment-body ul>li:before,
.woodmart-entry-content>ul>li:before,
.woodmart-entry-content>ul ul>li:before,
.woodmart-entry-content>ol ul>li:before,
.portfolio-single-content>ul>li:before,
.portfolio-single-content>ul ul>li:before,
.portfolio-single-content>ol ul>li:before,
.textwidget>ul:not(.menu)>li:before,
.textwidget>ul:not(.menu) ul>li:before,
.textwidget>ol:not(.menu) ul>li:before,
.wpb_text_column .wpb_wrapper>ul>li:before,
.wpb_text_column .wpb_wrapper>ul ul>li:before,
.wpb_text_column .wpb_wrapper>ol ul>li:before,
.elementor-text-editor>ul>li:before,
.elementor-text-editor>ul ul>li:before,
.elementor-text-editor>ol ul>li:before,
.vc_toggle_content>ul>li:before,
.vc_toggle_content>ul ul>li:before,
.vc_toggle_content>ol ul>li:before,
.woodmart-text-block>ul>li:before,
.woodmart-text-block>ul ul>li:before,
.woodmart-text-block>ol ul>li:before,
.woodmart-more-desc-inner>ul>li:before,
.woodmart-more-desc-inner>ul ul>li:before,
.woodmart-more-desc-inner>ol ul>li:before,
.woocommerce-product-details__short-description>ul>li:before,
.woocommerce-product-details__short-description>ul ul>li:before,
.woocommerce-product-details__short-description>ol ul>li:before,
.wc-tab-inner>div>ul>li:before,
.wc-tab-inner>div>ul ul>li:before,
.wc-tab-inner>div>ol ul>li:before,
.term-description>ul>li:before,
.term-description>ul ul>li:before,
.term-description>ol ul>li:before,
.woocommerce-terms-and-conditions>ul>li:before,
.woocommerce-terms-and-conditions>ul ul>li:before,
.woocommerce-terms-and-conditions>ol ul>li:before {
position: absolute;
top: 6px;
left: -20px;
font-size: 8px;
content: “\f113”;
font-family: “woodmart-font”;
}

[ToriTori38]

Using an unstyled HTML symbol is maybe not the best option, as it does not have the spacing around it which the bullet points have. I only use these bullet points in my text block on my product pages. Is there any way I can slim this CSS down you gave me, so it only works in the text block?

I tried this but id does not work:

/* Bullet points */
.wpb_text_column .wpb_wrapper>ul>li {
position: absolute;
top: 6px;
left: -20px;
font-size: 8px;
content: “\f113”;
font-family: “woodmart-font”;
}

• This reply was modified 3 years, 4 months ago by ToriTori38.

Hello,

Sorry for the delay.

You can assign the class to the text element where you are using the list, then give us the page URL with such list, we will give you short CSS for this case and all the lists in such text element would have proper list-style and you will not need to use all those CSS.

At the same time, all the lists in other elements would be the default.

If you have any questions please feel free to contact us.

Best Regards

Thanks Elise. In the private content you can see a single product page where we use these bullet points. It is just an html block and the “text block” element where we require these arrow head bullet points. If you can give me some shortened CSS for this that would be great. The CSS would need to work for any html block which has bullet points in a “text block”.

Hello,

Please try this code:

.wpb_text_column ul li:before{
    position: absolute;
    top: 6px;
    left: -20px;
    font-size: 8px;
    content: "\f113";
    font-family: "woodmart-font";
}

If it does not work, insert the credentials into the Private content below the message area.

Best Regards

Hi Elise,

No that did not work. Below is access to our staging site where you can look:

Hello,

Please, provide your site admin access (insert the site credentials into the Private content block under the message area).

Best Regards

Hello Elise,

Please check again. I did provide site access in the private area. Did you not see the link I gave you?

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.wpb_text_column .wpb_wrapper > ul ol > li,
.wpb_text_column .wpb_wrapper > ol > li,
.wpb_text_column .wpb_wrapper > ol ol > li {
	list-style: decimal;
}

.wpb_text_column .wpb_wrapper > ul ol > li:before,
.wpb_text_column .wpb_wrapper > ol > li:before,
.wpb_text_column .wpb_wrapper > ol ol > li:before {
	content: none;
}

.wpb_text_column .wpb_wrapper >ul > li,
.wpb_text_column .wpb_wrapper >ul ul > li,
.wpb_text_column .wpb_wrapper >ol ul > li {
	position: relative;
	list-style: none;
}

.wpb_text_column .wpb_wrapper > ul > li:before,
.wpb_text_column .wpb_wrapper > ul ul > li:before,
.wpb_text_column .wpb_wrapper > ol ul > li:before {
	position: absolute;
	top: 6px;
	left: -20px;
	font-size: 8px;
	content: "\f113";
	font-family: "woodmart-font";
}

PLease remove the code I provided before.

Best Regards

Hi Elise,

That’s perfect many thanks.

[Author]

Posts