ปรับแต่งหน้าจอ i3wm ให้สวยด้วย i3 radius (gaps)

ปรับแต่งหน้าจอ i3wm ให้สวยด้วย i3 radius (gaps)

ในบทความที่แล้ว ผมได้สอนการติดตั้งและใช้งาน i3wm เบื้องต้นไปแล้ว บทความนี้ผมจะพาไปติดตั้ง i3 radius ซึ่งเป็นตัวที่พัฒนาต่อยอดออกมาจาก i3 gaps โดยจุดประสงค์เพื่อปรับแต่งเพิ่ม space ระหว่างบล็อคไม่ให้ติดกัน โดยข้อแตกต่างของ i3 gaps ธรรมดา กับ i3 radius ก็คือ i3 gaps บริเวณมุมบล็อค หรือขอบบล็อคจะเป็นมุมเหลี่ยม ส่วน i3 radius สามารถปรับแต่งให้ขอบบล็อคโค้งมนได้ นี่แหระข้อแตกต่าง มีแค่นี้จริงๆครับ

ขั้นตอนที่ 1 : ติดตั้ง

เริ่มจากติดตั้ง Dependencies กันก่อนนะครับ

sudo apt install git autoconf libev-dev libstartup-notification0-dev libxcb-xkb-dev libxcb-xinerama0-dev libxcb-randr0-dev libxcb-shape0-dev libxcb-util-dev libxcb-cursor-dev libxcb-keysyms1-dev libxcb-icccm4-dev libxcb-xrm-dev libxkbcommon-dev libxkbcommon-x11-dev libyajl-dev libpcre++-dev libcairo2-dev libsdl-pango-dev

จากนั้นทำการติดตั้ง i3 gaps

mkdir .git && cd .git
git clone https://github.com/terroo/i3-radius.git
cd i3-radius && sh build.sh
รูปที่ 1 ติดตั้ง i3 gaps สำเร็จ

ขั้นตอนที่ 2 : ปรับแต่ง

ปกติเวลาที่เราจะตั้งค่าหรือปรับแต่งอะไรก็ตามบน i3wm เราจะต้องไปตั้งค่าที่ไฟล์ config ซึ่งอยู่ที่ "$HOME/.config/i3/config"

เปิดใช้งาน nano text editor หรือถ้าใครสะดวกใช้ editor ตัวอื่นก็ตามความถนัดเลยครับ

nano $HOME/.config/i3/config

เพิ่มคำสั่งพวกนี้เข้าไปในบรรทัดท้ายสุด

for_window [class=".*"] border pixel 0
gaps inner 10
gaps outer 1
smart_borders on
smart_borders no_gaps
border_radius 2

ทำการบันทึก แล้ว restart i3 โดยการกด "mod + Shift + r"

รูปที่ 2.1 คำสั่งที่เพิ่มเข้าไป
รูปที่ 2.2 หน้าตา i3 ของเราหลังจากทำการปรับแต่ง

จะเห็นได้ว่าหน้าตา i3 ของเราดูดีขึ้นมาก โดยต่อมาผมจะปรับแต่งเจ้า Terminal นิดหน่อย โดยเลือกที่จะปิด Menubar เพราะแทบจะไม่ได้ใช้ โดยทำการคลิกขวาบน Terminal เลือก Preferences แล้วไปที่ General คลิกเครื่องหมายถูกออกบน Show menubar by default in new terminals แล้วกด Close ครับ

รูปที่ 2.3 ปิดการใช้งาน Menubar

ต่อเนื่องกันไปเลยนะครับ ขั้นตอนต่อมาผมจะเพิ่ม padding ให้ Terminal สักหน่อย

nano $HOME/.config/gtk-3.0/gtk.css

เพิ่ม CSS ชุดนี้เข้าไปครับ

vte-terminal {
    padding: 20px;
}

ทำการบันทึกครับ

รูปที่ 2.3 Terminal หลังจากที่ปิด Menubar และเพิ่ม padding เข้าไป

เรียบร้อยครับสำหรับการปรับแต่ง i3 radius และเพิ่มเติมนิดหน่อยในการปรับแต่ง Terminal หวังว่าจะชอบกันนะครับ