Skip to content

CSS Help on my Flarum

Solved Customisation
  • 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 😃

    FPEyph9.png

    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:

    sdHCCsQ.png

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

  • 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 😃

    FPEyph9.png

    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:

    sdHCCsQ.png

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

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

    details>div {
        border-left: none;
    }
    

    Before

    f5d3f045-d571-4cb5-b51c-e8d2f0264573-image.png

    After

    abf773d1-0b39-4a00-b02e-e2fa3f822e14-image.png

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

    details>div {
        border-left: none;
    }
    

    Before

    f5d3f045-d571-4cb5-b51c-e8d2f0264573-image.png

    After

    abf773d1-0b39-4a00-b02e-e2fa3f822e14-image.png

    @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.

  • So maybe not the right answer but I had to add

    !important
    

    to get it to work…

  • phenomlabundefined phenomlab has marked this topic as solved on
  • So maybe not the right answer but I had to add

    !important
    

    to get it to work…

    @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.

  • phenomlabundefined phenomlab unlocked this topic on

Did this solution help you?
Did you find the suggested solution useful? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation 💗

Related Topics