Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 9, 2021 at 3:40 pm #1309409
    netvisit

    Hello everybody,
    which css class name defines the background-color for the dark grey field displayed during mouseover with the caption content of a image from the media library? Unfortunately, this is not possible to control via Chrome’s DevTools. In this website, it is displayed via the media element “Gallery” and I have encircled it in red in the example image.

    Maybe that is a function that is controlled and defined via JavaScript?

    Beschriftung für Galerie-Foto

    Thank you for support.

    Andreas

    • This topic was modified 4 years ago by netvisit.
    July 11, 2021 at 6:54 am #1309544
    Rikard

    Hi Andreas,

    Can you post a link to where we can see the element in question please?

    Best regards,
    Rikard

    July 11, 2021 at 4:26 pm #1309585
    netvisit

    Hi Rikard,

    thank you for your enquiry about my request. This is a link to one of the sites in question:

    Schmuck // Anhänger

    Best regards

    Andreas

    • This reply was modified 4 years ago by netvisit.
    July 13, 2021 at 12:53 pm #1309943
    Mike

    Hi,
    Thank you for your patience and the link to your site, the .avia-tooltip.avia-tt is used for many elements and it’s color & it’s arrow can be adjusted basically like this:

    .avia-tooltip.avia-tt,
.avia-tooltip.avia-tt .avia-arrow { 
	background: rgba(211, 147, 52, 0.8);
}

    but unless you want to set the color for your whole site I would recommend adding a body class or page ID because the element is created on mouse-over and appened to the body, that is, it is outside the gallery element at the bottom of the page.
    So for example you can target the one page like this:

    #top.page-id-182 .avia-tooltip.avia-tt,
#top.page-id-182 .avia-tooltip.avia-tt .avia-arrow { 
	background: rgba(211, 147, 52, 0.8);
}

    or you can target all of the /schmuck/ child pages like this:

    #top.parent-pageid-2 .avia-tooltip.avia-tt,
#top.parent-pageid-2 .avia-tooltip.avia-tt .avia-arrow { 
	background: rgba(211, 147, 52, 0.8);
}

    Please give this a try and adjust the color to suit and after applying the css, clear your browser cache and check.

    Best regards,
    Mike

    July 15, 2021 at 1:08 am #1310166
    netvisit

    Hi Mike,

    thank you very much for the support. I have overwritten the background colour of the mouseover caption in the child file and it works fine:

    Schmuck // Anhänger

    Best regards

    Andreas

    July 15, 2021 at 1:16 pm #1310280
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Media library // Caption details’ is closed to new replies.