Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #25637

    Hi,

    as some Enfold users requested, I’ll share some modification on the Iconbox content element. Currently, only the header is linked (if set) to another page, post or external url. Some of you may like the whole box linkable so here we go. First of all: if you use the child theme, you need to provide the whole function or overwrite the $output-var of it.

    1. Open up config-templatebuilder/avia-shortcodes/iconbox.php

    2. Starting at line 163 replace everything with the following code. I left the original lines commented out.

    if(!empty($link))
    {
    //$title = "<a href='$link' title='".esc_attr($title)."'>$title</a>";
    $startwrap = "<a href='$link' title='".esc_attr($title)."'>".'<div class="iconbox_content">';
    $endwrap = '</div></a></div>';
    } else
    {
    $startwrap = '<div class="iconbox_content">';
    $endwrap = '</div></div>';
    }
    // add blockquotes to the content
    $output = '<div class="iconbox iconbox_'.$position.' '.$meta['el_class'].'">';
    //$output .= '<div class="iconbox_content">';
    $output .= $startwrap;
    $output .= '<div class="iconbox_icon heading-color avia-font-'.$font.'">'.$display_char.'</div>';
    $output .= '<h3 class="iconbox_content_title">'.$title."</h3>";
    $output .= wpautop( ShortcodeHelper::avia_remove_autop( $content ) );
    //$output .= '</div></div>';
    $output .= $endwrap;

    This removes the link from the header an wraps it around the whole box.

    To add a mouseover to the box (and remove any hover from the contents of the box, you’ll have to add some CSS mod:

    /* Iconbox mouseover effect and changing the link behaviour */
    .main_color.iconbox_top .iconbox_content:hover {background: #efefef;}
    #top .iconbox_top a {text-decoration: none;color: inherit;}

    Have fun!

    #127663

    Note: Do NOT delete the “return $output”! :)

    #127664

    Hi!

    Thank you for providing the code. Please note that the output is not w3c valid (you can’t wrap a link around a div element) and it will break links inside the iconbox text content.

    Regards,
    Peter

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

The topic ‘Solution: Making the Iconbox element fully linked’ is closed to new replies.