History of IconStyles

Version 9


A description of what IconStyles are and how to create / use them

Created by: laetzer, Last modification: 17 Aug 2007 (11:19 UTC) by laetzer
bitweaver has always had th eoption of using your own icons by overriding existing ones. This has just been overhauled in R2 - our icon styles are now compatible with Gnome and KDE icon themes!

Using the IconStyles

IconStyles can be viewed and chosen on the Admin --> Themes --> Themes Manager page. A selection of icons is shown that you can select your favourite theme easily.
As soon as you add a new icon style, it should appear on the Themes Manager ready for selection.

A screenshot of the administration area where you can pick an icon style

Where can i get more IconStyles?

We don't have a repository for this yet. Hopefully soon though. We have started some icon research with a list of possible icon sets.

Adding new IconStyles

It's quite easy to add new IconStyles thanks to the fact that we try to stick to the official Icon Naming Specification. Since the Tango Desktop Project is tightly associated with the icon naming specification we chose this theme as the bitweaver default.

Where are Icon Styles?

You can find icon styles in your themes directory. The structure of an icon style is outlined below.

IconStyles Directory

// base IconStyles directory

// substructure of the icon style

1. Get new Icon Theme

You can get more icon themes from here - Please note that most of these themes don't adhere to the naming convention yet and will therefore probably not work with bitweaver. If you find new themes that adhere to naming specifications please let us know.

2. Make the icon style compatible with bitweaver

There are 3 types of icon themes:
  1. Themes that have a full set of various icon sizes
  2. Themes that come as SVG icons only
  3. Themes that come as a mixture where the PNG icon versions are used to give a nicer version of a given icon at it's size

1. Full icon set themes

These icon themes are the easiest to convert.

Typical icon theme directory structure

// List of directories within the theme

// every size has a similar set of subdirectories

We now need to move all the icons of a given size to a directory called small. Do the same for some other size and large. In bitweaver we are using 16x16 as small and 32x32 for large icons. Finally we copy the files into an appropriately named directory in bitweaver icon_themes.

In the example below we will create a style called foo.

Execute this to move all icons to the appropriate directories

mkdir -p foo/small foo/large
cp -f 16x16/*/*.png foo/small/
cp -f 32x32/*/*.png foo/large/
mv foo /bitweaver/themes/icon_styles/

2. SVG icon set themes

These icon themes contain SVG icon files and some also have some png files especially for small versions of the icons to make them look nice at those sizes. If you are on windows I have no idea how to convert these icons using a batch process (perhaps irfanview can deal with SVG files). On linux you will need rsvg in your path to execute the following script (you need to install librsvg if you don't have it).

Add style information

The style_info directory works exactly the same as it does in the theme styles directories. Please look at existing ones to see what is going on in there.

Override a couple of icons

The Tango icon theme is our default icon theme. This means that any icon that isn't found in your selected icon style will be searched for in the Tango theme. If you want to override a couple of icons, you can simply create your custom icon style in themes/icon_styles/ and then place your icons in the small and large subdirectories using the same names as in the Tango theme. Finally select your icon style in the Themes Manager page.
If you want to change the default icon style - we don't have an interface for this - you need to edit the define() in kernel/setup_inc.php


// Change this line to your preferred default style
define'DEFAULT_ICON_STYLE''tango' );

Convert all icons to gif

Thanks to our alltime favourite browser MSIE it's virtually impossible to use png icons unless you use some javascript. If you want to avoid this, you can use gif icons instead. i fyou are on linux and have ImageMagic installed, you can use this little script to convert all the png images to gifs
The above script will also create gif copies of all png icons, but if you want to do it manually, here is a code snippet that might help you.

PNG to GIF conversion script

echo Making gif copies of all png icons
echo The gif version is sent to Microsoft Internet Explorer to avoid transparency issues.
echo Creating directory to hold the final version of the icon style
mkdir -v $mydir
for dir in $dirlist
    echo Making gif copies in $dir/

    filelist=`ls $dir`

    for file in $filelist
        conv=`echo $file | perl -wpe 's/\.png//g'`
        convert $dir/$conv.png -channel A -threshold 50% $dir/$conv.gif 2>>biticonification_error.log;

        # experimentation...
        #convert $dir/$conv.png -channel A -threshold 65% -modulate 120,80,90 -fill "#99AAEE" -tint 50 -verbose $dir/$conv-tint.png 2>>biticonific┬╗
        #convert $dir/$conv.png -modulate 100,100,50 -fill "#AACCFF" -tint 50 -verbose $dir/$conv-tint.png 2>>biticonification_error.log;
        #convert $dir/$conv.png -modulate 100,100,50 -verbose $dir/$conv-tint.png 2>>biticonification_error.log;

    mv $dir $mydir/;

Overriding icons that are not found in the icon style

Some packages still require their own icons as the icon themes only provide a certain set of icons which are not always sufficient. You can override these in using the icons directory.
e.g.: To override the busy icon in liberty/icons/ place the busy icon you want to use (must have either gif, png or jpg extension) in themes/styles/<style>/icons/liberty/

Page History
07 Sep 2008 (17:19 UTC)
Current • Source
View • Compare • Difference • Source
View • Compare • Difference • Source
View • Compare • Difference • Source
View • Compare • Difference • Source
View • Compare • Difference • Source
View • Compare • Difference • Source
View • Compare • Difference • Source
View • Compare • Difference • Source
View • Compare • Difference • Source
View • Compare • Difference • Source
View • Compare • Difference • Source