 |
| Ubuntu 10.10 Default Desktop |
To here:
 |
| My Ubuntu 10.10 Desktop |
I've posted a video at the bottom of this article that will demonstrate a few of the things I'm going to be writing about here, but I'll warn you now, the video is about 30 minutes long and features me rambling about God knows what in a weird amalgamation of nerd-speak and southern drawl. If that doesn't sound like an unbearable experience for you, I encourage you to check it out because I always feel that it helps to have a nice visual representation of whatever I'm trying to learn. The written sections below will provide further detail, so if you're ready to get crackin' on some Ubuntu customization, read on after the jump.
Installing Themes
The cornerstone of any customized Ubuntu desktop is the GNOME theme. GNOME is simply the name given to the default Linux desktop environment that you see after Ubuntu boots up. As you can see in the screenshot of my desktop above, you can alter the appearance of GNOME so drastically that it doesn't even look like the same OS.
To install new GNOME themes, you first have to find them. Quite a few are available in the repositories, and more still can be found online at various blogs and online community artwork sites like deviantART and GNOME-look.org. Most of my favorite themes are available at GNOME-look.org, so I would look there first. I would also encourage you to browse the Eyecandy section of Web Upd8 for tons of great themes and customization tips. A lot of what I've learned about customization can be directly attributed to the fine folks over at Web Upd8. Shout out!
Now then, if we're going to build the desktop shown above, we need to look for a theme called "Atolm."
 |
| Atolm Theme |
As you can see, this is quite a dark theme that completely changes the appearance of your windows, menus, and icons. You can find the Atolm theme here. As with most themes, instructions on how to install are provided by the author, but I will go over them here as well.
Unlike some theme packages, Atolm does not include its companion icon set, "AwOken." Luckily, you can install it via PPA.
Open up a terminal and copy and paste the commands below one by one (ctrl+shift+v to paste into terminal)
sudo add-apt-repository ppa:alecive/antigone sudo apt-get update sudo apt-get install awoken-icon-theme
Now you're ready to install Atolm. I recommend installing via PPA, but I'll also show you how to install a theme manually with a downloaded .zip or .tar file in case a PPA is not provided.
Note: You will need the Equinox GTK engine in order to properly display Atolm, so if you don't already have it, you'll need to install it first. The Equinox GTK engine is required software for quite a few themes, so you really should go ahead and install it whether you plan to use the Atolm theme or not.
In your terminal:
sudo add-apt-repository ppa:tiheum/equinox sudo apt-get update sudo apt-get install gtk2-engines-equinox sudo add-apt-repository ppa:nikount/orta-desktop sudo apt-get update sudo apt-get install atolm-theme
To install manually:
Note: If you've already installed via PPA, do not actually perform these steps.
Click the download link on the Atolm GNOME-look page, and you will be taken to a deviantART page where the zip file is available for download. Once you have downloaded the .zip file, extract it to your desktop.
Note: Ubuntu is pre-installed with an archive manager, so all you need to do is double-click the file and then click the extract button on the archive manager. Here you can choose the desktop as the destination for your extracted theme files.
 |
| Drag and Drop Theme Installation |
This manual installation mode will work for any theme, icon set, cursor set, or metacity theme that is packaged within a .tar.gz file, which is basically another type of archive file like .zip or .rar that is used extensively in the Linux community. As I said before, however, I do recommend installing via PPA whenever available.
Now that you've got your desktop theme installed, it's time to tackle your background.
Choosing a Background
Because I'm a stickler for uniformity when it comes to my desktop, I always try to find a background that will match my current theme, whether in mood or color scheme (preferably both). Again, you can find tons of backgrounds at GNOME-look.org or deviantART. I've also had quite a bit of success finding backgrounds at Hongkiat.com's Wallpapers section. Really, if you've had any experience at all using modern operating systems, you probably already know how to hunt down your own wallpapers, so let's get right to installing whatever background you happen to choose.
Note: Check out my top 5 wallpapers if you need some help getting the ball rolling. You can find the wallpaper in the screenshot above on this page as well.
 |
| Adding a Background |
Once you've downloaded your preferred wallpaper, go to System > Preferences > Appearance, or if you prefer you can just right-click the desktop and choose "Change Desktop Background," which will open up the same Appearance Preferences window. Make sure the background tab is selected, and you should see a thumbnailed list of currently installed wallpapers from which to choose. To add your new background, click the Add... button and browse to wherever you chose to store your background image. Once you've added the image to the list, simply click it to activate it.
Unfortunately, as is also the case in Windows 7, adding an image to the background list using this method does not add it to the list permanently. To do that, we need to do a bit of hacking. Once this series is over, I will post a short tutorial, but for now, we've got our background in place. Now let's move on to the really fun stuff.
Avant Window Navigator
 |
| Avant Window Navigator |
Avant Window Navigator (AWN) is a powerful dock application that we talked about at the beginning of this series. It allows for extensive customization, and can even be used as a shell to replace the GNOME panels, effectively creating a totally unique desktop environment. For this reason, any time I'm doing a complete desktop makeover, AWN is an integral part of my repertoire.
For instructions on installing AWN, please click here. As noted in this link, you do not want the version of AWN in the Ubuntu Software Center. If you have already installed AWN from the software center, make sure you remove it first and then reinstall using the PPA.
In addition to installing AWN, I also recommend installing a launcher applet called DockbarX. AWN already comes with its own launcher by default, but the DockbarX launcher is more customizable and has some pretty cool configuration options that can really improve your overall Ubuntu experience.
In a terminal:
sudo add-apt-repository ppa:dockbar-main/ppa sudo apt-get update sudo apt-get install dockbarx dockbarx-themes-extra dockmanager
This will also install a small program called Dockmanager. It's required to activate the "Helpers" feature in both AWN and DockbarX, which we'll get to in a moment.
Now that we've got all the required software installed, go to Applications > Accessories > Avant Window Navigator to open the dock.
Note: If you're going to be using a dock, you probably don't have any further use for the bottom GNOME panel. If you want to get rid of it (recommended), simply right-click on it and choose "Delete Panel."
When AWN first starts, it looks like any other dock application. On the left is an icon for your dock preferences and on the right is a launcher for Firefox. Go ahead and right click anywhere in the dock and choose "Dock Preferences."
Preferences
 |
| AWN Preferences |
Under the "Preferences" tab, you'll find options to change the size, orientation, style, behavior, and icon effects for the dock. The default icon size is set to 48 pixels. This is a bit large for this particular theme (and most other themes, really), so as you can see I took my icon size down to 30 pixels. I've found with most other, lighter themes that a nice midway point is 35 pixels (as you'll see in the video).
We'll keep the orientation of the dock at the bottom for this theme. If you've taken a peek at Ubuntu 11.04, which comes out this week, you'll notice that there is a dock on the left side of the screen that looks rather nice. You can emulate that dock with AWN fairly easily by changing the orientation to left, but we won't get in that just now.
The style option is very important. By default, AWN is set to the "Flat" style, which looks like a normal, square dock. For this theme, we've chosen Lucido. If you didn't heed my earlier advice and installed AWN from the Software Center, this option won't be available to you. Lucido is an elegant, highly versatile style that uses separators to create what I would describe as Chrome-like tabs in your dock. This is one of the main features of AWN that distinguishes it from the rest of the pack when it comes to desktop customization.
 |
| AWN Lucido Style |
For behavior, we've chosen "Intellihide," which ensures that the dock always stays behind any active window that passes in front of it. "Window Dodge" is similar, but it disregards whether the window in front of it is active or not. The dock will always stay hidden as long as any window is in front of it. For example, with Intellihide, if you're working with a maximized web browser, the dock will stay hidden until you open another window on top of your web browser, providing that window also does not sit on top of the dock. Check the screenshots below for a visual example.
 |
| Intellihide - Behind Active Window |
 |
| Intellihide - Above Inactive Window |
With Window Dodge, the second screenshot would have never happened, because even though Chromium is inactive, the dock would have remained behind it because it's, well, dodging the window.
I personally prefer Intellihide because it creates a more efficient workflow environment for me.
Note: In the video below, I failed to do my homework and didn't really understand the difference between Intellihide and Window Dodge at the time. You'll have to forgive my fumbling around during that portion of the video.
The other two behavior options are Panel and Always Visible. See the video below or just play around with them to find out how those effect the dock's behavior.
I'll let you tinker with the icon effects on your own as well. A good way to see what each of them does is to choose the "Custom" option. A small window will pop up that lets you choose an animation for each icon state (hover, open, maximize, etc.). There will be a play button beside each one that gives an example of what the animation does. You can also watch the video below for a demonstration.
"Expand the Panel" will cause the dock to span the entire bottom (or top, left, right) of the screen, giving it a panel or, for all you Windows folks out there, a taskbar feel.
 |
| Expanded AWN Dock |
For this theme, since we'll be replacing the GNOME panel with AWN completely, we've chosen to expand the panel.
Task Manager
 |
| Task Manager Settings |
AWN comes with its own launcher called the Task Manager. For this theme, we'll actually be using a different launcher called DockbarX. Each launcher has its advantages and disadvantages, so I'll briefly go over the AWN launcher settings just in case you find you prefer it over DockbarX.
The "Show all windows" checkbox determines whether or not AWN will display icons for windows on all workspaces or only windows on the current workspace. For example, if I uncheck "Show all windows" and then open Thunderbird in workspace 2, the icon for Thunderbird will only show on the dock when I am on workspace 2. If the box is checked, the Thunderbird icon will be displayed on the dock regardless of the workspace I happen to be using.
The "Display launchers only" checkbox determines whether AWN will display icons for windows you have open that are not currently pinned to the launcher. For example, if I do not have a launcher on the dock for Gedit (a text editor), and I open it up from the Applications menu, an icon will appear in AWN letting me know that Gedit is running. If I check this box, however, no such icon will appear. This means that if I happen to minimize Gedit, there will be no indication of it being an active application and it will disappear into space. I'll have to use a keyboard shortcut to unminimize it. If you plan to use DockbarX, make sure to check the "Display launchers only" box. If not, leave it unchecked.
"Drag and drop reordering" is exactly what it sounds like. Checking this box allows you to reorder the icons in the dock by simply dragging and dropping them where you want them to go.
"Group common windows" tells AWN whether or not you want to break out a separate icon on the dock for multiple windows of the same program. For example, if I have two different file manager windows open, checking this box will group both of those windows into the same icon. If unchecked, a different icon will appear for each separate file manager window.
"Show dialog after long press," if checked, will display a thumbnail preview of any open window by clicking the icon of that window and holding the left mouse button down . With DockbarX, there is an option to show this preview by simply hovering your mouse over the icon.
The Launchers window is where you can add or remove launchers, or application shortcuts, on the dock. Simply drag and drop any application icon from the main menu into the window to add it to the dock. You can also manually add an app or command to the dock with the Add... button.
Applets
 |
| AWN Applets |
I explained earlier that Lucido gets its "tabbed" look using separators. This is where you will need to insert those separators into the dock. See the video for a demonstration of how this works.
Other applets you will need for this setup (from left to right) are Yet Another Menu (or whichever main menu applet you prefer. They all look and behave a bit differently), Separator, DockbarX, Launcher/Taskmanager, Expander, Separator, Notification Daemon, Weather, Digital Clock, Notification Area, Indicator Applet, and Garbage.
The Expander applet is also explained in the video. It only works if the "Expand the panel" box is checked under the Preferences tab, and it basically fills empty space on the dock. This is how I managed to separate the icons to the far right and far left of the screen in the screenshot above. Otherwise they would all be bunched in the middle with empty space reaching out to the edges of the screen on each side.
Since you are going to be replacing the GNOME panel with AWN, the Menu, Notification, and Indicator applets will place all of the information that is normally located in the top panel bar onto the dock instead. Before you can activate the Notification Area and Notification Daemon applets, you'll need to go ahead and disable the GNOME panel, as you cannot have two instances of these applets running at the same time.
Replacing GNOME panel with AWN
Press Alt+F2 and type in gconf-editor. This will open up your Configuration Editor.
Note: Once you've replaced your panel with AWN, the Alt+F2 functionality will no longer be available, since that command is tied to the GNOME panel. You'll have to use a semantic launcher like Synapse or Gnome-Do as a replacement.
Note: Once you've replaced your panel with AWN, the Alt+F2 functionality will no longer be available, since that command is tied to the GNOME panel. You'll have to use a semantic launcher like Synapse or Gnome-Do as a replacement.
From here, navigate to desktop > gnome > session > required_components. You will see a key in the right pane named "panel." By default, the value is set to "gnome-panel." Double click and replace gnome-panel with "avant-window-navigator."
 |
| Replace GNOME Panel with AWN |
You will need to log out and log back in for the change to take effect. When you log back in, your top panel will be gone. Now you can add the Notification Daemon and Notification Area applets to the dock.
Note: If you find that changing the panel value to "avant-window-navigator" doesn't hold when you reboot your computer, you may need to set the value as default. To do this, navigate to the same folder in Configuration Editor, change the value to avant-window-navigator if necessary, then right-click on the value and choose "Set as default." Enter your password, then log in and log back out. This should make the new value stick until you change it back.
You'll notice that the Indicator and Notification applets by default will stack the icons in a 2 row setup (see left). I personally prefer to keep them that way so they'll take up less room on the dock. The downside is they can be pretty hard to see. If you want to make all of the Indicator and Notification icons the same size as the rest of the icons on the dock, right click on each set and go to "Preferences." There will be an option there to take the number of rows down to 1 (see below). For the Indicator applet, you can also choose which icons are shown and which are hidden.
Themes
 |
| 2 Row Setup |
 |
| 1 Row Setup |
Themes
 |
| AWN Themes |
Themes is where you can choose a pre-set theme for AWN's appearance, or create your own. To achieve one of the looks I've created above, you'll need to create your own. Click the Customize... button.
 |
| Create AWN Theme |
Honestly, the best way to learn this process is to play around with it on your own. You're not going to hurt anything, and any changes you make can be wiped out by going back and simply choosing one of the pre-made themes. To achieve the look in the original screenshot at the top of this article, here's what you'll need to change.
Note: If you're feeling rather lazy and don't feel like actually going through this process yourself (shame on you), you can download my customized AWN theme here. There are instructions below on how to install it.
First and Second Gradient Colors should be completely transparent, so it doesn't matter which color you choose. Set the opacity to 0 and move down to the highlight colors.
First and Second Highlight Colors should be set to #3D1515. You can enter this value into the "Color Name" field. Set the opacity for the First Highlight Color to 34. The opacity for the Second Highlight Color should be 177. This will achieve the almost border less, faded look for the middle of the dock.
 |
| First Highlight Color Settings |
The Inner and Outer borders will also be fully transparent, so set the opacity to 0.
Under Numeric Settings, set "Curves Symmetry" to .50. When you start changing this value you'll immediately see what it controls. Setting it to .50 ensures that each section of the dock matches in height, creating an even panel feel across the entire dock.
Set "Thickness" to 0. Again, you'll see what this value does as soon as you start changing it. It's difficult to put into words, so watch the video for a demonstration.
And last but not least, I have my corner radius set to 25. This controls the angle of the curve the Lucido style draws when you insert a separator into the dock. Setting this value to 0 sets a 90 degree curve so that everything is completely square. Setting the value to 100 creates a wave-like appearance. For me, 25 is a nice steep angle that creates a clear, yet stylish separation point for your icons.
 |
| Lucido Curves and Angles Settings |
I didn't really bother with the "Icons" section. Play around with that part on your own to see what it can accomplish. I never found much use for it, personally.
For "Tooltips," I set the font to "Ubuntu 10." You can obviously choose whichever font you like best. This is the text that shows up when you hover your mouse over an icon in the dock. This does not apply to the DockbarX launchers, unfortunately, but we'll get to that later. Set the Fill Color to #212936 and turn the opacity all the way up to 255 to make it a solid color. This will match the Atolm theme's dark blue menu selection color. Set the Font Color and the Outline Color to #FFFFFF (white) for good contrast. You can see an example of how this Tooltip setup will look in the second screenshot below.
 |
| Tooltips Settings |
 |
| Tooltip Example |
Under "Extras," I set the "Glowing dot color" to #212936 as well, which makes it difficult to see, honestly. If you'd prefer something lighter, play around with the color wheel and see what lighter colors might fit the theme best.
Now that you have everything setup the way you want, go ahead and click the Export Theme... button.
 |
| Saving a Theme |
Here you will name the theme and give it a version number. I called this theme "Atolm," so I'd know later which GNOME theme it should be paired with, but you can obviously call it whatever you like.
For the Export Option Groups, I checked every box so that I wouldn't have to do any tinkering upon applying the theme later. Click Save.
It should be noted that saving a theme does not save any settings you've changed under the Advanced tab. Those settings are permanent until you change them manually.
I would recommend saving the file to your Desktop so that it can be easily found for the next step. Now that you're back on the Theme customization screen, click the "Choose a theme..." button to go back to the main theme selection screen. From here, click the "Install..." button. Browse to your saved theme and click Open. This will install the theme in AWN's list of themes for later use.
Congratulations, you've just created your very own AWN theme! That wasn't so hard. We're not quite done here yet, though. We still need to adjust some settings in the Advanced tab.
Advanced
 |
| AWN Advanced Settings |
Change the "Offset" value to 0. This will move the icons in the dock down to the very bottom of the screen, which is the way I prefer it if I'm using AWN as my panel. The only other value we're going to change here is "Reflection alpha multiplier." I have mine set to 0.000 to eliminate all icon reflections from the dock. If you like the icon reflections, you can play around with this number on your own to create as much or as little reflection as you'd like.
DockbarX
So you've added the DockbarX applet to AWN, but you're not really seeing anything happening there. Let's go ahead and work on getting that set up to complete your dock.
 |
| DockbarX with Window Preview |
To add a launcher to DockbarX, open one of your commonly used applications, such as Firefox or Thunderbird. You'll see that the icon for the app is now visible in the dock. Right click the icon and choose "Pin Application."
Now when you close the application, the icon will remain in the dock. This is very similar to the way the Windows 7 taskbar works. Do this for any app you want to be included in your set of launchers. Now we'll tweak DockbarX's appearance.
Click your menu applet and go to Accessories > DockbarX Preference. As you can see, DockbarX has far more customization options than AWN's default program launcher. We won't cover everything here because this article is already long enough, but I'll show you what we need to do to make your DockbarX look like mine.
Under Appearance, I chose the Minimalistic 2 theme, because it best fits the style of our overall AWN theme. To apply the theme, click the refresh button next to the drop down list. I encourage you to go down the list of themes and take a look at each one, just to see the different looks you can achieve.
 |
| Choose a DockbarX Theme |
You can change the colors any way you see fit, really. They're very subtle and you probably won't even notice them unless you're as picky as I am.
Under "Window List," check the "Show Previews" box so that when you hover your mouse over an active application's icon, a thumbnail preview will appear. Sadly, the preview will be blank for minimized windows. I really hope they fix this in future releases, but for now we'll just have to work with what we've got. I set the preview window size to 150, as I felt that the default 250 was a bit large for my taste. I also set the Delay to 0, so that the preview would appear immediately as I moved my mouse over the icon.
 |
| Adding Thumbnail Previews |
Under "Group Button," we're only going to change one option. And really, this isn't entirely necessary. It's just cool. Under "Select Action Options," set the "Multiple Windows Open" value to "compiz scale."
 |
| Set Compiz Scale |
We'll be tackling Compiz in our next segment, but for now, this is a pretty neat feature. Basically, when you have more than one window open for a single application, clicking that application's icon will reveal each open window of that application on screen (even if some of the windows are located on other workspaces) so you can select which window you need to activate. As a point of comparison, think of Mac OSX's Exposé feature. If you want to see an example of this in action, check out the video on this WebUpd8 article. There's also a bit in that video about adding an Expo launcher, but we won't get into that here.
Now we're going to skip down to "Plugins." Check the "Use Dockmanager" box to activate Helpers, then click the Helpers button.
 |
| Helpers |
This will bring up a list of Helpers (see left). Helpers are basically a set of uniform plugins developed for several dock applications (AWN, Docky, Dockbarx) that are part of the Dockmanager package you installed earlier. Read the description of each Helper to find out what it does. I recommend activating the Zeitgeist Integration helper so you can create jumplists for recent activity on certain applications. If you don't know what a jumplist is, think of the "Recent Documents" entry on the Windows Start Menu.
Other cool options are the Deluge Transfer Rates, Banshee Controls, and Rhythmbox Controls Helpers.
Once you're done activating your preferred Helpers, you're done with DockbarX settings for now. Please do explore on your own and see what other functionality DockbarX has to offer. There's tons of other stuff you can tweak if you're so inclined.
Now you've got your dock setup exactly, or depending on which settings you chose, almost exactly like mine. Pretty cool, huh? Obviously, this is just an example, and is meant to show you the flexibility of the application. You can do all sorts of fun things with AWN and DockbarX to make your desktop stand out from the pack.
Conky
Conky is incredible, but it's also best suited for advanced users. You actually have to hand-code the configuration file to achieve the appearance that you want. The upside of this is that you can make Conky look however you want it to look and add almost limitless information. The customization potential is almost infinite. The downside is that it's extremely unfriendly to the average user. By the way, if you're not sure what I'm talking about, this is an example of a Conky setup, taken directly from my desktop.
 |
| My Conky Setup |
It's not for the faint of heart, but if you really want to jump in and learn some new things, here are some links to get you started:
A list of Conky configuration variables
ubuntuforums.org
You can also download my Conky configuration file as a reference here.
Please be aware that a lot of the code used in my configuration file is specific to my machine, and won't necessarily work for yours. You'll have to find the correct arguments, commands, and variables to fit your machine, which is quite rewarding if you're willing to put in the work.
ubuntuforums.org
You can also download my Conky configuration file as a reference here.
Please be aware that a lot of the code used in my configuration file is specific to my machine, and won't necessarily work for yours. You'll have to find the correct arguments, commands, and variables to fit your machine, which is quite rewarding if you're willing to put in the work.
I really do encourage you to at least give it a try. It never hurt anyone to learn some basic coding, and you'll learn a lot about your Ubuntu system in the process - I know I am. Some day I will write my own Conky tutorial on this blog, but since I'm only just now getting my feet wet myself, I'll wait until I'm a little more comfortable with the coding process.
If you have the time, check out the video below for a demonstration of most of what we talked about here. You'll notice that the theme in the video isn't the same as the theme we created in this article. I recorded this video before I started working on this theme, but I think it's still a good visual reference.
No comments:
Post a Comment