Gallery3:Themes:CSS ID and Class Selectors

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