Skip to content

Instantly share code, notes, and snippets.

@xkisu
Last active May 22, 2017 21:21
Show Gist options
  • Save xkisu/570a7797bfa272b0fdf19fad762c486e to your computer and use it in GitHub Desktop.
Save xkisu/570a7797bfa272b0fdf19fad762c486e to your computer and use it in GitHub Desktop.

This is mainly intended to document my steps for creating a custom Ubuntu install. It is primarally intended to be usful to me for reproducing when I did.

However it also goes over steps that could be usful for other users, so feel free to follow this guide to help you setup a custom Ubuntu enviroment.

Base OS

So as to have support for most programs and the easy ability to install packages, we'll use Ubuntu as the base.

As normal Ubuntu comes with a ton of software and the Unity DE which I don't wont, we'll use the Ubuntu command-line minimal install: https://help.ubuntu.com/community/Installation/MinimalCD

Setup

First install some of the basic packages: (will take about 10 minutes)

sudo apt-get install xorg ligthdm feh openbox fish xterm firefox synaptic git --no-install-recommends

Install the webkit greeter

Enable the webkit2 greeter:

sudo bash -c "echo '[Seat:*]\ngreeter-session=lightdm-webkit2-greeter' > /usr/share/lightdm.conf.d/40-greeter.conf"

Create the backgrounds folder: (or the greeter will not load properly)

sudo mkdir /usr/share/backgrounds

Create the session script: (/usr/local/bin/charlotte-desktop)

#!/bin/sh
openbox

Make it executable: (or lightdm will say it cannot find your script)

chmod +x /usr/local/bin/charlotte-desktop

Create the desktop session file: (/usr/share/xsession/charlotte.desktop)

[Desktop Entry]
Name=charlotte
Comment=Charlotte desktop
Exec=/usr/local/bin/charlotte-desktop
TryExec=/usr/local/bin/charlotte-desktop
Type=XSession

Set it as the default session for lightdm:

sudo bash -c "echo '[Seat:*]\nuser-session=charlotte' > /usr/share/lightdm.conf.d/40-charlotte-session.conf"

Testing

At this point you have a basic DM, try running sudo systemctl start lightdm and login, then right click the black background and if you see a menu it's all working.

Stop lightdm by hitting Ctrl+Alt+F2 to go to a new console, login, and run sudo systemctl stop lightdm.

Polishing the Basics

Download a desktop background:

wget -O /usr/share/backgrounds/desktop.jpg http://i.imgur.com/oNcyRg3.jpg

Modify the session script:

#!/bin/sh
feh --bg-fill /usr/share/backgrounds/desktop.jpg
openbox

Now you can start lightdm again and you should see the background, progress!

Window Shadows

Now let's add a composition manager to the mix for transparent windows, window shadows, etc...

For this we'll use Compton:

sudo apt insteall compton

We can also install the configurtion program for Compton if required:

sudo apt install compton-conf

You can use the command compton-conf to change the compton settings. To preview hit Apply, and then run the command compton --config ~/.config/compton.conf. When you make changes in the configuration editor you'll need to hit Ctrl+c to stop compton, and then run the command again after hitting Apply.

The compton config file I'm using for now is:

shadow = true;
no-dnd-shadow = true;
no-dock-shadow = true;
clear-shadow = true;
shadow-radius = 7;
shadow-offset-x = -7;
shadow-offset-y = -7;
shadow-opacity = 0.4;
shadow-red = 0.0;
shadow-green = 0.0;
shadow-blue = 0.0;
shadow-exclude = [ "name = 'Notification'", "class_g = 'Conky'", "class_g ?= 'Notify-osd'", "class_g = 'Cairo-clock'" ];
shadow-ignore-shaped = true;
menu-opacity = 1.0;
inactive-opacity = 0.6;
active-opacity = 1.0;
frame-opacity = 1.0;
inactive-opacity-override = false;
alpha-step = 0.06;
inactive-dim = 0.15;
blur-kern = "3x3box";
blur-background-exclude = [ "window_type = 'dock'", "window_type = 'desktop'" ];
fading = true;
fade-in-step = 0.01;
fade-out-step = 0.02;
fade-exclude = [ ];
backend = "xrender";
mark-wmwin-focused = true;
mark-ovredir-focused = true;
detect-rounded-corners = true;
detect-client-opacity = true;
refresh-rate = 0;
vsync = "none";
dbe = false;
paint-on-overlay = true;
focus-exclude = [ "class_g = 'Cairo-clock'" ];
detect-transient = true;
detect-client-leader = true;
invert-color-include = [ ];
glx-copy-from-front = false;
glx-swap-method = "undefined";
wintypes : 
{
  tooltip : 
  {
    fade = true;
    shadow = false;
    opacity = 0.75;
    focus = true;
  };
};
blur-background = true;
blur-background-frame = true;

Once you have your compton settings figured out (our your using mine above), we need to copy or save them to a global place so any user on the system will use them.

To do that we'll put it into /usr/share/compton.conf, sudo cp ~/.config/compton.conf /usr/share/.

Now in the session script /usr/local/bin/charlotte-desktop we'll add compton:

#!/bin/sh
feh --bg-fill /usr/share/backgrounds/desktop.jpg
compton --config /usr/share/compton.conf &
openbox

Now in a terminal you can run sudo systemctl restart lightdm, now the windows should have shadows and transparency effects!

Themeing

Now to make the windows and decorations look pretty.

There are a few parts to this, first is an openbox theme which controls what the window frames look like. This controls the color, size, padding, resizing handle size, etc..

Then is the GTK theme, GTK is a widget toolkit used to create a lot of apps for linux, so a GTK theme is essential to make everything work together.

We'll also need to do some theming to the lightdm greeter, and later on the plymouth splash.

For creating the OpenBox theme you CAN download and use the GUI tool obconf, however there is a glitch where it doesn't save properly so before closing the app you will need to enable preview and manually copy the generated .config/openbox/obtheme.conf file to your theme directory.

To start off, create our theme directory, sudo mkdir /usr/share/themes/Charlotte and then switch to it cd /usr/share/themes/Charlotte.

Openbox

At this point you may want to install obconf to make switching themes easy. Run sudo apt-get install obconf, then start it with obconf &.

First we need to create the index.theme file. This is a basic file that is used by different systems to get the name of the theme, and some settings sudo touch index.theme.

Here is the settings I used for the file:

[Desktop Entry]
Type=X-GNOME-Metatheme
Name=Charlotte
Comment=Charlotte Theme
Encoding=UTF-8

[X-GNOME-Metatheme]
GtkTheme=Charlotte

Now to make the theme, create the openbox theme folder mkdir /usr/share/themes/Charlotte/openbox-3 and then edit the theming file nano /usr/share/themes/Charlotte/openbox-3/themerc.

Here is the basic theme configuration I used:

#openbox themerc edited with obtheme
border.width: 0
menu.border.width: 0
menu.items.active.bg: Solid Raised
menu.items.active.bg.color: #4A4A4B
menu.items.active.bg.border.color: #000000
menu.items.active.text.color: #FFFFFF
menu.items.bg: Solid Raised
menu.items.bg.color: #2E2F33
menu.items.bg.border.color: #000000
menu.items.disabled.text.color: #4A4A4B
menu.items.text.color: #D9D8D9
menu.overlap: 0
padding.height: 7
padding.width: 4
window.active.button.disabled.bg: Solid Flat
window.active.button.disabled.bg.color: #2E2F33
window.active.button.disabled.image.color: #4A4A4B
window.active.button.pressed.bg: Solid Flat
window.active.button.pressed.bg.color: #2E2F33
window.active.button.toggled.pressed.image.color: #4A4A4B
window.active.button.unpressed.bg: Solid Flat
window.active.button.unpressed.bg.color: #2E2F33
window.active.button.unpressed.image.color: #D9D8D9
window.active.grip.bg: Solid Raised
window.active.grip.bg.color: #2E2F33
window.active.grip.bg.border.color: #000000
window.active.handle.bg: Solid Raised
window.active.handle.bg.color: #2E2F33
window.active.handle.bg.border.color: #000000
window.active.label.bg: Solid Flat
window.active.label.bg.color: #2E2F33
window.active.label.text.color: #D9D8D9
window.active.title.bg: Solid Raised
window.active.title.bg.color: #2E2F33
window.active.title.bg.border.color: #000000
window.client.padding.width: 0
window.handle.width: 3
window.inactive.button.toggled.unpressed.image.color: #4A4A4B
window.inactive.button.unpressed.image.color: #4A4A4B

I don't really care for the application icons in the titlebar, so I edited '/etc/xdg/openbox/rc.xml' and changed the titleLayout setting to LIMC.

Now we can run obconf and select out theme from the list, if you did everything correctly it should load and give on some nice flat and dark window frames.

GTK

The GTK theme is used to theme most linux application, as well for the icons used around the OS.

I'm going to use this GTK theme template to get started.

cd ~/Desktop
mkdir template
cd template
wget https://dl.opendesktop.org/api/files/download/id/1460761226/142117-gtk-theme-template-0.1.zip
cp template/gtk-3.0 /usr/share/themes/Charlotte

We can also download and install awf to use for previewing your theme. After installing it run awf-gtk3 (you may need to install a couple libraries to get it to work). When the window opens with all the preview widgets, go to System Theme>Charlotte to load the theme for the preview.

Now when we make changes to the theme you can either restart the application, or click the refrehs button to reload the theme preview.

Now that we're setup to preview the theme, we can edit the files in the /usr/share/themes/Charlotte/gtk-3.0 directory until we're happy with the look.

Troubleshooting

LightDM cannot find the session script

Make sure the script is executable chmod +x ...script...

Webkit greeter says the theme will not work on your system

Make sure the directory /usr/share/backgrounds exists for the default theme

The Openbox background is still black

Make sure the feh command has the right path, make sure the file exists in the path, and make sure it is the correct file extention/type. When running wget to download an image with a sepecified output, ALWAYS make sure it says the content type is image/jpeg or image/png.

Compton has strange artifacts

Try adding the flag --backend xrender to the command to start compton, this is a known issue with compton.

Techologies

  • Plymouth for boot splash screen
  • LightDM as the display manager
  • lightdm-webkit2-greeter for am easy to configure greeter
  • Openbox as the window manager
  • Feh for backgrounds

Programs

  • Fish as the shell
  • XTerm for terminal
  • Firefox as a browser
  • Synaptic for package manager

Apt install list

xorg fish firefox synaptic xterm firefox lightdm openbox lightdm-webkit2-greeter feh git compton

remove

We don't need python, python-gtk2, python-fuse, or git in the final build remove https://github.com/valr/awf

Notes

https://wiki.ubuntu.com/LightDM https://askubuntu.com/questions/42964/installing-ubuntu-desktop-without-all-the-bloat https://wiki.ubuntu.com/Plymouth https://www.digitalocean.com/community/tutorials/how-to-install-and-use-the-fish-shell-on-an-ubuntu-vps

https://wiki.archlinux.org/index.php/GTK%2B#Basic_theme_configuration

Personally I use exfat on all my drives where I can, so it can be usful to install it's support https://askubuntu.com/questions/451364/how-to-enable-exfat-in-ubuntu-14-04

Look into maybe replacing openbox with compiz? It's somewhat old but it can be extended through plugins and uses OpenGL for the rendering.

sudo apt-get install compiz compiz-plugins-default
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment