Custom style and custom colours in accordion panels #3

[fabienne schumann]

Hi,

I am sorry for reposting this, but im not sure if everything went the right way when I posted this topic first. It does not appear in the topic list, yet the site states that my post is the newest in the forum. “This forum contains 261 topics and 1,085 reply, and was last updated by fabienne schumann 14 minutes ago.”
If you can still answer the first post, feel free to delete that one. Sorry for the trouble.

I just managed to screw up again. Seems like editing a topic causes wierd things, I am really sorry!

Here starts the original post:

there are six default colours viable to use in accordion panels, is it possible to add some more?

I tried to add a colour on my own, and edited the stylesheet by just adding new lines using the exact same syntax used in the other lines:

“.panel-new > .panel-heading,”

and

“.panel-new > .panel-heading {
background-color: #323095;
}”

But sadly it did not work.

I also tried to add another icon and additional space between the icon and the title of the accordion panel by just replacing some of the existing code:

“.panel-heading .accordion-toggle:before {
/* symbol for “opening” panels */
font-family: ‘icomoon’; /* essential for enabling glyphicon */
content: & nbsp; “\e62b“; & nbsp; /* adjust as needed, taken from bootstrap.css */
color: #fff;
font-size: .813em;
}”

That did not work aswell.

I am sure that I have just missed to change something, since I am not that much into coding.

It would be realy nice of you could help me, thanks in advance!

[Sushil Adhikari]

Hi Fabienne Schumann,
If you just want to change the color of an accordion panel for instance; if you are changing the aqua-color panel to your own, try the code below;

.panel-aqua > .panel-heading {
    background-color: #323095;
}

or if you simply want to add another panel of your own; Use these html snippets inside the text editor of your page.

<div class="panel panel-new">
<div class="panel-heading">
<h4 class="panel-title"><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2">Panel Heading</a></h4>
</div>
<div id="panel2" class="panel-collapse collapse">
<div class="panel-body">
<p>'your content'</p>
</div></div></div>

Note: 1. If you want to change the icon and title of your own you have to edit the html snippets as mentioned above.You can use font awesome shortcode plugin for varieties of icon you prefer to choose.
2. You can adjust the colour,spacing and other formattings accordingly in your css editor.

Hope it works for you.
Thanks!

[Author]

Posts