Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • June 23, 2022 at 1:46 am #1356220
    woogie07

    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

    June 23, 2022 at 12:35 pm #1356277
    Guenni007

    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 ***/
}
    June 23, 2022 at 1:13 pm #1356288
    woogie07

    Hi,

    Thanks for this.

    Is this for the keyline removal only?

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

    Thanks
    Marcus

    June 23, 2022 at 1:38 pm #1356293
    Guenni007

    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.

    June 23, 2022 at 1:43 pm #1356294
    Guenni007

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

    June 24, 2022 at 8:06 pm #1356433
    Mike

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

    Best regards,
    Mike

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