Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1239960

    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;
    }

    Thanks

    #1239961

    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 3 years, 10 months ago by rallegrafix.
    #1240107

    Hi rallegrafix,

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

    Best regards,
    Victoria

    #1240191

    Done. it should look like the first toggle
    https://drive.google.com/file/d/1pT2cixzQ0geRKmgEt2uQszsBFHJ-wl8Q/view?usp=sharing

    • This reply was modified 3 years, 9 months ago by rallegrafix.
    #1240435

    Hi rallegrafix,

    Best regards,
    Victoria

    #1240479

    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

    #1240511

    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

    #1240710

    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 3 years, 9 months ago by rallegrafix.
    #1241247

    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;
    }

    #1241904

    Hi rallegrafix,

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

    Best regards,
    Victoria

    #1242062

    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

    #1243087

    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

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.