Okay
  Public Ticket #1295625
Text style, frame, animation
Closed

Comments

  • josepalcover started the conversation

    Hi,

    I have 3 questions:

    1) I would like to change the color of the text that appears when I hover over an image of the gallery (now it is white and I would like it to be black). I would also like to change its font, size and, if possible, have it centered.

    2) I would like to add a white frame around the full screen nectar slider placed at the top of the page. If possible, I would like to have the frame only at the top and sides, and leave the bottom without a frame.

    3) Is it possible to completely disable the hover animation of the gallery images?

    Thank you for your help!

  •  8,470
    Tahir replied

    Hey Again,

    1: I see you got that working already : http://prntscr.com/gi67op .

    2: I am afraid thats not possible at the moment .

    3:Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    /* disable hover animation on image gallery */
    .wpb_gallery_slidesimage_grid .portfolio-items .elastic-portfolio-item .work-item.style-4 img {
        top: 0px !important;
    }
    .wpb_gallery_slidesimage_grid .portfolio-items .col[data-default-color="true"] .bottom-meta {
        display: none !important;
    }

    Thanks


    ThemeNectar Support Team 

  • josepalcover replied

    Thank you!

    Yes, to make the text black I used custom CSS for h3. However, is there any option to do it without writing the CSS?

    However, I cannot change the color of the subtitle (the caption of the image). Is it possible?

    Another question: Can I disable the animation only on tablet/phone and keep it for computers?


    Thank you so much!

  •  8,470
    Tahir replied

    Hey Again,

    1: No i am afraid not . 

    2: Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    /* change caption color */
    .portfolio-items .work-item.style-4 .bottom-meta h3 {
        color: #27cfc3 !important;
    }

    3: Wrap it in a media query and it will hide the animation on tablet/mobile only. 

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    /* disable hover animation on image gallery only on tablet/ mobile  */
    @media only screen and (max-width: 1000px) and (min-width: 1px) {
        .wpb_gallery_slidesimage_grid .portfolio-items .elastic-portfolio-item .work-item.style-4 img {
            top: 0px !important;
        }
        .wpb_gallery_slidesimage_grid .portfolio-items .col[data-default-color="true"] .bottom-meta {
            display: none !important;
        }
    }

    Thanks


    ThemeNectar Support Team 

  • josepalcover replied

    Hi Tahir!

    Thank you again!

    1) The title under each image is black (as it was before with the h3 css editing) but the Caption (where it says project by...) remains white. Is it possible to change it too?

    2) Something else: can I disable the hover animation only in the image and keep the animation in the text? I mean: when you hover the mouse on the image, the image stays in place and the tag with title and caption appears from down as it is doing now.

    3) Las issue: I don't know if you can help me with this... it is about using the plugin PhotoSwipe for the lightbox effect. I got other lightboxes working but not this one. (I disabled the transition animation, and the default lightbox...) but nothing happens with this one. 


    Thank you so so much!

  •  8,470
    Tahir replied

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    /* change caption/subtext color  */
    .portfolio-items .work-item.style-4 .bottom-meta p {
        color: #0a0000 !important;
    }
    /* disable only the image animation */
    .portfolio-items .elastic-portfolio-item .work-item.style-4 img {
        top: 0px !important;
    }

    3:  Did you try the Disable Fade out on Click Option ?. http://prntscr.com/gip4pc

    Thanks


    ThemeNectar Support Team 

  • josepalcover replied

    Hi,

    Thanks! Everything is working fine except for the lightbox (swipebox). I did everything and it is not working... maybe there is a compatibility problem or something.

    Anyway, thanks a lot!

  •  8,470
    Tahir replied

    Hey Again,

    If you have Page Transitions Turned On Please Switch the Animated Transition Method to "Standard" in Salient Theme Options -> Page Transition Section.

    Also be sure to check/uncheck this Disable Fade Out On Click option : http://prntscr.com/8f3bj7

    Moreover if it doesnt work Turn off the Page Transitions and check for Browser Console Errors : https://codex.wordpress.org/Using_Your_Browser_to_Diagnose_JavaScript_Errors

    Be.st


    ThemeNectar Support Team