In this page we present the documentation about the customization of the appearance of ScrewTurn Wiki.
1 - Introduction to Themes
ScrewTurn Wiki is able to use "style packages" called
Themes. A Theme defines the aspect of the Wiki in fine detail. Physically, a Theme is a directory placed inside the
Themes directory (for example
http://www.mywiki.com/Themes/MyTheme).
The Theme's directory may contain any type of file, but it should contain at least a CSS file; for example, the
Default Theme's directory is structured as described below:
Default/
Screen_Styles.css
Print_Styles.css
Icon.ico
Scripts.js (that's actually empty)
Images/
... all the images of the Theme
1.1 - Cascading Style Sheets (CSS)
A Theme may include an arbitrary number of CSS files; they are always sent to the browser. These CSS files have anything special, they are just standard Cascading Style Sheets.
1.1.1 - CSS Naming Conventions
CSS Classes are always named with a full-lowercase name, for example
a.imagelink.
CSS IDs are always names with a CamelCase name, for example
MainDiv.
1.2 - CSS Media Types
The CSS standard defines different
media types. Each one specify a different target device, such as a PC screen, a PDA or a printer.
ScrewTurn Wiki supports different media types through a special naming convention of CSS files. If you want to specify that a CSS file is intended for the
screen media type, just prepend to its name the label
screen_. A complete list of available media types is reported here (names are
not case-sensitive):
- Screen, used for color computer screens
- Print, used for printers
- Handheld, used for low-resources devices like PDAs and mobile phones
- Projection, used for projections
- Tty, used for text-only terminals
- Tv, used for TVs
- Embossed, used for paged braille printers
- Aural, used for speech synthesizers
- Braille, used for braille tactile feedback devices
- All, used for all the device types
1.3 - FavIcon and JavaScript
All the JavaScript files (
*.js) are automatically included in every page of the Wiki. Please note that
ScrewTurn Wiki already uses some JavaScript, but all the functions are named with a double underscore prefix, for example
__ToggleImages(). This helps to prevent name conflicts with custom JavaScript.
It is possibe to set a
FavIcon for the Wiki. To do that, just place a file in the Theme directory named Icon.ico, Icon.png or Icon.gif (names are case-unsensitive) and it will be set as FavIcon for every page of the Wiki.
2 - Theming pseudo-API
The Wiki is customizable in every aspect. Each block of the web interface has a specific CSS class and/or ID, therefore its properties can be entirely set using CSS files.
2.3 - CSS Classes and IDs
The Wiki defines a set of CSS classes and IDs that are used in every page.
First of all, the content of the Wiki pages uses no
p tag, but the text is printed as-is, so it is rendered by the browser using the CSS styles available for the
body of the page.
Small blocks of text, in some circumstances, are wrapped in
p blocks.
The list of CSS classes used by the Wiki is described below (the list does not include page-specific classes, which are described in the next sections).
2.3.1 - Classes
- p.imagedescription: used for the description/legend of the images
- a.externallink: link to an external URL
- a.internallink: link to an internal url, NOT a Wiki page
- a.pagelink: link to a Wiki page
- a.unknownlink: link to an unknown resource
- a.emaillink: link to an Email address
- a.attachment: link to a Page attachment
- a.editsectionlink: link/button for editing a Page section (near Headers)
- h1.pagetitle: heading used for Page titles, in every page of the wiki
- h1.pagetitlesystem: heading used for page titles, in every system page if the engine (such as Search.aspx)
- h1.separator/h2.separator/h3.separator: headings used as titles; they should display some sort of "separator", as in the Default theme
- img.image: used for general-purpose images
- span.signature: wraps Users' signature
- div.clear: used for "clear" DIVs; it should have the attribute
clear set to both - div.imageleft/div.imageright: used for left/right aligned images
- div.warning: used to enclose generic warning messages
- div.transcludedpage: used to wrap transcluded Pages
- table.imageauto: used for table containing auto-aligned images
- div.box: used for boxes that wrap text (tag
(((...)))) - .resulterror/.resultok: classes used to mark text in case of error or success, respectively
2.3.1.1 - Page Discussion Classes
The following CSS classes are used only in Page Discussions.
- div.rootmessagecontainer: wraps root messages in a Page Discussion (the first message of a thread)
- div.messagecontainer: wraps all other messages in a Page Discussion
- div.messageheader: wraps the header of a Message
- span.messagesubject: wraps the subject of a Message
- div.messagebody: wraps the body of a Message
- div.reply: wraps the Reply button in every Message header
- a.reply: the link/button for replying to a Message
- a.edit: the link/button for editing a Message
- a.delete: the link/button for deleting a Message
2.3.2 - IDs
The following CSS IDs are used only in content Pages.
- div #TocContainer: wraps the TOC in Pages
- div #AttachmentsDiv: wraps the list of Page attachments
- div #PrintLinkDiv: wraps the next element in content Pages
- a #PrintLink: link/button for the printer-friendly version of a content Page
- a #ViewCodeLink: link/button for the code view of a Page
- a #DiscussLink: link/button to the Discussion of a Page
- a #BackLink: link/button to the normal Page view (visible in View Code or Discussion mode)
- a #PostReplyLink: link/button to post a message in a Page Discussion
- div #RedirectionInfoDiv: contains Redirection information (displayed when a Page is redirected from another one)
- div #RedirectionDiv: contains a link to the destination Page when the current one contains a Redirection tag
- div #BreadcrumbsDiv: contains the Breadcrumbs Trail in Pages
2.2 - Global Page Structure
The global structure is the same for
every page of the Wiki, and it is represented below.
Note: the page includes other standard XHTML tags which are omitted for brevity.
<div id="HeaderDiv">
<!-- Here is printed the content of the file Header.cs -->
</div>
<div id="ContainerDiv">
<div id="SidebarDiv">
<div id="SidebarHeaderDiv">
<!-- Used for layouting purposes -->
</div>
<div id="SidebarContentDiv">
<!-- Here is printed the content of the file Sidebar.cs -->
</div>
<div id="SidebarFooterDiv">
<!-- Used for layouting purposes -->
</div>
</div>
<div id="MainDiv">
<div id="MainHeaderDiv">
<!-- Used for layouting purposes -->
</div>
<div id="PageInternalHeaderDiv">
<!-- Contains local header for content Pages - file PageHeader.cs
This element can be omitted -->
</div>
<!--
HERE IS PRINTED THE ACTUAL CONTENT OF THE PAGE, DIFFERENT IN
"SYSTEM" (Admin.aspx, AllPages.aspx, ...) PAGES AND WIKI PAGES
-->
<div id="PageInternalFooterDiv">
<!-- Contains local footer for content Pages - file PageFooter.cs
This element can be omitted -->
</div>
<div id="MainFooterDiv">
<!-- Used for layouting purposes -->
</div>
</div>
</div>
<div id="FooterDiv">
<!-- Here is printed the content of the file Footer.cs -->
</div>
2.3 - Wiki Pages
The content of the Wiki Pages, which contain the actual content, is placed between the two DIVs named
MainHeaderDiv and
MainFooterDiv. The structure of the markup that is placed there is reported below.
<a id="PageTop"></a> <!-- Used as "page top" anchor -->
<div id="PageHeaderDiv">
<!-- Contains header info of the Page, such as Title, date and user -->
<div id="EditHistoryLinkDiv">
<a id="EditLink">...</a> <!-- Link to the Edit page -->
<a id="HistoryLink">...</a> <!-- Link to the page History -->
</div>
<h1 class="separator">Page Title</h1>
<div id="PageLockedDiv">...</div>
- or -
<div id="PagePublicDiv">...</div>
<div id="RssLinkDiv">
<a id="RssLink">...</a> <!-- Link to the RSS feed -->
</div>
<div id="PageInfoDiv">
<!-- Page info, such as date and time, user -->
</div>
</div>
<div id="PageContentDiv">
<!-- THE CONTENT OF THE PAGE -->
</div>
2.4 - System Pages
"System" Pages are all the non-content pages, such as Admin.aspx, Login.aspx, AllPages.aspx and so on. These pages, due to their particular purposes, have not a standard structure. Most of them have no need to be customized in detail, so there are not named elements or page-specific CSS classes. The pages that have customization possibilities are described in this section.
2.4.1 - Admin.aspx
In the page
Admin.aspx the following CSS classes and IDs are used:
- input.tab: the buttons acting like "tabs", in their "unselected" status
- input.tabselected: the buttons in their "selected" status
- div #TabDiv: contains the tabs
- div #DatePickDiv: contains the date/time format options in the Configuration tab
- a.datepicklink: the class of the date/time format option links
2.4.2 - AllPages.aspx
In the page
AllPages.aspx the following CSS classes and IDs are used:
- table #PageListTable: the table containing the list of all the Pages
- table #PageListHeader: the first row (tr) of the table
- td.pagelistcellodd: the odd-rows' cells (td) of the table
- td.pagelistcelleven: the even-rows' cells (td) of the table
- p #PageTreeP: contains the tree of the Pages
2.4.3 - Edit.aspx
In the page
Edit.aspx the following CSS classes and IDs are used:
- ul #FormatUl: the Unordered List (ul) containing the formatting buttons (bold, italic, ...)
- a.formatlink: the class of each formatting button (they are actually links)
- a #*Link: all the formatting buttons' links are named using their function as prefix and Link as suffix; take a look at the source of the page for the complete list. They usually act like toolbar buttons, modifying the text or displaying a menu or a dialog
- div #SpecialTagsDiv: contains the special tags tools
- a.specialtaglink: the links containing the special tags tools
- div #AnchorsDiv: the DIV containing the anchors tools
- a.anchorlink: the links containing the anchors tools
- div #ImagesDiv: the DIV containing the images tools
- a.imagelink: the links containing the images tools
- div #SpecialCharsDiv: the DIV containing the special chars tools, at the bottom of the page
- div #PreviewDiv/div #PreviewDivExternal: the two DIVs used to display the preview of the content; they are available only when the preview is displayed
- div #ConcurrentEditingDiv: contains information about concurrent editing, detected by the engine
- div #PageListDiv: contains the list of Pages available for linking (see next element)
- a.pagelistlink: link/button that allows to place a link to a Page in the text
- input #TxtSearchPage: the textbox used for page search in the page list
- div #SnippetListDiv: contains the list of available Snippets
- a.snippetlistlink: link/button that allows to insert a Snippet in the text
- div #FileListDiv: contains a tree of files available for linking
- div #FileTreeDiv contains the actual tree
- div.subtreediv contains a subtree of the tree
- a.subdirlink: link/button to open/close a subtree containing a directory
- a.filelink: the actual link to a file, allowing to insert a link in the text
2.4.4 - History.aspx
In the page
History.aspx the following CSS Classes and IDs are used.
- table #RevisionListTable: the table containing the Page Revisions
- tr #RevisionListHeader: the first row in the table
- td.revisionlistcelleven/td.revisionlistcellodd: even/odd cells in the table
2.4.5 - Search.aspx
In the page
Search.aspx the following CSS Classes and IDs are used.
- div #SearchCatExtDiv: contains the DIV that contains the categories filter list, label and all/none/invert buttons
- div #SearchCatDiv: contains the categories filter list (inside SearchCatExtDiv)
- div #SearchControlsDiv: contains the search input controls (textbox, button, etc.)
- div #SearchInstructionsDiv: inside the SearchControlsDiv, contains the search instructions
- div #SearchResultsDiv: contains the search results
2.4.6 - Upload.aspx
In the page
Upload.aspx the following CSS Classes and IDs are used.
- table #FileListTable: the Table containing the file list
- tr #FileListHeader: the first row in the file list Table
- td.filelistcellodd: the odd-rows' cells (td) of the table
- td.filelistcelleven: the even-rows' cells (td) of the table
- input.compact: used for the Quick Upload directory name textbox