Modifying C00L GuestMap 2

• The guestmap's structure
• Layout and style
  • Using your own icons
  • Changing the guestmap image
  • Disabling and hiding stuff

The guestmap's structure

If you want to modify C00L Guestmap 2 it's important that you understand the structure.

The recommend method of installing the guestmap is by putting the directory in your website's main directory. The guestmap directory contains all the files needed for the guestmap to work. The URL to your guestmap should then be: http://mywebsite.ext/guestmap/gm_name.

gn_name is the name of the guestmap. By default each theme's name is used here, but you can change it to anything you want.

Each seperate guestmap has it's own directory. If you have multiple guestmaps they can share each other's resources.

For the guestmaps not to share icon's you need to set an unique ID for each of them. You canb do this by changingf the value of the gmId variable.

Layout and style

Each guestmap has it's own layout. All thelayout and styling information is stored in styles.css. If you want to change fonts, sizes, colors or background images this is the place to be.

Please note that the positioning of certain elements must be set to absolute/relative in order for the script to work. If something is messed up after editing the stylesheet, it's likely that you changed the positioning in some way.

Using your own icons

If you want to a replace a theme's replace icons with your own you may need to make some changes to the CSS.

First of all; all the icons must be in the same directory, be numbered sequentially (1, 2, ,3 ,4 ,5), have the same extension (gif, png, jpg) and must all have the same dimensions (width/height).

In order for the icons to actually show up you need to set these things in the gm_conf.js file.

To make them look nice you need to dive into the CSS file.

To make the middle of the icon appear in the place where you clicked all the icons have a negative margin. Thi causes the image's position to change a bit.

If you want the image in the middle the margin needs to be half of the image's with height.

So, if your icons are 15*15 pixels large, the margin needs to be either -7 or -8 pixels.

#iconPreview,
div#mapIcons div,
div#mapIcons img {
width:15px;
height:15px;
cursor:normal;
position:absolute;
margin:-7px;
font-size:0;
}

If the width/height are not equal, set the margin left/top seperatly.

#iconPreview,
div#mapIcons div,
div#mapIcons img {
width:32px;
height:20px;
cursor:normal;
position:absolute;
margin-left:-16px;
margin-top:-10px;
font-size:0;
}

If you are changing the icons, you may want to change the size of the icons in the form too. This can be done like this:

div#formIcons img,
div#formIcons div {
cursor:pointer;
width: 21px;
height: 21px;
float:left;
}

Changing the guestmap image

The location of the guestmap image is defined in gm_conf.js. You can set it to any relative or absolute path.

var gmImage= 'media/back.jpg'; //location of background image

You don't have to worry about the size of the guestmap, most themes (all but coral reef) will make scrollbars appear when the image is too large.

Changing the guestmap size

If you do want to change the size of the guestmap you need to edit the following properties in the CSS file. They can usually be found near the top.

div#guestmap {
position:relative;
background-color: #000;
width:448px;
height:548px;
border: solid 1px #fff;
text-align:left;
}

Beware that this is the size of the guestmap, incuding the title, buttons ans scrollbars, not the size of the image.

Disabling and hiding stuff

At the bottom of the CSS file there is a class called hidden. By default it hides an empty list element, that needs to be in the HTML to make it valid.

.hidden {
display:none;
}

You can use it do hide, or disable many things. If you want to disable the zoom function just turn it into this:

ul#mapButtons li#buttonZoomOut,
ul#mapButtons li#buttonZoomIn,
.hidden {
display:none;
}

The list view button is named buttonChangeView, you can disable it the same way

An alternative way of hiding elements is by setting their display property to none. Which is basically the same thing as we are doing here.