How to change the margins und paddings of mulitcolor accordion? - Support

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
August 22, 2020 at 12:42 pm #1239960

rallegrafix
Participant

How to change the margins und paddings .av-accordion-bg-multi toggle? I need The image close to the border.
Thisd dosent work:
.av-accordion-bg-multi .js_active .toggler {
padding: 0 0 0 0 !important;
}

_Layout Trainingsprogramm

Thanks

August 22, 2020 at 12:49 pm #1239961
rallegrafix
Participant
it should look like below:
https://drive.google.com/file/d/1pT2cixzQ0geRKmgEt2uQszsBFHJ-wl8Q/view?usp=sharing

Can you use the picture as a background?
- This reply was modified 4 years, 2 months ago by rallegrafix.
August 23, 2020 at 3:31 pm #1240107

Victoria
Inactive Moderator

Hi rallegrafix,

Can you make the mockup public? We cannot see the image.

Best regards,
Victoria

August 23, 2020 at 7:09 pm #1240191
rallegrafix
Participant
Done. it should look like the first toggle
https://drive.google.com/file/d/1pT2cixzQ0geRKmgEt2uQszsBFHJ-wl8Q/view?usp=sharing
- This reply was modified 4 years, 2 months ago by rallegrafix.
August 24, 2020 at 5:30 pm #1240435

Victoria
Inactive Moderator

Hi rallegrafix,

Best regards,
Victoria

August 24, 2020 at 7:49 pm #1240479

rallegrafix
Participant

It should look like this picture. picture on the left and the writing in the middle. the writing should be vertical in the middle.
https://drive.google.com/file/d/1U5DAe5elejg5-bVnKzHGNwfepl1d6PsS/view?usp=sharing

August 24, 2020 at 8:33 pm #1240511

Victoria
Inactive Moderator

Hi rallegrafix,

https://share.getcloudapp.com/ApukEPnL The negative margin here is pulling the next toggle up and the line-height rule does not work in this case.

Best regards,
Victoria

August 25, 2020 at 5:12 pm #1240710
rallegrafix
Participant
I don´t know why, but it dosen´t work…

This is the code:
/*—————————————-
// CSS – Multicolor tabs
//————————————–*/

/* Tab 1 */
.av-accordion-bg-multi .av_toggle_section:nth-child(1) .toggler {
background: #ffb600;
padding: 0 0 0 0 !important;
margin-bottom: -8px;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(1) .toggle_content {
background: #fff8eb;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(1) .toggler:before {
content: url(https://protom-education.com/wp-content/uploads/2020/08/Icon_Modul-1_weiß-auf-Farbe_40px.png);
padding-right: 5px;
}

/* Tab 2 */
.av-accordion-bg-multi .av_toggle_section:nth-child(2) .toggler {
background: #ee7623;
padding: 0 0 0 0 !important;
margin-bottom: -8px;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(2) .toggle_content {
background: #fef2e9;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(2) .toggler:before {
content: url(https://protom-education.com/wp-content/uploads/2020/08/Icon_Modul-2_weiß-auf-Farbe_40px.png
);
padding-right: 5px;
}

/* Tab 3 */
.av-accordion-bg-multi .av_toggle_section:nth-child(3) .toggler {
background: #d50037;
padding: 0 0 0 0 !important;
margin-bottom: -8px;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(3) .toggle_content {
background: #fbecea;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(3) .toggler:before {
content: url(https://protom-education.com/wp-content/uploads/2020/08/Icon_Modul-3_weiß-auf-Farbe_40px.png
);
padding-right: 5px;
}

/* Tab 4 */
.av-accordion-bg-multi .av_toggle_section:nth-child(4) .toggler {
background: #e64783;
padding: 0 0 0 0 !important;
margin-bottom: -8px;

}
.av-accordion-bg-multi .av_toggle_section:nth-child(4) .toggle_content {
background: #fdeff4;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(4) .toggler:before {
content: url(https://protom-education.com/wp-content/uploads/2020/08/Icon_Modul-4_weiß-auf-Farbe_40px.png);
padding-right: 5px;
}

/* Tab 5 */
.av-accordion-bg-multi .av_toggle_section:nth-child(5) .toggler {
background: #923a7f;
padding: 0 0 0 0 !important;
margin-bottom: -8px;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(5) .toggle_content {
background: #f3ecf4;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(5) .toggler:before {
content: url(https://protom-education.com/wp-content/uploads/2020/08/Icon_Modul-5_weiß-auf-Farbe_40px.png
);
padding-right: 5px;
}
/* Tab 6 */
.av-accordion-bg-multi .av_toggle_section:nth-child(6) .toggler {
background: #0071ce;
padding: 0 0 0 0 !important;
margin-bottom: -8px;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(6) .toggle_content {
background: #ebeff9;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(6) .toggler:before {
content: url(https://protom-education.com/wp-content/uploads/2020/08/Icon_Modul-6_weiß-auf-Farbe_40px.png
);
padding-right: 5px;
}

/* Tab 7 */
.av-accordion-bg-multi .av_toggle_section:nth-child(7) .toggler {
background: #00a6ce;
padding: 0 0 0 0 !important;
margin-bottom: -8px;
}

.av-accordion-bg-multi .av_toggle_section:nth-child(7) .toggle_content {
background: #edf7fb;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(7) .toggler:before {
content: url(https://protom-education.com/wp-content/uploads/2020/08/Icon_Modul-7_weiß-auf-Farbe_40px.png
);
padding-right: 5px;
}

/* Tab 8 */
.av-accordion-bg-multi .av_toggle_section:nth-child(8) .toggler {
background: #37b30e;
padding: 0 0 0 0 !important;
margin-bottom: -8px;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(8) .toggle_content {
background: #f2f7ed;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(8) .toggler:before {
content: url(https://protom-education.com/wp-content/uploads/2020/08/Icon_Modul-8_weiß-auf-Farbe_40px.png
);
padding-right: 5px;
}

/* Tab 9 */
.av-accordion-bg-multi .av_toggle_section:nth-child(9) .toggler {
background: #04963f;
padding: 0 0 0 0 !important;
margin-bottom: -8px;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(9) .toggle_content {
background: #ebf0ea;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(9) .toggler:before {
content: url(https://protom-education.com/wp-content/uploads/2020/08/Icon_Modul-9_weiß-auf-Farbe_40px-1.png
);
padding-right: 5px;
}

/* Tab 10 */
.av-accordion-bg-multi .av_toggle_section:nth-child(10) .toggler {
background: #5b6670;
padding: 0 0 0 0 !important;
margin-bottom: -8px;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(10) .toggle_content {
background: #f0f1f2;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(10) .toggler:before {
content: url(https://protom-education.com/wp-content/uploads/2020/08/Icon_Modul-10_weiß-auf-Farbe_40px.png
);
padding-right: 5px;
}

/* Tab title color */
.av-accordion-bg-multi .toggler,
.av-accordion-bg-multi .toggler.activeTitle:hover {
color: #FFF;
border:none;
}

/* Hide default icon */
.av-accordion-bg-multi .toggle_icon {
display: none;
}

#top .av-accordion-bg-multi .toggler {
padding-left:20px;
/*height: 53px !important;*/
font-size: 18px;
font-weight: bolder;
}

#top .av-accordion-bg-multi .activeTitle {
height: 44px !important;
}

/* Individuelle Content-Linkfarbe */
.av-accordion-bg-multi .toggle_content a:link,
.av-accordion-bg-multi .toggle_content a:visited,
.av-accordion-bg-multi .toggle_content a:hover,
.av-accordion-bg-multi .toggle_content a:active {
color: #7b8082!important;
}
.av-accordion-bg-multi .toggle_content a:link strong,
.av-accordion-bg-multi .toggle_content a:visited strong,
.av-accordion-bg-multi .toggle_content a:hover strong,
.av-accordion-bg-multi .toggle_content a:active strong{
color: #7b8082!important;
}
- This reply was modified 4 years, 2 months ago by rallegrafix.
August 27, 2020 at 4:13 pm #1241247

rallegrafix
Participant

can you please look again and give me a tip.
best regards Ralph

/*—————————————-
// CSS – Multicolor tabs
//————————————–*/

/* Tab 1 */
.av-accordion-bg-multi .av_toggle_section:nth-child(1) .toggler {
background: #ffb600;
padding: 0 0 0 0 !important;
margin-bottom: -8px;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(1) .toggle_content {
background: #fff8eb;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(1) .toggler:before {
content: url(https://protom-education.com/wp-content/uploads/2020/08/Icon_Modul-1_weiß-auf-Farbe_40px.png);
padding-right: 5px;
}

/* Tab 2 */
.av-accordion-bg-multi .av_toggle_section:nth-child(2) .toggler {
background: #ee7623;
padding: 0 0 0 0 !important;
margin-bottom: -8px;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(2) .toggle_content {
background: #fef2e9;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(2) .toggler:before {
content: url(https://protom-education.com/wp-content/uploads/2020/08/Icon_Modul-2_weiß-auf-Farbe_40px.png
);
padding-right: 5px;
}

/* Tab 3 */
.av-accordion-bg-multi .av_toggle_section:nth-child(3) .toggler {
background: #d50037;
padding: 0 0 0 0 !important;
margin-bottom: -8px;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(3) .toggle_content {
background: #fbecea;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(3) .toggler:before {
content: url(https://protom-education.com/wp-content/uploads/2020/08/Icon_Modul-3_weiß-auf-Farbe_40px.png
);
padding-right: 5px;
}

/* Tab 4 */
.av-accordion-bg-multi .av_toggle_section:nth-child(4) .toggler {
background: #e64783;
padding: 0 0 0 0 !important;
margin-bottom: -8px;

}
.av-accordion-bg-multi .av_toggle_section:nth-child(4) .toggle_content {
background: #fdeff4;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(4) .toggler:before {
content: url(https://protom-education.com/wp-content/uploads/2020/08/Icon_Modul-4_weiß-auf-Farbe_40px.png);
padding-right: 5px;
}

/* Tab 5 */
.av-accordion-bg-multi .av_toggle_section:nth-child(5) .toggler {
background: #923a7f;
padding: 0 0 0 0 !important;
margin-bottom: -8px;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(5) .toggle_content {
background: #f3ecf4;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(5) .toggler:before {
content: url(https://protom-education.com/wp-content/uploads/2020/08/Icon_Modul-5_weiß-auf-Farbe_40px.png
);
padding-right: 5px;
}
/* Tab 6 */
.av-accordion-bg-multi .av_toggle_section:nth-child(6) .toggler {
background: #0071ce;
padding: 0 0 0 0 !important;
margin-bottom: -8px;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(6) .toggle_content {
background: #ebeff9;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(6) .toggler:before {
content: url(https://protom-education.com/wp-content/uploads/2020/08/Icon_Modul-6_weiß-auf-Farbe_40px.png
);
padding-right: 5px;
}

/* Tab 7 */
.av-accordion-bg-multi .av_toggle_section:nth-child(7) .toggler {
background: #00a6ce;
padding: 0 0 0 0 !important;
margin-bottom: -8px;
}

.av-accordion-bg-multi .av_toggle_section:nth-child(7) .toggle_content {
background: #edf7fb;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(7) .toggler:before {
content: url(https://protom-education.com/wp-content/uploads/2020/08/Icon_Modul-7_weiß-auf-Farbe_40px.png
);
padding-right: 5px;
}

/* Tab 8 */
.av-accordion-bg-multi .av_toggle_section:nth-child(8) .toggler {
background: #37b30e;
padding: 0 0 0 0 !important;
margin-bottom: -8px;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(8) .toggle_content {
background: #f2f7ed;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(8) .toggler:before {
content: url(https://protom-education.com/wp-content/uploads/2020/08/Icon_Modul-8_weiß-auf-Farbe_40px.png
);
padding-right: 5px;
}

/* Tab 9 */
.av-accordion-bg-multi .av_toggle_section:nth-child(9) .toggler {
background: #04963f;
padding: 0 0 0 0 !important;
margin-bottom: -8px;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(9) .toggle_content {
background: #ebf0ea;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(9) .toggler:before {
content: url(https://protom-education.com/wp-content/uploads/2020/08/Icon_Modul-9_weiß-auf-Farbe_40px-1.png
);
padding-right: 5px;
}

/* Tab 10 */
.av-accordion-bg-multi .av_toggle_section:nth-child(10) .toggler {
background: #5b6670;
padding: 0 0 0 0 !important;
margin-bottom: -8px;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(10) .toggle_content {
background: #f0f1f2;
}
.av-accordion-bg-multi .av_toggle_section:nth-child(10) .toggler:before {
content: url(https://protom-education.com/wp-content/uploads/2020/08/Icon_Modul-10_weiß-auf-Farbe_40px.png
);
padding-right: 5px;
}

/* Tab title color */
.av-accordion-bg-multi .toggler,
.av-accordion-bg-multi .toggler.activeTitle:hover {
color: #FFF;
border:none;
}

/* Hide default icon */
.av-accordion-bg-multi .toggle_icon {
display: none;
}

#top .av-accordion-bg-multi .toggler {
padding-left:20px;
/*height: 53px !important;*/
font-size: 18px;
font-weight: bolder;
}

#top .av-accordion-bg-multi .activeTitle {
height: 44px !important;
}

/* Individuelle Content-Linkfarbe */
.av-accordion-bg-multi .toggle_content a:link,
.av-accordion-bg-multi .toggle_content a:visited,
.av-accordion-bg-multi .toggle_content a:hover,
.av-accordion-bg-multi .toggle_content a:active {
color: #7b8082!important;
}
.av-accordion-bg-multi .toggle_content a:link strong,
.av-accordion-bg-multi .toggle_content a:visited strong,
.av-accordion-bg-multi .toggle_content a:hover strong,
.av-accordion-bg-multi .toggle_content a:active strong{
color: #7b8082!important;
}

August 30, 2020 at 12:42 pm #1241904

Victoria
Inactive Moderator

Hi rallegrafix,

https://share.getcloudapp.com/NQur4dn7 Please remove this line and see if the issue gets resolved.

Best regards,
Victoria

August 31, 2020 at 7:59 am #1242062

rallegrafix
Participant

Hello Victoria, thank you very much for your efforts. I’ve tried this but it doesn’t work. I do not understand why and what it could be. Isn’t there a way to put the text higher up?
Best regards
Ralph

September 3, 2020 at 1:39 pm #1243087
Ismael
Moderator
Hi,

This css code should remove the padding around the toggle graphic and vertically align the title.
```
.toggler {
	max-height: 44px !important;
	height: 44px !important;
}

.toggler::before {
    float: left;
}

.av-accordion-bg-multi .av_toggle_section .toggler {
	padding: 0 !important;
}
```
Best regards,
Ismael
Author

Posts

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.