website logo

Last Updated:

Install and Configure I3 Window Manager From Scratch

feature.webp

Linux desktops are very modular in nature. Gnome, KDE, XFCE are some examples of popular desktop environments. These desktop environments provide everything a user expects in a desktop. It provides nice GUI to control your PC and make it usable out of the box with little to no configuration.

In the contrary, window managers are very minimal in nature. It does only one task of managing application window and does it pretty well. Window manager don’t provide GUI for everything. In some cases, you can make your own GUI tools to control your desktop. There are various tools built by some awesome developers that help us in this process.

Why I Like i3

The primary reason is its simplicity. I3 is very simple in nature and very easy to configure. It has no fancy animation and rock solid. I3 enables you to get your things done in less time. It is fast by default.

I3 window manager has a very clear documentation. Every setting and configurations are documented in the i3 website. If you want to use Wayland, sway is the i3 counterpart for Wayland display manager.

This is the final result of this configuration.

result

Install i3 Window Manager in Your Linux Distribution

If you are new and want to explore the world of window managers, I recommend you to first install a desktop environment like Gnome or KDE. Because, if something breaks, you can always have an option to log back to your desktop environment. You can install Ubuntu or Linux Mint first and then follow this guide step-by-step.

Otherwise, you can also install a window manager from scratch. First you have to install a server Linux distribution, for example, Debian server, Ubuntu server, Arch etc. Once you log in to your TTY window, follow the following installation guide.

If your user doesn’t have root permission (i.e., can’t execute sudo command), you can follow my guide on how to give a user root access in Linux by following this blog.

sudo apt install i3 i3-blocks nitrogen lxappearance

In Debian based distribution i3 is a meta-package which includes i3-wm, i3lock, i3status, and suckless-tools. There are same type of package groups available for arch also. If your distribution doesn’t offer you such type of meta-packages, then you need to install these dependencies by yourself.

If you are installing i3 in a headless environment (Linux installation without any GUI) you need to install some extra dependency.

sudo apt install xorg lightdm

Xorg is a display server which display your i3 window manager in your screen. lightdm is an optional dependency. It provides you a nice GUI to enter your login details and access your computer.

Install I3 Window Manager from Ubuntu Repository

In older Ubuntu distribution (22.04 LTS), the i3 window manager package present in the official repository is very old. This version doesn’t support i3 gaps and many other things. Therefore, I recommend you to install a newer version of i3 with the help of an i3 PPA. These steps are documented in the i3 website.

curl https://baltocdn.com/i3-window-manager/signing.asc | sudo apt-key add -
sudo apt install apt-transport-https --yes
echo "deb https://baltocdn.com/i3-window-manager/i3/i3-autobuild-ubuntu/ all main" | sudo tee /etc/apt/sources.list.d/i3-autobuild.list
sudo apt update
sudo apt install i3

Make sure to use the development release. This version has the latest i3 package, compatible with everything we want to achieve in this blog.

Learning I3 Window Manager Keybindings

Before log-in to your shiny and new i3 window manager, it is crucial to learn some basic i3 keybindings to move around in the window manager.

The Modifier Key

I3 window manager has a concept of modifier key or mod key. Every key combination start with this key. When you first enter the i3 window manager, you have to choose one mod key. You can choose between the windows and alt key. I prefer the alt key, you can choose yours. You can change this modkey later in the config file, so don’t worry about your choice.

Open Applications Using Dmenu

You can open your terminal by pressing mod+enter key. In some region enter is also called return key. Now you have entered the terminal, you can open your application from the terminal or use a tool called demnu.

Dmenu comes with i3 window manager. We will also talk about some alternative to dmenu in the later part of this blog. You can launch dmenu by pressing mod+d keybinding. Dmenu provide a list of installed application. You can think dmenu as an application launcher.

Switching Application Windows

Use the mod+arrow keys to switch focus from one window to another. To move your window from one location to another, use the mod+shift+arrow keys.

Additionally, if you want to switch between tiling and floating mode, use mod+shift+space key.

Close Application Window

To close the application window, use mod+shift+q key.

Switching Workspaces

You can press mod+number keys to switch workspaces. For example, press mod+1 for workspace number 1, mod+2 for workspace 2 etc.

Reloading i3 Window Manager

After made some changes in the i3 config, you can use mod+shift+r to reload your i3 window manager to see the changes.

Exit i3 Window Manager

Press mod+shift+e to exit i3 window manager and switch to some other desktop environment.

These are some of the most important keybindings in i3 window manager. You can see the complete list in the i3 user guide.

Fix Some Issues You May Face in i3

I3 window manager is not usable out-of-the box. Sometimes you can face some issues which are very hard to resolve if you are new to Linux or have less experience with the terminal.

In this section, I am discussing some issue that you can face and how to resolve them with minimal effort.

Setting Correct Display Resolution

Sometime i3 window manager can’t occupy the full resolution of your display. This issue is prevalent in virtual machines. This problem occurs because of the xorg server can’t detect your display resolution correctly.

To fix this issue, first you have to know your display name and resolution. Run the following command. This will spit out your display name and some compatible resolutions.

$ xrandr

# output:
Screen 0: minimum 320 x 200, current 1920 x 1080, maximum 16384 x 16384
eDP connected primary 1920x1080+0+0 (normal left inverted right x axis y axis) 382mm x 215mm
   1920x1080     60.02*+  40.03
   1680x1050     60.02
   1280x1024     60.02
   1440x900      60.02
   1280x800      60.02
   1280x720      60.02
   1024x768      60.02
   800x600       60.02
   640x480       60.02
HDMI-A-0 disconnected (normal left inverted right x axis y axis)

Here you can see that the name of my primary display is eDP. Out of all the resolution, my display resolution is 1920x1080 pixels. Now you choose your display name and resolution accordingly and run the following command.

xrandr --output <display name> --mode <display resolution>

# In my case, this command look like the this
xrandr --output eDP --mode 1920x1080

Now your display resolution should be fixed.

Resolve Screen Tearing

Screen tearing issues can be found in those users who use AMD CPU with integrated GPU. Some Intel users also report the same. But the issue is more common in AMD users.

Run the following command to see if your screen tearing is fixed.

xrandr --verbose|grep TearFree
xrandr --output HDMI-A-0 --set TearFree on

This command will last till the next boot. Run the following command to persist these changes.

echo > /etc/X11/xorg.conf.d/20-amdgpu.conf <<EOF
Section "Device"
   Identifier  "AMD Graphics"
   Driver      "amdgpu"
   Option      "TearFree"  "true"
EndSection
EOF

The above command add these device parameters in the 20-amdgpu.conf file. For more details, please follow this Debian wiki topic.

Control Monitor Brightness in i3 Window Manager

The default monitor brightness for xorg is 100%. If you have an external display, then you can change it manually. For laptops this is not possible, and we have to use terminal commands to control monitor brightness.

xrandr --output <display name> --brightness <0 to 1>

# If I change the monitor brightness to 60% then the command will be
xrandr --output eDP --brightness .6

Brightness value is always provided as a decimal value that ranges between 0 and 1. Don’t put value grater than 1 in the --brightness parameter.

Fix Touchpad Issue in i3

The touchpad of your laptop is controlled by xinput. First list all the devices controlled by xinput in your laptop.

xinput list

# Output:
⎡ Virtual core pointer                    	id=2	[master pointer  (3)]
⎜   ↳ Virtual core XTEST pointer              	id=4	[slave  pointer  (2)]
⎜   ↳ Logitech Wireless Receiver Mouse        	id=12	[slave  pointer  (2)]
⎜   ↳ ELAN1203:00 04F3:307A Mouse             	id=13	[slave  pointer  (2)]
⎜   ↳ ELAN1203:00 04F3:307A Touchpad          	id=14	[slave  pointer  (2)]
⎣ Virtual core keyboard                   	id=3	[master keyboard (2)]
    ↳ Virtual core XTEST keyboard             	id=5	[slave  keyboard (3)]
    ↳ Power Button                            	id=6	[slave  keyboard (3)]
    ↳ Asus Wireless Radio Control             	id=7	[slave  keyboard (3)]
    ↳ Video Bus                               	id=8	[slave  keyboard (3)]
    ↳ Power Button                            	id=9	[slave  keyboard (3)]
    ↳ Sleep Button                            	id=10	[slave  keyboard (3)]
    ↳ USB2.0 HD UVC WebCam: USB2.0 HD         	id=11	[slave  keyboard (3)]
    ↳ Asus WMI hotkeys                        	id=15	[slave  keyboard (3)]
    ↳ AT Translated Set 2 keyboard            	id=16	[slave  keyboard (3)]

You can see my touchpad ELAN1203:00 04F3:307A Touchpad is listed here. Your touchpad name will be different. Please run the command and identify your touchpad device name.

Now check the options you can modify in this touchpad.

xinput list-props "ELAN1203:00 04F3:307A Touchpad"

## Output
libinput Tapping Enabled (315):	0
ibinput Tapping Enabled Default (316):	0
libinput Tapping Drag Enabled (317):	1
libinput Tapping Drag Enabled Default (318):	1
libinput Tapping Drag Lock Enabled (319):	0
libinput Tapping Drag Lock Enabled Default (320):	0
libinput Tapping Button Mapping Enabled (321):	1, 0
libinput Tapping Button Mapping Default (322):	1, 0
libinput Natural Scrolling Enabled (292):	0

Here 0 means disable and 1 means enable. Open the i3 config file located in ~/.config/i3/config and add the following lines at the end.

# touchpad settings
exec --no-startup-id xinput set-prop "ELAN1203:00 04F3:307A Touchpad" "libinput Tappin    g Enabled" 1
exec --no-startup-id xinput set-prop "ELAN1203:00 04F3:307A Touchpad" "libinput Natura    l Scrolling Enabled" 1

These are my config. You should modify it and replace with your device name in the command.

Customize Your Terminal

Terminal is the most important application on Linux. Combine it with a window manager, its importance quadruples. Access to a fast and flexible terminal in necessary. Therefore, we are going to install terminator terminal emulator.

Some people also use alacritty or urxvt as their terminal emulator.

Install Terminator

Run the following command to install terminator.

sudo apt install terminator

After installing, open terminator and right-click to change preferences. Change your preferred fonts and color schemes.

You can also use this terminator theme plugin to easily choose your preferred terminator theme.

Installing a Compositor to Add Background Blur

Unlike other desktop environments, i3 window manager doesn’t come with a compositor. To get a nice background blur, install Picom compositor.

sudo apt install picom

Now open your terminal preference and change to the transparent background and decrease the shade to 80%. Lesser shade means more transparent blur.

Installing Nerd Fonts

Icons font are necessary to customize your desktop. Normal fonts don’t include icons. Therefore, you need to install a nerd font.

First choose a nerd font of your choice from this website and download it.

Then extract it and move to the ~/.local/share/fonts/ directory.

unzip UbuntuMono.zip -d ~/.local/share/fonts/ubuntumono/

Then refresh the font-cache and your nerd font is ready to use.

fc-cache -fv

Now add this font in your i3 config file, located in ~/.config/i3/config.

font pango:UbuntuMono Nerd Font 10

Change UbuntuMono with your font of choice. Then refresh the i3 config with mod+shift+r key bind.

Customize GUI Apps in i3

GUI apps can be customized with themes and icons. You can download your themes from Gnome look website. Download the theme content and put it inside the ~/.themes or ~/.local/share/themes directory.

Adding Your Favorite Theme to The GUIApps

You will need the Lxappearence app to apply the theme into GUI apps. We have installed the lxapearence app at the beginning. You can install the same with the following command.

sudo apt install lxappearence

Now launch the lxappearence application and select your installed theme from the “Theme” section. Then select your favorite icon. Then hit apply and you are good to go.

Add Screenshot Functionality

There are many options for taking screenshot in i3 window manager. I use gnome-screenshot but you can also choose one among flameshot, scrot etc.

To install gnome-screenshot, run the following command.

sudo apt install gnome-screenshot

Now define a key bind to invoke the screenshot software.

bindsym --release Print exec gnome-screenshot
bindsym --release $mod+Sys_Req exec gnome-screenshot -i

When I press the Print key, gnome-screenshot would take a full screenshot. Similarly, when I press the mod+Print key, gnome-screenshot opens in the interactive mode. Interactive mode in gnome screenshot gives you the option to capture and modify your screenshot area.

In the code snippet above, I am using $mod+Sys_Req keybinding instead of $mod+Print. This is because, in my keyboard, when I press the mod key, it becomes the Sys_Reqkey. This may be different for your keyboard.

Customize i3 Window Manager

After installing all the necessary utilities, this is the time to customize your i3 window manager. Although the possibility is endless, in this section I am trying to include the basic and necessary i3 customization options.

Adding Wallpapers

The most basic customization you can add to your desktop is adding a cool looking wallpaper. I recommend you to download wallpapers from the wall heaven website. If you have some great recommendation, please share it with me.

After downloading your wallpapers, aggregate them in a directory. Now launch nitrogen app and click on the preference button. Then select your wallpaper directory and choose a wallpaper to display in your background.

To persist this wallpaper setting, you need to add a config in your i3 config file.

exec --no-startup-id nitrogen --restore

Add Gaps to i3 Windows

There are 2 type of gaps in i3 window manager. Inner gap gives gap among multiple windows in the same screen. Outer gaps give gaps around the screen. Add the following line in your i3 config to configure inner and outer gap.

gaps inner 10px
gaps outer 5px

Rounded Window Corner

You will need a compositor to make the window corner rounded in i3. If you haven’t installed picom, this is a great time to install it.

sudo apt install picom

Now make a picom config file in the ~/.config/picom/picom.conf and add the following lines.

corner-radius = 5

If you need your corners to be more rounded, you can bump up the number. Take a look on the sample picom config to get an idea on what other variables you can customize.

Remove Application Titles

To completely remove application titles and borders, you need to configure the default_border and default_floating_border option in your i3 config. Add the following lines to remove the application titles and borders.

default_border none
default_floating_border none

If you want to add a little border but not application titles, modify the above lines.

default_border pixel 2
default_floating_border pixel 2

Modify The Color Schemes

I3 comes with its iconic blue color. You can customize this color to match your system theme. There are 5 types of client state focused, focused_inactive, unfocused, urgent and placeholder. You can customize all of these colors or modify the default color scheme as per your taste.

This is the default color scheme of i3 window manager.

# class                 border  backgr. text    indicator child_border
client.focused          #4c7899 #285577 #ffffff #2e9ef4   #285577
client.focused_inactive #333333 #5f676a #ffffff #484e50   #5f676a
client.unfocused        #333333 #222222 #888888 #292d2e   #222222
client.urgent           #2f343a #900000 #ffffff #900000   #900000
client.placeholder      #000000 #0c0c0c #ffffff #000000   #0c0c0c

client.background       #ffffff

first add this color scheme in your i3 config. Then change the color you want.

Customize LighDM Display Manager

You can customize the LightDM manager with the help of lightdm-settings application. LightDM settings app usually comes with the lightdm package. If it is not installed in your computer, you can install it using the following command.

sudo apt install lightdm-settings

Now launch the application prefixing with sudo.

sudo lightdm-settings

Here you can customize the LightDM background, font, theme, colors etc.

Configure i3 Status

I3 status is the status bar you can see on the bottom of your screen. The bottom bar present in the i3 window manager is called i3 bar. It is not very customizable but work very well with i3.

If you want a customizable status bar, take a look at pollybar.

Modify i3bar Padding

To change the padding of your i3bar, add the following command in the bar{} section of your i3 config.

bar{
    padding 2px 10px
}

Here 2px is the vertical padding and 10px is the horizontal padding.

Tray Icon Customization

Some applications (e.g., screen recorders, VLC, network managers etc.) uses tray icons. It is displayed in the i3 bar. You can turn off the tray icon by adding the following line inside your i3 bar configuration.

bar{
    tray_output none
}

Turning off the tray icon is not a good option. That’s why, if they look ugly to you, you can customize it and control the tray icon size using paddings.

bar{
    tray_padding 5px
}

Add New Segment in I3status

I3 status comes with those utilities which are essential for a normal user. It is very fast, use less resource but not very customizable. You can read more about i3 status in its official documentation.

You can add or remove any segment from your i3 status by removing it from the order+= section.

order += "wireless _first_"
order += "ethernet _first_"
order += "battery all"
order += "tztime local"

Let’s add the volume section. First choose your preferred sink by running the following command. Sink means your speakers.

pacmd list-sinks | grep name:

Then add the sink as a device in the following snippet. Then add the snippet in your i3status config file.

volume master {
      format = " %volume"
	 format_muted = " %volume"
	 device = "pulse:alsa_output.pci-0000_05_00.6.analog-stereo"
}

To add this volume master section in your i3 status, add it in the order+= section.

order += "wireless _first_"
order += "ethernet _first_"
order += "battery all"
order += "volume master"
order += "tztime local"

Configure i3 Lock

To lock your system, i3 window manager comes with i3lock. to lock your session, run i3lock in your terminal. Then you need to enter your password to log back in.

i3lock

Customize i3lock

By default, i3 lock looks ugly. You can set custom color or an image with i3lock. To set a color, use -c flag followed by the color hex code after the i3lock command.

i3lock -c <color hex code>

# To make your lock screen completely black, use 000000 hex value
i3lock -c 000000

# To make your lock screen completely white, use ffffff hex value
i3lock -c ffffff

Add i3lock Background

You can also add an image as a lock screen wallpaper. Use -i flag followed by the absolute location of your image.

i3lock -i /home/username/Pictures/lockscreen.png

Configure Auto Lock with i3lock

In other desktop environments, when you are away from your pc, it automatically blanks the screen and lock the session. To mimic this behavior, you need to use the xset command. To use xset in conjunction with i3lock, install xss-lock in your pc.

sudo apt install xss-lock

Now set your screen turn off time. It is calculated in seconds. If you want to turn off your screen in 5 mins, then you need to use 300. Add the following line in your i3 config.

exec --no-startup-id xset dpms 0 0 300

Now we need to transfer this state to i3 lock with the help of xss-lock utility. Add the following line in your i3 config after the previous one.

exec --no-startup-id xss-lock --transfer-sleep-lock -- i3lock -i /home/hrishikesh/Pictures/lockscreen.png  --nofork

Now restart the i3 window manager and your computer will lock itself when screen turns blank after 5 mins.

Conclusion

In this video you have learned everything you need to getting started with i3 window manager. If you like this article, please share it with your peers. Have a good day.

See Also