Researching icons for PPTimer. Found some nice FAMFAMFAM icons. Think we could use the clock icons:

One problem is that they are only available in 16 px.

CSS-Übung: Listen mit grafischen Aufzählungszeichen

Auf der Webseite www.little-boxes.de habe ich ein interessantes Beispiel gefunden, wie man mit grafischen Aufzählungszeichen eine ungeordnete Liste <ul> optisch aufwerten kann.

Ich habe die Vorlage als Grundlage für meine Bearbeitung genommen. Dabei wurden von mir sowohl die CSS-Dateien als auch der HTML-Quellcode an diese Variante angepaßt.

Das fertige Beispiel sieht so aus:

[Live-Demo: Fertiges Beispiel oder Demo-Button anklicken!]

Die Grafiken für obiges Beispiel finden Sie hier: (Download: rechte Maustaste – Grafik speichern unter… )

Die 3 Icons stammen aus dem Silk-Set und Flags-Set von famfamfam.

Das Listen-Beispiel befindet sich in den Übungsdateien von Little Boxes Teil 02 und kann unter www.little-boxes.de/Beispieldateien heruntergeladen werden (4,3Mb ZIP-Datei; ca. 100 Beispiele!).

Modifizierter HTML-Quellcode:

Bearbeiteter CSS-Code:

Die CSS-Datei ist im HTML-Quellcode im Kopfbereich eingebunden!

CSS-Code:

body {
width:450px;
font-family:"Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
font-size:small;
font-weight:700;
line-height:1.5;
background-color:#ece9db;
color:#000;
margin:10px auto;
}
h3 {
color:#FFBF00;
background-color:#0F0F0F;
text-align:center;
letter-spacing:1px;
padding:1px 0;
}
a {
color:#009F00;
text-decoration:none;
}
a:hover {
text-decoration:none;
color:maroon;
border-bottom:1px dotted maroon;
}
#gif1 ul,#gif2 ul,#gif3 ul {
background-color:#DFDFDF;
border:1px solid #000;
margin-left:0;
padding:2px 20px;
}
#gif1 ul li {
list-style-type:none;
background:url(bullet_yellow.gif) no-repeat left 5px;
margin-left:-.5em;
padding:2px 20px;
}
#gif2 ul li {
list-style-type:none;
background:url(arrow_right.png) no-repeat left 5px;
margin-left:-.5em;
padding:2px 20px;
}
#gif3 ul li {
list-style-type:none;
background:url(at.gif) no-repeat left 6px;
margin-left:-.5em;
padding:2px 22px;
}

First download the flags from famfamfam into a folder called flags (pngs only,
no subfolders!).

Now in the bash:

cd flags
wget http://www.iso.org/iso/iso3166_en_code_lists.txt
ls > file.txt
irb

Now your on the interactive ruby shell (irb).

# If you want to use this as a script just copy
# the bash lines and put them as
# system 'cd flags'
# system 'wget ...' and so on

# We start treating the output from the ls
# open the ls output
f = File.new 'file.txt'
# place the file in lines
lines = f.readlines
# map those who have 2 digits codes
lines = lines.select { |line| line.size == 7 }
# get the 2 digits
lines = lines.map { |line| line[0..1] }
f.close

# Then the iso file
# open the iso file
f = File.new 'iso3166_en_code_lists.txt'
# get rid of the notes
f.readline
# place the file in iso
iso = f.readlines
# create a new hash
hashed_iso = {}
# select non empty lines
iso.select { |a| !a.rstrip.empty? }.map do |b|
  # remove the whitespaces and split in ';'
  aux = b.rstrip.split ';'
  # place info in the hash
  hashed_iso[aux[1].downcase] = aux[0].capitalize
end
f.close

# Now we cross information giving more
# importance to what's in the iso.
iso_famfamfam = hashed_iso.select {
  # select those who have flags in famfamfam
  |k,v| lines.member? k
}.sort_by {
  # sort them by the name the user will see
  |pair| pair[1]
}

# Now we create the contents to store in the yaml file
# create the yaml first line
yaml_lines = "hash: \n"
iso_famfamfam.each do |pair|
  # for each pair, create the yaml
  # representation and put in yaml_lines
  yaml_lines < < '  ' + pair[0] + ': '
                         + pair[1] + "\n"
end 

yaml_lines &#60;&#60; "array: ---\n"

iso_famfamfam.each do &#124;pair&#124;
  yaml_lines << '- - ' + pair[0] + "\n  - "
                            + pair[1] + "\n"
end 

# put it in a file
f = File.new 'flags.yml', 'w'
f.write yaml_lines
f.close

#sample for loading the yaml into ruby
f = File.new 'flags.yml'
fy = YAML.load f

Now you have your yaml representation of the flags. Do what you please. Personally I’m going to use the file to load it to Ruby when my Ruby on Rails app starts and use it as part of the registration system in the Open Source Online Testing System.

Everyone knows about the extremely popular open source FamFamFam icons created by Mark James. I am a fan of these icons as they are very clean and have no copyright issues and stuff. Even though there are several free icons like the Tango Icon Gallery they still do not have as many icons or the same quality as FamFamFam.

There is just on itsy-bisty problem with the “Silk Icon Set” of FamFamFam. As you might know that all icons are 16X16 PNG files. These PNG files have some transparency for, well the transparent part of the icon. All this is perfect but the problem in Internet Explorer ( like always). If you put these icons on a website and view it through IE then instead of the transparent area you would see a gray background.

I am not sure whether it is Mark James fault that he hasn’t saved transparency correctly or it is IE’s fault. So if you want to successfully use FamFamFam icons on IE you will have to use either PhotoShop or IrfanView to save them as GIF and then use them. I might be converting all of them into GIF and posting them here soon (though I am not too sure about the copyright issues that might arise).

If you are a user of FamFamFam Icons be cure to check out the Icon Selector for the Silk Icons!