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

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.

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.

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.

Hi there,
here is the code from the documentation that I customized. In addition to icons, small pictures should be pngs in front of the text. Thanks for the support.

/* Tab 1 */
.av-accordion-bg-multi .av_toggle_section:nth-child(1) .toggler {
background: #ffb600;
}
/* Tab 2 */
.av-accordion-bg-multi .av_toggle_section:nth-child(2) .toggler {
background: #ee7623;
}
/* Tab 3 */
.av-accordion-bg-multi .av_toggle_section:nth-child(3) .toggler {
background: #d50037;
}
/* Tab 4 */
.av-accordion-bg-multi .av_toggle_section:nth-child(4) .toggler {
background: #e64783;
}
/* Tab 5 */
.av-accordion-bg-multi .av_toggle_section:nth-child(5) .toggler {
background: #923a7f;
}
/* Tab 6 */
.av-accordion-bg-multi .av_toggle_section:nth-child(6) .toggler {
background: #0071ce;
}
/* Tab 7 */
.av-accordion-bg-multi .av_toggle_section:nth-child(7) .toggler {
background: #00a6ce;
}
/* Tab 8 */
.av-accordion-bg-multi .av_toggle_section:nth-child(8) .toggler {
background: #37b30e;
}
/* Tab 9 */
.av-accordion-bg-multi .av_toggle_section:nth-child(9) .toggler {
background: #129605;
}
/* Tab 10 */
.av-accordion-bg-multi .av_toggle_section:nth-child(10) .toggler {
background: #5b6670;
}
/* 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;
}
.av-accordion-bg-multi .toggler {
padding-left:20px;
font-size: 18px;
font-weight: bolder;
}
/*Toggle content area */
.av-accordion-bg-multi .toggle_content {
background: #f2f6fa;
}

Site: https://protom-education.com/en/programm_en/

Best regards Raph

Hi there,
unfortunately it does not work.
So I use the multi-color CSS. There are no icons there. I want to insert different small png’s instead of the icon. how does it work.
Please help me.
Best regards
Ralph

• This reply was modified 4 years, 8 months ago by rallegrafix.