Colorful i3 customization

June 29, 2015

This post is meant to guide others who are interested in getting colors and icons on their i3 status. Here is a
snapshot of my i3 status.

Get i3blocks
i3blocks is a cool package for i3 which will make all this configuration possible.

pacaur -S i3blocks

Notice: You also have the option to install the git package for the latest release by running: pacaur -S i3blocks-git. However,
this package is less stable than the i3blocks package.

Now configure your i3 config located in:

~/.i3/config
Add these lines to the file. The important line here is the one with status_command . That will allow i3 to use
i3blocks for your i3status bar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

bar {

font pango:Source Sans Pro-10 10

status_command i3blocks -c ~/.i3/i3blocks.conf
colors {
separator #268bd2
background #002b36
statusline #839496
focused_workspace #fdf6e3 #6c71c4 #fdf6e3
active_workspace #fdf6e3 #6c71c4 #fdf6e3
inactive_workspace #002b36 #586e75 #002b36
urgent_workspace #d33682 #d33682 #fdf6e3
}

}
client.focused #6c71c4 #6c71c4 #fdf6e3 #6c71c4
client.focused_inactive #073642 #073642 #eee8d5 #6c71c4
client.unfocused #073642 #073642 #93a1a1 #586e75
client.urgent #d33682 #d33682 #fdf6e3 #dc322f

Download config

Get the icons

I have added 3 sets of icons to my i3status. The .ttf are linked below:
Fontawesome
Arch Icon
Clock and Temperature Icons
Add the ttf files that you received to your font cache:

1
2
3

mkdir ~/.local/share/fonts
cp *.ttf ~/.local/share/fonts
fc-cache -fv

Notice: You can also install Font Awsome by running: pacaur -S ttf-font-awesome

Edit your i3blocks configuration

Now we can add the icons and colors to our i3status bar! You need to edit your i3blocks configuration file located
here:
~/.i3/i3blocks.conf

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

separator_block_width=14
[Weather]
command=~/.i3/IconicWeather.sh "10001"
interval=1800
color=#e97ac8
[mail]
label=
command=~/.i3/.mail.sh.x
interval=100
color=#7F00FF
[disk-root]
label=:
command=/usr/lib/i3blocks/disk /
interval=30
color=#1793D1
[disk-home]
label=:
command=/usr/lib/i3blocks/disk $HOME
interval=30
color=#859900
[ssid]

30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

command=echo "$(iw dev wlo1 link | grep SSID | cut -d " " -f 2-)"
color=#d33682
interval=5

[wireless]
instance=wlo1
command=/usr/lib/i3blocks/iface
color=#00FF00
interval=10
[strength]
command=echo "$(iw dev wlo1 link | grep signal | cut -d " " -f 2-)"
interval=10
color=#cb4b16
[temp]
label=
command=echo "$(sensors coretemp-isa-0000 | awk '/Physical/ {print $4}')"
interval=10
color=#b58900
[battery]
command=~/.i3/battery BAT0
interval=30
[load]
label=
command=/usr/lib/i3blocks/load_average
interval=10
color=#6c71c4
[volume]
label=
command=/usr/lib/i3blocks/volume
interval=2
signal=10
color=#d70a53
[time]
label=
command=date '+%a %m-%d-%y %l:%M:%S %p'
interval=5
color=#50C878

Notice: If you installed the i3blocks-git package, you need to replace lib with libexec in the script path.

Notice: You will need to get scripts for [Weather] , [mail] and [battery] to work. In addition remeber to replace 10001 with
your zip code

The Gmail Script

1
2
3
4
5
6
7
8
9
10
11
12
13

USER=Your_Gmail_Username
PASS=Your_Password

COUNT=`curl -su $USER:$PASS https://mail.google.com/mail/feed/atom || echo "<fullcount>unknown n

COUNT=`echo "$COUNT" | grep -oPm1 "(?<=<fullcount>)[^<]+" `
echo $COUNT
if [ "$COUNT" != "0" ]; then
if [ "$COUNT" = "1" ];then
WORD="mail";
else
WORD="mails";
fi
fi

Download mail.sh
You need to enter your Gmail username and password into this script. Then save it to .mail.sh . You would need
to obfuscate the script and make it execute only. Follow the directions here. Save the execute only file to:
~/.i3/.mail.sh.x
and delete .mail.sh

The Weather Script

This script displays the current temperature and icon based on the zip code you enter on the i3blocks.conf file
Save the script here:
~/.i3/IconicWeather.sh

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#!/bin/bash
METRIC=0 #Should be 0 or 1; 0 for F, 1 for C
if [ -z $1 ]; then
echo
echo "USAGE: weather.sh <locationcode>"
echo
exit 0;
fi
curl -s http://rss.accuweather.com/rss/liveweather_rss.asp\?metric\=${METRIC}\&locCode\=$1
{
my $sun = " ";

17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

}
if( $values[0] eq "Mostly Cloudy" || $values[0] eq "Cloudy"
{
my $cloud = "";
binmode(STDOUT, ":utf8");
print "$cloud";
}
if( $values[0] eq "Showers" || $values[0] eq "Mostly Cloudy
{
my $rain = "";
binmode(STDOUT, ":utf8");
print "$rain";
}
if( $values[0] eq "Windy")
{
my $wind = " ";
binmode(STDOUT, ":utf8");
print "$wind";
}
if($values[0] eq "Flurries" || $values[0] eq "Mostly Cloudy
{
my $snow = " ";
binmode(STDOUT, ":utf8");
print "$rain";
}
if($values[0] eq "Clear" || $values[0] eq "Mostly Clear" ||
{
my $night = " ";
binmode(STDOUT, ":utf8");
print "$night";
}
print"$values[1]"; }'

|| $values[0] eq "Dreary (Overcast)"

w/ Showers" || $values[0] eq "Partly

w/ Flurries" || $values[0] eq "Partl

$values[0] eq "Partly Cloudy"|| $val

Download IconicWeather.sh

The Charging script

To display a different icon when the battery is charing or being discharged I created a battery script. Save the script
here:
~/.i3/battery
This is a modification of the i3blocks battery script. It changes these lines:

1
2
3
4
5
6
7

$full_text = "$percent%";
if ($status eq 'Discharging') {
$full_text .= ' DIS';
} elsif ($status eq 'Charging') {
$full_text .= ' CHR';
}

1
2
3
4
5
6
7
8
9
10

$full_text = "";
if ($status eq 'Discharging') {
$full_text .= " $percent% Bat";
} elsif ($status eq 'Charging') {
$full_text .= " $percent% Chr";
}
elsif ($status eq 'Unknown' || $status eq 'Full') {
$full_text .= " $percent%";
}

Now your i3status bar should be fully customized.