I tried this, bt it does not work for all :/
.panel-heading { /* bloc titre de la liste déroulante */
text-align: left;
background-color: #444444;
color: #ffffff;
}
.panel-collapse.in { /* contenu de la liste déroulante*/
text-align: left;
background-color: #ffffff;
}
.panel-body { /* contenu de la liste déroulante*/
text-align: left;
background-color: #444444;
}
I would like to custom all :
1/ active/inactive button : background-color, font-color, font-family, font-size, padding….
2/ body text : background-color, font-color, font-family, font-size, padding….
thanks for your help
I tried this again :
.panel-heading {
background-color: #ffffff;
}
.accordion-toggle.collapsed { /* marche pour le bloc titre inactif pour le fond */
text-align: left;
background-color: #b43b3b !important;
}
.accordion-toggle {
text-align: left;
background-color: #444444 !important;
}
.panel-body {
text-align: left;
background-color: #ffffff;
color: #444444;
}
but i do not know how to custom the titles :/
Hi,
Try this for active:
.panel-heading .accordion-toggle {
background: #999;
}
.panel-heading .accordion-toggle h5 {
color: #000;
}
And this for inactive:
.panel-heading .accordion-toggle.collapsed {
background: #333 !important;
}
.panel-heading .accordion-toggle.collapsed h5 {
color: #fff;
}
This will change the font settings:
.panel-heading .accordion-toggle h5, .panel-heading .accordion-toggle i {
font-family: sans-serif;
font-size: 20px;
padding: 5px;
}
Hope those work for you!
Hannah
It works perfectly 8 It seems so easy when you give me the tips :/ However i spent many hours on it …
Is it possible to add an hover on the title ?
It comes from trial and error…you’ll get it:)
active:
.panel-heading .accordion-toggle h5:hover {
color: #b43b3b;
}
inactive:
.panel-heading .accordion-toggle.collapsed h5:hover {
color: #b43b3b;
}
Hannah
It works ! Splendid. I have just add this to have the background :
.panel-heading .accordion-toggle:hover { /* bloc actif > roll-over > fond */
background: #ffffff;
border: 1px solid #444444 !important;
}
.panel-heading .accordion-toggle h5:hover { /* bloc actif > roll-over > texte */
color: #444444;
}
.panel-heading .accordion-toggle.collapsed:hover { /* bloc inactif > roll-over > fond */
background: #444444 !important;
}
.panel-heading .accordion-toggle.collapsed h5:hover { /* bloc inactif > roll-over > texte */
color: #ffffff;
}
Thanks very much !
NB : what tool do you use to copy the css code in the forum ?
Just highlight the code and click the “code” button above the content box.
Sorry I have another question about accordion.
I have tried to change the color of the icons (+ and -) into the accordion titles because I would like to have the same color between the title text and icon on hover or not.
I tried this :
.panel-heading .icon-plus:hover { /* bloc inactif > roll-over > texte */
color: #ffffff !important;
}
.panel-heading .icon-minus:hover { /* bloc inactif > roll-over > texte */
color: #444444 !important;
}
but it works only if my cursor is on the icon :/ And i would like to have this on the entire line.
Is it possible ?
Thanks for your help !
.panel-heading:hover .icon-plus {
color: #ffffff !important;
}
.panel-heading:hover .icon-minus {
color: #444444 !important;
}
Kadence Themes
Hi I need help on how to make a fixed color of an accordion. Preferably using Pinnacle theme on visual text. I can not write code.
How Do I add color?
[accordion]
[pane title=”title1″ start=open]
Put content here
[/pane]
[pane title=”title2″]
Put content here
[/pane]
[pane title=”title3″]
Copy and paste to create more
[/pane]
[/accordion]
To also change font and color. I want the accordion to be orange.
Phumelele,
Please start a new thread and provide a link to your site.
Thanks,
Hannah
