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.
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.
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
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
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
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
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
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
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
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
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.
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
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
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
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
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
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
The error and help classes allow styling of the different types of UI messages.
div.error01 div.error02 div.helpMessage
The bucketLetter classes are for styling the letters on the show bucket detail page.
a.bucketLetter span.bucketLetterSelected
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
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.
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.