Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • March 8, 2019 at 12:40 am #1076163
    stevevdw

    Hi there,

    I have the enfold theme which is awesome, but i’m trying to change opacity of image caption overlay so that when I hover the background doesn’t go away, but instead goes completely black while keeping the white text. I can’t seem to dig up any quick css codes in the forum archives.

    Thanks for your help,
    Steve

    March 8, 2019 at 1:15 am #1076168
    Jordan Shannon

    Hey stevevdw,

    Do you have an example of what you are looking to achieve?

    Best regards,
    Jordan Shannon

    March 8, 2019 at 2:20 am #1076192
    stevevdw

    Hey Jordan, I posted a link to the webpage i’m working on. I just want to change the caption overlay on hover so that it turns black instead of disappearing. This way the white text won’t get lost in the picture.
    Appreciate your help!

    March 8, 2019 at 5:36 pm #1076424
    Jordan Shannon

    Hi,

    Thanks for additional info. Add this to quick css:

    .av-image-caption-overlay-position:hover{
opacity:1!important;
background-color:#000!important;
}

    Best regards,
    Jordan Shannon

    March 8, 2019 at 5:51 pm #1076430
    stevevdw

    Thanks Jordan, that worked perfect!
    One more issue i’m having on this same page is with the tab element titles. They all appear on my computer, but when viewed on mobile only 3 out of 4 appear. Do you have any fix for this? Link to screenshot is attached below

    March 8, 2019 at 10:48 pm #1076487
    Jordan Shannon

    Hi,

    Add this to quick css:

    @media only screen and (max-width: 767px){
.av-tab-section-tab-title-container{
min-width:300px!important;
}

.av-section-tab-title{
padding:0px!important;
}}

    Best regards,
    Jordan Shannon

    March 8, 2019 at 11:45 pm #1076497
    stevevdw

    Awesome that did the trick! One thing I realized with the first issue you resolved is that the overlay goes black when you hover directly over the caption overlay portion (which is good) but if you hover over the image itself above the caption, the caption overlay disappears. Is there anything I can do to fix this?

    Also upon initial page load an arrow appears under my first tab, on any screen type. Within the tab element settings I have changed background of content and tab title background to white which worked but for some reason its leaving behind that small arrow. Not a huge deal but is there any quick fix here?

    Thanks again

    March 9, 2019 at 3:49 am #1076532
    Jordan Shannon

    Hi,

    The first issue can be fixed via JavaScript. Please provide admin info so we can log in and look into this issue futher.

    For the second issue add this to quick css:

    .av-tab-arrow-container{
display:none!important;
}

    Best regards,
    Jordan Shannon

    March 9, 2019 at 4:13 pm #1076785
    stevevdw

    Thanks again for your help Jordan that code worked! I’m not very advanced in website development and also don’t have child theme. If the javascript change requires child theme I may have to figure that one out. Anyway a temporary login link is attached in private, appreciate you looking into this!

    March 11, 2019 at 10:27 pm #1077518
    Jordan Shannon

    Hi,

    I logged in and added the following to functions.php and it seems to have worked.

    function custom_script(){
?>
<script>
jQuery(document).ready(function() {
jQuery(".avia-image-overlay-wrap").hover( function () {
jQuery(this).find(".av-image-caption-overlay-position").css('background-color','black');
}, function() {
jQuery(this).find(".av-image-caption-overlay-position").css('background-color','transparent');
});
});
 </script>

<?php
}
add_action('wp_head', 'custom_script');

    Best regards,
    Jordan Shannon

    March 12, 2019 at 4:50 pm #1077859
    stevevdw

    Beauty! that is exactly what I was going for. The only thing that i’m noticing now is on my iphone and ipad it’s still acting the way it was. When i scroll down the page and my finger hits an image the caption overlay background is disappearing. I’m not sure if it’s a touchscreen issue or not, any fix for this?
    As an option for touchscreen devices i could put the caption below the picture in black text with no overlay background, is there a code for this? If you click link and go to heading “Display Image caption below the image” you will see what I am talking about. Thanks!

    March 12, 2019 at 4:52 pm #1077861
    stevevdw

    Sorry the link didn’t attach…here it is https://kriesi.at/documentation/enfold/image/

    March 12, 2019 at 6:09 pm #1077877
    Jordan Shannon

    Hi,

    I’m happy to help. As for the tablet behavior, it is simply because there are no “hover states” on tablet so yes, an alternative method would be needed.

    Best regards,
    Jordan Shannon

    March 12, 2019 at 8:13 pm #1077941
    stevevdw

    Yes that makes sense, so are we able to go the route of displaying caption in black text under the image with a “@mediascreen” css code? I only need to show the text, no background in this situation. Here is the link to your enfold doc page https://kriesi.at/documentation/enfold/image/, then scroll down to section headed “Display Image caption below the image”. I just don’t exactly know how to apply the css listed there to tablet and phone screens.
    Thanks again!

    March 18, 2019 at 12:39 pm #1079854
    Ismael

    Hi,

    Thanks for the update.

    The css code for that should look something like this.

    @media only screen and (max-width: 1024px) {
  /* Add your Mobile Styles here */
#top .av-image-caption-overlay {
    height: auto;
    width: auto;    
    left: 0px;
    bottom: 0px;
    transform: translateY(100%);    
}
#top .av-image-caption-overlay-center {
  padding: 0;
}
#top .avia_image  {
  margin-bottom: 50px;
}
}

    It will only affect screens that are equal or less than 1024px.

    Best regards,
    Ismael

    March 21, 2019 at 2:04 pm #1081394
    stevevdw

    Hey Ismael, thanks for your response, and I appreciate all your guys help. I’m just not sure what to add where you have “Add mobile styles here”. I’ve tried a few things with no success. I think all I need to do is make the font colour black. What do I need to add to accomplish this?

    March 22, 2019 at 2:06 pm #1081837
    Ismael

    Hi,

    I’m just not sure what to add where you have “Add mobile styles here”.

    That is a css comment, so you don’t have to do anything about it. You can add more css code or declarations below that line.

    Best regards,
    Ismael

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