Main CSS

Khi tôi bắt đầu mò mẫm trang trí Blog Opera (tháng 9/2006), cái file main.css rối mù mù Nếu không nhờ những bài viết của Phạm Lâm làm hoa tiêu thì chắc tôi chẳng đi được tới đâu cả, hic hic... Chính vì vậy, trong số những cải tiến của Opera, tôi khoái nhất cấu trúc của main.css - rất rõ ràng và dễ... mò

Tôi viết bài này vì nhiều bạn hỏi quá nhiều câu đi vào chi tiết, nếu không trả lời chi tiết thì chắc các bạn cũng chẳng thể làm được. Mà tôi thì sắp đi làm lại, chắc chắn tôi sẽ không thể trả lời hết những câu hỏi đó. Hic hic... trước khi trả lời tôi phải lấy file.css của bạn về (cả main lẫn user nếu có), test offline rồi mới có đáp án cho bạn. Vì vậy, tôi cũng mong các bạn thông cảm nếu tôi để một câu hỏi nào đó quá lâu mới trả lời. Người có chuyên môn chắc không phải mất công như tôi

Trước hết, để lấy được file css, bạn có thể dùng menu File/ Save as của trình duyệt để lưu toàn bộ trang web vào máy của bạn. Sau đó mở folder vừa save để tìm file có đuôi là css. Tuy nhiên, bạn cũng có thể click chuột phải, chọn "view page source" và tìm các địa chỉ chứa file css, bao gồm (số thứ tự của directory có thể khác nếu bạn chọn theme mặc định khác):

/community/css/users/topbar-2a.css
/community/css/themes/mobile01.css
/community/css/users/101/mobile.css
/community/css/users/101/main.css

Nếu bạn dùng Fire Fox hoặc Opera, bạn có thể truy cập trực tiếp vào các địa chỉ trên (thêm http://my.opera.com vào trước). Nhưng nếu dùng Internet Explorer thì sẽ xuất hiện một cửa sổ để bạn download file này. Hãy nhớ bạn đã download vào folder nào trong máy, rồi tìm đến file đó, click chuột phải và chọn open with notepad.

Các file main.css của các themes mặc định mới của Fred thường có hai dòng địa chỉ trên cùng mà rất ít bạn để ý:

@import url(/community/css/themes/mainstructure1.css);
@import url(/community/css/themes/maincolors1.css);

Đây chính là hai files quy định cấu trúc của tất cả các themes mặc định, còn những đoạn codes hiển thị trong file main.css mà bạn thấy đại diện cho sự khác biệt giữa các themes. Vì vậy, để tìm được tất cả các codes trong các bài hướng dẫn của tôi hoặc Phạm Lâm, bạn cũng cần mở hai files này ra xem.

Bạn truy cập vào địa chỉ của hai files trên (làm tương tự như mở main.css). Trong file mainstructure1.css sẽ có những thành phần như sau:

/* main page structure and size. two columns. */
/* calendar */
/* sidebar */
/* friends in sidebar */
/* recent visits */
/* latest posts */
/* latest comments */
/* blog */
/* comments */
/* tags */
/* links */
/* friends */
/* poll */
/* countdowns */
/* profile */
/* opera */
/* shoutbox */
/* search */

Bạn muốn chỉnh sửa phần nào thì tìm đến phần đó, ví dụ tất cả các code liên quan tới body background, banner, footer,... sẽ nằm trong mục "main page structure"; Muốn chỉnh sửa sidewrap thì vào mục sidebar; muốn chỉnh phần nội dung bài viết thì vào mục "blog"; chỉnh trang About thì vào "profile", trang Friends thì vào "friends"...

File mobile01.css cũng có cấu trúc tương tự và thêm mục Archive, để bạn chỉnh sửa trang Archive.

Các nhu cầu chỉnh sửa cơ bản bao gồm:

1/ Màu nền, hoặc ảnh nền: nằm trong mã background. Bạn muốn thay ở mục nào thì tìm đến mã background ở mục đó. Nếu đã có sẵn thì bạn thay, không có thì bạn có thể thêm vào.

2/ Chữ: nằm trong mã p (paragraph) hoặc h (header), bao gồm:

- color: màu sắc chữ, dùng mã màu hoặc tên bằng tiếng Anh;
- text-align: định vị trí, bao gồm left (trái), center (giữa) và right (phải);
- text-transform: hình thức thể hiện, có thể đổi thành uppercase (chữ in hoa);
- text-decoration: bao gồm none (không trang trí) hoặc underline (gạch chân);
- font-weight: bao gồm normal (bình thường), bold (in đậm);
- font-style: italic (in nghiêng)
- font-size: kích cỡ chữ, tính bằng đơn vị pixel;
- font-family: font chữ.

Tương tự như trên, nếu mã đã có sẵn thì bạn thay đổi, không có thì bạn có thể thêm vào, ví dụ khi bạn không thể viết tiếng Việt trong bài viết, bạn thêm font-family với vài font Unicode vào mã content hoặc post,...

3/ Links: nằm trong mã a (hình như là anchor?), bao gồm:

- link: liên kết khi hiển thị trên trang;
- visited: liên kết đã được xem;
- selected: liên kết đang được xem;
- hover: liên kết khi chuột trỏ vào.

Cách trang trí cũng tương tự như chữ.

4/ Canh lề: nằm trong mã margin (canh lề giữa hai thành phần) và padding (canh lề cho các phần tử của một thành phần trong chính thành phần đó), bao gồm top (lề trên), left (trái), right (phải) và bottom (dưới).

Hy vọng qua bài viết này, các bạn sẽ tự giải quyết được các vấn đề của mình Bạn vui lòng đọc kỹ post "FAQs về Blog Opera" trước khi đặt câu hỏi mới. Xin cám ơn!