CSS Help for Flarum Details Plugin

mikejones

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 [Login to see the link].

Katos

Hi mikejones thanks for posting here for assistance.
I am not at a laptop at the moment, but I’ll review the CSS for you. I’d suspect that this is a border-radius that needs overriding

mikejones

Katos Looks like it was left border. I had some trouble because it wouldn't work unless I added the important tag to the CSS...

Katos

mikejones glad you sorted it.
The important tag is something that we’re aware of as a core issue; and something that we’re looking to rectify as we push forward with a proper theming / templating structure for Flarum

010101

mikejones Ah yes. So many times I have gotten frustrated that a CSS change isn't working. Only to find out I just needed to add !important.

Katos

010101 very true.
So you’re both aware, our theming and templating now has a dedicated task force, and is something we’re working on