Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1356220

    Hi,

    Please advise on the coding and area to change the styling for the single big image gallery which opens a lightbox on click.

    To edit the following:

    1: Remove the Grey Keyline box around the image
    2: On rollover of the image, a Blue double arrows circular icon appears
    a/ How do you remove the icon altogether?
    b/ How do you change the icon from arrows to a camera?

    Does any CSS that needs to be added go within Advanced Styling > Developer settings Or in the CSS within the theme?

    Thanks
    Marcus

    #1356277

    use on that the quick css input field.

    if you mean this “Gallery with Preview” on https://kriesi.at/themes/enfold/shortcodes/gallery/
    try:

    #top .image-overlay .image-overlay-inside::before {
      content: "\e80f" !important;
      font-size: 50px;
      color: #fff !important;
    }
    
    #top div .avia-gallery .avia-gallery-big {
      padding: 0px;
      border-style: none;
    }
    
    #top div .avia-gallery img {
      border-style: none;
      /*** padding: 0px; *** - if you like ***/
    }
    #1356288

    Hi,

    Thanks for this.

    Is this for the keyline removal only?

    Is it added in main CSS or the gallery advanced only?

    Thanks
    Marcus

    #1356293

    put it in General Styling – Quick CSS
    maybe an important is necessary :

    #top .image-overlay .image-overlay-inside::before {
      content: "\e80f" !important;
      font-size: 50px;
      color: #fff !important;
    }
    
    #top div .avia-gallery .avia-gallery-big {
      padding: 0px !important;
      border-style: none !important;
    }
    
    #top div .avia-gallery img {
      border-style: none !important;
      padding: 0px !important; 
    }

    the : content: "\e80f" is a little camera – if you like to show a real image – code has to be adjusted.
    if you like to have it specific only for one gallery – give a custom-class to that gallery – and this has to be part of the css code.

    PS: i do not see your private content area – i’m participant as you- so i only could investigate own or the enfold demo pages to give advice.

    #1356294

    you see – if i inspect the demo-link from above and add (virtually) in the dev tools the css :
    (click to enlarge)

    #1356433

    Hi,
    Thank you for sharing Guenni007, I’m certain many future readers will find this helpful.

    Best regards,
    Mike

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

You must be logged in to reply to this topic.