Stylish / userstyles.org View Code Tricks

Here are a couple of tricks that will allow you to copy and/or condense CSS code published on userstyles.org, the Stylish website (Firefox only).

Copying a Style - WYSIWYG

Find a style for which you would like to copy the CSS code. Click the “Show code” button. An additional box should display on-screen containing the CSS code.

Move the mouse cursor into the new code box, hovering over an area containing the text for the code. The cursor should change from the default arrow to the vertical bar, indicating a text hover.

Right click the mouse and select “Inspect Element” from the context menu pop-up. An overlay should dim the entire screen, all except for the code box focus.

A new toolbar should appear near the top of the browser. An ‘X’ on the far right of the bar represents the Close button, which will be used if you wish to return everything to normal when you are done.


A second, smaller toolbar should appear directly above the smaller code box. Depending on your previous right-click selection, this toolbar may be named one of two things: code#stylish-code or pre#stylish-code. Initially, we are looking for the toolbar that begins with code#.

Select the arrow on the right of the Code box toolbar. A context menu should appear with two options to copy as the top menu selection choices. Copy Inner HTML will copy the code exactly as it appears inside the code box. Once copied, the code can be pasted into any text editor without all of the extra spaces and formatting.

Simple CSS Code Compression

The steps for compression are the exact same as outlined above, with two small exceptions. Right-click an area inside the code box that does not contain text. The code box toolbar should then be labeled pre#stylish-code. Select Copy Inner HTML. Now for the tricky part.

Open a New tumblr text post. Select HTML from the toolbar. Paste the code from the copy buffer into the HTML body of the message. Select the Update button.

When the message is once again displayed, the code will be compressed. Although this is not an optimal compression technique, it still does the job. For this example, the code compressed from 352 bytes down to 322 bytes (9% file size reduction). Not too bad. Copy/paste the compressed code from the Text post into your favorite text editor.

  1. ohnemitleid posted this

Welcome to my CSS Toy Box

This is where I test CSS toys. You are currently looking at a variant of Steven Bradley's 3 Column CSS Layout.

This Simple Auto-Playing Slideshow might move a bit fast, but each slide either contains a link or actually is a link. There is a wee bit of jquery in use for the slideshow to function.

The Title is a good example of a CSS Toy. Blurred text changing to 3D Text with a CSS timed transition.

Initially all I wanted was to create Post Drop-Shadows without using images. This rapidly grew into something else.

I've seen a lot of fancy tricks for links, but most of them required javascript or some variant. I wanted a pure CSS Slider menu, hopefully one that allowed images.

Please take a look around. There are lots of little things I have toyed with, from the rounded inner corners of the avatar frame to the linear gradient background with a semi-opaque "noise" filter overlay.

I'm trying to utilize what I have learned, not just post links to what you might be able to do with CSS. Enjoy!