CSS Help on my Flarum

[Mike Jones]

SO I really like the details plugin in and use it in a lot of my posts on my own flarum. To add drop downs for extra information or well placed affiliate links

I have some custom CSS so far:

details {
 
    padding: .8em !important;
    background: #353535;
    border-radius: 20px;
    margin-bottom: .8em;
}
 
summary::-webkit-details-marker {display: none; }
 
details summary::before { 
    content:"►"; 
    padding: .7em;
}
 
details[open] summary::before { 
    content:"▼"; 
    padding: .7em;
}

I am struggling with the CSS though and couldn’t figure one of my issues out while using inspect element on Google Chrome. When I open the details I get this line on the left side and cant figure out how to remove it:

If you need to see it live, you can see the example from the picture above here.

[phenomlab]

@mike-jones Hey Mike - this CSS will fix that

details>div {
    border-left: none;
}

Before

After

[Mike Jones]

@phenomlab said in CSS Help on my Flarum:

details>div {
border-left: none;
}

Si I just added that and cleared my flarum and recache cache and it didn’t go away. Not sure what I am doing wrong.

[Mike Jones]

So maybe not the right answer but I had to add

!important

to get it to work…

[phenomlab]

@mike-jones Yes, you’ll typically see this type of behaviour if there is another style that has higher priority in the sense that yours will be overridden. Using !important will override the higher preference, but should be used sparingly rather than everywhere.