TWiki Web>NatSkin>NatSkinCss (12 Sep 2008, TWikiAdminGroup)EditAttach

NatSkinCss

This is a reference guide to all css classes used by NatSkin. These are all classes and not ids, that is all classes below are applied to the html markup using class="natXYZ". All classes refering to html elements that are part of the NatSkin templates are named using the nat prefix in their name (example: natBodyContents, natMain, natSideBar, etc).

NatSkin does not make use of positional css or floats. Instead the main layout is done using a html <table> element classified natLayoutTable that uses a fixed table layout (means: not depending on the inner content).

The reason for this is to provide a more reliable user experience on different browsers and a simplification of css code. So css means are used mainly for fonts, colors, spaces and margines but not for general page layouting on the client side. Instead different layouts are emitted by the server using different html markup.

The basic layout consists of a topbar (natTopBar), a middle part (natMiddle) holding the sidebar(s) (natSideBar) as well as the main area (natMain) and a bottom bar (natBottomBar). Within these boundaries NatSkin provides a one, two or three columns layout in the middle area depending on the sidebar being switched off, on the left/right side or displayed on both sides respectively. Different html markup and classification is done on the serverside so that adequat css takes effect in different configurations. For example if the sidebar is configured to be on the left it can be addressed using natSideBarLeft in addition to the standard natSideBar class. Accordingly the topic area (natMain) will be located on the opposite side and will be named natMainRight if the sidebar is on the left. If the sidebars are both switched off the natMain area will be called natMainRight and natMainLeft at the same time. The same logic applies to the natBottomBar although it is not part of the natMiddle. Nevertheless it will be classified natBottomBarLeft or natBottomBarRight depending on the sidebar being on the right or left side respectively. This is usefull if the bottom bar is to be displayed under the natMain area. Additionally the natBottomBar will be classified as natBottomBarBoth.

Alphabetic list

Class	Files	Description
`natAction`	edittopicactions.nat.tmpl, previewtopicactions.nat.tmpl, settingstopicactions.nat.tmpl	highlights current action
`natAltButton`	oopsleaseconflict.nat.tmpl, oopslocked.nat.tmpl, oopslockedrename.nat.tmpl, oopslogonbase.nat.tmpl, oopsmore.nat.tmpl, oopsnoformdef.nat.tmpl, oopsrev.nat.tmpl, renamebase.nat.tmpl, renamewebbase.nat.tmpl	alternative submit action in skin forms, see also `natOkButton`, `natCancelButton`
`natAttachBody`	attach.nat.tmpl	html body during attach action
`natBody`	page.nat.tmpl, view.plain.nat.tmpl, view.print.nat.tmpl	html body, see also `natBodyPlain`, `natBodyPrint`, `nat...Body`
`natBodyContents`	defaultbody.nat.tmpl, view.plain.nat.tmpl, view.print.nat.tmpl	contains all page content inside the `natPageBox`
`natBodyPlain`	view.plain.nat.tmpl	html boy using the plain.nat skin, see also `natBody`
`natBodyPrint`	view.print.nat.tmpl	using the print.nat skin, see also `natBody`
`natBottomBar`	defaultbody.nat.tmpl	bottom element below the `natLayoutTable`
`natBottomBarBoth`	defaultbody.nat.tmpl	`natBottomBarBoth` conditional classification: sidebar switched off
`natBottomBarContents`	defaultbody.nat.tmpl, view.plain.nat.tmpl	contents container inside the `natBottomBar`
`natBottomBarLeft`	defaultbody.nat.tmpl	`natBottomBarBoth` conditional classification: sidebar on the right
`natBottomBarRight`	defaultbody.nat.tmpl	`natBottomBarBoth` conditional classification: sidebar on the left
`natBottomTopicActions`	edit.nat.tmpl, preview.nat.tmpl
`natBoxBorderBottomLeft`	defaultbody.nat.tmpl
`natBoxBorderBottomRight`	defaultbody.nat.tmpl
`natBoxBorderLeft`	defaultbody.nat.tmpl
`natBoxBorderRight`	defaultbody.nat.tmpl
`natBoxBorderTopLeft`	defaultbody.nat.tmpl
`natBoxBorderTopRight`	defaultbody.nat.tmpl
`natBreadCrumbs`	edit.nat.tmpl, preview.nat.tmpl, view.nat.tmpl
`natCancelAction`	edit.nat.tmpl, preview.nat.tmpl
`natCancelButton`	changeform.nat.tmpl, moveattachment.nat.tmpl, oops.nat.tmpl, oopsattention.nat.tmpl, oopsempty.nat.tmpl, oopserrbase.nat.tmpl, oopsleaseconflict.nat.tmpl, oopslocked.nat.tmpl, oopslockedrename.nat.tmpl, oopslogonbase.nat.tmpl, oopsmngcreateweb.nat.tmpl, oopsmore.nat.tmpl, oopsnoformdef.nat.tmpl, oopsresetpasswd.nat.tmpl, oopsrev.nat.tmpl, rename.nat.tmpl, renameconfirm.nat.tmpl, renamerefs.nat.tmpl, renamewebbase.nat.tmpl, renamewebconfirm.nat.tmpl
`natChangeFormBody`	changeform.nat.tmpl	html body during changeform action
`natChangesBody`	changes.nat.tmpl	html body during changes cgi action
`natContact`	oops.nat.tmpl
`natCopyRight`	defaultbody.nat.tmpl, view.plain.nat.tmpl
`natCurrentAction`	edit.nat.tmpl, preview.nat.tmpl
`natDiffOptions`	oopsrev.nat.tmpl
`natDoneAction`	edit.nat.tmpl, preview.nat.tmpl
`natEdit`	edit.nat.tmpl, editform.nat.tmpl, settings.nat.tmpl
`natEditAction`	edit.nat.tmpl, preview.nat.tmpl
`natEditBody`	edit.nat.tmpl	html body during edit cgi action
`natEditBoldButton`	edittoolbar.nat.tmpl
`natEditBoldButtonAction`	edittoolbar.nat.tmpl
`natEditButton`	previewtoolbar.nat.tmpl
`natEditCancelButton`	edittoolbar.nat.tmpl, previewtoolbar.nat.tmpl
`natEditCenterButton`	edittoolbar.nat.tmpl
`natEditCenterButtonAction`	edittoolbar.nat.tmpl
`natEditDoneButton`	edittoolbar.nat.tmpl, previewtoolbar.nat.tmpl
`natEditEditTools`	edittoolbar.nat.tmpl
`natEditExtButton`	edittoolbar.nat.tmpl
`natEditExtButtonAction`	edittoolbar.nat.tmpl
`natEditH1Button`	edittoolbar.nat.tmpl
`natEditH2Button`	edittoolbar.nat.tmpl
`natEditH3Button`	edittoolbar.nat.tmpl
`natEditH4Button`	edittoolbar.nat.tmpl
`natEditHeadlineButtonAction`	edittoolbar.nat.tmpl
`natEditHeadlineTools`	edittoolbar.nat.tmpl
`natEditHelpButton`	edittoolbar.nat.tmpl
`natEditHelpTools`	edittoolbar.nat.tmpl
`natEditImageButton`	edittoolbar.nat.tmpl
`natEditImageButtonAction`	edittoolbar.nat.tmpl
`natEditIntButton`	edittoolbar.nat.tmpl
`natEditIntButtonAction`	edittoolbar.nat.tmpl
`natEditItalicButton`	edittoolbar.nat.tmpl
`natEditItalicButtonAction`	edittoolbar.nat.tmpl
`natEditJustifyButton`	edittoolbar.nat.tmpl
`natEditJustifyButtonAction`	edittoolbar.nat.tmpl
`natEditLeftButton`	edittoolbar.nat.tmpl
`natEditLeftButtonAction`	edittoolbar.nat.tmpl
`natEditMathButton`	edittoolbar.nat.tmpl
`natEditMathButtonAction`	edittoolbar.nat.tmpl
`natEditObjectTools`	edittoolbar.nat.tmpl
`natEditParagraphTools`	edittoolbar.nat.tmpl
`natEditPreviewButton`	edittoolbar.nat.tmpl
`natEditRightButton`	edittoolbar.nat.tmpl
`natEditRightButtonAction`	edittoolbar.nat.tmpl
`natEditSaveButton`	edittoolbar.nat.tmpl, previewtoolbar.nat.tmpl
`natEditSignatureButton`	edittoolbar.nat.tmpl
`natEditSignatureButtonAction`	edittoolbar.nat.tmpl
`natEditStrikeButton`	edittoolbar.nat.tmpl
`natEditStrikeButtonAction`	edittoolbar.nat.tmpl
`natEditSubButton`	edittoolbar.nat.tmpl
`natEditSubButtonAction`	edittoolbar.nat.tmpl
`natEditSupButton`	edittoolbar.nat.tmpl
`natEditSupButtonAction`	edittoolbar.nat.tmpl
`natEditTextTools`	edittoolbar.nat.tmpl
`natEditToolBar`	edittoolbar.nat.tmpl
`natEditUnderlinedButton`	edittoolbar.nat.tmpl
`natEditUnderlinedButtonAction`	edittoolbar.nat.tmpl
`natEditUndoButton`	edittoolbar.nat.tmpl, previewtoolbar.nat.tmpl
`natEditVerbatimButton`	edittoolbar.nat.tmpl
`natEditVerbatimButtonAction`	edittoolbar.nat.tmpl
`natErrorMsg`	oopsmngcreateweb.nat.tmpl, oopsmoveerr.nat.tmpl, oopsrenameerr.nat.tmpl, oopssaveerr.nat.tmpl, oopssendmailerr.nat.tmpl, oopssoftwareerr.nat.tmpl
`natFeedIcon`	defaultbody.nat.tmpl
`natFormAction`	edit.nat.tmpl, preview.nat.tmpl
`natFormActionButton`	attachagain.nat.tmpl
`natFormCancelButton`	attachagain.nat.tmpl, attachnew.nat.tmpl
`natFormOkButton`	attachagain.nat.tmpl, attachnew.nat.tmpl
`natHeaderArt`	defaultbody.nat.tmpl
`natLayoutTable`	defaultbody.nat.tmpl
`natLogonForm`	oopslogonbase.nat.tmpl
`natLogonFormButtons`	oopslogonbase.nat.tmpl
`natLogonFormHolder`	oopslogonbase.nat.tmpl
`natLogonFormLogin`	oopslogonbase.nat.tmpl
`natLogonFormPassword`	oopslogonbase.nat.tmpl
`natMain`	defaultbody.nat.tmpl, view.plain.nat.tmpl, view.print.nat.tmpl
`natMainContents`	defaultbody.nat.tmpl, view.plain.nat.tmpl, view.print.nat.tmpl
`natMainFooter`	defaultbody.nat.tmpl
`natMainFooterContents`	defaultbody.nat.tmpl, view.plain.nat.tmpl, view.print.nat.tmpl
`natMainFooterLeft`	defaultbody.nat.tmpl
`natMainFooterRight`	defaultbody.nat.tmpl
`natMainHeaderContents`	defaultbody.nat.tmpl
`natMainLeft`	defaultbody.nat.tmpl
`natMainRight`	defaultbody.nat.tmpl
`natMiddle`	defaultbody.nat.tmpl, view.plain.nat.tmpl, view.print.nat.tmpl
`natMiddleLeft`	defaultbody.nat.tmpl
`natMiddleRight`	defaultbody.nat.tmpl
`natMoveAttachmentBody`	moveattachment.nat.tmpl	html body while moving attachments
`natNotes`	attachsidebar.nat.tmpl, changeformsidebar.nat.tmpl, moveattachmentsidebar.nat.tmpl, renamesidebar.nat.tmpl, renamewebsidebar.nat.tmpl
`natOkButton`	changeform.nat.tmpl, moveattachment.nat.tmpl, oops.nat.tmpl, oopsattention.nat.tmpl, oopschangepasswd.nat.tmpl, oopsempty.nat.tmpl, oopserrbase.nat.tmpl, oopslanguagechanged.nat.tmpl, oopsleaseconflict.nat.tmpl, oopslocked.nat.tmpl, oopslockedrename.nat.tmpl, oopslogonbase.nat.tmpl, oopsmngcreateweb.nat.tmpl, oopsmore.nat.tmpl, oopsnoformdef.nat.tmpl, oopsresetpasswd.nat.tmpl, oopsrev.nat.tmpl, rename.nat.tmpl, renameconfirm.nat.tmpl, renamerefs.nat.tmpl, renamewebbase.nat.tmpl, renamewebconfirm.nat.tmpl
`natOops`	oops.nat.tmpl
`natOopsBody`	oops.nat.tmpl	html body in oops messages
`natOopsButtons`	oops.nat.tmpl, oopsattention.nat.tmpl, oopschangepasswd.nat.tmpl, oopsempty.nat.tmpl, oopslanguagechanged.nat.tmpl, oopsleaseconflict.nat.tmpl, oopslocked.nat.tmpl, oopslockedrename.nat.tmpl, oopsmngcreateweb.nat.tmpl, oopsnoformdef.nat.tmpl
`natOopsMessage`	oops.nat.tmpl
`natPageBox`	defaultbody.nat.tmpl
`natPreviewAction`	edit.nat.tmpl, preview.nat.tmpl
`natPreviewBody`	preview.nat.tmpl	html body during preview action
`natPreviewToolBar`	previewtoolbar.nattmpl
`natRdiffBody`	rdiff.nat.tmpl	html body during rdiff action
`natRevision`	rdiff.nat.tmpl, view.nat.tmpl
`natRenameBody`	renamebase.nat.tmpl	html body in rename actions
`natRenameWebBody`	renamewebbase.nat.tmpl	html body in rename web action
`natSaveAction`	edit.nat.tmpl, preview.nat.tmpl
`natSearch`	search.nat.tmpl
`natSearchAuthor`	search.nat.tmpl
`natSearchBody`	searchbase.nat.tmpl	html body in search action
`natSearchBox`	defaultsidebar.nat.tmpl, defaulttopbar.nat.tmpl
`natSearchBoxPos1`	defaultsidebar.nat.tmpl
`natSearchBoxPos3`	defaultsidebar.nat.tmpl
`natSearchBoxTop`	defaulttopbar.nat.tmpl
`natSearchHit`	changes.nat.tmpl, search.nat.tmpl, searchrenameview.nat.tmpl
`natSearchHitEven`	search.nat.tmpl
`natSearchHitOdd`	search.nat.tmpl
`natSearchRenameContents`	renamebase.nat.tmpl, renamewebbase.nat.tmpl
`natSearchRevision`	search.nat.tmpl
`natSearchString`	search.nat.tmpl, searchformat.nat.tmpl, searchrenameview.nat.tmpl
`natSearchTable`	changes.nat.tmpl, search.nat.tmpl, searchrenameview.nat.tmpl
`natSearchTableTitle`	search.nat.tmpl
`natSearchTarget`	search.nat.tmpl
`natSearchTotal`	search.nat.tmpl, searchformat.nat.tmpl, searchrenameview.nat.tmpl
`natSep`	changes.nat.tmpl, defaulttopbar.nat.tmpl, edit.nat.tmpl, moveattachment.nat.tmpl, preview.nat.tmpl, renamebase.nat.tmpl, searchbase.nat.tmpl, settings.nat.tmpl, view.nat.tmpl
`natSettingsBody`	settings.nat.tmpl	html body during settings action
`natSideBar`	defaultbody.nat.tmpl
`natSideBarContents`	defaultbody.nat.tmpl
`natSideBarLeft`	defaultbody.nat.tmpl
`natSideBarRight`	defaultbody.nat.tmpl
`natSideBarSearch`	searchbox.nat.tmpl
`natSideBarTitle`	defaultsidebar.nat.tmpl
`natSubmitOptions`	edit.nat.tmpl, edit.nattmpl, preview.nat.tmpl, preview.nat.tmpl
`natSyndicate`	defaultbody.nat.tmpl
`natTopBar`	defaulttopbar.nat.tmpl
`natTopBarSizer`	defaulttopbar.nat.tmpl
`natTopLeft`	defaulttopbar.nat.tmpl
`natTopLeftContents`	defaulttopbar.nat.tmpl
`natTopRight`	defaulttopbar.nat.tmpl
`natTopRightContents`	defaulttopbar.nat.tmpl
`natTopicActions`	defaulttopbar.nat.tmpl
`natTopicAttachments`	attach.nat.tmpl, attachagain.nat.tmpl, view.nat.tmpl, view.plain.nat.tmpl, view.print.nat.tmpl
`natTopicEditForm`	form.nat.tmpl
`natTWikiTopic`	formtables.nat.tmpl
`natTopicFormFirstCol`	form.nat.tmpl, formtables.nat.tmpl
`natTopicFormLabel`	form.nat.tmpl
`natTopicFormTitle`	form.nat.tmpl, formtables.nat.tmpl
`natUndoAction`	edit.nat.tmpl, preview.nat.tmpl
`natViewBody`	view.nat.tmpl	html body for view action
`natWebButtons`	defaulttopbar.nat.tmpl
`natWebButtonsContents`	defaulttopbar.nat.tmpl
`natWebSlogan`	defaulttopbar.nat.tmpl
`natWebTitle`	defaulttopbar.nat.tmpl

Topic revision: r2 - 12 Sep 2008 - 20:11:15 - TWikiAdminGroup

TWiki

Webs
DnD
Main
Support
TWiki

Copyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.NatSkinCss