Làm đẹp giao diện Cinnamon với chủ đề tùy chỉnh – Cực kỳ dễ dàng!

Bạn từng muốn tùy chỉnh desktop Linux, nhưng không tìm thấy theme hoàn hảo?

Nếu Cinnamon là desktop environment hiện tại, tạo theme riêng dễ học. Bạn không cần công cụ đặc biệt — trình soạn thảo văn bản thông thường với syntax highlighting là đủ.

Cinnamon đã đi xa từ khi xuất hiện 2011 như fork của Gnome Shell. Trước phụ thuộc Gnome để hoạt động, nhưng hôm nay nó là desktop environment độc lập, hoàn chỉnh, với bộ ứng dụng cơ bản riêng. Hướng dẫn nhanh này dựa trên Cinnamon 2.4 đi kèm Linux Mint mới nhất (phiên bản 17.1 "Rebecca"), nhưng theme của chúng ta tương thích với bất kỳ distro Linux nào chạy Cinnamon.

Hiểu về theme Cinnamon

Theme Cinnamon vừa đơn giản vừa phức tạp. Nghe nghịch lý? Chúng đơn giản vì toàn bộ theme viết bằng CSS, nhưng phức tạp vì file theme khổng lồ và tài liệu không tốt. Phần lớn bạn suy ra rule nào sửa element desktop nào, nhưng một số phải thử sai. Mong đợi bạn quen CSS trước khi thử, nhưng nếu không, đừng lo — bạn học CSS online nhanh với hướng dẫn hữu ích.

Lưu ý quan trọng: theme Cinnamon không thay đổi viền cửa sổ, nút bấm, hoặc element ứng dụng khác. Những đối tượng do GTK themes kiểm soát, bạn tải riêng. Theme Cinnamon chỉ ảnh hưởng đến Mint Menu, panel, tooltip, thông báo, applet và một vài dialog.

Bắt đầu

Nói chung, hai cách tạo theme Cinnamon: code từ đầu hoặc dùng theme hiện có làm template. Chọn cách sau vì dễ hơn. Đừng quên kiểm tra license nếu bạn phân phối theme sửa đổi. Thường chỉ cần liên hệ tác giả xin phép.

Trước khi lặn vào CSS, tốt nhất có kế hoạch chính xác muốn thay đổi gì. Ví dụ này, chúng ta resize đồng hồ số, đổi font menu và màu nền panel, làm panel trong suốt. Để theme dễ nhìn, dùng công cụ online miễn phí xây color scheme.

Đừng quên một số thay đổi có "dependencies". Nếu đổi nền panel từ tối sang trắng, bạn phải đổi màu nút panel và applet. Nếu không, chúng vô hình trong theme mới, vì trước đó trắng trên panel tối. Nếu muốn theme tối, khôn ngoan hãy bắt đầu từ template đã tối màu.

Chọn template

Lựa chọn tốt là theme Cinnamon mặc định, có trên GitHub dự án. Cộng đồng deviantART làm theme Cinnamon tuyệt vời, thêm có thể tải từ trang Linux Mint Spices chính thức và Gnome-Look.org cũ tốt.

Nếu muốn dùng theme mặc định, chúng ở:

/home/$USERNAME/.themes

hoặc

/usr/share/themes

. Theme ở thư mục sau ảnh hưởng app chạy bởi tất cả user (kể cả root), theme ở thư mục

/home/$USERNAME

chỉ áp dụng cho một user. Tôi khuyên giữ theme đang làm trong thư mục

/home

. Khi xong, symlink bằng lệnh:

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

Bạn thấy một số theme chứa thư mục con "gtk-2.0" và "gtk-3.0". Nghĩa là chúng bao gồm GTK theme cùng theme Cinnamon. Tuy nhiên, bạn chỉ cần thư mục "cinnamon".

Có thể có thư mục con trong đó — chứa assets, hình ảnh nhỏ dùng để style element desktop. Ví dụ, Mint Menu có thể có hình nền, bạn để nó trong thư mục con. Chúng ta cần file "cinnamon.css", bây giờ mở nó.

Cấu trúc theme

Tôi dùng "Linux Mint", một theme mặc định. File CSS khá dài. May mắn, comment trong code cung cấp định hướng. Chúng chia code thành section, mỗi section tương ứng một element desktop. Một số section:

• PopupMenu (popupMenu.js): sửa tất cả popup menu, menu chuột phải panel và menu chính;
• Panel (panel.js): tự giải thích;
• Desklets (desklet.js) cho widget desktop và Applets (applet.js) cho widget panel;
• Looking Glass: sửa giao diện debug đồ họa (cinnamon-looking-glass);
• Menu (menu.js): ảnh hưởng chỉ menu chính (MintMenu);
• Window list (windowList.js): áp dụng cho danh sách cửa sổ mở trên panel.

Sửa đổi theme Cinnamon

Chúng ta làm vài thay đổi nhỏ để demo. Khi thoải mái chỉnh CSS, bạn sửa nhiều element cùng lúc và tạo asset mới để biến đổi hoàn toàn theme Cinnamon. Đây là phiên bản "trước":

Đổi màu nền panel và độ trong suốt

Trong file "cinnamon.css", tìm dòng bắt đầu bằng

#panel

.

Chúng ta thay gradient bằng màu rắn và độ trong suốt. Xóa các mục:

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

và thêm

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

để được:

Khai báo màu dạng RGBa làm dễ đổi màu và độ trong suốt một lần. Số cuối trong ngoặc là giá trị trong suốt; 0 hoàn toàn trong suốt, 1 hoàn toàn mờ.

Panel Cinnamon chia ba khu vực (trái, giữa, phải). Có cài đặt đặc biệt đổi màu highlight mỗi khu vực khi kéo applet mới vào. Bạn điều chỉnh bằng sửa giá trị dưới

#panelLeft:dnd

,

#panelRight:dnd

và

#panelCenter:dnd

.

Đổi màu, độ trong suốt và font menu chính

Menu chính điều khiển bởi hai section: "PopupMenu" và "Menu". Thay đổi trong cái đầu ảnh hưởng tất cả popup menu. Section "Menu" chứa tùy chọn Favorites, Categories, Places và search box. Vì vậy chúng ta đổi màu và độ trong suốt dưới

.popup-menu-boxpointer

.

Tôi copy giá trị RGBa panel mới và thêm sau

-arrow-background-color:

, tăng độ rộng border 2px và đổi màu border xám. Để đổi font, tôi sửa giá trị

font-family

đầu file "cinnamon.css". Ảnh hưởng toàn theme, nhưng điều chỉnh riêng cho một số element. Chúng ta từ này:

thành này:

Làm đồng hồ số trên panel to hơn

Đồng hồ là panel applet, nhưng khác Window List và Calendar, nó không có cài đặt giao diện riêng trong file theme. Bạn phải sửa cài đặt "Applets" chung, ảnh hưởng kích thước chữ nút menu, cùng các panel applet khác không điều chỉnh riêng.

Để đồng hồ to hơn, tìm

.applet-label

và tăng giá trị

font-size

. Ở đây bạn ghi đè cài đặt font trước đó cho menu chính bằng thay đổi giá trị

font-family

. Ví dụ này, tôi đổi đồng hồ sang font sans-serif, popup menu giữ font serif.

Để sửa giao diện Calendar applet (truy cập bằng nhấp đồng hồ), xem section "Date applet". Ví dụ,

.datemenu-date-label

cho phép đổi kích thước, màu, font chữ ở đỉnh calendar applet (trong hình, "Chủ nhật 8 tháng 3...").

Phiên bản "sau" rõ ràng không phải theme đẹp nhất, nhưng thể hiện thay đổi chúng ta làm.

Nút "Menu" và đồng hồ to hơn, màu đổi, font khác. Bước tiếp theo tinh chỉnh element ít nổi bật hơn, như run dialog, end session dialog, hoặc thông báo.

Kiểm tra và học thêm

Bạn xem trước thay đổi trực tiếp nếu đặt file theme trong

/home/$USERNAME/.themes/ThemeName

và đặt theme đó active trong hộp thoại

All Settings - Themes - Desktop

.

Nếu thay đổi không hiện ngay, restart Cinnamon bằng nhấn Alt+F2 mở Run dialog, gõ r và nhấn Enter. Tất nhiên, bạn chỉnh sửa tất cả rồi áp theme mới kiểm tra cần sửa gì.

Ngoài hướng dẫn cơ bản, bạn tìm lời khuyên theming Cinnamon trên diễn đàn Linux Mint. Tại đó nhận feedback từ user và creator theme khác. Giống nhiều hoạt động sáng tạo, practice makes perfect, càng làm theme nhiều (hoặc sửa), càng dễ, bạn sẽ "all about that CSS, no trouble". Hy vọng team dev Cinnamon sớm cung cấp tài liệu theming chính thức, chi tiết.