ปรับแต่งธีม Cinnamon ให้สวยงาม

อยากปรับแต่งเดสก์ท็อป Linux ให้เป็นของตัวเอง แตหาธีมที่สมบูรณ์แบบไม่เจอ?

ถ้า Cinnamon เป็นเดสก์ท็อปปัจจุบัน สร้างธีมเองเรียนรู้ง่าย ไม่ต้องเครื่องมือพิเศษ - Text Editor ที่มี Syntax Highlighting พอ

Cinnamon พัฒนามาตั้งแต่ 2011 ฟอร์กจาก Gnome Shell ตอนแรกต้องพึ่ง Gnome แต่วันนี้เป็น DE สมบูรณ์ แอปพื้นฐานของตัวเอง คู่มือนี้ฐาน Cinnamon 2.4 (Linux Mint 17.1 "Rebecca") ธีมที่สร้างจะใช้ได้กับทุกดิสโทรที่รัน Cinnamon

เข้าใจธีม Cinnamon

ธีม Cinnamon = ง่ายและซับซ้อนพร้อมกัน ฟังดูขัดแย้ง? ง่ายเพราะเขียนทั้งหมดด้วย CSS ซับซ้อนเพราะไฟล์ใหญ่ เอกสารไม่ค่อยชัด ส่วนใหญ่เดาได้ว่า Rule ไหนแก้ Element ไหน บางตัวต้อง Trial & Error ควรคุ้นเคย CSS ก่อน แต่ไม่รู้ก็เรียนออนไลน์เร็ว

สำคัญ: ธีม Cinnamon ไม่เปลี่ยน ขอบหน้าต่าง ปุ่ม หรือ Element ของแอปพลิเคชัน อันเหล่านั้นควบคุมโดย GTK Themes ต้องดาวน์โหลดแยก ธีม Cinnamon ใส่ใจแค่: Mint Menu, Panel, Tooltips, Notifications, Applets, Dialogs บางตัว

เริ่มต้น

2 วิธีสร้างธีม Cinnamon: เขียนจากศูนย์ หรือใช้ธีมมีอยู่เป็น Template เราเลือกวิธีหล者 (ง่ายกว่า) เช็ค License ถ้าจะแจกจ่ายธีมที่แก้ไข ปกติติดต่อขออนุญาตผู้สร้างพอ

ก่อนเขียน CSS ควรมีแผน: จะเปลี่ยนอะไร ตัวอย่าง: ปรับขนาดนาฬิกาเลข เปลี่ยนฟอนต์และสีพื้นหลังเมนู ทำแผงโปร่งใส ใช้เครื่องมือออนไลน์ฟรีสร้าง Color Scheme ให้สวยตา

จำไว้: บางการเปลี่ยนมี "Dependencies" เปลี่ยนพื้นหลังแผงจากมืดเป็นขาว = ต้องเปลี่ยนสีปุ่ม/แอปเลทบนแผงด้วย ไม่งั้นอาจหาย (สีขาวบนมืดก่อน) อยากธีมมืด? เริ่มจาก Template ที่มืดอยู่แล้ว

เลือก Template

Default Cinnamon Theme บน GitHub โปรเจกต์ DeviantArt Community ทำธีม Cinnamon สวยมาก ดาวน์โหลดเพิ่มจาก Linux Mint Spices Page และ Gnome-Look.org

Default Themes อยู่: /home/$USERNAME/.themes หรือ /usr/share/themes ไดเรกทอรีหลัง = ผะทุก User (รวม Root) ไดเรกทอรีหน้า = User เดียว แนะนำเก็บธีมกำลังทำใน /home เสร็จ Symlink:

sudo ln -s /home/username/.themes/ThemeName /usr/share/themes/ThemeName

สังเกต Subfolders "gtk-2.0" "gtk-3.0" = รวม GTK Themes ด้วย แต่เราต้องการแค่โฟลเดอร์ "cinnamon"

ปรับแต่งธีม Cinnamon ให้สวยงาม - ทำได้ง่าย!

อาจมี Subfolders ใน cinnamon = Assets (รูปเล็กสำหรับ Style) เช่น Mint Menu อาจมี Background Image เก็บใน Subfolder ไฟล์สำคัญ: cinnamon.css เปิดมันเลย

โครงสร้างธีม

ใช้ "Linux Mint" ธีม Default หนึ่ง ไฟล์ CSS ยาว Comment ในโค้ดช่วยทิศทาง แบ่ง Sections ตรง Element เดสก์ท็อป Sections สำคัญ:

PopupMenu (popupMenu.js): Popup Menus ทั้งหมด เมนูคลิกขวาแผง และ เมนูหลัก
Panel (panel.js): แผง
Desklets (desklet.js) Widgets เดสก์ท็อป และ Applets (applet.js) Widgets บนแผง
Looking Glass: Debug Interface (cinnamon-looking-glass)
Menu (menu.js): เฉพาะ เมนูหลัก (MintMenu)
Window List (windowList.js): รายการหน้าต่างเปิดบนแผง

แก้ไขธีม Cinnamon

แก้เล็กน้อยเพื่อดูวิธี พอคล่อง แก้หลาย Element พร้อม สร้าง Assets ใหม่ เปลี่ยนธีม Cinnamon ให้ต่างออกไป นี่คือ "Before":

เปลี่ยนสีพื้นหลังและความโปร่งใสของแผง

ใน cinnamon.css หาบรรทัดเริ่ม #panel

แทน Gradient ด้วย Solid Color + Transparency ลบ:

background-gradient-start
background-gradient-end
background-gradient-direction

เพิ่ม:

background-color: rgba(152,13,13,0.6);

ได้ผล:

RGBa = เปลี่ยนสีและโปร่งใสครั้งเดียว ตัวเลขสุดท้าย = ค่าโปร่งใส 0 = โปร่งใสหมด 1 = โปร่งศูนย์

แผง Cinnamon 3 ส่วน (ซ้าย กลาง ขวา) มี Setting เปลี่ยนสไฮไลท์ตอนลาก Applet ใหม่เข้าไป ปรับได้ที่ #panelLeft:dnd, #panelRight:dnd, #panelCenter:dnd

เมนูหลักควบคุม 2 Sections: "PopupMenu" (Popup ทั้งหมด) และ "Menu" (Favorites, Categories, Places, Search Box) เปลี่ยนสี/โปร่งใสที่ .popup-menu-boxpointer

คัดลอกค่า RGBa ของแผงใหม่ ใส่หลัง -arrow-background-color: เพิ่ม Border Width 2px สีเทา เปลี่ยน Font ที่ font-family ต้นไฟล์ css 影响ทั้งธีม แต่ปรับแยกบาง Element ได้ จากนี้:

เป็นนี้:

ทำนาฬิกาเลขบนแผงใหญ่ขึ้น

Clock = Panel Applet แต่ไม่มี Appearance Settings ใน Theme File (ต่าง Window List, Calendar) ต้องแก้ "Applets" ทั่วไป จะกระทบขนาดข้อความปุ่มเมนู และ Applets อื่นที่ปรับแยกไม่ได้

หา .applet-label เพิ่มค่า font-size ที่นี่ Override Font ที่ตั้งไว้ให้เมนูได้ โดยเปลี่ยน font-family ตัวอย่าง: นาฬิกา Sans-serif เมนู Popup Serif

แก้ลุค Calendar Applet (คลิกนาฬิกา) ดู Section "Date applet" เช่น .datemenu-date-label ปรับขนาด สี ฟอนต์ ข้อความบนสุดปฏิทิน (เช่น "Sunday March 8...")

เวอร์ชัน "After" ไม่ได้สวยที่สุด แต่แสดงการเปลี่ยนแปลง:

ปุ่ม Menu และ นาฬิกา ใหญ่ขึ้น สีเปลี่ยน ฟอนต์ต่างกัน ขั้นต่อไป: ปรับ Element ที่เด่นน้อยกว่า: Run Dialog, End Session Dialog, Notifications

ทดสอบและเรียนรู้เพิ่ม

Live-preview: วางไฟล์ธีมใน /home/$USERNAME/.themes/ThemeName ตั้งเป็น Active ใน All Settings - Themes - Desktop

ไม่เห็นการเปลี่ยนแปลงทันที? รีสตาร์ท Cinnamon: Alt+F2 > พิมพ์ r > Enter หรือแก้หมดแล้วค่อย Apply เช็คว่าต้อง Fix อะไร

นอกจากนี้ Linux Mint Forums มีคำแนะนำ Theming Cinnamon ได้ Feedback จาก User และ Theme Creators พัฒนาทักษะ = ทำธีมเยอะ/แก้เยอะ = ง่ายขึ้น "All about that CSS, no trouble" หวังทีม Cinnamon จะให้เอกสาร Theming รายละเอียดทางการเร็วๆ นี้

ปรับแต่งธีม Cinnamon ให้สวยงาม - ทำได้ง่าย!