[Support request] create line between bullets

[Fernando]

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%;
}

[Shami]

Thanks.

And what about Table Of Content styling?

[Fernando]

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!

[Shami]

That worked great. Thanks.

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

See the image.

[Fernando]

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.

[Shami]

Thanks for the help.

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

Thanks.

[Fernando]

Try this:

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

[Shami]

Tried it. It’s looking weird.

Putting shadows around all blocks.

See the attached screenshot.

[Author]

Posts