Recently on the TTG Community Forum, a user asked about being able to replace the standard GPS Google Map marker icon used in TTG CE3 Gallery with a globe icon, like the one that was used with the CE2 version of TTG Gallery.
The gps icon, like all icons in CE3 is a Font Awesome icon (icon-map-marker). And it looks like it’s hard coded into the TTG CE3 Gallery web-engine. So we’re looking to replace that icon with something else. Turns out there is a globe Font Awesome icon that will serve the purpose (icon-globe) .
Since Font Awesome icons are placed using the code <i class="icon-name-of-icon"></i> ( a class applied to the “i” html tag) that means we need to replace the existing class named “icon-map-marker” with the “icon-globe” class.
I can think of one relatively easy way to remove and add classes and that’s using JQuery. I’ll use a little snippet of code to remove the class “icon-map-marker” from that “i” tag then add the class “icon-globe” to it.
Here’s the code:
<script>
$(document).ready(function(){
$(".map-marker i").removeClass("icon-map-marker").addClass("icon-globe");
});
</script>
Here’s what’s happening. That first part, the <script> tag, is needed to tell the browser that a script is coming. The first line of the actual script just tells jQuery to wait until the page loads before executing what follows.
The magic happens in the next line. The script is basically saying: Look for the indicated selector (in this case, the “i” tag inside of a class named “map-marker”), remove the class “icon-map-marker” from the tag and add the class “icon-globe”.
Next, the closing </script> tag tells the browser that the script is ended.
To accomplish this, you’ll first need to enable phplugins. The instructions for doing so can be found here. Once you’ve done this, open your global phplugins.php file with a plain text editor and insert the above code using the ttg_head_end hook. You can just add the code right after the code that enables custom css. You’ll see this once you open the phplugins.php file.
You can learn more about editing and using phplugins starting here.
The whole thing inside of the ttg_head_end function in the phplugins.php file will look like this:
function ttg_head_end( $style, $path ) {
echo '
<link href="/phplugins/css/custom.css" rel="stylesheet" /><script>
$(document).ready(function(){
$(“.map-marker i”).removeClass(“icon-map-marker”).addClass(“icon-globe”);
});
</script>
‘; //script to swap Font Awesome GPS icons
} // END
