Remove panel border from accordion boxes

  • I have developed some drop down boxes at the bottom of the home page that open up when clicked. However I cannot for the life of me figure out what CSS I can plug in to my custom CSS to remove the border around the left/right/bottom of the panels.

    I tried inspecting the page and it appears the .panel-body allows me to affect things inside the panel, but I can’t figure out what class or div to edit to tweak and get rid of the borders. Any ideas?

    • This topic was modified 3 years, 8 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)

  • This should remove the inner (darker) border:

    .panel-default>.panel-heading+.panel-collapse>.panel-body {
border: none;
}

    To remove the dark borders, you can try

    .panel-default>.panel-heading+.panel-collapse>.panel-body { border: none; }

    And maybe

    .panel-default { border: none; }

    too? If you want to completely remove the border.

    I used Chrome devtool inspector to find the specific selector.
    https://developer.chrome.com/docs/devtools/css/

    ?? @gappiah beat me to it!

    Thread Starter southeyblanton

    (@southeyblanton)

    Thanks so much for these suggestions, I tried them out and while the collapsing panel shifted ever so slightly the 1px dark line on the left right and bottom still remains.

    I see, if you are adding new code to your Custom CSS, try something like:

    div.panel-default>.panel-heading+.panel-collapse>.panel-body { border: none; }

    Thread Starter southeyblanton

    (@southeyblanton)

    I tried that block of code and it removed the border from the preview view of the home page when I entered it, but after I hit publish and went to the live site and refreshed the page it was back. Almost as if something with within the themes CSS is overriding it? Could that be the problem?

    Viewing your page source, I see:

    div.panel-default& gt;.panel-heading+.panel-collapse& gt;.panel-body { border: none; }

    You will need to replace & gt; with >.

    (↑ read it without space between & and gt;, it keeps converting to symbol here)

    • This reply was modified 3 years, 8 months ago by Naoko Takano.
    • This reply was modified 3 years, 8 months ago by Naoko Takano.
    • This reply was modified 3 years, 8 months ago by Naoko Takano.
    Thread Starter southeyblanton

    (@southeyblanton)

    Sorry I’m not sure I understood the last reply. When you mention I need to replace > with > is that not the exact same character?

    Also when you say page source, is there something I need to edit in the text version of the Welcome page itself or in the custom CSS i’m plugging into the theme?

    I really appreciate you attempting to help me though, it’s helped a lot.

    I updated my reply after posting. The symbol didn’t display as I intended, sorry for the confusion.

    Here’s what you have in your source.

    View source https tarheels live rethinkinggaurdianship

    The characters enclosed in pink borders should be replaced with “>”.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Remove panel border from accordion boxes’ is closed to new replies.

Tags