Thủ thuật Firefox: CSS với Firefox

Chào các bạn.

Vừa lang thang thấy cái bài viết thủ thuật này khá hay và lạ nữa nên xin tác giả copy lại cho mọi người. Như vậy trình duyệt Firefox sẽ thân thiện hơn với chúng ta rồi.

Sau đây là một số tips làm cho firefox linh hoạt và dễ sử dụng theo cách riêng của mình. Bạn hãy nhớ đường dẫn sau để tìm file “userChrome.css” và “userContent.css” được sử dụng liên tục trong bài này:

  • Windows XP: C:\Documents and Settings\Username\Local Settings\Application Data\Mozilla\Firefox\Profiles\xxxxxxxxx.default\chrome\
  • 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.
1. Thay đổi độ lớn ô tìm kiếm

Firefox chỉ để mặc định đủ để hiển thị 25 ký tự từ khóa tìm kiếm. Bạn muốn thay đổi độ lớn thanh tìm kiếm, đơn giả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ã sau:

.search-textbox[focused="true"] {width: 300px !important;} 

Chạy lại firefox, searchbox hiển thị như bình thường, nhưng khi bạn click chuột vào nó, searchbox tự động sẽ thay đổi chiều rộng với độ lớn 300px.

2. Tạo một thanh tiêu đề cơ động

Bookmark menu chiếm vị trí rất lớn khi mỗi khi duyệt web, và khi bạn sở hữu 1 màn hình cỡ nhỏ sẽ chiếm hết độ lớn của trang bạn đang duyệt. Bạn có thể “cất” thanh tiêu đề này bằng cách disabled nó khi vào View\Toolbar. Nhưng đôi khi cũng không thể từ bỏ nó 1 cách dễ dàng, chỉ còn một cách là tạo một thanh tiêu đề cơ động

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:

#PersonalToolbar {display: none;}<br /><br /><br />  #navigator-toolbar:hover > #PersonalToolbar {display: -moz-box;}

Trong trường hợp này bạn chỉ cần di chuột qua khu vực thanh tiêu đề sẽ tự động hiện ra.

3. Thay đổi độ lớn Bookmark

Nếu bạn thay đổi bookmark trên thanh tiêu đề cơ động với độ lớn 250em, đủ để hiện thị các bookmarks . 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:

.bookmark-item[livemark = "true"]<br /><br /><br />  .bookmarh-item {max-width: 250em !important;} 

4. Mầu mè cho Tab active của Firefox.

Bạn duyệt web với nhiều tabs trong firefox, rất khó và có thể làm bạn “mỏi mắt” khi nhận biết tab nào đang active, tại sao không cho tab đang active đó 1 mầu khác dễ nhận biết nhỉ.

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:

@-moz-document url(chrome://browser/content/browser xul){tab[selected="true"] > hbox, tab[selected="true"] > toolbarbutton{<br /><br /><br />  color: #fff !important; background-color: #c66 !important; font-weight: bold !important;} 

Bạn có thể thay đổi mầu của tab bằng thay đổi giá trị mã mầu Hexadecimal, ở trên #fff và #c66, mà bạn yêu thích.

5. Mầu mè cho Tab ẩn (inactive) của Firefox

Cũng như tip 4, nhưng tip này mầu mè cho tab ẩn, bạn chỉ cần add đoạn mã sau:

@-moz-document url(chrome://browser/content/browser xul){tab[selected="false"] > hbox, tab[selected="false"] > toolbarbutton{<br /><br /><br />
color: #fff !important; background-color: #6ae !important;}

Nguồn: http://blog.nanowings.de

{ 0 comments… add one }

Leave a Comment