Fandom Developers Wiki
Register
Advertisement

PortableCSSPad is designed to make testing CSS code easier. The main feature of the script is that it provides a textarea box for typing or copy/pasting CSS rules which will immediately affect the current page. This can be used as a way to preview CSS changes before publishing them, or even as a work around for MediaWiki:Fandomdesktop.css caching issues.

While this script is not a replacement for in-browser developer tools, it does provide a few extra features such as minification, beautification, and validation. The pad itself is also resizable and draggable.

Installation

Usage

Once the script is installed, to open the pad, click on the PortableCSSPad link in your toolbar. The pad itself will look similar to the picture shown on the right. CSS rules can be typed or copy/pasted directly into the text box and will immediately affect the current page. There are also a few other features available by clicking the buttons at the top.

Button What it does
Important (exclamation point) Adds !important to all CSS properties
Unimportant (exclamation point with red line) Removes !important from all CSS properties
Beautify (yellow star) Beautifies (nicely formats) all CSS in the textarea
Minifiy (compacting icon) Minifies (removes comments and whitespace) CSS to reduce file size
Validate (W3C text) Opens the W3C CSS3 validation service in a new tab, you can copy/paste the contents of the textarea into the new tab to validate the CSS.
On/off (green/red button) Toggles the live-update feature on and off. While off, CSS rules in the pad are ignored.
Close (red X) Closes the pad

Other

Validation

PortableCSSPad-validate-example

A small extra feature which is separate from the pad is that, when viewing any article whose page name ends with .css (such as MediaWiki:Fandomdesktop.css or MediaWiki:Common.css), a small W3C validator logo will appear next to the title of the article / edit button.

Clicking that logo will automatically feed the stylesheet through the W3C CSS validator: https://jigsaw.w3.org/css-validator/. This can be very helpful for tracking down syntax errors in stylesheets.

WDS restyling

WDSPortableCSSPad

This script offers an optional modernization stylesheet in which gives the PortableCSSPad a modern Fandom theme to it.

Note: This will remove all icons except the close button, but this will be changed soon so that all buttons will have their new icons and will reappear again with this stylesheet.

Updated FDS styling

FandomizedPCSSP

This script offers an improved modernization stylesheet which has better specificity so it can be loaded before PortableCSSPad itself, and offers an redesigned text area in addition to a more minimalist container. All tools except for the on/off button and the close button have been removed, and due to their limited utility there are currently no plans to add them back.

Text above can be found here (edit)
Advertisement