You are here: STALklubben>System Web>SlionSkinCss (2006-03-07, ProjectContributor)EditAttach

CSS elements in SlionSkin

This page is a reference for all CSS classes used in SlionSkin.

Page contents:

SlionSkin uses 4 stylesheets:

  • layout.css: positioning of block elements on the page
  • style.css: margins, paddings, borders, font sizes
  • colors.css: text colors, background colors, border colors
  • print.css: optimalizations for printed page

If you want to learn how to create your own look or skin based on SlionSkin, read further in SlionSkin.

Naming conventions

  • All SlionSkin specific classes have the prefix slion: slionEditPage, slionTopicAction, etcetera.
  • Foswiki specific classes (emitted by the Foswiki engine) have the prefix twiki: foswikiButton, foswikiToc, etcetera. See for a complete list CascadingStyleSheets.
  • Positional containers are referred by id, for instance #slionSideBar.

Namespaces

SlionSkin uses namespaces for templates, by adding one (sometimes two - multiple) class names to the template's body tag.

  • The body tag in view.slion.tmpl for instance has the class name "slionViewPage": <body class="slionViewPage">. All CSS elements specific to the view template thus can be defined as .slionViewPage .someClassName.
  • All templates that are not the view template have the body class name "slionNoViewPage". That makes it easy to give all of these pages a different layout (smaller or wider margins for instance) in one sweep. Template edit.slion.tmpl uses <body class="slionNoViewPage slionEditPage">.

Page type classes

  • .slionViewPage
  • .slionViewPage .slionPrintPage
  • .slionNoViewPage
  • .slionNoViewPage .slionEditPage
  • .slionNoViewPage .slionAttachPage
  • .slionNoViewPage .slionChangeFormPage
  • .slionNoViewPage .slionDiffPage
  • .slionNoViewPage .slionRenamePage
  • .slionSearchResultsPage
  • .slionPlainPage (viewplain.slion.tmpl)

Layout classes

  • Main layout elements (in order of appearance in body.slion.tmpl)
    • #slionScreen - outer container, used when centering the page (see SlionSkinCssCookbookCenterPage)
    • #slionPageShadow - shadow border around slionPage; default not used (see SlionSkinCssCookbookCenterPageBorder)
    • #slionPage - html content container
    • Left bar:
      • #slionWrapper
      • #slionSideBar - left bar area
      • #slionSideBarContents - used for left menu
    • #slionOuter - wrapper container
    • #slionFloatWrap - wrapper container
    • #slionMain - center area
    • #slionMainContents - holder of slionTop, foswikiTopic, foswikiForm, foswikiAttachments, etc.
    • #slionTopBar - top bar area
    • #slionTopBarContents - header art / logo; contains topic WebTopBar?
    • #slionBottomBar - bottom bar area
    • #slionBottomBarContents - copyright

Style classes

  • View
    • .slionContent - container around .foswikiTopic in view.slion.tmpl only; to be able to give .foswikiAttachments and .foswikiForm a different appearance when they are not enclosed by it, for example the personal data form on the user pages (where the user form is positioned outside, above the topic text)
    • .slionTopBarLogo - logo position in slionTopBar (topic WebTopBar?)
    • .slionTopBarOverlay - striped white image background
    • .foswikiTopic - Foswiki topic text
    • .slionTop - area at top of topic text, with slionHomePath, revision and action buttons
    • .slionTopicActions - container for multiple .slionTopicAction rows
    • .slionTopicAction - container for .slionActionButtons
    • .slionActionButtons - action buttons at bottom of page
    • .slionMoved - topic moved info (only visible when the topic has changed name or web)
    • .slionWebIndicator - colored block at the top of the left bar to indicate the current web
    • .slionFormHolder - container around form to manage the size of form elements
    • .slionLeftBarPersonal - block of personal links (included topic %USERSWEB%.%USERNAME%LeftBar)
    • .slionHomePath - breadcrumb at top
    • .slionHomePathTitle - "You are here" text
    • .slionRevInfo - revision info and author name
    • .slionToolBar - holder for .slionToolBarButtons
    • .slionToolBarButtons - action buttons at top of page
    • .slionToolBarBottom - seperator
    • .slionSimpleLogo - logo used on 'simple' pages like the login screen
    • .slionButton - tab button Edit, Attach, Printable at top of topic
    • .slionMetaMenu - search box, jump box, language selector

  • Edit
    • .slionSig - signature copy box
    • .slionSaveOptions - holder for .slionSaveOptionsContents
    • .slionSaveOptionsContents - checkboxes that change the state of a topic save; for instance "Force revision" checkbox
    • .slionSaveHelp - info block with help on save options (access keys and potentially other info)

  • Preview page
    • .slionPreviewArea - container around preview of .foswikiTopic

  • Attach page
    • .slionPrevious - attachment table of previous versions
    • .slionMoveAttachment - container for "Move or Delete attachment"
    • .slionAttachForm

  • Rename (rename, move, delete)
    • slionRenameOptionsList - list of topics that can be updated

  • More
    • slionDiffOptions - row of revision options under "Compare revisions"

  • Search results
    • .slionSearchResults - container on rename pages (no longer used on actual search results 'view' pages)
    • .slionSearchResultsHeader - horizontal bar with the web color
    • .slionSearchResults - block of one result
    • .slionSearchResultCount - the number of results
    • .slionSearched - feedback on the string used to search

Related Topics: Skins, AdminDocumentationCategory
Edit | Attach | Print version | History:  | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r0 - 2006-03-07 - 23:57:43 - ProjectContributor
 
This site is powered by FoswikiCopyright © by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding STALklubben? Send feedback