RN Ordered List Icon Pack Download/Demo

Posted: Sat Feb 04, 2012 12:29 pm

We have a new wiki doc regarding Block Functionality and Styling changes in 2.5: [ Only registered users can see links on this board! Get registered or login! ]

As part of the block styling changes, background image(s) and/or CSS Sprites are used in place of standard list markers/numbers to maintain IE7 compatibility. CSS sprites are required for ordered lists. The default sprites provided only come in Black, Off White, and an example of number icons for Simply Blue. That is until now Smile

For those that need a custom colored number sprite, how about 70+ colors, a PSD file, and a Sprite Picker demo that will help you pick a sprite and output the appropriate CSS to your theme??

Sprite Picker Demo

[ Only registered users can see links on this board! Get registered or login! ]

Step 1: Style to Match Your Theme using the jQuery Colorpicker, then "toggle" thru the sprites to find your match!

Step 2: Copy/Paste CSS and upload images/css

Step 3: Refresh and Enjoy!

DOWNLOAD

[ Only registered users can see links on this board! Get registered or login! ]

Note: The online demo may not run "great" in all browsers. The colorpicker hasn't been updated in a few years and generates some JavaScript warnings, although for the purposes of a demo it functions well enough. Also, this page is not a good example of optimization as it includes 70+ small CSS files to toggle the sprites; which some older browsers may choke on. Embarassed

Also note that the first several sprites are in shades of gray and may not look much different until you get into some of the other colors.

Posted: Sat Feb 04, 2012 4:50 pm

Nice work as usual.

Worker Joined: Sep 28, 2006 Posts: 241

Wow, another great extra for RN.

Involved Joined: Jul 03, 2006 Posts: 273

I'm sorry but I am a little lost as to why someone would use an image for a numbered list? (at least one that does nothing more than change the color of the number??)

Posted: Sun Feb 05, 2012 8:22 pm

It was done for IE7 compatibility, which at the time the code was being worked on still had about a 10% market share. Fortunately its down to about 4% now. If you try floating list items in IE7 you will see the problem... Both in ordered and unordered lists...

But I understand, I wasn't 100% thrilled about sprites in this situation Wink

Overriding is easy enough within your style.css.. Didn't test, but something like this should do.

Code:

ol.rn-ol{padding-left:20px;list-style-type:decimal}


ol.rn-ol li{padding:0 4px 0 0;list-style-type:decimal}


.ol-num{background-image:none}