Text Custom Link on Revolution Slider

  • Text Custom Link on Revolution Slider
    Viewing 4 posts - 1 through 4 (of 4 total)

  • jacf182
    Participant
    #959

    Hi Creiden!

    First, thanks for making an amazing theme. I love the framework, the builder, and the overall design.

    I just have one minor problem:

    Whenever I create a text layer for a slider, I can customise almost every parameter for it, except I can’t make it a clickable link. Sure, I can use HTML tags “a href” but that changes the text color, the hover, etc.

    If I create an image layer, there’s an option for me to enter a link “Image Link”, as easy as that:
    Image and video hosting by TinyPic

    But text layers do not have that option. With text layers, the only option I have is “Link to slide”, with some parameters like “link id, link attribute, link rel, link classes”:
    Image and video hosting by TinyPic

    I just want to be able to make the text linkable while remaining the same color, without loosing its default style.

    How can I achieve that?

    Thank you very much!


    Omar
    Keymaster
    #979

    Hey jacf182,

    Thanks for your detailed post.

    Unfortunately Rev Slider doesn’t support adding links to text layers, but fortunately you can handle it using Circle Flip 🙂

    1- Give your layer an ID using Rev Slider, for the purpose of this demo, i’ll give it the ID “my-layer-id”.
    2- Navigate to Appearance >> Theme Options >> General Settings >> Advanced and find the (Customs Java Script code) section.
    3- add this code, applying your own modifications to the chosen id and selected link

    jQuery(document).ready(function($){
    $('#my-layer-id').wrap("insert <anchor> with selected link here");
    });

    That should do the trick. Let us know how it goes, and feel free to post again if you need help.

    Cheers.


    jacf182
    Participant
    #1040

    Thanks for your reply, Omar!

    That’s very useful. I eventually found out how to do it with another method, but your JAVA code is a better solution.

    What I did was I wrapped my text in a href tags and then I entered this code in the CSS tab of the slider:

    /* unvisited link */
    a:link {
    color: #727c86;
    }

    /* visited link */
    a:visited {
    color: #727c86;
    }

    /* mouse over link */
    a:hover {
    color: #727c86 !important;
    text-decoration: underline;
    display: block;
    }

    /* selected link */
    a:active {
    color: #727c86;
    }

    .tp-caption a {
    color:#727c86;

    }

    This made my whole text clickable without any other decoration (except when hovering); but the problem with this method is that it would apply it to the whole slider, and if I wanted to change individual slide’s styles it would not be possible. With your method I can have as many ID’s as I want, which is great.

    Thanks a lot!


    Omar
    Keymaster
    #1045

    Hey jacf182,

    Great, Thanks a lot for sharing your experience, I have personally learned something new 🙂 hope this be helpful to other people as well.

    Cheers.

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Text Custom Link on Revolution Slider’ is closed to new replies.