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.

i3status

Get i3blocks

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

1
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:

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
29
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
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]
label=
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

Download i3blocks.conf

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 number of</fullcount>"`
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
15
16
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
#!/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 | perl -ne 'use utf8; if (/Currently/) {chomp;/\<title\>Currently: (.*)?\<\/title\>/; my @values=split(":",$1); if( $values[0] eq "Sunny" || $values[0] eq "Mostly Sunny" || $values[0] eq "Partly Sunny" || $values[0] eq "Intermittent Clouds" || $values[0] eq "Hazy Sunshine" || $values[0] eq "Hazy Sunshine" || $values[0] eq "Hot") 
{
my $sun = "";
binmode(STDOUT, ":utf8");
print "$sun";
}
if( $values[0] eq "Mostly Cloudy" || $values[0] eq "Cloudy" || $values[0] eq "Dreary (Overcast)" || $values[0] eq "Fog")
{
my $cloud = "";
binmode(STDOUT, ":utf8");
print "$cloud";
}
if( $values[0] eq "Showers" || $values[0] eq "Mostly Cloudy w/ Showers" || $values[0] eq "Partly Sunny w/ Showers" || $values[0] eq "T-Storms"|| $values[0] eq "Mostly Cloudy w/ T-Storms"|| $values[0] eq "Partly Sunny w/ T-Storms"|| $values[0] eq "Rain")
{
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 w/ Flurries" || $values[0] eq "Partly Sunny w/ Flurries"|| $values[0] eq "Snow"|| $values[0] eq "Mostly Cloudy w/ Snow"|| $values[0] eq "Ice"|| $values[0] eq "Sleet"|| $values[0] eq "Freezing Rain"|| $values[0] eq "Rain and Snow"|| $values[0] eq "Cold")
{
my $snow = "";
binmode(STDOUT, ":utf8");
print "$rain";
}
if($values[0] eq "Clear" || $values[0] eq "Mostly Clear" || $values[0] eq "Partly Cloudy"|| $values[0] eq "Intermittent Clouds"|| $values[0] eq "Hazy Moonlight"|| $values[0] eq "Mostly Cloudy"|| $values[0] eq "Partly Cloudy w/ Showers"|| $values[0] eq "Mostly Cloudy w/ Showers"|| $values[0] eq "Partly Cloudy w/ T-Storms"|| $values[0] eq "Mostly Cloudy w/ Flurries" || $values[0] eq "Mostly Cloudy w/ Snow")
{
my $night = "";
binmode(STDOUT, ":utf8");
print "$night";
}
print"$values[1]"; }'

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';
}

into:

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.

Nikhil Kumar