Tùy biến Firefox qua file Userchrome.css

05:06, 20/04/2009

Bạn là người thường dùng Firefox để duyệt web, nhưng bạn có muốn tùy biến lại giao diện của Firefox không, chẳng hạn như là bỏ bớt đi một vài menu, thay đổi kích thước thanh Tab,… Rất đơn giản, chỉ cần chỉnh sửa một ít trong file Userchrome.css là bạn sẽ có ngay một Firefox theo ý muốn.

Tìm Userchrome.css ở đâu?

Đối với Windows XP:
C:\Documents and Settings\<tên người dùng>\ Application Data\Mozilla\Firefox\Profiles\Chrome

Đối với Windows Vista:
C:\Users\<tên người dùng>\AppData\Roaming\Mozilla\Firefox\Profiles\<some_profile>\chrome

Trước khi tìm, nên vào Folder Option bật chế độ xem file ẩn để thấy được thư mục Application Data.

Tại đây, bạn hãy sửa tên file userChrome-example.css thành userChrome.css.

Cách chỉnh sửa

Dùng Notepad hoặc Wordpad để mở file userChrome.css, tìm đến đoạn:

/* * Do not remove the @namespace line — it’s required for correct functioning */ /* set default namespace to XUL */ @namespace url(”http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”);

Để chỉnh sửa, hãy copy các đoạn code được cung cấp sau đây vào dưới đoạn code trên:

1. Bỏ menu:
Đoạn code sau đây dùng để bỏ bớt đi menu Help và Edit, nếu muốn bỏ thêm menu nào đó bạn hãy điền thêm theo mẫu

/* Remove Edit menu (if you already use all the keyboard shortcuts) */
#helpMenu, #edit-menu { display: none !important; }

2. Bỏ nút Back, nút Forward làm tương tự, chỉ cần thay từ Back thành Forward

/* Remove Back button when there’s nothing to go Back to */
#back-button[disabled="true"] { display: none; }

3.Bỏ nút Stop, Home:

/* Remove Stop button when there’s nothing to Stop */
#stop-button[disabled="true"] { display: none; }
/* Remove Home button (never use it) */
#home-button { display: none; }

4. Bỏ nút Go:

/* Remove Go button from address bar */
#go-button-stack, .search-go-button-stack { display: none !important; }

5. Bỏ hình kính lúp trong khung Search và ngôi sao đánh dấu Bookmark:

/*Remove magnifying glass button from search box*/
.search-go-button-stack { display: none !important; }

/* Remove the Bookmark Star */
#star-button { display: none !important; }

6. Chuyển sidebar sang phải:

/* Place the sidebar on the right edge of the window */
window > hbox {
direction:rtl; } window > hbox > * {
direction:ltr; }

7. Chuyển các thẻ Tab xuống dưới

/* Display the Tab bar at the bottom */
#content > tabbox { -moz-box-direction: reverse; }

8. Xóa nút xoay vòng khi web đang tải

/* Eliminate the throbber and its annoying movement: */
#throbber-box { display: none !important; }

9. Tùy biến thẻ tab:

- Làm cho thẻ tab đang xem được rộng ra

/* Make the active tab wider */
tab[selected="true"] { min-width: 200px !important; }

- Làm trong suốt các thẻ tab khác

/* Make inactive tabs partially transparent */
#content tab:not([selected="true"]) { -moz-opacity: 0.5 !important; }

- Hiển thị Favicon trên thẻ tab đang xem
/* Show tab favicon only on selected tab */
tab:not([selected="true"]) .tab-icon { display: none !important; }

- Đổi màu tab đang xem

/* Change Color of Active tab */
tab{
-moz-appearance: none !important; }
tab[selected="true"] {
background-color: rgb(222,218,210) !important;
color: black !important; }

- Đổi màu tất cả các tab

/* Change Color of Normal Tabs */
tab:not([selected="true"]) {
background-color: rgb(200,196,188) !important;
color: gray !important; }

- Bỏ nút Close trên các tab

/* Remove the Close Button from the Tab Bar */
.tabs-closebutton-box {
display: none !important;

10. Thay màu cho thanh progress (thay #660000 thành màu bạn thích)

/* Change the progress bar color */
.progress-bar {
-moz-appearance: none !important;
background-color: #660000 !important; }

11. Thanh Bookmark nhiều dòng

/* Multi-Row Bookmarks Toolbar */
#bookmarks-ptf {display:block} #bookmarks-ptf toolbarseparator {display:inline}

12. Ẩn khung Auto Complete

/* Hide AutoComplete in Address Bar */
#PopupAutoComplete, .autocomplete-tree { visibility: hidden !important; display: none !important; }

13. Chèn ảnh nền cho toolbar (thay “background.gif” và “none” thành đường dẫn ảnh và màu sắc theo ý muốn)

/* Use a Background Image for the Toolbars */
menubar, toolbox, toolbar, .tabbrowser-tabs {
background-image: url(”background.gif”) !important; background-color: none !important; }

14. Loại bỏ Web Search trong menu Tools

/* Remove Web Search from Tools Menu */
menuitem[label="Web Search"] { display: none; }
menuitem[label="Web Search"] + menuseparator { display: none; }

15. Thay đổi trỏ chuột khi rê vào một đường dẫn trên trang web

/* Change Cursor for Links that Open in New Window */
:link[target="_blank"], :visited[target="_blank"],
:link[target="_new"], :visited[target="_new"] {
cursor: crosshair; }

Phương Trúc (Theo Makeuseof.com)