Okay
  Public Ticket #1483073
Flip box navigation
Closed

Comments

  •  3
    imogenbertin started the conversation

    I'm experimenting with Flip box Services. What's confusing me is if I add a URL to the flipbox column setting (just above the classname box), then I thought that the box would flip when hovered, but when the user clicks the back page, it would go to the URL in the flipbox column setting (examples first box on top row, third box on second row).

    When I put in the URL, the flipping function stops working. I can't find anywhere else to put in the URL to go to for more information about that particular box.

    So what I want is - user hovers, box flips - user likes the info and clicks - goes to more detailed page - or user not interested, doesn't click instead moves their hover.

    At the moment adding a URL breaks the flip function. The other boxes where I have not added a URL are still flipping ok! 

    What have I misunderstood?

    Thank you as always...

    Imogen

  •  6
    Kyron replied

    I'd like to know how to do this as well. The only "solution" I've been able to come up with is using a button with a shortcode or hyperlinking text on the back side.

    Thanks

  •  8,467
    Tahir replied

    @Imogenbertin, 

    As Kyron Mentioned added a button shortcode is the only option available . The Flipbox is intended to show the information on the Back Side . If you want to hyperlink Image Thumbs try using the Image Gallery VC Element with the  "Image Grid" Style Selected . 

    Be.st 


    ThemeNectar Support Team 

  •  3
    imogenbertin replied

    I've used Kyron's suggestion to do a workaround (thanks both!), but I'm having trouble figuring out how I can change the colour of the Flipbox front box content text colour ("light") which I'd like to be #A0A0A0 to match the main navigation menu grey. The boxes keep flipping when I'm trying to figure out in Firefox where "light" is being set from...! Could you let me know what to add to CSS to alter the "light" text colour? Thank you!

  •  6
    Kyron replied

    Hi Imogen,

    Try the following CSS to change the flipbox front text color:

    .nectar-flip-box .flip-box-front h2 {
       color: #A0A0A0!important;
        }

    Regards

  •  3
    imogenbertin replied

    Thanks again Kyron. Tried that also

    .nectar-flip-box .flip-box-front[data-text-color="light"] h2 {
       color: #A0A0A0!important;
        }

    But not finding it as yet...!


  •  8,467
    Tahir replied

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    .nectar-flip-box .flip-box-front[data-text-color="light"] h3{
        color:#e90006 !important;
    }

    Thanks


    ThemeNectar Support Team