Glx-Dock / Cairo-Dock - Edit

Home	Forums	Wiki	Doc	Install	Extras	Screenshots	IRC	Projects	Blog		Users	Groups	Register

Glx-Dock / Cairo-Dock Wiki Tutorial-Customisation Edit

The latest stable release is the *3.2.1* : How to install it here.

Information : The version displayed on this page is not the latest available.

Page History

Glx-Dock / Cairo-Dock

Language

English

Tutorial-Customisation

Last modifications	Tuesday 01 December 2009 à 13:12
Author	fabounet
Language	English

==The purpose of this tutorial== Cairo-Dock is fully themable, and you can really make your dock behave and look totally different from any other dock. This ability has a drawback : there are a lot of options. This little tutorial doesn't have the ambition to describe all of the options (they are already described in the config panel with tooltips for most of them), but to guide you along the customization of your dock. It also contains some useful tricks. ==First Step== This tutorial is made for Cairo-Dock 2.1.2 or later. If your version is older, it is strongly recommended to upgrade, because the dock improves itself at each new version. To get the latest version, use our repository, or grab the packages on LaunchPad, or install from the sources. This is fully explained on our wiki ([[http://wiki.glx-dock.org]]). Be sure to install the plug-ins too. ===First time=== The first time Cairo-Dock is launched, a default theme is applied. This is one theme amongst many others, it has been choosed partly by vote and partly because I liked it, so it's normal if it doesn't fit your taste! Before you start customizing your dock, you should try the other themes available through the Theme Manager : right-click -> Cairo-dock -> Theme Manager. Sort them by rating or sobriety according to your feelings, check the 2 little box at the bottom of the page, choose a theme, and apply. Quite easy. Repeat the operation until you've found the theme that fits you the best. Let's start with the Coz's "++Clear++" theme as a starting base, for instance. >>{{http://lusule.files.wordpress.com/2008/08/cairo-clear.jpg}}<< Coz's Clear Theme for Cairo-Dock Before you start configuring the look, it may be wise to decide which launchers you want in your dock, and possibly how you will organize them in sub-docks. To quickly remove an existing launcher, just drag and drop it out of the dock. To quickly add a new launcher, just drag and drop it from the Applications menu into the dock, amongst existing launchers; an animated indicator will appear to show you when you can drop it. __Note :__ To modify a launcher, right-click on it -> Modify this launcher. If you want to replace a launcher with another, the correct way is to delete the existing one and to create add a new one. Editing the existing one and changing its command is not recommended because launchers contain many other information. ===Switching and saving themes=== A good habit is to save your current theme after you made some changes to it. To save the current theme, open the Theme Manager, and go to the 2nd tab. There choose a name for your theme, and apply. If you want to apply another theme on your dock, go to the 1st tab, choose a theme, and validate. You can choose to apply the theme's behaviour and/or the theme's launchers, but you probably want to keep yours, so let the 2 boxes unticked. If you want to delete some themes you don't want anymore, go to the 3rd tab, and tick the unwanted themes, then validate, that will delete them. ==A quick overview== To open the configuration panel, <right-click> on Cairo-Dock, go to the Cairo-Dock sub-menu, and choose Configure. Several categories are proposed in the left margin. The one that concerns us is the 2nd one (named "Appearance"). But first, we'll quickly go through the 1st category, that defines how your dock behaves. Select the "++Behavior++" category; 4 modules are present : * The first one, Position, can be used to modify where the dock is placed on your screen (and on which screen for people using multi-screen with Xinerama). * The 2nd one, Visibility, defines how you access your docks : whether your dock auto-hides itself, stays below other windows or on the opposite reserve space for itself, whether sub-docks popup on click or on mouse-over, etc. * The 3rd one, Taskbar, is quite interesting. Here you can toggle on/off the display of the current applications inside the dock. If you choose to activate it, several options are at your disposal, and allow the Taskbar to act either like MacOSX, Windows7, or a normal Gnome/KDE panel. One handy option is to close aplication on middle-click. * The last one, System, regroups all the options that you will probably never want to tweak. Now select the "++Appearance++" category; a dizain of modules are present; they define the look of your dock. * The Background module lets you customize everything about the background of the docks : frame, background image, etc. * The Icons module is about the displaying of icons : icon theme, size, order, etc. * The Labels module lets you customize the way text is rendered above and on icons. * The Views module lets you change the way the dock and sub-docks are drawn : on a 3D plane, on a curve, on a parabole, etc. * The Dialogs module defines the appearance of the bubbles Cairo-Dock uses to notify you. * The Desklets module defines how applets are rendered when they are detached from the dock, and live on your desktop. * The Indicators module lets you personnalize all the indicators. These are graphics that are displayed to show something, like where you can drop something inside the dock, which is the current active window, which launchers are launched, etc * The others are plug-ins that provide animations and special effects on your icons. ===The Background=== Enough talking, let's go! First we'll setup the Background options. * You can choose to display an image in the background, or to fill it with a gradation of 2 colors. In the case of an image, you can choose to fill the background by repeating or by stretching it. * If you're using the auto-hide, you can also set up an image to be displayed when the dock is hidden. When hidden, the dock displays a "callback zone", where you place your cursor to let the dock show up. Usually you will set up a wide and not high rectangular zone, so choose your image accordingly, as it will be stretched to fill it. * To complete this, we can configure the outline of the dock : roudness of the corners, thickness and color of the line, etc. >>{{http://lusule.files.wordpress.com/2008/08/cairo-pink.jpg}}<< The previous Clear theme, with a different background color. ===The Icons=== Now, we will take care of the icons themselves. * At this point, it is nice to decide of a global icon look. You can find a lot of icon themes at gnome-look.org or other such sites. The dock lets you choose whether to use an icon theme for your icons, or whether to use your owns icons (they are located in ++~/.cairo-dock/current_theme/icons++; when you load a theme from the Theme Manager, this is where the theme places its custom icons). If you want to choose an icon theme, untick the option that says to use the local icons, and choose one of the available icon theme in the list. If you just want to use the default icon theme of your system, just let it blank. An easy way to quickly alter the global look of your icons is also to add a background to each of them. This is done easily by filling the corresponding field with the path of an image. Now let's take care of how the icons are rendered. * First we have the famous zoom effect; what you probably want to set up is the maximum zoom of the icons : 1.2 will give a light effect, when 2.0 will give a strong effect. * Then we have the reflection of the icons (for views that use it, like the 3D-plane or Curve views). If you want to reduce the height of your dock, a good way is to reduce the reflect height. Usually a medium value looks good. * You can also set up the size of icons by category. Here again, you can reduce the size of your dock with small icons. 48x48 is a common value. * Last, we can set up the order of icons by type, if you want for exemple to place applets on the left and applications on the right. * A little bonus feature is to draw a string that links all the icons. Just set its width to 0 if you don't want it. >>{{http://lusule.files.wordpress.com/2008/08/mycairo.jpg}}<< Setting "Gartoon" as the icon theme changes all the icons at once, giving your dock a completely different feeling. __Note :__ You can always change the icon for a single launcher, by right-click -> modify this launcher, and setting a complete path to an image. Same goes for applets. __Note 2 :__ To change the icon for a running __application__, you first have to activate "Overwrite X icons with launchers" in the Taskbar module. Doing this will tell Cairo-Dock to ignore the somewhat crappy icons provided by X, and to search for a better icon. Now, let's say we have Nautilus running, and its corresponding icon in the dock. There is 2 cases : * There is a "Nautilus" launcher in the dock, then Cairo-Dock will just use the same icon for the application, and we're done. * There is no such launcher, then Cairo-Dock will search for an image named "nautilus.xxx", where "xxx" can be "svg", "png", "xpm", etc. There is a great chance that such an icon will be found in the icon theme we set up previously. If you want to use your own image, just place an image with this name in the local icons folder (~/.cairo-dock/current_theme/icons). How to name the image ? Each icon must have the same name as the class for the relevant application. The class of an application is most of the time equal to its name, but not always. To find the class for an application, make sure it's open, and then go to a terminal and type[code]xprop \| grep WM_CLASS[/code] This will bring up a little pointer, which you use to click on the relevant window. You'll get something like this in the terminal :[code]WM_CLASS(STRING) = "nautilus", "Nautilus"[/code] To get Cairo-Dock to show the correct icon, your custom icons must be given the same name as the application class, so for example ++nautilus.svg++ or ++nautilus.png++. ===Changing the way docks are rendered=== Each dock can be rendered differently from the others. Changing the rendering of a dock will make it appear in a totally different way. In the "Views" module, you can set the default rendering for docks and sub-docks. For each sub-dock, you can modify its view (<right click>-> "modify this launcher", same goes for applets). >>{{http://lusule.files.wordpress.com/2008/08/oldcairo.jpg}}<< Switching to another view really changes the rendering of your dock. Here, the "Curve" view. ===The icons' labels=== The "++Labels++" module lets you configure the labels and quick-infos (Quick-infos are some small texts displayed on the icons to give short information, like the number of files in the Dustbin). You can set up the font, size, color (a gradation), etc. To make the text more readable, you may want to draw a background behind them. You can choose the color, transparency, and size of the text background. ===The dialog bubbles=== The dock interacts with you through dialog bubbles, that can display some message, warning, information, or even ask you question or any value. In the <b>Dialogs</b> module, you can configure their look : color and style of the bubble, font and size of the text, "ok" and "cancel" buttons, etc. Several styles are available; they change the shape of the bubbles. For instance the "comics" one will make the bubbles look like carton bubbles, whereas the "tooltip" one will give a more classic shape. ===The Desklets=== Each applet can be detached from the dock and placed on your desktop. This module lets you choose a default decoration for all desklets. Each desklet can also be configured with its own decoration. You can choose one of the available theme, or define your own (it's just a background and foreground image, with an horizontal and vertical adjustment). ===The little plus that will distinguish your theme from the others=== To make a really personnal and original theme, you ++should++ personnalize the <b>indicators</b>. Indicators are small extra drawings that indicates the state of icons/dock. There are indicators for the drag-and-drop, drag-over, active window, and launched launchers. * The drag-and-drop indicator* is displayed when you drag something over the dock (like a launcher from the Main Menu). It can be some image oriented from top to bottom, like an arrow, some rain, a starfall, etc * The drag-over indicator is a little emblem displayed on the icon when you drag something over it. It is drawn at 1/3 of the icon's size. * The active window indicator is drawn on the icon of the currently active window. you can set an image or just a back/foreground color. You should try to make it discrete since it is drawn at the same place and size as the icon. * The launched launcher indicator shows you which indicators have been already launched, if you're using the Taskbar option "mix applications and launchers". It is displayed at the bottom of the icon, and you can adjust its position vertically. It can be a circle, a light, etc. Try to choose something that fits the icon theme and icons shape. ===Animations and effects=== To finish, and if you're running the OpenGL backend, you can easily add some fun to your dock. The "Animated icons" and "Icon effects" modules will let you define one or more animations/effects when an icon is clicked or hovered by the pointer. If the effects seems "too much" for you, you can customize each of them, and also choose to draw them behind the icon, to reduce the impact. The "Illusion" module will let you choose an animation when the icon appear and disappear. ===Last step=== You're almost done! You can now decide which applet you need, and where you'll place them (in the main dock to keep an eye on them easily, in a sud-dock or on the desktop if it's not needed). You can set up an icon for each of them, or even choose a theme for some of them (Clock, Dustbin, PowerManager, etc). To go further, you can also try to make your own gauge theme. A gauge is made of some images and an XML file that describes the gauge. See exemples in /usr/share/cairo-dock/gauges. When you make a personnal theme for an applet (a gauge, a clock, a dustbin, etc), put everything all the files in a folder named with the name you want for your theme, and place this folder into ~/.config/cairo-dock/extras/gauge if it's a gauge, or ~/.config/cairo-dock/extras/clock if it's a clock, etc. ==Having many docks in a single instance of Cairo-Dock== Right-click on a launcher or an applet, go to the "Move to" sub-menu, and choose "to another dock". A new dock has been created with this launcher/applet inside; it has been placed on the opposite side of the screen. Now, you can repeat the operation with any launcher/applet to populate this new dowk. You can also do it from the config panel of the launchers, and enter the name of the dock it belongs to (this way, you can even choose the name of the new dock). To change the position of the new dock, <++right click++> on it -> "++Cairo-dock++" -> "++set up this dock++". Each of these docks will share the same configuration though, and thus the same look. There is a way to have many docks with different look, but it requires you to launch Cairo-Dock many times. Launch cairo-dock normally, and then launch [code]cairo-dock --modules-dir /path/to/dir[/code]where /path/to/dir will act like the "++~/.config/cairo-dock++" folder. ==How to configure Cairo-Dock so that it is as light as possible ?== Eye-candy is nice, but it has a cost. If you feel your dock is using to much CPU, here are some tricks that can help you. * The best way to have a smooth dock is to run it with the hardware acceleration (OpenGL). You need a nVidia card, or an Intel with the latest X.org server, and run the dock with the command [code]cairo-dock -o[/code] (If you have an ATI or an Intel, you'll need the latest drivers => (see our wiki)) * You can also configure the dock to be lighter. Try to decrease the icon size. 48x48 is a good size, and the maximum zoom can be decreased to 1.2 or even less. Also reduce the amount of reflection. Try to reduce the number of icons into your dock : * make some sub-docks to group launchers and/or applets by affinity. * use the TaskBar options to group icons of the same application, mix applications and launchers, or display applications of the current desktop only. * use many root docks, each on a different screen border (see the preceding chapter). In the "++Labels++" module, choose to display the labels on the pointed icon only instead of all the icons. Also you may try to decrease the refresh frequency in ++System++ (don't go under 20Hz, it might have the opposite effect). You can also decrease the refresh frequency of some applets. For instance, not displaying the seconds in Clock will make it refresh only once a minute instead of once a second, the amount of RAM can be checked only eash 10s in System-Monitor, etc. Try to remove some animated applets, like Cairo-Penguin or Toons. Try to use the "++default++" view instead of "++3D-plane++" or "++Curve++". ==Conclusion== I guess your dock now looks totaly different from what it was at the beginning ;-) I hope this little guide has helped you to not get lost during the configuration. If you have any comment/suggestion, feel free to write me at fabounet (at) users [dot] berlios -dot- de, or pay us a visit at [[http://glx-dock.org]]! :-) >>Fabounet and Lusule.\|\|

Glx-Dock / Cairo-Dock Wiki Tutorial-Customisation Edit

Online users : matttbe,

Powered by ElementSpeak © 2007 Adrien Pilleboue, 2009-2012 Matthieu Baerts.
Dock based on CSS Dock Menu (Ndesign) with jQuery. Icons by zgegball
Cairo-Dock is a free software under GNU-GPL3 licence.
Many thanks to TuxFamily for the web Hosting