Introduction

This article applies to all versions of Geocode Factory since v2.8.0. For version prior to v2.8.0 you need to manually edit your template CSS file.

Geocode Factory can generate multiple elements on the web site front end. To be adaptable to many applications, all styles are customizable via both "template" and by editing the included CSS file.

Generating the map template

Please read this tutorial creating an advanced map for the basics on how to create your map template. Main elements such as the map itself, the side-list of entries, buttons, etc are rendered using predefined placeholders in the Geocode Factory administration console for the map you are using.

In this article we want to use our Joomla 2.5 demo server for Geocode Factory and Sobipro. There are 2 markersets :

• Cities with more that 1 million people
  Cities with less that 1 million people

This is the sample template defined in back-end map manager :

<div style="width:100%">
    <div style="width:75%;float:left;">
        [map]
        <p>There is [number] cities.</p>
        <p><img src="/images/bigcity.png" width="16px" height="18px" /> Cities with more that 1 million people</p>
        <p><img src="/images/smallcity.png" width="16px" height="18px" /> Cities with less that 1 million people</p>
    </div>
    <div style="width:25%;float:right;">
        [sidelists]
    </div>
</div>

In green you see the 3 placeholders we have used in this template. The front-end result is visible here :

Enable the component's CSS file

You can also do more styling via editing the provided CSS file. To prevent this this file from being overwritten during component updates, we have choice to rename this file by default. To activate this CSS file it needs to be renamed. You can use whatever method works for you, but we will use the example of FTP client or eXtplorer. Open the appropriate tool and browse to :

components/com_geocode_factory/assets/css

You will see this original file :

REMOVE_geocode_factory.css

This file will be updated at each component update. If you rename this file : geocode_factory.css. this file will be loaded anytime a Geocode Factory map is loaded. It doesn't matter if the map is loaded in a module or via component link. The styling follows the map. Which map it is applied to depends on the map ID as defined in the next section.

Editing the CSS

To customize the CSS for a Geocode Factory element you name it with an ID in the style code. Here is an example of a map container that could be entered into the "Component Template" of the map manager :

<div id="gf_map_1" style="width:100%; height:500px;"></div>

The map ID in green is a sample div ID and it determines which styling is applied to the map. If you wanted to add a border to the map, simply edit the CSS file, and add the following lines:

#gf_map_1{
    border: 2px solid grey ;
}

The result is below. The map now has a 2 pixel wide grey border. (the corner of the map is visible behind the CSS editor shown in the picture) :

We can add styles to other elements this way as well. You can edit the side lists [sidelists], remove the borders, make the length unlimited etc. In this next example you can see the ID's that correspond to the name of each sidelist in the demo. It is all done through CSS styling. Here are some example CSS styles as displayed on the demo page :

#sidelists{
     float:left;
     font-size:.8em;
}

#gf_list_MS_SP_id_1, #gf_list_MS_SP_id_2{
     overflow:hidden!important;
     border:0px!important ;
     margin:5px;
     max-height:none!important;
}

#gf_list_MS_SP_id_1 div, #gf_list_MS_SP_id_2 div {
     margin: 0;
     padding: 0 0 0 5px;
}

Styles can be almost endless!

A simple method to find the style of an element on a web page is by viewing the source code of the element or page. Firebug is a popular extension for the browser Firefox, but there are similar extensions for most popular browsers.

Have fun!