Geohana CSS Style Guide

Geohana API References -> Geohana CSS Style Guide


Main Structure

All verbs html snippets are surrounded by a <div>, its selector is "verb" and its id is verb specific.

Example
<div class="verb" id="findByAddress">html snippet here</div>

All verbs have a title <div> tag, its selector and id is "title"

Example
<div class="title" id="title">Enter Your Address</div>

All verbs have a surrounding <div> tag, its selector is "box". This <div> tag surrounds the body of the html snippet. It wraps everything after the title to the end of the html snippet.

Example
<div class="verb" id="findByAddress">               
<div class="title" id="title">Enter Your Address</div>               
<div class="box">
html snippet body here
</div>
</div>               
</div>

All verbs have a <div> tag, its consists of the "Powered By Geohana" logo along with a "Login" and "Menu" links. The <div> selector is "geohanaMenu". The "Powered By Geohana" logo is within a <span> tag, its selector is "poweredBy". The "Login" and "Menu" links are within a <span> tag, its selector is "menu".





Click here for an interactive example.



Basic Selectors

These selectors are used for every mashup "widget" and define the overall structure of the HTML elements.

div.verb

Top level widget element
Parent: none
Children: all of the selectors specified on this page

div.title

Title of the page
Parent: div.verb
Children: none

div.subtitle

Subtitle of the page Parent: div.verb
Children: none

div.box

Verb payload/content/body
Parent: div.verb
Children: none

div.geohanaMenu

Branding, footer, menu
Parent: div.verb
Children: none

span.leftNav

The left navigation button
Parent: div.verb
Children: none

span.rightNav

The right navigation button
Parent: div.verb
Children: none

Hyperlink and Menu

These selectors are used for the menus that appear in verbs as well as other navigational elements in the widget. Some of them rely on class mix-ins to extend the appearance of certain menu items.

a:link

A link
Parent: div.verb
Children: none

a:visited

A visited menu link
Parent: div.verb
Children: none

a:hover

A menu link during hover
Parent: div.verb
Children: none

div.item

A menu item
Mixes with: div.action, div.poi, div.category, div.catLink, div.setting, div.favorite, div.nearby Parent: div.verb
Children: none

div.action

A menu item for a POI action
Mixes with: div.item Parent: div.verb
Children: none

div.poi

A menu item representing a POI
Mixes with: div.item Parent: div.verb
Children: none

div.category

A menu item representing a category
Mixes with: div.item
Parent: div.verb
Children: none

div.catLink

A menu item that invokes the category verb
Note: This invokes the category verb, while the div.category selector is used for menu items which represent a category verb.
Mixes with: div.item
Parent: div.verb
Children: none

div.setting

A menu item for a system setting
Mixes with: div.item
Parent: div.verb
Children: none

div.favorite

A menu item for a favorite POI
Mixes with: div.item
Parent: div.verb
Children: none

div.nearby

A menu item for a nearby POI
Mixes with: div.item, div.poi
Parent: div.verb
Children: none

div.addressLink

A menu item for an address. Used to disambiguate addresses.
Mixes with: div.item
Parent: div.verb
Children: none

Error Message

These selectors display error messages.

span.error

Used for error messages
Parent: div.verb
Children: a:link, a:visited

Form, Input, Label

These selectors provide the means for a user to input information that is used by verbs, such as searching.

span.label

Used for the form's labels
Mixes with: span.required
Parent: div.verb
Children: none

span.required

A label for a required form field
Parent: div.verb
Children: none

form

A form with fields to allow user to input information
Parent: div.verb
Childen: none

input

A field to allow user to input information
Parent: div.verb
Children: none

Point Of Interest

These selectors display information about
a point of interest.

span.poiTitle

The name of a POI
Parent: div.verb
Children: none

span.poiAddress

The address of a POI (full, street, locality?)
See also: div.poi, div.addressLink
Parent: div.verb
Children: none

span.poiProps

Properties of a POI, such as phone number, web site. Parent: div.verb
Children: none

Selectors by Pages (verbs)

Find By Address

Surrounding div id: "findByAddress" (Click here for further help.)

Css selectors defined:

  • span.error: Used for error messages
  • span.label: Used for the form's labels

Context Actions

Surrounding div id: "contextActions" (Click here for further help.)

Css selectors defined:

  • span.poiTitle: Defines the name of the POI
  • span.poiAddress: Defines the address of the POI
  • span.poiProps: Defines the phone number, fax number and website of POI (if any)
  • div.item: Defines a list item, in this case the POI action.
  • div.action: Defines a list item which is an action on a POI.

Category

This page displays a list of categories or a list of POIs which belong to a category.

Surrounding div id: "category" (Click here for further help.)

Css selectors defined:

  • div.item: Defines a list item, in this case a category or a POI.
  • div.poi: Defines a list item which is a POI.
  • div.category: Defines a list item which is a category.
  • Span.leftNav: Defines the left navigation button
  • Span.rightNav: Defines the right navigation button

Find by Latitude and Longitude

Surrounding div id: "latlong" (Click here for further help.)

Css selectors defined:

  • span.error: Used for error messages
  • span.label: Used for the form's labels

Recent Locations

Surrounding div id: "history" (Click here for further help.)

Css selectors defined:

  • div.item: Defines a list item, in this case a category or a POI.
  • div.poi: Defines a list item which is a POI.
  • div.catLink: Defines a list item which is a link to the category verb.
  • Span.leftNav: Defines the left navigation button
  • Span.rightNav: Defines the right navigation button

Settings

Surrounding div id: "preferences" (Click here for further help.)

Css selectors defined:

  • div.item: Defines a list item, in this case a category or a POI.
  • div.setting: Defines a list item which is a setting.

Start

Surrounding div id: "start" (Click here for further help.)

Css selectors defined:

  • div.item: Defines a list item, in this case a category or a POI.

Error

Surrounding div id: "error"

Css selectors defined:

(none)

Favorites

Surrounding div id: "favorites" (Click here for further help.)

Css selectors defined:

  • div.item: Defines a list item, in this case a category or a POI.
  • div.poi: Defines a list item which is a POI.
  • div.catLink: Defines a list item which is a link to the category verb.
  • div.favorite: Defines a list item which is favorite POI.
  • Span.leftNav: Defines the left navigation button
  • Span.rightNav: Defines the right navigation button

Favorites: add

Surrounding div id: "favorites"

Css selectors defined:

(none)

Favorites: remove

Surrounding div id: "favorites"

Css selectors defined:

(none)

Favorites: error

Surrounding div id: "favorites"

Css selectors defined:

(none)

Nearby Locations

Surrounding div id: "contexts" (Click here for further help.)

Css selectors defined:

  • div.item: Defines a list item, in this case a category or a POI.
  • div.poi: Defines a list item which is a POI.
  • div.catLink: Defines a list item which is a link to the category verb.
  • Span.leftNav: Defines the left navigation button
  • Span.rightNav: Defines the right navigation button

Nearby Verbs

This page displays a list of nearby verbs (actions on a POI) or a list of POIs grouped by an action. (i.e. action: "Reserve a table", POIs: Restaurants).

Surrounding div id: "nearbyVerbs" (Click here for further help.)

Css selectors defined:

  • div.item: Defines a list item, in this case a category or a POI.
  • div.action: Defines a list item which is an action on a POI.
  • div.nearby: Defines a list item which is a nearby item.
  • div.poi: Defines a list item which is a POI.
  • Span.leftNav: Defines the left navigation button
  • Span.rightNav: Defines the right navigation button

Disambiguation

This page displays a list of addresses to choose form when an address searched for is ambiguous.

Surrounding div id: "disambiguation" (Click here for further help.)

Css selectors defined:

  • div.addressLink: Defines an address.

Geohana API References -> Geohana CSS Style Guide