เพิ่มสีสันให้กับธีมอบเชยของคุณ – ง่ายมาก!

เคยต้องการที่จะปรับแต่งเดสก์ท็อป Linux ของคุณ แต่ไม่พบธีมที่สมบูรณ์แบบใช่หรือไม่

หาก Cinnamon เป็นสภาพแวดล้อมเดสก์ท็อปปัจจุบันของคุณ การสร้างธีมของคุณเองนั้นเรียนรู้ได้ง่าย คุณไม่จำเป็นต้องใช้เครื่องมือพิเศษใดๆ เช่นกัน โปรแกรมแก้ไขข้อความปกติที่มีการเน้นไวยากรณ์ก็ใช้ได้ดี

อบเชยมาไกลตั้งแต่ปรากฏตัวครั้งแรกในปี 2554 เป็นส้อมของ Gnome Shell เมื่อก่อนต้องอาศัย Gnome ในการทำงานอย่างถูกต้อง แต่วันนี้เป็นสภาพแวดล้อมเดสก์ท็อปแบบสแตนด์อโลนที่สมบูรณ์พร้อมชุดแอปพลิเคชันพื้นฐานของตัวเอง คู่มือฉบับย่อนี้อิงจาก Cinnamon 2.4 ที่มาพร้อมกับ Linux Mint รุ่นล่าสุด (เวอร์ชัน 17.1 "Rebecca") แต่ธีมของเราจะเข้ากันได้กับ Linux distribution ที่รัน Cinnamon

ทำความเข้าใจกับธีมอบเชย

ธีมอบเชยมีทั้งแบบเรียบง่ายและซับซ้อน ฟังดูขัดแย้งใช่มั้ย? ง่ายเพราะทั้งธีมเขียนด้วย CSS แต่ซับซ้อนเพราะไฟล์ธีมมีขนาดใหญ่และไม่ได้รับการจัดทำเป็นเอกสารอย่างดี โดยส่วนใหญ่ คุณสามารถอนุมานได้ว่ากฎข้อใดจะแก้ไของค์ประกอบเดสก์ท็อปใด แต่สำหรับบางข้อ คุณจะต้องผ่านการลองผิดลองถูก คาดว่าคุณจะคุ้นเคยกับ CSS ก่อนลองใช้ แต่ถ้าไม่ ไม่ต้องกังวล คุณสามารถเรียนรู้ CSS ออนไลน์ได้อย่างรวดเร็วด้วยบทแนะนำที่เป็นประโยชน์

สิ่งสำคัญที่ควรทราบคือ ธีมอบเชยจะไม่เปลี่ยนขอบหน้าต่าง ปุ่ม หรือองค์ประกอบอื่นๆ ของแอปพลิเคชัน ออบเจ็กต์เหล่านี้ควบคุมโดยธีม GTK ซึ่งคุณต้องดาวน์โหลดแยกต่างหาก ธีมอบเชยเองมีผลเฉพาะกับเมนู Mint แผง คำแนะนำเครื่องมือ การแจ้งเตือน แอปเพล็ต และกล่องโต้ตอบบางส่วนเท่านั้น

เริ่มต้นใช้งาน

โดยทั่วไปแล้ว มีสองวิธีในการสร้างธีม Cinnamon:เขียนโค้ดตั้งแต่ต้นหรือใช้ธีมที่มีอยู่เป็นเทมเพลต เรากำลังใช้แนวทางหลังเพราะมันง่ายกว่ามาก อย่าลืมตรวจสอบการจำกัดสิทธิ์ใช้งานหากคุณตัดสินใจแจกจ่ายธีมที่แก้ไขแล้ว โดยปกติแล้วการติดต่อผู้เขียนและขออนุญาตก็เพียงพอแล้ว

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

อย่าลืมว่าการเปลี่ยนแปลงบางอย่างมี "การพึ่งพา" หากคุณเปลี่ยนพื้นหลังแผงจากสีเข้มเป็นสีขาว คุณจะต้องเปลี่ยนสีของปุ่มแผงและแอปเพล็ตด้วย มิเช่นนั้นอาจมองไม่เห็นในธีมใหม่ของคุณ เนื่องจากเป็นสีขาวบนแผงสีเข้มก่อนหน้านี้ หากคุณต้องการสร้างธีมสีเข้ม ให้ฉลาดและเริ่มต้นด้วยเทมเพลตที่มีสีเข้มอยู่แล้ว

การเลือกเทมเพลต

ทางเลือกที่ดีคือธีม Cinnamon เริ่มต้น ซึ่งมีอยู่ในหน้า GitHub ของโปรเจ็กต์ ชุมชน deviantART สร้างธีมอบเชยที่ยอดเยี่ยม และอีกมากมายสามารถดาวน์โหลดได้จากหน้าอย่างเป็นทางการของ Linux Mint Spices และ Gnome-Look.org ที่ซื่อสัตย์

หากคุณต้องการใช้ธีมเริ่มต้น ธีมเหล่านี้อยู่ใน

/home/$USERNAME/.themes

หรือ

/usr/share/themes

. ธีมที่อยู่ในไดเร็กทอรีหลังจะส่งผลต่อแอปพลิเคชันที่เรียกใช้โดยผู้ใช้ทั้งหมด (รวมถึงรูท) ในขณะที่ธีมที่อยู่ใน

/home/$USERNAME

ไดเร็กทอรีใช้กับผู้ใช้เพียงรายเดียวเท่านั้น ฉันแนะนำให้คุณเก็บธีมงานระหว่างทำไว้ใน

/home

ไดเร็กทอรี เมื่อเสร็จแล้ว คุณสามารถเชื่อมโยงมันโดยใช้คำสั่งนี้:

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

คุณจะสังเกตเห็นว่าบางธีมมีโฟลเดอร์ย่อยชื่อ "gtk-2.0" และ "gtk-3.0" ซึ่งหมายความว่ารวมธีม GTK เข้ากับธีม Cinnamon อย่างไรก็ตาม คุณต้องมีโฟลเดอร์ "อบเชย" เท่านั้น

อาจมีโฟลเดอร์ย่อยอยู่ในนั้น ซึ่งประกอบด้วยเนื้อหา รูปภาพขนาดเล็กที่สามารถใช้จัดรูปแบบองค์ประกอบเดสก์ท็อปได้ ตัวอย่างเช่น เมนู Mint ของคุณสามารถมีภาพพื้นหลังได้ และคุณจะเก็บไว้ในโฟลเดอร์ย่อยเหล่านี้ เราต้องการไฟล์ชื่อ "cinnamon.css" และตอนนี้ได้เวลาเปิดแล้ว

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

ฉันใช้ "Linux Mint" ซึ่งเป็นหนึ่งในธีมเริ่มต้น เป็นไฟล์ CSS ที่ค่อนข้างยาว โชคดีที่ความคิดเห็นในโค้ดช่วยให้เข้าใจทิศทางได้ พวกเขาแบ่งรหัสออกเป็นส่วน ๆ แต่ละส่วนสอดคล้องกับองค์ประกอบเดสก์ท็อปหนึ่งองค์ประกอบ บางส่วนได้แก่:

• PopupMenu (popupMenu.js):แก้ไขเมนูป๊อปอัปทั้งหมด คลิกขวาที่เมนูแผง และ เมนูหลัก;
• แผง (panel.js):อธิบายตนเอง;
• Desklets (desklet.js) สำหรับวิดเจ็ตเดสก์ท็อปและ Applets (applet.js) สำหรับวิดเจ็ตบนแผงควบคุม
• กระจกมอง:แก้ไขส่วนต่อประสานการดีบักกราฟิก (กระจกอบเชย);
• เมนู (menu.js):มีผลกับ เท่านั้น เมนูหลัก (MintMenu);
• รายการหน้าต่าง (windowList.js):ใช้กับรายการหน้าต่างที่เปิดอยู่ในแผงควบคุม

การแก้ไขธีมอบเชย

เราจะทำการเปลี่ยนแปลงเล็กน้อยเพื่อแสดงวิธีการดำเนินการ เมื่อคุณคุ้นเคยกับการแก้ไข CSS แล้ว คุณสามารถแก้ไของค์ประกอบหลายอย่างพร้อมกัน และสร้างเนื้อหาใหม่เพื่อแปลงโฉมธีม Cinnamon ทั้งหมดได้ นี่คือเวอร์ชัน "ก่อน" ของเรา:

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

ในไฟล์ "cinnamon.css" ให้ค้นหาบรรทัดที่ขึ้นต้นด้วย

#panel

.

เราจะแทนที่การไล่ระดับสีด้วยสีทึบและความโปร่งใส ลบรายการ:

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

แล้วเติม

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

เพื่อรับสิ่งนี้:

การประกาศสีในรูปแบบ RGBa ทำให้ง่ายต่อการเปลี่ยนสีและความโปร่งใสในครั้งเดียว ตัวเลขสุดท้ายในวงเล็บคือค่าความโปร่งใส 0 โปร่งใสทั้งหมด และ 1 โปร่งใสทั้งหมด

แผงอบเชยแบ่งออกเป็นสามส่วน (ซ้าย กลาง ขวา) มีการตั้งค่าพิเศษสำหรับการเปลี่ยนสีไฮไลต์ของแต่ละพื้นที่เมื่อลากแอปเพล็ตใหม่เข้าไป คุณสามารถปรับเปลี่ยนได้โดยแก้ไขค่าภายใต้

#panelLeft:dnd

,

#panelRight:dnd

และ

#panelCenter:dnd

.

เปลี่ยนสีของเมนูหลัก ความโปร่งใส และแบบอักษร

เมนูหลักถูกควบคุมโดยสองส่วน:"เมนูป๊อปอัป" และ "เมนู" การเปลี่ยนแปลงในอันแรกจะส่งผลต่อเมนูป๊อปอัปทั้งหมด ส่วน "เมนู" ประกอบด้วยตัวเลือกสำหรับรายการโปรด หมวดหมู่ สถานที่ และช่องค้นหา เราจึงต้องเปลี่ยนสีและความโปร่งใสภายใต้

.popup-menu-boxpointer

.

ฉันคัดลอกค่า RGBa ของพาเนลใหม่ของเราและเพิ่มหลังจาก

-arrow-background-color:

เพิ่มความกว้างของเส้นขอบเป็น 2px และเปลี่ยนสีเส้นขอบเป็นสีเทา ในการเปลี่ยนแบบอักษร ฉันแก้ไข

font-family

ค่าที่จุดเริ่มต้นของไฟล์ "cinnamon.css" สิ่งนี้มีผลกับธีมทั้งหมด แต่สามารถปรับทีละรายการสำหรับองค์ประกอบบางอย่าง เราไปจากสิ่งนี้:

ถึงสิ่งนี้:

ทำให้นาฬิกาดิจิตอลบนแผงควบคุมใหญ่ขึ้น

นาฬิกาเป็นแอปเพล็ตแบบพาเนล แต่ไม่เหมือนกับรายการหน้าต่างและปฏิทิน นาฬิกาไม่มีการตั้งค่าลักษณะที่ปรากฏของตัวเองในไฟล์ธีม คุณจะต้องแก้ไขการตั้งค่า "แอปเพล็ต" ทั่วไป ซึ่งจะส่งผลต่อขนาดของข้อความปุ่มเมนู ร่วมกับแอปเพล็ตแผงอื่นๆ ที่ไม่สามารถปรับได้ทีละรายการ

หากต้องการขยายนาฬิกาให้ค้นหา

.applet-label

และเพิ่ม

font-size

ค่า. คุณสามารถแทนที่การตั้งค่าแบบอักษรที่เราเพิ่มไว้ก่อนหน้านี้สำหรับเมนูหลักโดยเปลี่ยน

font-family

ค่า. ในตัวอย่างนี้ ฉันเปลี่ยนนาฬิกาเป็นฟอนต์ sans-serif ในขณะที่เมนูป๊อปอัปยังคงเป็นฟอนต์ serif

หากต้องการแก้ไขรูปลักษณ์ของแอปเพล็ตปฏิทิน (ซึ่งคุณเข้าถึงได้ด้วยการคลิกนาฬิกา) ให้ดูในส่วน "แอปเพล็ตวันที่" ตัวอย่างเช่น

.datemenu-date-label

ให้คุณเปลี่ยนขนาด สี และแบบอักษรของข้อความที่ด้านบนของแอพเพล็ตปฏิทิน (ในภาพนี้ คือ "วันอาทิตย์ที่ 8 มีนาคม...")

เวอร์ชัน "หลัง" ไม่ใช่ธีมที่สวยงามที่สุดที่มีอยู่ แต่แสดงให้เห็นการเปลี่ยนแปลงที่เราได้ทำ

ปุ่มและนาฬิกา "เมนู" มีขนาดใหญ่ขึ้น เปลี่ยนสีและฟอนต์ต่างกัน ขั้นตอนต่อไปคือการปรับแต่งองค์ประกอบที่ไม่ค่อยเด่นชัดของอินเทอร์เฟซ เช่น กล่องโต้ตอบการเรียกใช้ กล่องโต้ตอบการสิ้นสุดเซสชัน หรือการแจ้งเตือน

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

คุณสามารถดูตัวอย่างการเปลี่ยนแปลงของคุณได้หากคุณวางไฟล์ธีมใน

/home/$USERNAME/.themes/ThemeName

และตั้งค่าธีมนั้นเป็นแอ็คทีฟใน

All Settings - Themes - Desktop

โต้ตอบ

หากมองไม่เห็นการเปลี่ยนแปลงในทันที ให้เริ่ม Cinnamon ใหม่โดยกด Alt+F2 เพื่อเปิดกล่องโต้ตอบ Run ให้พิมพ์ r และกด Enter . แน่นอน คุณสามารถแก้ไขทุกอย่างก่อน จากนั้นจึงใช้ธีมใหม่และตรวจสอบว่ามีอะไรต้องแก้ไขหรือไม่

นอกเหนือจากคำแนะนำพื้นฐานเหล่านี้ คุณสามารถค้นหาคำแนะนำเกี่ยวกับธีมอบเชยบนฟอรัม Linux Mint คุณสามารถรับความคิดเห็นจากผู้ใช้และผู้สร้างธีมคนอื่นๆ ได้จากที่นั่น เช่นเดียวกับกิจกรรมสร้างสรรค์อื่นๆ การฝึกฝนทำให้สมบูรณ์แบบ ดังนั้นยิ่งคุณสร้าง (หรือแก้ไข) ธีมมากเท่าไหร่ มันก็จะยิ่งง่ายขึ้น และคุณจะ "ทุกอย่างเกี่ยวกับ CSS นั้น ไม่มีปัญหา" หวังว่าทีมพัฒนา Cinnamon จะจัดเตรียมเอกสารประกอบรายละเอียดอย่างเป็นทางการในไม่ช้า