Hi,

How did you add the images without rollover effect?

If you want the rollover effect, you need something like this

<a href="http://www.klimhal-events.nl" class="avia_image  avia-builder-el-3  avia-builder-el-no-sibling avia-align-center ">

<img class="avia_image avia_animated_image avia_animate_when_almost_visible top-to-bottom avia_start_animation" src="http://lavitasana.oscar.nl/wp-content/uploads/2013/05/landing-LVS-021-300x240.png" alt="">

<span class="image-overlay overlay-type-extern" style="opacity: 0.7; left: 0px; top: 0px; display: block; height: 240px; width: 300px;"><span class="image-overlay-inside"></span></span></a>

This line of code is the rollover effect

<span class="image-overlay overlay-type-extern" style="opacity: 0.7; left: 0px; top: 0px; display: block; height: 240px; width: 300px;"><span class="image-overlay-inside"></span></span>

They need to be included.

Regards,

Ismael

Hello,

You can use the text widget to insert tag on the footer. You need to use Media Queries to make it responsive.

Regards,

Ismael

Hi,

You can change the background using this

.main_color .image-overlay .image-overlay-inside::before {

background-color: red !important;

}

Open css > base.css, find this code

.image-overlay.overlay-type-extern .image-overlay-inside::before{content:"27A6";}

.image-overlay.overlay-type-video .image-overlay-inside::before{content:"25B6";}

You can replace the icon used, refer to this link http://www.entypo.com/characters/. Lets try the phone icon (U+1F4DE). You can do something like this

.image-overlay.overlay-type-extern .image-overlay-inside::before{content:"1F4DE";}

.image-overlay.overlay-type-video .image-overlay-inside::before{content:"1F4DE";}

Remove browser cache then hard refresh the page.

Cheers,

Ismael

Hi,

Please add this on your custom.css

.image-overlay.overlay-type-extern {

display: none !important;

}

Regards,

Ismael

Hi,

Open loop-index.php then find this code

echo "<div class='".implode(" ", get_post_class('post-entry post-entry-type-'.$post_format . " " . $post_class . " ".$with_slider))."'>";



//default link for preview images

$link = get_permalink();



//on single page replace the link with a fullscreen image

if(is_singular())

{

$link = avia_image_by_id(get_post_thumbnail_id(), 'large', 'url');

}



//echo preview image

if(strpos($blog_style, 'big') !== false)

{

if($slider) $slider = '<a href="'.$link.'">'.$slider.'</a>';

if($slider) echo '<div class="big-preview '.$blog_style.'">'.$slider.'</div>';

}

Replace it with:

echo "<div class='".implode(" ", get_post_class('post-entry post-entry-type-'.$post_format . " " . $post_class . " ".$with_slider))."'>";



//default link for preview images

$link = avia_image_by_id(get_post_thumbnail_id(), 'large', 'url');;



//on single page replace the link with a fullscreen image

if(is_singular())

{

$link = avia_image_by_id(get_post_thumbnail_id(), 'large', 'url');

}



//echo preview image

if(strpos($blog_style, 'big') !== false)

{

if($slider) $slider = '<a href="'.$link.'" rel="lightbox">'.$slider.'</a>';

if($slider) echo '<div class="big-preview '.$blog_style.'">'.$slider.'</div>';

}

Please try this one. Reset Dude’s code first. Remove browser cache then reload the page.

Regards,

Ismael

Hi,

You have a lot of options to open an image to a new window.

1.) Insert a text block then add an html tag. Something like this

<a target="_blank" href="YOURURLHERE"><img src="YOURIMAGEHERE" /></a>

2.) You can edit config-templatebuilder > avia-shortcodes > image.php then find this code

$output.= "<a href='{$link}' class='avia_image ".$meta['el_class'].$this->class_by_arguments('align' ,$atts, true)."'><img class='avia_image {$class}' src='{$src}' alt='' /></a>";

Replace it with

$output.= "<a target='_blank' href='{$link}' class='avia_image ".$meta['el_class'].$this->class_by_arguments('align' ,$atts, true)."'><img class='avia_image {$class}' src='{$src}' alt='' /></a>";

3.) This is the rendered html tag when using the Image shortcode via AviaBuilder. You can copy and paste it manually. Change the anchor tag link and the image url.

<a href="http://www.yourlinkhere.com" class="avia_image avia-builder-el-49 el_after_av_slideshow_full avia-builder-el-no-sibling avia-align-center "><img class="avia_image avia_animated_image avia_animate_when_almost_visible right-to-left avia_start_animation" src="http://localhost/kriesi/enfold/wp-content/uploads/2011/12/imac_big_demo-300x180.png" alt=""><span class="image-overlay overlay-type-extern" style="opacity: 0; left: 0px; top: 0px; display: block; height: 180px; width: 300px;"><span class="image-overlay-inside"></span></span></a>

Regards,

Ismael