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
 
This site is powered by the TWiki collaboration platformCopyright © 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