A A A

CSS với Firefox [Phần 2]

Như phần 1 đã đăng, để thay đổi cấu hình và tăng tính năng sử dụng của Firefox, bạn phải ghi chép lại và nhớ đường dẫn sau để tìm tìm file “userChrome.css” và “userContent.css” được sử dụng liên tục trong bài này:

  • Đối với Windows XP: C:\Documents and Settings\Username\Local Settings\Application Data\Mozilla\Firefox\Profiles\xxxxxxxxx.default\chrome\
  • Bạn sử dụng Windows Vista: C:\Users\Username\AppData\Roaming\Mozilla\Firefox\Profiles\xxxxxxxxx.default\chrome\

với:

  • Username = Tên bạn dùng cho Windows Login và
  • xxxxxxxx là tổng hợp các ký tự và chữ số ngẫu nhiên.

6. Mầu mè cho ký tự trên thanh địa chỉ và box tìm kiếm

Bạn hãy điền đoạn mã css sau, bổ xung vào file “userChrome.css”

#urlbar[focused="true"], .searchbar-textbox[focused="true"]{

background-color: #fe9 !important;

}

Bạn có thể thay đổi mầu của tab bằng thay đổi giá trị mã mầu Hexadecimal, ở trên #fe9 mà bạn yêu thích, kết quả cho bạn là đổi mầu chuỗi ký tự trên thanh địa chỉ hoặc box tìm kiếm

7. Thay đổi Sidebar

Ở dạng mặc định, Firefox giới hạn độ lớn của Sidebar, bạn có thể thay đổi độ lớn của nó để hiển thị đủ độ lớn của text nằm trong Sidebar bằng cách add 2 dòng mã css sau vào file “userChrome.css”

#sidebar{max-width: none !important;

min-width: none !important;}

Kết quả là độ lớn của Sidebar có thể thay đổi bất kỳ bằng cách click chuột kéo/thả

8. Đánh dấu các liên kết file PDF

Mỗi lần mở PDF bằng Adobe Reader khi duyệt web bằng Firefox, đôi khi có thể làm Firefox của bạn treo hoặc đứng yên.

Tuỳ trang bạn truy cập có đính file PDF, bạn quyết định mở file đó trực tiếp trong firefox hay download, hoặc chẳng may bạn click vào mà không nhận biết được nó là liên kết PDF. Tốt nhất hãy add đoạn mã này vào file “userContent.css”, các liên kết PDF sẽ chuyển sang màu dễ nhìn hơn.

a[href$=".pdf"]:after {content: " (pdf)" !important}

9. Màu mè cho Thanh Menu:

Bạn có thích thanh menu màu xám nhàm chán mặc định của Firefox? Với đoạn mã này bạn có thể thay đổi thanh menu sang màu bạn thích:

Bằng cách: mở tệp “userChrome.css” (Xem đường dẫn ở trên) với TextEditor mà bạn yêu thích, sau đó add thêm đoạn mã sau:

menubar, toolbar, .tabbrowser-tabs{background-color: #ffsfd5 !important}

10. Màu mè cho thanh Status

Bằng cách: mở tệp “userChrome.css” (Xem đường dẫn ở trên) với TextEditor mà bạn yêu thích, sau đó add thêm đoạn mã sau:

statusbar, statusbarpanel{background-color: #ffefd5 !important;

color: #00000 !important;

-moz-appearance: none !important;}

11. Tăng độ lớn ký tự trên Menu

Nếu thấy độ lớn chữ trên menu nhỏ so với bạn, hãy tăng độ lớn của nó bằng cách mở tệp “userChrome.css” (Xem đường dẫn ở trên) với TextEditor mà bạn yêu thích, sau đó add thêm đoạn mã với 3 dòng sau:

toolbar, menubar, menubutton, menulist, menu, menuitem{

font-family: Arial.!important;

font-weight: bold !important;

font-size: 10pt !important;

}

12. Chuyển Sidebar sang bên phải

Firefox mặc định Sidebar nằm bên trái, bạn chuyển sang phải bằng cách bổ xung đoạn mã sau vào “userChrome.css” (Xem đường dẫn ở trên) với TextEditor mà bạn yêu thích.

#browser{-moz-box-direction: reverse;}

13. Chuyển thanh Tab của Firefox xuống dưới.

Ở mặc định thanh tab nằm ngay dưới thanh menu, bạn muốn thay đổi và chuyển thanh tab xuống dưới trình duyệt bằng cách bổ xung đoạn mã sau vào “userChrome.css” (Xem đường dẫn ở trên) với TextEditor mà bạn yêu thích.

#content > tabbox {-moz-box-direction: reverse !important;}

.tabbrowser-arrowscrollbox + stack{display: none !important;}

14. Chuyển tất cả các liên kết đã duyệt sang màu đỏ

Firefox hiển thị tất cả các liên kết đã duyệt vẫn chưa được định dạng trong CSS, để giảm thời gian tìm kiếm thông tin duyệt web, và bạn sẽ nhận biết được liên kết nào bạn đã click, bằng cách hãy cho những liên kết đã sử dụng đó 1 mầu nhất định, màu đỏ chẳng hạn, đơn giản cho bạn hơn mỗi khi duyệt web:

Bạn hãy bổ xung đoạn mã sau vào “userChrome.css”:

a:visited{color: red !important;}

Với 14 tips css dành cho firesox trên hy vọng bạn tự tạo cho mình một firefox vừa ý.

Đọc Tips 1-5

01 Response to “CSS với Firefox [Phần 2]”

  1. [...] Đọc tiếp các tips 6-14. [...]

LEAVE A REPLY | VIẾT LỜI BÌNH