Tagged: , ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • July 28, 2014 at 7:03 pm #296945
    cmcsoxford

    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

    July 30, 2014 at 10:53 am #297628
    cmcsoxford

    Could someone please address this questions, thanks.

    July 31, 2014 at 2:04 am #298030
    Yigit

    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

    July 31, 2014 at 11:46 am #298173
    cmcsoxford

    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

    July 31, 2014 at 1:13 pm #298202
    Yigit

    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

    July 31, 2014 at 4:02 pm #298290
    cmcsoxford

    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

    July 31, 2014 at 4:11 pm #298296
    Yigit

    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

    August 1, 2014 at 11:07 am #298662
    cmcsoxford

    Hi Yigit,

    Thanks for your help. All is good!

    Appreciatively,

    A

    August 1, 2014 at 1:04 pm #298701
    Yigit

    Hey A!

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

    Cheers!
    Yigit

  • Author
    Posts
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.