FANDOM


Nuvola apps important
This script is for PERSONAL use only!
You are free to install this script for yourself, but it is not allowed to be used wiki-wide (e.g., in MediaWiki:Common.js or MediaWiki:Wikia.js), as it would violate FANDOM's Terms of Use.
(See the customization policy)

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:Wikia.css caching issues.

While this script is not a replacement for Firebug or other 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 (exclaimation point) Adds !important to all CSS properties
Unimportant (exclaimation point with red circle) Removes !important from all CSS properties
Beautify (purple butterfly) Beautifies (nicely formats) all CSS in the textarea
Minifiy (compacting icon) Minifies (removes comments and whitespace) CSS to reduce file size
Validate (W3C logo) 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:Wikia.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: http://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 Portable CSS Pad 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.

Updates

9 December 2018
JustLeafy added an optional WDS version of this script.
9 May 2013
Mathmagician added title attributes to the buttons, made some other minor improvements.
8 December 2012
Mathmagician finally published the script.