Zerif theme

  • hello everyone! can somebody help me to tune google-map block at my site with zerif-pro theme? i want to make it active on click, but it’s not working.
    google-map.php code in theme is:

    <?php

echo '<div class="gm">';
echo '<div class="gmap">';
$zerif_googlemap_address = get_theme_mod('zerif_googlemap_address');

if( !empty($zerif_googlemap_address) ):

	echo "<iframe class='zerif_google_map' frameborder='0' scrolling='no'  marginheight='0' marginwidth='0' src='https://maps.google.com/maps?&q=".urlencode( $zerif_googlemap_address )."&output=embed&iwloc'></iframe>";

endif;	

echo '</div>';
echo '</div>';
?>

    in css i made this options:

    .gm {
	position:relative;
	z-index: 2;
}

.gm:active + .gmap {
	display: block;

}

.gmap {
	position:relative;
	z-index: 1;
	pointer-events: none;
}

.gmap:hover {
	display: block;
}

.zerif_google_map {
	width:100%;
	height:500px;
}

    what i made wrong? i know, that it maybe ugly, if you can help i will be appreciate)i’m newbie in this

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

  • Try something like this.

    PHP:

    echo '<div class="gm">';
echo '<input type="checkbox" class="gmap_fix" />'; // add this line
echo '<div class="gmap">';

    Delete “pointer-events: none;” and add to CSS:

    .gmap_fix {
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 500px;
    opacity: 1;
    filter: alpha(opacity=1);
    z-index: 2;
}

.gmap_fix:checked {
    display: none;
}

    Just show transparent checkbox over map and hide by click ^^

    Thread Starter yuriri

    (@yuriri)

    yes, it works!!!thank you very much!idea with checkbox is very good idea)

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Zerif theme’ is closed to new replies.