History of IconStyles

{maketoc}
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.

{attachment id=403}
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.

! Adding new IconStyles
It's quite easy to add new IconStyles thanks to the fact that we try to stick to the official [http://tango.freedesktop.org/Standard_Icon_Naming_Specification|Icon Naming Specification]. Since the [http://tango.freedesktop.org/|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.
{code title="IconStyles Directory"}
// base IconStyles directory
themes/icon_styles/<style>/

// substructure of the icon style
themes/icon_styles/<style>/small/
themes/icon_styles/<style>/large/
themes/icon_styles/<style>/style_info/
{/code}

!! 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.
* [http://art.gnome.org/themes/icon/|Gnome art]
* [http://www.kde-look.org/index.php?xcontentmode=27|KDE-look]
* Here is a [http://ramnet.se/~nisse/diverse/temp/themes%20following%20the%20naming%20spec.html|list of IconStyles that adhere to the naming specification]

!! 2. Make the icon style compatible with bitweaver
There are 3 types of icon themes:
# Themes that have a full set of various icon sizes
# Themes that come as SVG icons only
# 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.
{code title="Typical icon theme directory structure"}
// List of directories within the theme
16x16
22x22
32x32
48x48
64x64
128x128
scalable

// every size has a similar set of subdirectories
16x16/actions
16x16/apps
16x16/categories
16x16/devices
16x16/emblems
16x16/mimetypes
16x16/places
16x16/status
{/code}
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__.
{code source=Bash title="Execute this to move all icons to the appropriate directories"}
#!/bin/bash
mkdir -p foo/small foo/large
cp 16x16/*/*.png foo/small/
cp 32x32/*/*.png foo/large/
mv foo /bitweaver/themes/icon_styles/
{/code}

!!! 2. SVG icon set themes
These icon themes contain only SVG icon files. 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__ installed (you need to install __librsvg__ if you don't have it).
In your downloaded icon theme you can execute something like this:
{code source=Bash title="Convert SVG icon theme to bitweaver compatible icon theme"}
#!/bin/bash
echo Will convert an SVG Gnome or KDE icon theme to a usable bitweaver icon theme
echo

# Validate Input
if [[ ( $1 == '--help' ) || ( $1 == '-h' ) || ( $1 == '?' ) ]]
then
echo "Usage: sh icon_theme_converter.sh [options]
This script requires that rsvg is available (i.e.: librsvg is installed)."
exit
fi

if [ rsvg ]
then
echo "'rsvg' was found in your \$PATH."
else
echo "rsvg could not be found in your \$PATH. Please download and install librsvg."
exit
fi

dir=scalable

if [ -d "$dir" ]
then
for folder in `find ./$dir/ -maxdepth 1 -type d`; do
folder=`basename $folder`
if [ "$folder" != $dir ]; then
echo "Converting $folder icons"
for icon in ./$dir/$folder/*.svg; do
basename=${icon%.*};
basename=`basename $basename`;

mkdir -p "./small/"
rsvg -w16 -h16 $icon "./small/${basename}.png";

mkdir -p "./large/"
rsvg -w32 -h32 $icon "./large/${basename}.png";
done;
fi;
done

echo
echo "Conversion is done. Now you need to create an icon style directory, move small/
and large/ into it and place that in the bitweaver/themes/icon_styles/ directory."

else
echo "Please copy this script to the theme you want to convert and run it from there.
Make sure the svg directory is avalable and that it's called 'scalable'"
fi
{/code}

!!! 3. SVG mixed with PNG icon set themes
You can use the SVG script above and then copy across all PNG icons overwriting the freshly converted icons with the PNG versions - basically combining both scripts:
{code source=Bash title="Combining both scripts for mixed icon themes"}
#!/bin/bash
echo Will convert an SVG Gnome or KDE icon theme to a usable bitweaver icon theme
echo

# Validate Input
if [[ ( $1 == '--help' ) || ( $1 == '-h' ) || ( $1 == '?' ) ]]
then
echo "Usage: sh icon_theme_converter.sh [options]
This script requires that rsvg is available (i.e.: librsvg is installed)."
exit
fi

if [ rsvg ]
then
echo "'rsvg' was found in your \$PATH."
else
echo "rsvg could not be found in your \$PATH. Please download and install librsvg."
exit
fi

dir=scalable

if [ -d "$dir" ]
then
for folder in `find ./$dir/ -maxdepth 1 -type d`; do
folder=`basename $folder`
if [ "$folder" != $dir ]; then
echo "Converting $folder icons"
for icon in ./$dir/$folder/*.svg; do
basename=${icon%.*};
basename=`basename $basename`;

mkdir -p "./small/"
rsvg -w16 -h16 $icon "./small/${basename}.png";

mkdir -p "./large/"
rsvg -w32 -h32 $icon "./large/${basename}.png";
done;
fi;
done

cp -f 16x16/*/*.png ./small/
cp -f 32x32/*/*.png ./large/

echo
echo "Conversion is done. Now you need to create an icon style directory, move small/
and large/ into it and place that in the bitweaver/themes/icon_styles/ directory."

else
echo "Please copy this script to the theme you want to convert and run it from there.
Make sure the svg directory is avalable and that it's called 'scalable'"
fi
{/code}

!! 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
{code source=PHP title="kernel/setup_inc.php"}
// Change this line to your preferred default style
define( 'DEFAULT_ICON_STYLE', 'tango' );
{/code}

! 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
Date/CommentUserIPVersion
07 Sep 2008 (17:19 UTC)
laetzer85.178.9.13415
Current • Source
laetzer85.178.11.15513
View • Compare • Difference • Source
Kozuch85.207.244.16012
View • Compare • Difference • Source
laetzer85.178.26.979
View • Compare • Difference • Source
Unknown194.63.141.2028
View • Compare • Difference • Source
xing194.152.164.457
View • Compare • Difference • Source
xing194.152.164.456
View • Compare • Difference • Source
spiderr69.134.144.35
View • Compare • Difference • Source
xing194.152.164.454
View • Compare • Difference • Source
xing194.152.164.453
View • Compare • Difference • Source
xing194.152.164.452
View • Compare • Difference • Source
xing194.152.164.451
View • Compare • Difference • Source