Page 1 of 6 123 ... LastLast
Results 1 to 10 of 59

Thread: HowTo: theme your desktop

  1. #1
    Join Date
    May 2005
    Beans
    694

    HowTo: theme your desktop

    In this HowTo I just want to collect the different ways you can personalize your desktop. It is divided in different sections; you don't need to follow everything I say, just pick up what you like. There's nothing new amongst the things I say, but I thought it would be handy to have a reference. Another useful reference is this. All I know, I've learned it on this forum, but I'm not able to trace back the authors of the original posts. If you think I've just reported something you explained first, then you're probably right, and I thank you for this. Throughout the guide I assume you are using Gnome.

    1: What can be skinned

    A lot of things, actually. In this HowTo I will cover:
    - Widgets: this are the little elements like buttons, loading bars, menus..., which are used in your applications
    - Window borders: the part of the window containing the buttons to close, maximize and minimize
    - Icons
    - Mouse cursors
    - Panels
    - Splash screen: this appears when you login before the desktop os ready
    - Login manager: the application which greets you after the boot
    - Desklets: little apps which show useful information over your desktop
    - Fonts
    - Grub: the application which lets you choose what operating system you want to boot
    - Usplash: what appears when the system is loading at boot

    2: Where to find nice themes

    The most common sites where you can find themes for Gnome are GnomeArt and Gnome-Look
    Some other fancy stuff (for example wallpapers) can be found at Deviant Art
    You may also want to have a look at Gnome Themes and Gnome Themes Forum.

    If you know where to find themes, but want some advice on putting all together in a consistent way, have a look here. That thread is meant to show other people some screenshots and list the themes used to make it. If you get some nice theme, then share it on that thread.

    3: Icons, windows, widgets and wallpaper

    The most basic things which characterize the look of your desktop are widgets, window borders and icons. These elements can be managed under
    System->Preferences->Themes or equivalently launching
    Code:
    gnome-theme-manager
    in a terminal. You can install here the icons etc. that you have downloaded. Then you choose the elements you will actually use under Theme Details. When you are happy with your settings, you can save your theme, to be able to recall it with a click if you change it.

    It may be useful to know where things actually go: icons are stores under ~/.icons, while other elements can be found under ~/.themes.

    If you want to install themes system-wide, then you can just invoke the application as root, with
    Code:
    sudo gnome-theme-manager
    Be sure to do this only to install things, and make your choices as a regular user.

    Sometimes you may want to change a single icon. You can do this by right-clicking your file and choosing properties. Then click over the icon image and choose a new one. This is useful for special folders, also. Under the Symbols tab you can choose some little emblems and add it to the icon.



    ================================================== ========

    Finally, the last element which characterizes your desktop is of course the wallpaper. You can change it using System->Preferences->Wallpaper or equivalently right-clicking on the current wallpaper and choosing "Set wallpaper".

    Just an advice here. It is tempting to choose a very beautiful picture or a photo of your family or whatever else, and to change wallpaper frequently. I discourage this, because it will easily lead to an inconsistent theme. Choose your wallpaper as the last thing while themeing, and be sure to use a simple image with few colors, which match your widgets or your window borders. The result will be much more satisfying.

    4: Some applications still look bad.

    You're right. There are three kind of applications which will use different widgets and icons.

    Root. The simplest to settle are applications which you run as root. These simply use the root theme. If you want the root theme to match the current user theme, you can just create some symbolic links
    Code:
    sudo ln -s /home/<insert your username here>/.themes /root/.themes
    sudo ln -s /home/<insert your username here>/.icons /root/.icons
    sudo ln -s /home/<insert your username here>/.fonts /root/.fonts
    ================================================== ========

    Qt Then there are KDE applications. These apps use a different set of widgets, based on the QT graphic libraries, rather than the GTK (GIMP ToolKit) based, which are common on Gnome. The first thing to do is to find a matching QT theme; for this you can have a look here. Some themes are also available in the repos, but they may require you to install KDE as well. If you just want to make the apps look nice, but don't want much hassle with theme installation, and you don't care about theme matching, you can find here a deb to install Polymer theme, which is quite nice.

    After you have installed the theme (the way to do this depends on the theme, and is usually indicated on the site) you have to set it as default. If you have KDE installed you can do this under the K Control Center. Otherwise you can install qtconfig
    Code:
    sudo apt-get install qt3-qtconfig qt4-qtconfig
    You will find two entries under System->Preferences->Qt3 Configuration (or Qt4 of course). You just have to select the right theme (both under Qt3 and Qt4) and the right font. If you use the standard font, then you can choose Bitstream Vera Sans, normal, 10 under the font tab.

    ================================================== ========

    Gtk1 Finally there applications which use the old version of the Gtk libraries. You will hardly be able to make them look good, because there are no nice themes for Gtk1. Anyway have a look here.

    5: Panels

    You can play with panels to achieve a more comfortable setting, or just to make your box look like OSX. I will first explain how to customize the standard panels. If you want a OSX-like launcher, you find it in the next paragraph.

    By default you should have two panels, one at the top, the other at the bottom. To create a new panel or delete one, you can just right-click on the panel. Under the properties you can also set the position of your panel and its height. If you plan to make a panel with a lot of launchers you may want to make it about 48 high.

    Under Properties you can also choose some other things: you may set it to hide automatically your panel or to make it a bit transparent. If your panel doesn't hide correctly, then you have to edit the panel configuration. To do this run
    Code:
    gconf-editor
    or equivalently Applications->Administration->Configuration Editor. Navigate to /apps/panel/toplevels/top_panel_screen0 and there modify the value of auto_hide_size to 0. Replace top_panel_screen0 with another panel, according to which panel you want to minimize.

    Now you can add things to your panels or take them off, again by right-clicking. You can move things on the panel by right-clicking on them; if you are not able to move something past an object, probably that object is locked to the panel (again you can lock or unlock things on the panel with the right-click menu).

    At this point you should be able to move things on the panel. For some settings you may like to move the area where your open windows show to the upper panel. You can do this by right-clicking on the upper panel, selecting Add to panel, and then choosing Window List. Be sure to stretch its sides until you feel it is big enough for your needs. If you have some windows open, but still the whole space you reserved is not filled, just don't care, it is a bug in the gnome panel. However the whole area should be filled if you have enough windows open. Now you can delete the Window List on the lower panel. The same can be done with the Notification Area, which is the area with the little icons like the network status.

    Many people will want to put the window list and the notification area on the upper panel and launchers for the most common applications on the lower (maybe 48 high and with autohide). If you want a panel which does not extend to the borders then you just need to uncheck the expand button in the panel Properties. However it can be nice to have smooth corners in that case (see this mockup). For this you can use a trick: under Properties choose a Background image, and put a fake image of a centered panel (you can find one in the gentle theme on Gnome Themes).

    6: Desklets

    What if you want an OSX-like bar, with the icons stretching when you pass over with your mouse?



    The most common way to do this in Gnome is to use gDesklets. You can install it with
    Code:
    sudo apt-get install gdesklets
    Then you will find the program under Applications->Accessories. From there you can add a lot of desklets: these are little programs that show over your desktop. The one which will make the OSX-launcher is StarterBar. But you can use a lot of other goodies from there: clocks, disk infos, memory infos, wheather forecasts and whatever else.



    A lot of the desklets which are bundled in the repos are broken. To find new desklets or new versions of the ones you have, you can browse both here or here. When you have downloaded a desklets you can install it with gDesklets manager under the File Menu. The gDesklets symbol should appear in the Notification Area: right-clicking on it you get both the gDesklets manager and the configuration. From the latter you can set a shortcut to put the desklets in front of you windows. Be warned that the desklets will not be transparent, so the visual effect is horrible. You can set the desklets to be transparent from here, but you need a composite manager (see the last paragraph) to make it work (and it seems it not working however).

    Finally you will want gDesklets to load at the login. To do this open System->Preferences->Sessions, choose the tab Program Start and there add "gdesklets".

    If you often change theme, you may want to change the desklets accordingly (for example you may choose other icons on the StarterBar). To be sure not to lose your work, look at the gDesklets manager profiles menu and use a different profile for each theme.

    7: Cursors

    The next thing you may want to change is your mouse cursors. You can do this under
    System->Preferences->Mouse under the cursors tab. Still you can't add new cursor themes here, so you basically have two ways.

    The simplest is to install gcursor, which is in the repositories
    Code:
    sudo apt-get install gcursor
    It will show up under System->Preferences->Cursor Selection and it lets install new cursors. It is quite strange, but it doesn't let you delete themes, so you have to manually remove cursors themes, which are stored under ~/.icons.

    The fact that cursors are stored in the same folder as icons can be annoying, because cursor themes will show up under the icon themes settings. Yet this can be useful to remove cursors (just the same way you'd remove icon themes), even if is not intuitive to do.

    The second way to install cursors is, as you can now guess to unzip the theme, which usually will be a tar.gz file, under ~/.icons.

    8: Splash screen and login manager

    The login manager (GDM) is, of course, the same for all users, so you can change it only as root. You can set it under System->Administration->Login Window and here you can add themes, and choose the one which will be used. You can also choose to pick one of the themes installed at random.

    The splash screen needs an external utility, so install gnome-splashscreen-manager
    Code:
    sudo apt-get install gnome-splashscreen-manager
    Then you will find the settings you need under System->Preferences->Splash Screen. Since the splash is a little centered image, you may want to change the background color to match it. you can do this as root under System->Administration->Login Window.

    9: Fonts

    I don't think there is any need to change Gnome fonts, since they look so good! Anyway you can choose fonts under System->Preferences->Font Types. The default is Bistream Vera Sans 10.

    But you may want to have a better-looking antialias of the font. You can find here some patched deb files. You just have to install them (you can do this double-clicking on them) to have better looking fonts. Then go under System->Preferences->Font Types and choose the LCD option if your screen is LCD. You won't be able to look at ugly no antialiased fonts anymore!!
    Here is the comparison.

    Before

    After

    10: Grub and USplash

    First, let me put here a disclaimer. Grub and USplash are loaded at boot, so if you mess them up and are not able to boot anymore, don't hold me responsible. If you fear to modify them, then don't.

    Now, let's begin with USplash. You may want to modify its appearance, but I have to warn you that you won't get cool boot splashes with it. The reason is that the only images allowed are 640x480 with 16 colors. The reason for this restriction is that other solutions may give problem with the suspend/hybernate feature (have a look here and the links there). The simplest way to change USplash look is to take another theme, but I only know two themes: Ubuntu Serengeti and Ubuntu Minimalistic (no text). Follow the instuctions in the threads to install.

    If you are not happy with this themes, you can follow this tutorial on how to create your own, but it's hard to get really nice-looking themes.

    So you may consider to change the program which displays the splash at bootup. The main alternatives are Splashy (Debian default) and FBSplash (Gentoo default). FBSplash is better looking and has more themes (it supports bootsplash themes, and there are quite a lot), but you'll have to recompile the kernel in order to install it.

    ================================================== ========

    Now, let's change Grub image. Make sure you have at least one image (there are some in /boot/grub/splashimages). You can download other images (in xpm.gz format), for example on Gnome-look, and then put them in /boot/grub/splashimages typing
    Code:
    sudo cp PathToYourFile /boot/grub/splashimages
    Second, you have to understand under what partition is mounted your /boot folder and translate this in grub partition naming. Usually you refer to you partitions as hda1, hda2, hdb1 and so on. The letter refers to the drive ("a" first hard disk, "b" second...), while the progressive number to the partition on the drive. To find out where /boot is located open System->Administration->Drives and open the Partitions tab. If you have a separate /boot partition, then find which partition has /boot as a mount point and look under Peripheals for its name. If you don't have one, just find which partition has / as a mount point.

    Now translate this name using Grub conventions. Grub names the first drive with a 0, the second with 1 and so on; the same with the partitions. So hda1 becomes (hd0,0), hda2 becomes (hd0,1), hdb1 becomes (hd1,0) and so on.

    To make Grub display a image you'll have to open its configuration file as root
    Code:
    sudo cp /boot/grub/menu.lst /boot/grub/menu.lst_old
    sudo gedit /boot/grub/menu.lst
    Then add this line just after the comments at the beginning
    Code:
    splashimage=(hd?,?)/boot/grub/splashimages/NameOfTheImage.xpm.gz
    where of course you have to change (hd?,?) to the partition you found in the preceding step and NameOfTheImage to the actual name of the image. If you have a separate /boot partition, then (hd?,?) already refers to /boot, so change the line to
    Code:
    splashimage=(hd?,?)/grub/splashimages/NameOfTheImage.xpm.gz
    This way your first lines will look something like
    Code:
    # menu.lst - See: grub(8), info grub, update-grub(8)
    #            grub-install(8), grub-floppy(8),
    #            grub-md5-crypt, /usr/share/doc/grub
    #            and /usr/share/doc/grub-doc/.
    splashimage=(hd0,1)/boot/grub/splashimages/ubuntu_mark1.xpm.gz
    If you want to be sure you have correctly understood grub naming scheme, have a look towards the end of menu.lst. You will see something like
    Code:
    title		Ubuntu, kernel 2.6.15-25-386
    root		(hd0,1)
    kernel		/boot/vmlinuz-2.6.15-25-386 root=/dev/hda2 ro quiet splash
    initrd		/boot/initrd.img-2.6.15-25-386
    savedefault
    boot
    The partition listed after root should be the same you have found by the method before, and if you have a separate /boot partition, then /boot should not appear after kernel and after initrd.

    Finally you can save the file and exit. Hopefully you will get your image at next reboot. If you have problems you can restore Grub configuration by typing
    Code:
    sudo cp /boot/grub/menu.lst_old /boot/grub/menu.lst
    ================================================== ========

    The last thing you may want to change is the screen resolution and number of colors while USplash is running. Remember that USplash doesn't use too many colors or a high resolution, so you won't see better colors and the image will only be smaller.

    If however you want to do this, then choose your resolution and number of colors and transform it into a number according to this table.
    Code:
          color           depth   | 640x480  800x600  1024x768 1280x1024
    
          256             (8bit)  |  769      771       773      775
          32000           (15bit) |  784      787       790      793
          65000           (16bit) |  785      788       791      794
          16.7 Mill.      (24bit) |  786      789       792      795
    Open again Grub configuration file
    Code:
    sudo cp /boot/grub/menu.lst /boot/grub/menu.lst_old
    sudo gedit /boot/grub/menu.lst
    and locate the stanza relative to the kernel you use (it will look something like this)
    Code:
    title		Ubuntu, kernel 2.6.15-25-386
    root		(hd0,1)
    kernel		/boot/vmlinuz-2.6.15-25-386 root=/dev/hda2 ro quiet splash
    initrd		/boot/initrd.img-2.6.15-25-386
    savedefault
    boot
    Then add
    Code:
    vga=YourNumber
    at the end of the "kernel" line, save the file and you're done.

    11: Skinnable applications

    Some applications don't use Gnome widgets, but have their own instead; in this case they can often be skinned independently. We cover here how to do it; in most cases you only have to copy the new skins to a Skin directory, so this section aim is mainly to link sites where themes can be found.

    ================================================== ========

    Firefox. Not much to say here. Firefox themes can be managed under Tools->Themes: here you can select the theme you wish to use (you'll have to restart Firefox), uninstall and ungrade installed themes. If you click on Download other themes Firefox will open this site, where you can look for new skins.

    ================================================== ========

    Xmms, Beep media player, BmpX, Audacious. These all share the same skins, which were originally designed for Winamp 2.0. You can look for skins on XMMS Skins, Freshmeat, Gnome-look, Winamp skins, Customize.org, Skinz.org. Skins will usually be compressed, in .zip, .wsz or .tar.gz format.

    To install them just means to copy the files in the Skins directory. For example for BMP
    Code:
    cp PathToYourSkin /home/YourUsername/.bmp/Skins
    For a system-wide install just copy the same file under the program folder; for example on BMP
    Code:
    sudo cp PathToYourSkin /usr/share/bmp/Skins
    You will then be able to select the skin under the Preferences in your application.

    ================================================== ========

    MPlayer. Skins can be downloaded on MPlayer official Mplayer in tar.bz2 format. To install a theme, just extract the file and copy the output directory in the Skins directory (create it if doesn't exist).Assuming the skin is under your home
    Code:
    tar -jxvf /home/YourUsername/NameOfTheSkin.tar.bz2
    cp -r /home/YourUsername/NameOfTheSkin /home/YourUsername/.mplayer/Skin
    For a system-wide install just copy the same file under the program folder
    Code:
    tar -jxvf /home/YourUsername/NameOfTheSkin.tar.bz2
    cp -r /home/YourUsername/NameOfTheSkin /usr/share/mplayer/Skin
    To select the skin right-click on MPlayer and choose Skin Browser.

    ================================================== ========

    aMSN. This is a little more complex. By default aMSN uses a Tcl/Tk interface without antialiased fonts. I'll explain here the simple way (that is, using precompiled packages) to beautify aMSN. If you want to do it the hard way (but it seems with better results, I haven't tried myself so I can't tell), follow this thread instead.

    Let's start from the beginning. Skins can be found here. If you want to install the skins manually, just extract them and copy the directories under ~/.amsn/skins (or /usr/share/amsn/skins for system-wide install) like for the previous apps; this is not the simplest way to go. On this thread you will find a deb package which contains all the skins (just double click on it to install).

    The same thread contains packages for the latest Tcl/Tk and aMSN with antialiased fonts, so I advice you to install the debs from there. You will need to install from there the plugins package too. Otherwise plugins can be found here, except for the Chameleon package, which is here. If you want to install the plugins manually, just extract them and copy the directories under ~/.amsn/plugins (or /usr/share/amsn/plugins for system-wide install).

    Assuming you have plugins and skins installed either way, let's open aMSN. Under Tools->Select Skin you will be able to select the skin (what else?). Then open Tools->Select Plugins, because some plugins actually change aMSN look. The first plugin you'll want to load is Desktop Integration: this allows aMSN to display dialogs using the OS native interface (in our case it will display Gnome dialogs). Second, load Chameleon: this plugin changes the widgets in use with aMSN configuration dialogs. You can configure it use some different sets of widgets, choose the one that fits your desktop best.

    Finally open Tools->Preferences, choose the Interface tab and click Change Fonts to choose the fonts in use for the chat window (if you want them to match the default system fonts, then choose Bitsream Vera Sans).


    12: Transparencies and other eyecandy stuff

    You may have seen a lot of screenshots with nice visual effect (windows fade while minimizing, other windows have transparencies, and wobble while they move and so on). All this can be achieved by the use of a composite manager. A composite manager is some software which elaborates the graphics just before it is sent to the display and combines the various elements. Usually this software is incorporated into a window manager (the program which draws windows) for obvious reasons.

    The most common windows&composite manager for Gnome is Compiz. Metacity, which is the default window manager, will have compositing capabilities too. I don't cover composite managers in this HowTo for a good reasons. All this eyecandy is quite resource intensive, so if you want to use it smoothly you will need to use 3D acceleration with your desktop.

    There are two projects which add 3D acceleration capabilities to X, and this are XGL (as a rule of thumb this is better suited if you use proprietary drivers for your video card) and Aiglx (which is instead better suited for oss drivers). You first have to install one of these, and then run Compiz (or the composite manager of your choice). This can be painless, but can screw everything also. If you want to try, there are a lot of good HowTos on this forum; search for Compiz, XGl or Aiglx.

    ================================================== ========

    Just a final trick, if you don't want to enable real transparencies. One thing that has fake transparencies is Gnome terminal; you can enable it under Edit->Current Profile->Effects. Now if you do this, you will understand what I meant by "fake": under the terminal your desktop will be shown, no matter what is actually under it. At least this is good if under the terminal there's really your desktop. But you may find that it covers some icons , so what if one wants to launch the terminal in a part of the desktop where there are no icons? You can do this by the command
    Code:
    gnome-terminal --working-directory=%f --geometry=75x25+350+205
    Modify the geometry until you get the right size and the right position. When you are happy you can use Applications->Accessories->Alacarte to modify the menu entry accordingly.
    Last edited by Nonno Bassotto; August 11th, 2006 at 04:45 PM.

  2. #2
    Join Date
    May 2005
    Beans
    694

    Re: HowTo: theme your desktop

    In the next days I plan to add two things.
    First, how to skin applications. This is usually trivial, but it may be useful to link sites where you actually can find skins. I will include xmms, mplayer, amsn and whatever you suggest.
    Second screenshots. This will take some time, since you have to enable the feature, take the screenshot and crop the detail.
    If you have other ideas, let me know.

  3. #3
    Join Date
    Jul 2005
    Location
    Philadelphia
    Beans
    43
    Distro
    Ubuntu Development Release

    Re: HowTo: theme your desktop

    That was really good man especially this part for grub . Keep the good work & I am waiting for the next part.

    Thank you

  4. #4
    Join Date
    Dec 2005
    Beans
    4
    Distro
    Ubuntu 6.06

    Re: HowTo: theme your desktop

    Nice HOWTO! Well done

  5. #5
    Join Date
    May 2005
    Beans
    694

    Re: HowTo: theme your desktop

    Ok, I've added some applications skinning and tried to improve readability making manu voices, tabs and the like in blue and folders in red. Now it looks a bit weird, but I hope it is simpler to read. Comment on this if youdon't like it.

    I'd like to add a wine section, but I haven't been able to skin wine application so far, nor to make them use Bitstream vera Sans . If you know how to, just post here, so I can edit the original post.
    Last edited by Nonno Bassotto; June 27th, 2006 at 11:44 PM.

  6. #6
    Join Date
    May 2005
    Beans
    694

    Re: HowTo: theme your desktop

    I also added five screenshots to begin with, hosted on ImageShack. But alas, they don't show up for me. Do they show up for anyone?

  7. #7
    Join Date
    Mar 2006
    Beans
    3

    Re: HowTo: theme your desktop

    Quote Originally Posted by Nonno Bassotto
    I also added five screenshots to begin with, hosted on ImageShack. But alas, they don't show up for me. Do they show up for anyone?
    Yes, I can see the three screenshots.

  8. #8
    Join Date
    Aug 2005
    Location
    Tamworth, Australia
    Beans
    119
    Distro
    Ubuntu 10.04 Lucid Lynx

    Re: HowTo: theme your desktop

    I can see four, but they are sort of mingled in with the text.

    Good article, though. Go tme thinking about how I want mine to look
    :: Do Not Click Here ::

    Code poet [My paradise is war]

  9. #9
    Join Date
    May 2005
    Beans
    694

    Re: HowTo: theme your desktop

    Quote Originally Posted by Ahriman
    I can see four, but they are sort of mingled in with the text.
    As soon as I will be able to see them, I will fix them (and add some more, too).
    Please, feel free to correct my english, so that I can improve it.

    Click here to join Dropbox. Both you and I get free extra space.

  10. #10
    Join Date
    Mar 2006
    Beans
    228

    Re: HowTo: theme your desktop

    A great HOWTO..explained a lot. Thanks!

Page 1 of 6 123 ... LastLast

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •