Tagged: , ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #296945

    Hi,

    I am wondering how I can make a whole text box into a link that highlights (not just the text but the whole box, as if the whole box is a button) on hover. On my site, the box I am thinking of is the box dark grey box with a triangle cut out on the homepage.

    thanks,

    Alastair

    #297628

    Could someone please address this questions, thanks.

    #298030

    Hey!

    Please firstly turn on custom CSS field for ALB elements ( http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ ) and give your textblock a custom CSS class then add following code to Quick CSS in Enfold theme options under General Styling tab

    .avia_textblock.custom-class {
    background-color: red;
    padding: 10px;
    }
    .avia_textblock.custom-class a { color: white; }
    .avia_textblock.custom-class:hover {
    background-color: orange;
    }
    .avia_textblock.custom-class:hover a { color: green; }

    Regards,
    Yigit

    #298173

    Hi Yigit,

    Thanks for the reply. Unfortunately, it still doesn’t work. I added the custom CSS class box and entered ‘section-box’, and changed custom-class in your code to section-box, but nothing changed. Also, where do I put the link in the code so that if someone clicks anywhere on the box it takes them to that URL?

    Thanks,

    A

    #298202

    Hey A!

    Please add following code to Functions.php file in Appearance > Editor

    function add_custom_link(){
    ?>
    <script>
    jQuery(window).load(function(){
    jQuery(".section-box").click(function(){
         window.location=jQuery(this).find("a").attr("href"); 
         return false;
    });
    });
    </script>
    <?php
    }
    add_action('wp_footer', 'add_custom_link');

    You can add the link to anywhere in your text box
    Cheers!
    Yigit

    #298290

    Thanks Yigit! Thanks worked well!

    One last issue, if you go on the site you will see that I have put a Fontello icon in the box, but I can only align the icon right, center, or left… I would like the icon to just sit in line with the text right after it. How do i do this?

    Thanks,

    A

    #298296

    Hey A!

    Please add following code to Quick CSS

    @media only screen and (min-width: 1340px) {
    .section-box .av_font_icon { position: relative; right: 33%; }}
    @media only screen and (min-width: 1140px) {
    .section-box .av_font_icon { position: relative; right: 30%; }}
    @media only screen and (min-width: 990px) {
    .section-box .av_font_icon { position: relative; right: 28%; }}
    @media only screen and (max-width: 989px) {
    .section-box .av_font_icon { position: relative; right: 33%; }}
    @media only screen and (max-width: 480px) {
    .section-box .av_font_icon { right: 5%; }}

    Cheers!
    Yigit

    #298662

    Hi Yigit,

    Thanks for your help. All is good!

    Appreciatively,

    A

    #298701

    Hey A!

    Great! Let us know if you have any other questions or issues

    Cheers!
    Yigit

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Making a the whole text box a link that highlights on hover’ is closed to new replies.