TWiki> 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  

Edit | Attach | Print version | History: r2 < r1 | Backlinks | Raw View | Raw edit | More topic actions
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