What styles are you adding? They should go in the theme folder in style.css.
Hi,
I just tried the background first to see if it works, and it doesn’t.
I even tried to copy this code in my css
.accordion {
border-bottom: 1px solid #dbdbdb;
margin-bottom: 20px;
}
.accordion-title {
border-top: 1px solid #dbdbdb;
margin: 0;
padding: 20px 0;
cursor: pointer;
}
.accordion-title:hover {}
.accordion-title:first-child {border: none;}
.accordion-title.open {cursor: default;}
.accordion-content {padding-bottom: 20px;}
But i don’t see anything.
Do you think that’s because i’m using a child theme?
I already did a lot of css on my theme, i just have issue with the css of this plugin.
Being a child theme shouldn’t make a difference. Is it possible for you to share a link to the site for me to take a look?
Oh yep sorry, i forgot the link
http://gardoum.com
When i try to modify by using F12 on google chrome, it works.
And when i copy the same css in my style.css, it doesn’t affect the accodion at all :/
What page did you use the accordion on?
well, easier here to see it
had issue with the last link
http://gardoum.com/accordion/
I’ve taken a look at the site and can’t figure out what the issue is and why it won’t load those styles. My suggestion for next steps for trying to figure it out:
- Add
!important to the styles to see if there are other styles overriding them.
- Try adding the styles directly to the
<head> of the document and see if that works.
- Try deactivating other plugins to see if there is a conflict somewhere.
Hi Phil.
I need help with two things regarding the CSS, please.
Sadly I can’t share the page with you because it’s an internal company site.
1) I need to know how to fix the css so that I can alter the <h3> tag that the default is generating. For example my [accordion-item title=”lauraRuggeri”] but when it generates it comes out LAURARUGGERI on the page. I tried to add the following to the css for my theme, but it’s not doing anything.
.accordion-title {
text-transform: none;
}
So, I tried to inspect element on the live page and saw the <h3> tag that is being generated. When I change it from h3 it has the effect I want, but I can’t figure out how to alter it in the css. Please help!
2) There is a lot of space between my accordion items. I have several listed on a page. They expand and collapse, but when collapsed there is a lot of white space between them. I’ve removed all padding. Is there something else I can do to make this look better?
Thank you so much for the help. I’m a total newbie.
Hi Laura,
You can’t change the HTML tag in CSS but you can in the accordion short code. Something like this should work:
[accordion tag="h2"]...[/accordion]
Change the h2 to one of the following tags that works best for you: h1, h2, h3, h4, h5, h6, p or div.
The other item is a little more tricky. WordPress by default adds a lot of extra spaces around shortcodes. The easiest fix is to add this to your functions.php file for your theme.
/**
* Fixes empty <p> and <br> tags showing before and after shortcodes in the
* output content.
*/
function pb_the_content_shortcode_fix($content) {
$array = array(
'<p>[' => '[',
']</p>' => ']',
']<br />' => ']',
']<br>' => ']'
);
return strtr($content, $array);
}
add_filter('the_content', 'pb_the_content_shortcode_fix');
Keep in mind this will impact all your shortcodes, so make sure to test everything.
