Site logo

Archived topic

create line between bullets

22 replies · Started by Shami on February 22, 2023

Viewing posts 16–23 of 23

You're plugin has CSS making the previous code not to work in the same way. You can try adding this:

.entry-content .aawp ul li {
    position: relative;
    margin-left: 40px;
}

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

Thanks.

And what about Table Of Content styling?

Support for third-party plugin features is actually out of our scope of support.

Here's something you can try:

.lwptoc span.lwptoc_item_number {
    display: none;
}

.lwptoc .lwptoc_item{
    position:relative;
    margin-left: 30px;
}
.lwptoc .lwptoc_item::before {
    content:'';
display: block;
position: absolute;
width: 12px;
height: 12px;
top: 14px;
left: -30px;
border-radius: 100%;
background-color: #ccc;
}

.lwptoc .lwptoc_itemWrap{
    position: relative;
}

.lwptoc .lwptoc_itemWrap::before {
    content:'';
    width: 1px;
    background-color: #ccc;
    position: absolute;
    left: 5px;
    top: 50%;
    transform:translateY(-50%);
    height: 100%;
}

For further assistance regarding this, please reach out to the plugin developer. Thank you!

That worked great. Thanks.

But after adding this new code, previous bullets are a bit out of position.

See the image.

Replace the code here: https://generatepress.com/forums/topic/create-line-between-bullets/#post-2543525

with this:

.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: 17px;
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;
}

Adjust the 17px value to your liking.

Thanks for the help.

Please also give me the css to add border and drop shadow around table of contents.

Thanks.

Try this:

div#bsf_rt_marker {
    border: solid 1px #000;
    box-shadow: 0 0 12px #444444dd;
}

Tried it. It's looking weird.

Putting shadows around all blocks.

See the attached screenshot.

This archived topic is closed to new replies.