Knowledge Base - Advanced Features Guide

 

Understand the Geocode Factoy style sheet CSS

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.

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 :

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

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) :

css02

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;
}

css03

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!

Applies To

Geocode Factory 3, Geocode Factory 5