CSS Skinning Manual

Starting with POPFile 0.22 skins are now made up of two parts, the CSS skin and optionally a modified HTML Templating Manual. Both are stored in a directory of the skin's name under the main skins directory. All CSS files are now named style.css since the name of the skin now comes from the directory. Any custom images used in your skin will also be placed in this folder.

List of Classes

The following is a list of all classes that may be used in skinning POPFile's interface. Each class is listed along with the elements that it applies to. For details on exactly what can be styled, please refer to the W3C's online references, <http://www.w3.org/TR/REC-CSS1> and <http://www.w3.org/TR/REC-CSS2/>. Note that current practice for a skin accepted into POPFile is to restrict the skins to CSS1 classes. That is not a firm rule as you can see there are skins that use some CSS2. Skins may use minor browser specific classes or CSS2 classes as long as they still look decent most modern browsers.

Shells

The shells are layout structures that allow you to style the outer borders of the header and main tables (not counting the menu). The “shell” class is the main center table, and the “shellTop” class is the one surrounding the header. Each shell is comprised of two row classes (top and bottom), left and right TD cells, and the individual cells on each row (left, center, right). In addition, the “naked” cell is the center area of the table that holds the contents. These tables can be styled as desired with colors, borders, or images.

table.shell
table.shellTop
tr.shellTopRow
td.shellTopLeft
td.shellTopCenter
td.shellTopRight
td.shellLeft
td.naked
td.shellRight
tr.shellBottomRow
td.shellBottomLeft
td.shellBottomCenter
td.shellBottomRight

Header Table

The header table is the enclosed table at the top of the page that contains the program name and shutdown link. The td.head class is the leftmost cell, and is the one that holds the “POPFile Control Center” text. The td.headShutdown class is the table cell on the right that holds the shutdown link (see Links).

table.head
td.head
td.headShutdown

Spacer

The spacer table cell is a means of separating the header table from the menus. Set the height to some em value (eg: 0.8em) as appropriate for the amount of space you desire.

td.logo2menuSpace

Menu

The menu table contains the tabs that allow the user to move from one page of the control center to another. The “menuIndent” class is used on a pair of table cells at either end of the menu row. The “menuSpacer” table class is the blank space between each menu item. “menuSelected” is the class used to indicate the currently active page. “menuStandard” is used on all other menu entries.

table.menu
td.menuIndent
td.menuStandard
td.menuSelected
td.menuSpacer

Footer Table

The footer table is the table at the bottom of the page that provides links (see Links) to other web resources, such as the manual and project home page. It is constructed as a single table cell, the “footerBody” inside the “footer” table.

table.footer
td.footerBody

Headers

These headers are used on each page to indicate the title of the current section. Each page may have its own styling of header.

h2.configuration
h2.security
h2.advanced
h2.magnets
h2.buckets
h2.history
h2.password
h2.session

Main Tables

These are the major tables used on their respective pages. They're the ones that have the alternating rowEven/rowOdd coloring. These classes allow you to do general styling on the tables, such as affecting the borders and spacing around cells.

table.magnetsTable
table.bucketsTable
table.historyTable

Layout

Each of the following controls positioning and layout of various elements that contain different portions of the control center. The “settingsTable” is for all major tables except the main tables, and the “settingsPanel” is used on each individual table cell in the “settingsTable”. The various divs surround textual explanation material or form widgets that may need their placement adjusted. The “historyWidgetsTop/Bottom” and “historyNavigatorTop/Bottom” classes allow for positioning of the controls on the History page. The “lookupResultsTable” is the table for word lookup at the bottom of the Buckets page. The “advancedAlphabet” and “advancedWords” are the header and data of the ignored words on the Advanced page.

table.settingsTable
td.settingsPanel
div.securityPassWidget
div.securityExplanation
div.securityAuthWidgets
div.advancedWidgets
div.magnetsNewWidget
div.bucketsMaintenanceWidget
div.bucketsLookupWidget
table.historyWidgetsTop
table.historyWidgetsBottom
td.historyNavigatorTop
td.historyNavigatorBottom
table.lookupResultsTable
th.advancedAlphabet
td.advancedWords

Message Viewing

Opening a message on the History page for viewing brings up a view that may be styled using these classes. The “openMessageTable” is the class for the entire table containing the message (but not the statistical information to the right). “openMessageBody” is used for the table cell that contains the message itself, while “openMessageCloser” is used for the table cells at the top and bottom of the message that allow you to close the view.

Links

Each general type of link in the page has its own class to allow for specialized styling. The “shutdownLink” is in the header, and the “bottomLink” class is for all links in the footer. The “downloadLogLink” is for the download log link on the Configuration page. The “menuLink” class is for the links in the menu tabs. The “messageLink” class is for the links in the history table's message subject column that allow you see the entire message. The “wordListLink” class styles the links in the bucket corpus page that do a probability search on each word. The “colorChooserLink” class provides a way to turn off background coloring in the color picker charts if your general link styling affects them.

a.shutdownLink
a.bottomLink
a.downloadLogLink
a.menuLink
a.messageLink
a.wordListLink
a.colorChooserLink

Buttons

The button classes allow you to customize the look of the buttons in the skin. “toggleOn” and “toggleOff” are for buttons that allow you to turn settings on and off (or answer yes or no to). The “reclassifyButton”, “deleteButton” and “undoButton” are for those respective actions on the History page, and for deleting magnets on the Magnets page. The “submit” class is for all other buttons. The removeButton class is optional and should probably be defined after the submit class since those buttons belong to both classes.

input.submit
input.toggleOn
input.toggleOff
input.deleteButton
input.undoButton
input.reclassifyButton
input.removeButton

Labels

The Label classes are used primarily for labelling form elements, using the label tag for text and selection input, and the span tag for labelling buttons. They are also used in the headers of the major tables; the history table uses a mix of table headers and links to allow sorting by column. The “historyLabelSort” class is the particular column that the data is currently sorted on.

(label, span).configurationLabel
(label, span).securityLabel
(label).advancedLabel
(th, label).magnetsLabel
(th, label).bucketsLabel
(th, label, span, a).historyLabel
(em).historyLabelSort
(label).passwordLabel

Forms

The classes used for forms allow custom styling of buttons on a per-page basis. The Magnets page has a delete button, while the rest use toggle switches. The associated spans are for the labels that are for styling the text that shows what the current state of the switch in question is. Finally, the checkboxes used on the History page can be styled as desired or needed.

form.bucketsSwitch
span.bucketsWidgetStateOn
span.bucketsWidgetStateOff
form.magnetsDelete
form.configSwitch
span.configWidgetStateOn
span.configWidgetStateOff
form.securitySwitch
span.securityWidgetStateOn
span.securityWidgetStateOff
input.checkbox

Line Coloring

These classes allow the styling of the alternating rows of the major tables, as well as the row of the currently opened message in the History table, if any. RowBoundary is optionally used to seperate mail download sessions on the history page.

tr.rowEven
tr.rowOdd
tr.rowBoundary
tr.rowHighlighted

Graphics

These classes comprise the aspects of the control center that deal with graphics. The “graphFont” is a span that contains the text percentage legends underneath each graph.

table.barChart
span.graphFont

UI Messages

The error and help classes allow styling of the different types of UI messages.

div.error01
div.error02
div.helpMessage

Other

The bucketLetter classes are for styling the letters on the show bucket detail page.

a.bucketLetter
span.bucketLetterSelected

Removed

These styles no longer apply to any UI element in POPFile 0.22 and no longer need to be styled in your skins.

table.colorChooserTable
img.colorChooserImg
ID: table#accuracyChart
td.accuracy0to49
td.accuracy50to93
td.accuracy94to100
img.lineImg

Addendums

In addition to the classes listed above, all text and drop-down selection input elements except those used for reclassifying messages (in other words, all that have explicit labels) have a unique ID associated with them. They are not listed here since they will typically not be styled individually. Examine the source for reference if necessary.

 
skinning.txt · Last modified: 2008/02/09 19:04 by manni

Should you find anything in the documentation that is incomplete, unclear, outdated or just plain wrong, please let us know and leave a note in the Documentation Forum.

Recent changes RSS feed Donate Driven by DokuWiki
The content of this wiki is protected by the GNU Fee Documentation License