Archived topic
create line between bullets
22 replies · Started by Shami on February 22, 2023
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.