create line between bullets

This topic has 22 replies, 4 voices, and was last updated 3 years, 2 months ago by Shami.

Viewing 15 posts - 1 through 15 (of 23 total)

1 2 →

Author

Posts
February 22, 2023 at 7:31 am #2542616

Shami

I want this type of bullet style

I’m already using this css for unordered lists:

.entry-content ul {
list-style: none !important;
margin-left: 0 !important;
}

.entry-content ul li:before {
content: ”;
display: inline-block;
position: relative;
width: 10px;
height: 10px;
margin: 0 15px 0 15px;
top: -5px;
border-radius: 10px;
background-color: #ccc;
}

Give me css to add lines between the bullets as shown in the image.

February 22, 2023 at 9:37 am #2542936

David
Staff
Customer Support

Hi there,

please share a link to the image so we can see what style you would like us to provide custom code for, and we will be very pleased to help you.

thanks in advance

February 22, 2023 at 11:06 am #2543043

Shami

https://imgur.com/a/kqnrDPk

I added this image earlier, not sure why it didn’t show earlier.

February 22, 2023 at 2:05 pm #2543236

Ying
Staff
Customer Support

how do you make the list wrap to the 2nd line？ Are you adding <br> element to the list?

Let me know!

February 22, 2023 at 7:56 pm #2543416

Shami

This is actually in Notion, I’m using Notion Boost plugin to add this connecting line between bullet dots.

So I have no idea how to do this.

All I want is simple line connecting the bullets.
The line appears when there are more than 1 line in any point.

Also take a look at scr.

February 22, 2023 at 8:27 pm #2543425

Fernando
Customer Support

Hi Shami,

For reference, can you provide the link to the list you currently have? We’ll try to see what we can do.

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

February 22, 2023 at 8:33 pm #2543430

Shami

I’m using this CSS:

.entry-content ul {
list-style: none !important;
margin-left: 0 !important;
}

.entry-content ul li:before {
content: ”;
display: inline-block;
position: relative;
width: 10px;
height: 10px;
margin: 0 15px 0 15px;
top: -5px;
border-radius: 10px;
background-color: #ccc;
}

The above only changes the color and size of bullets.

Rest is the same what Generatepress offers.

Check the link as you asked.

February 22, 2023 at 9:20 pm #2543450
Fernando
Customer Support
Can you try this code instead?:
```
.entry-content ul {
list-style: none !important;
margin-left: 0 !important;
}

.entry-content ul li:before {
content:'';
display: inline-block;
position: relative;
width: 10px;
height: 10px;
margin: 23px  15px 0 15px;
top: -5px;
border-radius: 10px;
background-color: #ccc;
}

.entry-content ul li{
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start
}

.entry-content ul:after{
    content:'';
    width: 1px;
    background-color: #ccc;
    position: absolute;
    left: 19px;
    top: 50%;
    transform:translateY(-50%);
    height: 88%;
}

.entry-content ul {
    position: relative;
}
```
February 22, 2023 at 10:21 pm #2543489

Shami

I’m noticing some irregularity in the bullet circles’ size.

Please check the review section at the bottom where pros and cons are written.

Link is attached.

February 22, 2023 at 10:56 pm #2543508

Fernando
Customer Support

I’m not noticing the “irregularity” from my end.

Can you take a screenshot of it?

Uploading Screenshots: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

February 22, 2023 at 11:03 pm #2543513

Shami

check link

February 22, 2023 at 11:16 pm #2543525
Fernando
Customer Support
I see. How about this one?:
```
.entry-content ul {
list-style: none !important;
margin-left: 0 !important;
}

.entry-content ul li {
    position: relative;
    margin-left: 40px;
}
.entry-content ul li::before {
content:'';
display: block;
position: absolute;
width: 12px;
height: 12px;
top: 50%;
transform:translateY(-50%);
left: -30px;
border-radius: 100%;
background-color: #ccc;
}

.entry-content ul::after{
    content:'';
    width: 1px;
    background-color: #ccc;
    position: absolute;
    left: 16px;
    top: 50%;
    transform:translateY(-50%);
    height: 100%;
}

.entry-content ul {
    position: relative;
}
```
February 22, 2023 at 11:24 pm #2543532

Shami

Thanks. Works perfectly.

How can I add this same style to my Table Of Contents?
I’m using LuckyWP Table of Contents plugin.

Also, this style is also interferring with Getaawp product box.
The description with bullet list is not working only there properly.

February 22, 2023 at 11:39 pm #2543545

Fernando
Customer Support

On what page is that? I’m trying to search for the text in your screenshot on the link you provided but it’s not appearing.

February 22, 2023 at 11:49 pm #2543559

Shami

check here
Author

Posts