Topic: Custom bullets points everywhere BUT NOT inside gb-container

Jim
August 20, 2023 at 8:52 am
Hello there, I recently bought a lifetime license of GP and this is my first topic on premium support.

I modified the default bullet points on my blog with this code
```
.entry-content ul li {
list-style-type: none;
font-weight: bold;
}

.entry-content li:before  {
    content: '\2611';
    color: #068B8B;
    font-size: 20px;
    padding-right: 20px;
    margin-left: -1em;
    font-weight: bold;
    display: inline-block;
   
}
```
But I want this code to apply everywhere except inside my PROS and CONS container. Basically its just a container with a grid.

This is how my PROS and CONS look like: https://ibb.co/t4xLT6z
I haven’t published any reviews yet so you cant see them live yet.

I tried :not(gb-container) but it doesnt seem to work.

Can you help?
Leo
August 20, 2023 at 9:11 am

Hi there,

I haven’t published any reviews yet so you cant see them live yet.

Can you publish a post with the issue so we can inspect the code and provide the needed tweaks?

Thanks!
Jim
August 20, 2023 at 9:15 am

Okay, here you go. I put the PROS and CONS on my contact page temporarily.

https://www.prodreaminvestor.com/contact/
Leo
August 20, 2023 at 9:21 am
You would just need to add an extra snippet to overwrite it:
```
.entry-content .gb-container li:before {
    content: "";
}
```
Jim
August 20, 2023 at 9:24 am
But then it shows no bullet points at all inside the PROS and CONS because of the following code:
```
.entry-content ul li {
list-style-type: none;
font-weight: bold;
}
```
This code hides the default bullet points btw.
Leo
August 20, 2023 at 9:33 am
Then just write another set to overwrite it?
```
.entry-content .gb-container ul li {
    list-style-type: disc;
}
```

Jim

August 20, 2023 at 9:39 am

Yeah that seems to work but isn’t there a simpler solution with the use of the :not?

So my solution would be something like that

.entry-content:not(.gb-container) ul li {
list-style-type: none;
font-weight: bold;
}

.entry-content:not(.gb-container) li:before  {
    content: '\2611';
    color: #068B8B;
    font-size: 20px;
    padding-right: 20px;
    margin-left: -1em;
    font-weight: bold;
    display: inline-block;
   
}

But it doesn’t seem to work…

Leo
August 20, 2023 at 9:42 am

I tried a couple but couldn’t find a working one either – maybe because of the pseudo selector.
Jim
August 20, 2023 at 9:51 am
Okay that will have to do for now but I have another issue.

So I put padding-right: 20px; to the custom bullet points cause the text was too close with the bullet points but as you can see in the image the padding works only for the first line…

Check here: https://ibb.co/wKpMgN3

There must be a way for the padding-right: 20px; to work for all the content inside a single bullet point… (Meaning all 3 lines). Because now it doesnt look symetrical and its ugly.

Do you have anything in mind?

This is the original code again with the padding 20px;
```
.entry-content li:before  {
    content: '\2611';
    color: #068B8B;
    font-size: 20px;
    padding-right: 20px;    <----------
    margin-left: -1em;
    font-weight: bold;
    display: inline-block;
   
}
```
Jim
August 20, 2023 at 10:36 am

I also noticed another problem.

Custom bullet points also showing up with numbered lists. They are mixed with the numbers as you can see in the following image.

See here: https://ibb.co/zQj7f2h

How can we exclude the custom bullet points from the numbered lists?

Here is the article with the numbered list for your reference: https://www.prodreaminvestor.com/proofreading-jobs-online-no-experience/#60_best_online_proofreading_jobs_no_experience_required
Jim
August 20, 2023 at 12:14 pm
Okay, I solved the problem with the numbered lists.

The only problem remaining is the following:

So I put padding-right: 20px; to the custom bullet points cause the text was too close with the bullet points but as you can see in the image the padding works only for the first line…

Check here: https://ibb.co/wKpMgN3

There must be a way for the padding-right: 20px; to work for all the content inside a single bullet point… (Meaning all 3 lines). Because now it doesn’t look symmetrical and it’s ugly.

Do you have anything in mind?

This is the original code again with the padding 20px;
```
.entry-content li:before  {
    content: '\2611';
    color: #068B8B;
    font-size: 20px;
    padding-right: 20px;    <----------
    margin-left: -1em;
    font-weight: bold;
    display: inline-block;
   
}
```
Leo
August 20, 2023 at 12:34 pm

I’ve tried a few and there isn’t a single solution that would work for all your lists as they have different structures.
Unfortunately, I’m not able to provide a full CSS solution that would work for all your cases here.

The best solution would be to use GB’s headline block to build the list manually:
https://docs.generateblocks.com/article/headline-overview/

Then you can use custom icons:
https://docs.generateblocks.com/article/icon-overview/

You should be able to replicate that appearance without any CSS involved which is the way to go with the block editor.
Jim
August 20, 2023 at 1:16 pm

Hmmm, I see. Thanbks for your help. I tried it and it works.

Is it better to host the svg icon on my website in case third-party sites get offline?

Or I should use svg url’s from third party websites?

What should be faster and not slowing my page loading times?
Fernando
August 20, 2023 at 5:25 pm

Hi Jim,

Most often than not, it’s better to host any resource locally.

So, yes, it should be faster if you host your SVGs locally on your site instead of grabbing them from a third-party website.

You can also test it out on a Staging site first, and compare which is faster to be sure.
Jim
August 20, 2023 at 9:26 pm

Okay thanks!
Jim
August 20, 2023 at 9:28 pm
Actually, I found another way to make custom bullet points and it works well, but I will need your help again to somehow exclude this code from gb-containers.
```
.entry-content ul li {
   list-style: none;
   background:url(https://www.prodreaminvestor.com/wp-content/uploads/2023/08/56765676547.png) no-repeat 0px 5px; 
   padding: 10px 0px 2px 48px;
   margin-left: -25px;
   background-size: 38px;
}
```
How can we make it so that these custom bullet points aren’t happening inside the PROS and CONS?

I want the default bullet points to show in there.

You can find the PROS and CONS on this page: https://www.prodreaminvestor.com/contact/

Viewing 16 posts - 1 through 16 (of 22 total)

1 2 →

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Custom bullets points everywhere BUT NOT inside gb-container