[beatricemartiniParticipant]

Hallo, I’m trying to customize the accordion toogle and I’ve nearly reach what I like.

I’ve added this css but I want to have the text in the middle and the toogle on the right and a bit bigger … can you please help me?

This is the website http://sviluppo1.ilbarone.net/

And this is the actual css

.x-accordion-toggle {
color: white;
background-color: #2483D2 !important;
text-align: right;
}

a.x-accordion-toggle {
color: #ffffff !important;
text-align: center;
font-weight: 700;
}
.x-accordion-heading .x-accordion-toggle:before{
display: none;
}

.x-accordion-heading .x-accordion-toggle.collapsed:after {
color: #ffffff;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}

.x-accordion-toggle:after {
content: “\f0d7”;
padding-right: 5px;
display: inline-block;
margin-right: 1px;
color: #ffffff;
align:right;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
font-family: “fontawesome” !important;
font-style: normal !important;
font-weight: normal !important;
speak: none;
-webkit-font-smoothing: antialiased;
}

[JadeModerator]

Hi there,

Please add this code:

.x-accordion-toggle:after {
    float: right;
    font-size: 25px;
}

Hope this helps.

[beatricemartiniParticipant]

Thank you!!!

[RahulModerator]

You’re most welcome. 🙂

[Author]

Posts