You can create your own styles for SimpleMap using two different methods:

  1. Adding the styles to your active theme stylesheet.  It’s usually best to do this in a child theme so that custom styles are not overwritten when you update your theme
  2. Creating a custom theme for SimpleMap

Custom SimpleMap Theme

To create a custom theme for SimpleMap, follow these instructions:

  1. FTP to your web server and navigate to the /wp-content/plugins/ directory
  2. Create a new directory called simplemap-styles/
  3. Create a CSS file and give it a filename
  4. Upload your CSS file to your new directory called simplemap-styles/
  5. Edit your CSS file and add the following header at the top of the file, changing THEME_NAME_HERE to the name you want to call your custom theme:
    /*
    Theme Name: THEME_NAME_HERE
    */
  6. Save this file and then go to SimpleMap > General Options > Map Style Defaults and select your custom theme from the Theme drop down.

SimpleMap CSS IDs and Classes

When styling SimpleMap, there are some standard IDs and Classes you can use.  Here is a list:

Search Form

The search form is an HTML form constructed using an HTML table.  You can control the number of columns and rows using shortcode attributes.  The following CSS IDs and Classes can be used for styling the form:

#map_search – Containing div for the search form

form#location_search_form – ID for the search form

table.location_search – Table class for the search form

tr.location_search_row – Table row class

td.location_search_cell – General class for all table cells

input#location_search_submit_field – ID for the submit button

In addition to these general IDs and Classes, each cell has it’s own class.  Here is a list of the main form field classes:

td.location_search_street_cell – Street  field

td.location_search_city_cell – City field

td.location_search_state_cell – State field

td.location_search_zip_cell – ZIP field

td.location_search_distance_cell – Distance label field

td#location_search_distance_fields – Distance dropdown field

td.location_search_cat_cell – Category label field

td#location_search_sm-category_fields – Category checkboxes field

td.location_search_tag_cell – Tag label field

td#location_search_sm-tag_fields – Tag checkboxes field

Map

The map is a complex hierarchy of divs, here are the main CSS IDs and Classes:

#simplemap – Containing div for the map

.infoBox – Containing div for the address bubble

.markertext – Inside div for the address bubble

.markertext h3 – Address name

.markertext span.bubble_category – Category

.markertext p.buble_address – Address

.markertext p.bubble_tags – Tags

.markertext p.bubble_links – Links

Location Results

#results – Containing div for location results

.result – Containing div for each result

.result_name h3 – Address name

.result_address – Address

span.result_phone – Phone

span.result_email – Email

span.result_fax – Fax

.result_website – Website link

a.result_directions – Directions link

.sm_category_list – Categories

.sm_tag_list – Tags

Single Location Pages

If you have Location Permalinks enabled, then each location has a single location page.  Here are the main CSS IDs and Classes for styling this page:

body.single-sm-location – Main body class for this page template

.sm-location – Article class

.sm-single-location-default-template – Containing div for location content

.sm-single-map – Containing div for map

.sm-single-location-data – Containing div for location data

#sm-address – Address

#sm-directions – Directions

ul.sm-single-location-data-ul  – Location data list

span.sm-list-title – Labels