Tiếp nối loạt bài viết hướng dẫn Thesis 2, mình xin tiếp tục bài viết hôm nay với một tính năng mà mình rất thích trong Thesis 2, và có thể nói rằng nó đã giúp một phần nào đó đưa Thesis 2 lên trở thành một trong những Theme Framework độc đáo nhất. Vâng, không tính năng nào khác đó là CSS Editor – một tính năng cho phép bạn tùy chỉnh skin bằng CSS và quản lý CSS rất thông minh.
Có không ít người khi nhìn vào giao diện trên thì sẽ thốt lên rằng “What the F*ck! Cái quái gì thế này? CSS là đây à?” Vâng, đó chính là các đoạn mã CSS được chèn vào skin. Nhìn sơ qua thì bạn sẽ không nghĩ rằng đó là CSS vì không thấy bất cứ mã CSS nào, nhưng các bạn yên tâm, vẻ đẹp tiềm ẩn càng tìm càng ẩn cơ mà 😀 . Các bạn sẽ biết vì sao nó lại như vậy thông qua bài viết này.
Các tính năng trong CSS Editor của Thesis 2
Reference Sheet
Đây nghĩa là khu vực bạn gọi các CSS Packages có trong skin và mỗi package luôn bắt đầu bằng ký tự &. Giả sử như&submit có thuộc tính CSS như sau:
.div {color:#000000;background:#ffffff;}
Thì khi gọi vào file style.css hoặc custom.css trong Thesis là &submit thì khi xuất ra trình duyệt nó sẽ hiển thị đoạn CSS ở trên
Tính năng này giúp bạn có thể quản lý các đoạn mã CSS tốt hơn nhờ cách sắp xếp ngăn nắp, bạn có thể tạo nhiều CSS Packages khác nhau sau đó thích cái nào thì sử dụng cái đó, không thích thì cất nó đi mà không cần phải sửa đi sửa lại trực tiếp trong file CSS. Quan trọng hơn, nó cũng giúp website bạn chạy nhanh hơn rất nhiều.
Bạn có thể ngó qua bên tay phải, ở đó bạn sẽ thấy các packages hiện có của skin bao gồm ký tự &trước tên của nó, muốn áp dụng packages nào lên skin thì chỉ cần viết nó vào file style.css hoặc custom.css. Nhưng bạn đang lo lắng CSS Packages trong Thesis 2 là như thế nào? Và bạn muốn tạo thêm nhiều CSS package khác nữa? Được rồi, bây giờ chúng ta sẽ tìm hiểu phần này nhé.
CSS Packages
Giải thích dễ hiểu nhất thì đây là tập hợp các gói CSS chứa những thuộc tính CSS mà bạn đã thiết lập cho nó. Một package chỉ được thực thi khi bạn nhúng nó vào file CSS của skin, nghĩa là bạn có 30 packages nhưng bạn chỉ nhúng 10 packages vào skin thì file CSS mà bạn đã nhúng chỉ hiển thị các giá trị CSS có trong 10 packages này.
Bây giờ các bạn thử nhấp vào 1 package xem, nó sẽ hiển thị bảng tùy chỉnh như thế này
Ngay tại tab Package, nó có 3 thông số chính mà bất kỳ package nào cũng phải có.
- Name: Tên của Package, nó không ảnh hưởng gì nhưng nó sẽ giúp bạn dễ nhớ hay đặt tên cho 1 package để tiện quản lý.
- Reference: Tên mà sẽ gọi vào file CSS, giả sử như trên hình tùy chọn Reference là tagline, vậy nếu mình muốn gọi nó vào 1 file CSS trong Thesis 2 thì sẽ viết &tagline.
- CSS Selector: Vùng chọn để áp dụng các thuộc tính CSS có trong package, bạn có thể chọn ID hoặc Class trong thẻ HTML. Khi bạn thiết lập vùng chọn cho một khu vực nào đó thì các thuộc tính CSS có trong đây không thể áp dụng cho các vùng chọn khác. Ví dụ nếu bạn đặt vùng chọn là #content thì các thuộc tính CSS trong package của bạn chỉ có thể áp dụng trên các thẻ HTML chứa class #content (id=”content”).
Kế tiếp là tab Options, nhấp vào bạn sẽ thấy có các tùy chọn như Font Settings, Text Color, Border, Margin, Background, Padding…bla bla…Đó là các tùy chọn mặc định của một package. Tức là các giá trị của mỗi thuộc tính ở đây sẽ áp dụng vào package nếu như bạn tùy chỉnh nó, ví dụ nếu bạn tùy chỉnh background color thì khi bạn áp dụng package này vào đâu thì ở đó sẽ hiển thị background color. Còn nếu bạn muốn thêm các thuộc tính CSS nâng cao hơn thì có thể thêm nó ở tab Additional CSSnằm bên cạnh.
Cách tạo 1 CSS Package cơ bản
Để tạo được 1 CSS Package thì đầu tiên bạn chọn phân loại của package ngay tại thanh chọn Select package to add: ở phía trên
Giải thích thêm về phân loại của từng CSS Package: Khi bạn chọn phân loại nào trước lúc tạo một package, thì ở phần CSS Selector của nó sẽ tự động thêm vùng chọn thích hợp dựa vào từng phân loại. Ví dụ bạn chọn phân loại là Post Formatting thì nó sẽ tự thêm .post_box vào CSS Selector, tức là chỉ áp dụng trong bài viết.
Sau khi chọn xong phân loại, nút Add Package xanh lét sẽ hiện ra, nhấp vào đó để tiến hành tạo một CSS Package mới, bảng tùy chọn của một CSS Package cơ bản hiện ra và bạn chỉ cần điền nó hay chỉnh sửa các thông số rồi nhấn Save. Lúc này bạn sẽ thấy package mình vừa mới tạo sẽ xuất hiện bên dưới.
CSS Variables
Đây là tính năng tạo một reference cho mỗi thuộc tính CSS. Ví dụ thay vì mình viết đoạn code CSS như thế này.
text-shadow: 2px 3px 4px #2323d9;
Thì lúc này, mình chỉ cần tạo một variables có tên là textsha và đặt giá trị cho nó là
2px 3px 4px #2323d9
Bây giờ mình không cần viết lại giá trị kia nữa mà chỉ cần viết
text-shadow:$textsha; Bạn có thể thấy tính năng này cũng na ná như CSS Package khi cho phép chúng ta quản lý các giá trị của một thẻ CSS một cách thông minh hơn. Nhưng bạn cần phân biệt giữa dấu & ( CSS Packages) và $ (CSS Variables) để khỏi lẫn lộn nhé.
Có một điều thật tuyệt vời khác nữa đó là bạn có thể áp dụng CSS Variables ở bất cứ đâu trongWordPress ở phần CSS Editor. Từ việc viết vào file style.css đến việc viết vào các phần tùy chọn, xem ảnh cho dễ hiểu nhé.
Muốn tạo một CSS Variable riêng thì chỉ cần nhấp nút Create Variable, sau đó nhập các thông tin cần thiết như Name, Reference và Variables Value.
Xong, đến đây là bạn đã vừa tìm hiểu qua hết những điều cần biết trong khu vực CSS Editor của Thesis 2 rồi đó, hy vọng qua bài này các bạn sẽ có cái nhìn khác hơn về việc tùy chỉnh Thesis, nhất là những ai thích sử dụng CSS thì các tính năng này quả là rất tuyệt vời. Nếu bạn có gì khó hiểu hay thắc mắc khi sử dụng CSS Editor, hãy gửi thắc mắc đó vào phần bình luận của bài viết này nhé.
Hoc wordpress | Học wordpress 