Remove panel border from accordion boxes

southeyblanton
(@southeyblanton)

2 years, 9 months ago
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 2 years, 9 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)

George Appiah
(@gappiah)

2 years, 9 months ago
This should remove the inner (darker) border:
```
.panel-default>.panel-heading+.panel-collapse>.panel-body {
border: none;
}
```
Naoko Takano
(@nao)

2 years, 9 months ago

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/

Naoko Takano
(@nao)

2 years, 9 months ago

🙂 @gappiah beat me to it!

Thread Starter southeyblanton
(@southeyblanton)

2 years, 9 months ago

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.

Naoko Takano
(@nao)

2 years, 9 months ago

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)

2 years, 9 months ago

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?
Naoko Takano
(@nao)

2 years, 9 months ago
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 2 years, 9 months ago by Naoko Takano.
- This reply was modified 2 years, 9 months ago by Naoko Takano.
- This reply was modified 2 years, 9 months ago by Naoko Takano.
Thread Starter southeyblanton
(@southeyblanton)

2 years, 9 months ago

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.

Naoko Takano
(@nao)

2 years, 9 months ago

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.

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