Hi,
I love this plugin, but it seems to be changing up my formatting for my theme. The theme creators pinpointed the problems to this plugin. It’s changing my theme colors and settings.
Do you know how to fix that?
Thanks!
Sadie
I really appreciate the plugin, it saves me the work of having to implement it myself and allows me to quickly embed accordions when I have more important things to do.
That said, I have trouble allowing for the ineptitude displayed here wrt classes and styling.
First of all the parent div is called “accordion”. Really? Because nothing else in the users site might have that as a class name because it’s relatively common?
Ok so we fix that in elite-accordion/index.php by changing it to:
return ('<div class="elite-accordion">'.do_shortcode($content).'</div>');
Ok cool, so then we cruise over to the stylesheet at elite-accordion/css/elite_style.css and see this:
h1,
h2,
h3 {
color: #fff;
}
h1 {
/*border-bottom: 1px solid #ececec;*/
font-weight: 300;
margin-bottom: 2em;
padding-bottom: 1em;
text-align: center;
}
h1 span {
display: block;
font-size: .5em;
}
a:hover,
a:focus {
color: #ec407a;
border-bottom: none;
}
h3 {
font-weight: 500;
}
.intro {
font-size: 1.25em;
}
.js .panel-title {
margin: 0;
}
.panel-title a {
border-bottom: none;
color: #292929;
display: block;
padding: .5em 0;
position: relative;
text-decoration: none;
-webkit-transition: color 200ms ease 0s;
-moz-transition: color 200ms ease 0s;
transition: color 200ms ease 0s;
width: 100%;
}
.panel-title a .icon {
color: #9e9e9e;
position: absolute;
right: 0;
-webkit-transition: all 200ms ease 0s;
-moz-transition: all 200ms ease 0s;
transition: all 200ms ease 0s;
}
.panel-title a:hover,
.panel-title a:focus {
color: #37474f;
}
.panel-title a:hover .icon,
.panel-title a:focus .icon {
color: #ec407a;
}
.panel-title a.active {
color: #37474f;
}
.panel-title a.active .icon {
color: #ec407a;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.js .accordion {
border-bottom: 1px solid #ececec;
}
/* [id^="panel-"] {
padding-bottom: 2em;
}*/WAT??? Your rules are overriding theme styles all over the place??? STAHP!!!
Seriously what the…
Ok so anyway fix it with:
.elite-accordion
h1,
h2,
h3 {
color: #fff;
}
.elite-accordion h1 {
/*border-bottom: 1px solid #ececec;*/
font-weight: 300;
margin-bottom: 2em;
padding-bottom: 1em;
text-align: center;
}
.elite-accordion h1 span {
display: block;
font-size: .5em;
}
.elite-accordion a:hover,
.elite-accordion a:focus {
color: #ec407a;
border-bottom: none;
}
.elite-accordion h3 {
font-weight: 500;
}
.elite-accordion .intro {
font-size: 1.25em;
}
.elite-accordion .js .panel-title {
margin: 0;
}
.elite-accordion .panel-title a {
border-bottom: none;
color: #292929;
display: block;
padding: .5em 0;
position: relative;
text-decoration: none;
-webkit-transition: color 200ms ease 0s;
-moz-transition: color 200ms ease 0s;
transition: color 200ms ease 0s;
width: 100%;
}
.elite-accordion .panel-title a .icon {
color: #9e9e9e;
position: absolute;
right: 0;
-webkit-transition: all 200ms ease 0s;
-moz-transition: all 200ms ease 0s;
transition: all 200ms ease 0s;
}
.elite-accordion .panel-title a:hover,
.elite-accordion .panel-title a:focus {
color: #37474f;
}
.elite-accordion .panel-title a:hover .icon,
.elite-accordion .panel-title a:focus .icon {
color: #ec407a;
}
.elite-accordion .panel-title a.active {
color: #37474f;
}
.elite-accordion .panel-title a.active .icon {
color: #ec407a;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.elite-accordion .js .accordion {
border-bottom: 1px solid #ececec;
}
/* [id^="panel-"] {
padding-bottom: 2em;
}*/Please… Fix this now. This is embarassing.
]]>Hi,
My callout title fails to display when I have the Elite Accordian plugin activated on the same page. I am using the iFeaturePro WordPress theme.
Can someone help please?