Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • April 10, 2020 at 6:24 pm #1202705
    kohlidays_kohsamui

    Hello

    Even though I applied the CSS av-accordion-style-2 from one of your examples, and followed the different answers of the Enfold moderators. I can’t remove the blue lines only on Safari. I use the default accordion.
    WeCare.rentals

    Here are the CSS I tried from the different posts on the Enfold forum, but they don’t work here:

    p.toggler:focus {
    outline: -webkit-focus-ring-color auto 0 !important;
    outline: none !important;
    }
    .av-default-toggle.togglecontainer .av_toggle_section .toggler:focus {
    outline: none !important;
    }
    .toggler:focus {
    outline: -webkit-focus-ring-color auto 0 !important;
    }

    Thanks for your help

    Bertrand

    April 12, 2020 at 3:21 am #1203023
    Mike

    Hey Bertrand,
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    .toggler,.toggler.activeTitle:focus {
  outline: -webkit-focus-ring-color none 0px;
  outline-color: -webkit-focus-ring-color;
  outline-style: none !important; 
  outline-width: 0px !important; 
}

    Best regards,
    Mike

    April 12, 2020 at 4:29 am #1203030
    kohlidays_kohsamui

    Hello Mike,

    Sorry, this does not work and the blue line is still visible on Safari. Here is my entire CSS for the accordion:

    /* Tab title style */
    .av-accordion-style-2 .toggler {
    font-family: “soleil”, sans-serif;
    font-size: 18px;
    color: #297339;
    font-weight: lighter:
    padding-left: 0px;
    padding-right: 30px;
    margin-left: -30px;
    background: #fff;
    line-height : 1.3;
    }

    .av-accordion-style-2 .activeTitle.toggler:hover,
    .av-accordion-style-2 .activeTitle.toggler,
    .av-accordion-style-2 .toggler:hover {
    color:#6db66d;
    background: #fff;
    }

    /* Accordion icon */
    .av-accordion-style-2 .toggle_icon:before {
    position: absolute;
    font-size: 25px;
    top:50%;
    transform: translateY(-50%);
    left: 0;
    content:’\e873′;
    font-family: ‘entypo-fontello’;
    line-height: 0;
    color:#6db66d;
    }

    /* Active tab icon */
    .av-accordion-style-2 .activeTitle .toggle_icon:before {
    content:’\e876′;
    font-family: ‘entypo-fontello’;
    color:#6db66d;
    }

    /* Hide default icon */
    .av-accordion-style-2 .toggle_icon {
    border:none;
    position: absolute;
    left: auto;
    right: 20px;
    }

    .av-accordion-style-2 .toggle_icon .vert_icon,
    .av-accordion-style-2 .toggle_icon .hor_icon {
    display:none;
    }

    /* Toggle content area */
    .av-accordion-style-2 .toggle_content {
    font-family: “soleil”, sans-serif !important;
    letter-spacing: 0px !important;
    line-height: 1.8 !important;
    color: #666666;
    background: #fafafa;
    font-size: 15px !important;
    }

    .av-accordion-style-2 .toggle_content a {
    font-family: “soleil”, sans-serif !important;
    letter-spacing: 0px !important;
    line-height: 1.8;
    font-weight : 100 !important;
    color: #6db66d;
    background: #fafafa;
    font-size: 15px !important;
    text-decoration: none;
    }

    .av-accordion-style-2 .toggle_content a:hover {
    border-bottom: 2px dotted #6db66d !important;
    }

    /* Suppression des bordures */
    .js_active .toggler, .js_active .tab {
    border: none !important;
    }

    /* Suppression ligne sur Safari */
    .togglecontainer .av_toggle_section .toggler:focus {
    outline: none !important;
    }

    Best regards

    Bertrand

    April 12, 2020 at 8:48 am #1203058
    Guenni007

    can you try first very globaly :
    :focus, :active { outline: none !important }

    April 12, 2020 at 9:03 am #1203060
    kohlidays_kohsamui

    Hello Guenn,
    With
    .togglecontainer .av_toggle_section .toggler:focus, :active {
    outline: none !important;
    }
    same, no effect.

    April 12, 2020 at 9:32 am #1203062
    Guenni007

    please only copy paste the above – no css selector specification there.
    because you do not see the things in detail what is active and what is focused.
    After that – if it has an effect we can go and look for a more specific selector

    April 12, 2020 at 9:35 am #1203063
    kohlidays_kohsamui

    Sorry. Does’nt work

    April 12, 2020 at 9:47 am #1203065
    Guenni007

    for those testings it is allway nice to deactivate all caching plugins – because they do present not the actual site code.
    I see you are using autoptimize. So there are saved cached states .
    My advice is: as long as you are styling your site : deactivate all cachings – even the enfold merging will preserve older states of the given css ( js too )

    see here a test page : https://webers-testseite.de/pureinstall/toggles/#offer
    the global setting works on safari ( Version 13.1 (15609.1.20.111.8) OSX 10.15.4 (19E287) (Catalina) )

    • This reply was modified 4 years, 8 months ago by Guenni007.
    April 12, 2020 at 10:00 am #1203067
    kohlidays_kohsamui

    Oops, I disabled the plugin, but now I have a blank page?

    April 12, 2020 at 10:05 am #1203068
    Guenni007

    There must be something deeper in the trouble then. Because you should be able to disable a caching plugin without the page being unreachable.

    April 12, 2020 at 10:24 am #1203070
    kohlidays_kohsamui

    I reactivated the plugin, but disabled all the options. The page appears again. I don’t know why. But the blue line is still present in the accordion.

    April 12, 2020 at 1:30 pm #1203079
    Mike

    Hi,
    Please include an admin login in the Private Content area, using the css I posted above to remove the blue focus is working for me, it sounds like you are having a caching issue.
    While you are building your site I recommend disabling all caching plugins and the Enfold Theme Options > Performance > JS & CSS file merging and compression option, once your site is done you can activate your caching.

    Best regards,
    Mike

    April 12, 2020 at 4:01 pm #1203100
    kohlidays_kohsamui

    This is Mike, you’ve got everything you need to log in as an administrator.

    April 12, 2020 at 4:16 pm #1203101
    Mike

    Hi,
    Thanks for the login, I added the css I posted above to your WordPress > Customize > Additional CSS and the blue focus is now not showing in Safari or Chrome on Mac, please see the screenshot in Private Content area.
    Please clear your browser cache and check.

    Best regards,
    Mike

    April 12, 2020 at 4:23 pm #1203103
    kohlidays_kohsamui

    Thanks a lot, Mike. I will remember this CSS for the other sites being created. Many thanks and a great day for you.

    Cheers

    Bertrand

    April 12, 2020 at 4:31 pm #1203104
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Accordion blue line not resolved on Safari’ is closed to new replies.