Solution: Making the Iconbox element fully linked

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!