login | register
Fri 21 of Nov, 2008 (09:32 UTC)

bitweaver - Web Application Framework and CMS

Web Application Framework and CMS

Refresh cacheHistoryPrint

IconStyles

A description of what Icon Styles are and how to create and use them

Created by: xing, Last modification: Sun 07 of Sep, 2008 (17:19 UTC) by laetzer

Page Contents

Bitweaver's Icon Styles are compatible with Gnome and KDE icon themes. Icon Styles can be viewed and chosen on the Admin > Themes > Themes Manager page. Icons Styles are presented for you to select from:

ss.png


About Icon Styles

Icon Styles added by the admin appear on the Themes Manager page. See icon research as a starting point for a new Icon Style. It's quite easy to add new Icon Styles thanks to the fact that Bitweaver sticks to the official Icon Naming Specification. Since the Tango Desktop Project is tightly associated with the icon naming specification we chose their theme Tango as bitweaver's default. The available Icon Styles reside in the themes directory:

IconStyles Directory

// base IconStyles directory
themes/icon_styles/somestyle/
 
// substructure of the icon style
themes/icon_styles/somestyle/small/
themes/icon_styles/somestyle/large/
themes/icon_styles/somestyle/style_info/


Overriding or adding specific icons

To use icons that are not part of an Icon Style, or to override icons that are, use the icons directory in your custom style. E.g., to override the "busy" icon in liberty/icons/ place the new "busy" icon in themes/styles/yourstyle/icons/liberty/ (must have either gif, png or jpg extension).

Getting new icon themes

Icon themes that don't adhere to the naming convention will probably not work with Bitweaver. Themes that do adhere to the naming specifications can be found on sites like:

Making the icon theme 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 is a nicer version of a given icon

1. Full icon set themes

These icon themes are the easiest to convert.

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

We now need to move all the icons of a given size to directories called small and large. Bitweaver uses 16x16 px for small and 32x32 px 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

#!/bin/bash
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

biticonification.sh.txt
These kinds of icon themes contain SVG icon files and also PNG files for small versions of the icons. On Linux you will need rsvg in your path to execute the following script (librsvg is required).


Addding style information

The style_info directory works exactly the same as it does in the theme styles directories.

Overriding a couple of icons

The Tango icon theme is BitweaveR's default Icon Style. Any icon not found in the currently 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. To change the default Icon Style (Tango), edit kernel/setup_inc.php:

kernel/setup_inc.php

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


Converting icons to GIF

If you want to avoid using Javascript to make PNG icons work in Microsoft's Internet Explorer, you can use GIF icons instead. On Linux with ImageMagic, 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

#!/bin/bash
echo Making gif copies of all png icons
echo The gif version is sent to Microsoft Internet Explorer to avoid transparency issues.
echo
echo Creating directory to hold the final version of the icon style
mkdir -v $mydir
for dir in $dirlist
do
    echo
    echo Making gif copies in $dir/
 
    filelist=`ls $dir`
 
    for file in $filelist
    do
        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;
    done
 
    mv $dir $mydir/;
done


Comments

Related Items

Online Help

These pages are linked from within bitweaver's administration

Attachment Tracker Filter  •  AuthenticationPluginMultisites  •  AuthenticationPlugins  •  bitweaverSyntax  •  DataPluginAddtabs  •  DataPluginAdsense  •  DataPluginAgentInfo  •  DataPluginArticle  •  DataPluginArticles  •  DataPluginAttachment  •  DataPluginAvatar  •  DataPluginBackLinks  •  DataPluginBiticon  •  DataPluginBlog  •  DataPluginCalendar  •  DataPluginClock  •  DataPluginCode  •  DataPluginComment  •  DataPluginCountDown  •  DataPluginCreationTime  •  DataPluginDiv  •  DataPluginDropDown  •  DataPluginExample  •  DataPluginGauge  •  DataPluginGeshiData  •  DataPluginHitCounter  •  DataPluginImage  •  DataPluginImg  •  DataPluginInclude  •  DataPluginLang  •  DataPluginLedgertable  •  DataPluginLibrary  •  DataPluginMakeTOC  •  DataPluginMapQuest  •  DataPluginMapQuestDirections  •  DataPluginModule  •  DataPluginObject  •  DataPluginPluginHelp  •  DataPluginQuote  •  DataPluginRenderer  •  DataPlugins  •  DataPluginSF  •  DataPluginSort  •  DataPluginSourceForge  •  DataPluginspan  •  DataPluginSplit  •  DataPluginSpyText  •  DataPluginTitleSearch  •  DataPluginTOC  •  DataPluginTranslated  •  DataPluginUserCount  •  DataPluginUserLink  •  DataPluginUserList  •  DataPluginWikiList  •  DataPluginYoutube  •  FeaturePrettyUrlsExtended  •  HTMLPurifier  •  HTMLSyntax  •  IconStyles  •  Inline Diff  •  LibertyMime  •  LibertyMime FLV Plugin  •  List of Plugins  •  ModuleParameters  •  Plugin Help Pages Source  •  PrettyUrls  •  Simple Purifier  •  StyleLayouts  •  Style Purifier  •  TikiWikiSyntax  •  TranslationTutorial