Saturday, 7 June 2014

Make XFCE look like ChromeOS Part 2

In Part 1, I demonstrated how you could alter the theme and panel layout of XFCE to mimic the appearance of a Chromebook/ChromeOS. If you followed that tutorial, then you will have pulled some Google Apps down and created a transparent toolbar and dock.

It's nearly there, but not quite. First of all, the icons on the dock are too close together. Secondly, if you look closely at a ChromeOS screenshot, you can see that the docks 'float' a little off the bottom of the screen.

Finally, I have never been happy with the launcher icon, so let's fix that too!

1. Add spacing to the launchers.

This one is easy. Simply go into the panel preferences and add a new item. Choose Separator. Click on the cog to configure it and and set it transparent:

If you add 2 such separators between the launcher icons (so 10 in all), you should get the spacing about right:

It's a bit of shame that the XFCE panel doesn't have an icon padding setting. That would make this a lot easier!

If you don't intend to add any other panel icons, you can reduce the length of the panel at this point.

2. Get the new and improved app launcher icon.

Since the new icon is pure white with transparency, it is impossible to see it on this page, so right-click on this link (and choose save link as...) to grab the new and improved launcher icon.

Save it your home directory somewhere. Still in the Panel Preferences dialog, select the last Launcher in the list. Click on the cog to configure it. Then choose the pen icon (at least in Xubuntu) to edit the currently selected item. Click on the current icon and then browse to the new one.

3. Float the docks.

This one is quite simple. Start with the main dock containing the Google icons. Unlock the panel by right-clicking the panel or in the Panel Preferences dialog. Drag the dock up a little and a little to the right. You will see it kind of 'snap' away from the edges. Get it as far left and down as you can before it snaps back to the screen edge. It can be a bit fiddly, but when you get it right, it'll look like this:

Lock the dock and repeat with the notification panel.

(If you mess around with the Window Settings in the XFCE Settings Manager, you can probably turn off this snapping to screen edges function.)

Although this looks good, you will find that because the panels are now not against a screen edge, maximised windows will appear over the top or behind the docks. This may or may not be desirable, but if you want to keep the default behaviour of windows not filling that space, there is a simple trick you can try. Create a new panel. Make it fully transparent but only have a length of 1. Position this panel in the bottom, left corner and lock it. Increase the height so that it is slightly higher than the main dock with the Google icons. As this panel (albeit tiny) is on the screen edge, it will stop maximised windows from filling the space:

4. Add the user switch/log out button

Real ChromeOS has a nice button on the notification panel that shows the user account picture and allows for user switching or logging off.

To re-create this, right-click on the notification panel and select Panel Preferences. On the Items tab add a new launcher. Edit the launcher and use this command "xfce4-session-logout". Then choose an icon from the theme set, or if you have a personalised user picture, locate the picture and use that instead:

You may wish to add a transparent separator before this. Position it at the right-hand edge, just before the Windows Menu.

If you want the icon to switch user accounts instead use this command (or create another launcher): /usr/bin/dm-tool switch-to-greeter

I usually only have 1 workspace and I alter the workspace name in the XFCE Settings Manager to "Running applications:" This way the window menu makes more sense to me:

5. Chrome Theme

As you will be spending all your time in Chrome itself, you need the Chrome theme to look the part. I can highly recommend the Mac OS X Magic Theme 2 Transparent.

And if I do say so myself, the final result is very close to the ChromeOS look!


  1. Great guide man! Is there a way now to make this Chrome OS layout the default for all users or a quick way to import this as other users?

    1. Thanks. The most common way is to copy the hidden folders from your /home directory to the /etc/skel directory and then each new user account will get the same layout. XFCE config files are found at ~/.config/xfce4 but other configuration changes will be found at ~/.local and ~/.gtkrc-2.0 and of course the google icons which are found at ~/.local/share/icons/hicolor

      This thread has some good advice for where XFCE stores its settings:

      Sorry, there is no quick way unless you script it.

  2. What icon theme are you using?

  3. That would be Elementary-XFCE as used in Xubuntu 14.04