Gallery3:Themes:CSS ID and Class Selectors - Gallery Codex
Personal tools

Gallery3:Themes:CSS ID and Class Selectors

From Gallery Codex

Page Layout

View and page layout containers


ID/Class

Purpose

Examples

.gView
#gAlbumView
#gItemView
#gAdminView

Root view layout container. Contains all other layout containers.


#gHeader

Contains page header contents, typically #gLogo, #gSiteMenu, #gLoginMenu, etc.


#gContent

Contains either album grid, individual item, dashboard elements, or admin view elements. Also contains breadcrumb and pagination menus.


#gSidebar

Contains contextually relevent content and menus, including meta data, tag cloud, album menu, etc.


#gFooter

Typically contains site credits and legal disclaimers.


Content Containers



ID/Class

Purpose

Examples

#gAlbumGrid
#gIndividualItem
#gSlideshow
#gComments
#gCommentThread

Placed within #gContent to contain specific content types.


.gAlbumItem

Placed within #gAlbumGrid to contain individual album thumbnails, titles, and metadata.


#gModuleBlock

Content block generated by G3's various module's. If a module provides multiple blocks, each must have a unique name. Ex. <div id="gTagCloud" class="gBlock">


.gBlock
.gBlockContent

Generic block classes used to apply consistent styles to all blocks within Page Layout containers (i.e. background colors, borders, margins, rounded corners, etc.).

CSS:
#gSidebar .gBlock {...}
#gSidebar #gTagCloud .gBlock {...}

HTML:
<div id="gMetadata" class="gBlock">

  <h2>Block Title</h2>
  <ul class="gBlockContent">
    ...
  </ul>
</div>

.gMetadata

Album meta:
Album thumbnail meta:
Item meta:


Images

Background image placement for pages, page areas, buttons, and icons.


ID/Class

Purpose

Examples

#gLogo



#gPhotoID-N



.gThumbnail



.gSized



.gIcon

provide padding to apply icon bg images to links, buttons, etc.


Menus/Navigation



ID/Class

Purpose

Examples

#gSiteMenu

global navigation


#gLoginMenu



.gBreadcrumb



.gPaginator



.gTagCloud



#gAlbumTree



#gImageCarousel



Dynamic, animated menus

See Ajax/DOM Scripting


Generic, Re-usable



ID/Class

Purpose

Examples

.gFirst

The first item in a group (i.e. menu, album grid row, etc.)


.gInline

Converts stacked block elements to floated elements. Can be used with list items, etc.


.gOdd
.gEven

Alternate row style (zebra striping)


Forms

Form layout modes, validation, and standard form IDs


ID/Class

Purpose

Examples

.gFormCompact Form layout modes - Visual distinquish standard form elements from edit-in-place elements to indicate difference in how each behaves.

Standard expanded - Labels appear to the left of inputs
Standard compact - Labels appear on separate line above inputs
Edit-in-place -


.gFormText
.gFormRadio
.gFormCheckbox
.gFormButton

These are used to style form inputs in browsers that don't support CSS attribute selectors like input[type="text"]. Inject these classes via JS for IE 6.

 

.gRequired

Indicates a required form field. Used without a validation rule class, this states that the field must contain some value, any value. It cannot be empty.


.gValidationRule

Form input validation rule display. If an input doesn't pass validation, display the validation rule for the submitter

<div class="gValidationRule">
  Please enter a password
</div>

.gNotEmpty
.gInteger
.gString
.gEmail
.gAlphaNum
.gUrl

Client-side, unobtrusive, validation classes. Might be able to use custom validation rules here too. Can be used with gRequired or by itself. If used separately, only throws an error if input is provided that doesn't conform to the validation rule.


#gSearch
#gUserLogin
#gUserRegister
#gAddItems
#gEditItem
#gCreateAlbum
#gEditAlbum
#gAddComment
#gModuleSettings

(replace 'Module' with module name or abbr.)

 

Form input validation indicators/messages

See State Indication


CSS Media Related

Show or hide page elements for specific media and devices


ID/Class

Purpose

Examples

.gScreenHide

Haven't thought this all the way through yet - CMK


.gPrintHide
.gPrintShow



.gHandheldHide
.gHandheldShow



Ajax/DOM Scripting

Provide support for the injection of HTML markup into templates,  manipulate the DOM, and alter CSS styles


ID/Class

Purpose

Examples

.gMinimizeable
.gCollapsible



.gEditInPlace



.gDropDownMenu

Drop down menus


.gTreeMenu

Tree menus


.gAccordionMenu

Accordion menus


.gPanel
.gDialog?

Modal dialog and panels that appear above the current view (confirm dialogs, lightbox-style slide shows, etc.)


.gLoading
.gProcessing
.gProgressBar
.gUnderState?

Various process status indicators (bars, spinning wheels, hour glasses, etc.)


.gRTE

Rich text editor


State Messages and Indicators



ID/Class

Purpose

Examples

.gActive
.gInactive



#gStatusMessages

Overall application status messages.


#gModuleMessages
#gItemMessages

Module or item status messages. Displayed over or adjacent to related item container.


.gInfo
.gSuccess
.gWarning
.gError



.gValidationError
.gValidationWarn

Apply to form input container (label or div). Change color and apply message icon.


CSS Hacks



ID/Class

Purpose

Examples




.gClearFix