[Tổng hợp] Code tùy biến giao diện Firefox Quantum

moelogxam

New Member
Joined
Nov 20, 2017
Messages
1,911
Reaction score
0
Last Updated 15-09-2018 at 09:00
Với lượng người dùng Firefox Quantum ngày càng tăng, Firefox lại dễ tùy biến giao diện nên mình mạo muội lập thớt này để tổng hợp - chia sẻ cũng như nơi để các thím giúp nhau viết 1 đoạn code nào đấy giúp cá nhân hóa Firefox của riêng mình. Vậy nên các thím đang dùng code gì, tác dụng như nào thì cứ post hết lên đây, mình sẽ tổng hợp cho lên trang nhất. /*copy đoạn này bên thớt user-script =)) xin lỗi thím Bac Si Vo Danh*/

Không dài dòng nữa, bây giờ mình xin phép vào phần chính.
Trước hết, để tùy biến giao diện thì bạn phải làm theo các bước dưới đây:

1/ Gõ about:support vào thanh địa chỉ rồi Enter.
2/ Trong phần Application Basics ngay đầu, tìm đến mục Profile Folder > click vào nút Open Folder/Show in Finder/Open Directory tùy theo hđh Win/Mac/Linux.
3/ Trong folder profile này, tạo 1 thư mục mới, đặt tên là chrome.
4/ Trong folder chrome, tạo file text, đặt tên userChrome.css /*chỗ này phải đổi đuôi txt > css*/
5/ Mở file userChrome.css và bắt đầu copy-paste code vào.
6/ Làm xong muốn xem thành quả thì phải tắt Firefox đi mở lại.
7/ Show hàng cho các thím khác.

Tiếp theo là show hàng




Sau đó là một vài code


Code:
[B]/*Ẩn thanh tiêu đề của sidebar*/[/B]
#sidebar-header {
  display: none;
}

[B]/*Thêm màu mè cho bookmark/history sidebar, thêm màu cho icon bookmark*/[/B]
#bookmarks-view-children, #historyTree {
height: .75 em !important;
}
#bookmarks-view, #historyTree {
   background-color: rgb(235,235,235) !important;
}

#bookmarksMenuPopup * {
  background-color: rgb(235,235,235) !important;
  color: #333333 !important;
}

#sidebar-search-container {
  background-color: rgb(235,235,235) !important;
}
  /* Standard folder */
#bookmarks-view treechildren::-moz-tree-image(container),
#PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon,
#PlacesToolbarItems menu[container="true"] .menu-iconic-left,
#BMB_bookmarksPopup menu[container="true"] .menu-iconic-icon {
  fill: #e8bb00 !important; /* slightly muted gold */
}
  /* Live Bookmark (RSS Feed) */
#bookmarks-view treechildren::-moz-tree-image(container, livemark),
#PlacesToolbarItems toolbarbutton[container="true"][livemark="true"] .toolbarbutton-icon,
#PlacesToolbarItems menu[container="true"][livemark="true"] .menu-iconic-left,
#BMB_bookmarksPopup menu[container="true"][livemark="true"] .menu-iconic-icon {
  fill: orange !important;
}
  /* Smart bookmark folder */
#bookmarks-view treechildren::-moz-tree-image(container, query),
#PlacesToolbarItems toolbarbutton[container="true"][query="true"] .toolbarbutton-icon,
#PlacesToolbarItems menu[container="true"][query="true"] .menu-iconic-left,
#BMB_bookmarksPopup menu[container="true"][query="true"] .menu-iconic-icon {
  fill: #69c !important; /* similar to blue smart folder color */
}
  /* These "containers" are SVG in the sidebar, not yet on the menu */
#bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu) {
  fill: olive !important;
}
#bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar) {
  fill: olive !important;
}
#bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks) {
  fill: olive !important;
}

[B]/*Chuyển tab bar xuống dưới*/[/B]
#nav-bar { /* main toolbar */
  -moz-box-ordinal-group: 1 !important;
  box-shadow: none !important;
}
#PersonalToolbar { /* bookmarks toolbar */
  -moz-box-ordinal-group: 2 !important;
}
#TabsToolbar { /* tab bar */
  -moz-box-ordinal-group: 3 !important;
  padding-top: 0 !important;
}
/* Clean up spacing */
.titlebar-placeholder {
  display: none !important;
}
toolbarbutton.bookmark-item {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

/* Vertical space for min/max/close buttons above the main toolbar */
/* On Mac, if not showing title bar, allow 20 pixels */
#main-window[tabsintitlebar="true"]:not([inFullscreen="true"]) #toolbar-menubar:not([accesskey]) ~  #nav-bar {
  margin-top: 20px !important;
}
/* On Windows, if not showing title bar or menu bar, allow 20 pixels */
#main-window[tabsintitlebar="true"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar {
  margin-top: 20px !important; /* More px may be better on Win10 */
}
/* Sorry, Linux users, I don't know the best approach for you! */
/* Background for Light and Dark themes */
#main-window[lwthemetextcolor="bright"] #TabsToolbar, 
#main-window[lwthemetextcolor="dark"] #TabsToolbar {
  background-color: var(--chrome-secondary-background-color) !important;
  background-image: none !important;
}
#main-window[lwthemetextcolor="dark"] .scrollbutton-up,
#main-window[lwthemetextcolor="dark"] .scrollbutton-down,
#main-window[lwthemetextcolor="dark"] .tabs-newtab-button,
#main-window[lwthemetextcolor="dark"] #new-tab-button,
#main-window[lwthemetextcolor="dark"] #alltabs-button {
  fill: var(--lwt-text-color) !important;
}
/* Left and right borders on Win 7 & 8, but not on 10 and later: */
@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) {
  /* Vertical toolbar border */
  #main-window[sizemode=normal] #navigator-toolbox > toolbar#TabsToolbar {
    border-left: 1px solid hsla(240,5%,5%,0.3) !important;;
    border-right: 1px solid hsla(240,5%,5%,0.3) !important;;
    background-clip: padding-box;
  }
}
/* Override vertical shifts when moving a tab (9 Jan 2018) */
#TabsToolbar[movingtab] {
  padding-bottom: 0 !important;
}
#TabsToolbar[movingtab] > .tabbrowser-tabs {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
#TabsToolbar[movingtab] + #nav-bar {
  margin-top: 0 !important;
}

[B]/*Ẩn 3 nút Close/Minimizer/Maximizer*/[/B]
#titlebar-min, #titlebar-max, #titlebar-close {display:none;}

[B]/*Ẩn 2 nút Back/Forward*/[/B]
#back-button, #forward-button {display: none;}

[B]/*Chỉ hiện thanh bookmark ở tab mới (giống chrome)*/[/B]
#main-window #PersonalToolbar {visibility: collapse !important;}
#main-window[title^="about:newtab"] #PersonalToolbar,
#main-window[title^="New Tab"] #PersonalToolbar,
#main-window[title^="Nightly"] #PersonalToolbar,
#main-window[title^="Mozilla Firefox"] #PersonalToolbar,
#main-window[title^="Firefox"] #PersonalToolbar,
#main-window[title^="Customize Firefox"] #PersonalToolbar {visibility: visible !important;}
Bổ sung 1 vài web kiếm code


Mời các thím bổ sung


Last Updated 12-09-2018 at 16:01
Với lượng người dùng Firefox Quantum ngày càng tăng, Firefox lại dễ tùy biến giao diện nên mình mạo muội lập thớt này để tổng hợp - chia sẻ cũng như nơi để các thím giúp nhau viết 1 đoạn code nào đấy giúp cá nhân hóa Firefox của riêng mình. Vậy nên các thím đang dùng code gì, tác dụng như nào thì cứ post hết lên đây, mình sẽ tổng hợp cho lên trang nhất. /*copy đoạn này bên thớt user-script =)) xin lỗi thím Bac Si Vo Danh*/

Không dài dòng nữa, bây giờ mình xin phép vào phần chính.
Trước hết, để tùy biến giao diện thì bạn phải làm theo các bước dưới đây:

1/ Gõ about:support vào thanh địa chỉ rồi Enter.
2/ Trong phần Application Basics ngay đầu, tìm đến mục Profile Folder > click vào nút Open Folder/Show in Finder/Open Directory tùy theo hđh Win/Mac/Linux.
3/ Trong folder profile này, tạo 1 thư mục mới, đặt tên là chrome.
4/ Trong folder chrome, tạo file text, đặt tên userChrome.css /*chỗ này phải đổi đuôi txt > css*/
5/ Mở file userChrome.css và bắt đầu copy-paste code vào.
6/ Làm xong muốn xem thành quả thì phải tắt Firefox đi mở lại.
7/ Show hàng cho các thím khác.

Tiếp theo là show hàng




Sau đó là một vài code




Bổ sung 1 vài web kiếm code


Mời các thím bổ sung


Với lượng người dùng Firefox Quantum ngày càng tăng, Firefox lại dễ tùy biến giao diện nên mình mạo muội lập thớt này để tổng hợp - chia sẻ cũng như nơi để các thím giúp nhau viết 1 đoạn code nào đấy giúp cá nhân hóa Firefox của riêng mình. Vậy nên các thím đang dùng code gì, tác dụng như nào thì cứ post hết lên đây, mình sẽ tổng hợp cho lên trang nhất. /*copy đoạn này bên thớt user-script =)) xin lỗi thím Bac Si Vo Danh*/

Không dài dòng nữa, bây giờ mình xin phép vào phần chính.
Trước hết, để tùy biến giao diện thì bạn phải làm theo các bước dưới đây:

1/ Gõ about:support vào thanh địa chỉ rồi Enter.
2/ Trong phần Application Basics ngay đầu, tìm đến mục Profile Folder > click vào nút Open Folder/Show in Finder/Open Directory tùy theo hđh Win/Mac/Linux.
3/ Trong folder profile này, tạo 1 thư mục mới, đặt tên là chrome.
4/ Trong folder chrome, tạo file text, đặt tên userChrome.css /*chỗ này phải đổi đuôi txt > css*/
5/ Mở file userChrome.css và bắt đầu copy-paste code vào.
6/ Làm xong muốn xem thành quả thì phải tắt Firefox đi mở lại.
7/ Show hàng cho các thím khác.

Tiếp theo là show hàng




Sau đó là một vài code


/*Ẩn thanh tiêu đề của sidebar*/
#sidebar-header {
display: none;
}

/*Thêm màu mè cho bookmark/history sidebar, thêm màu cho icon bookmark*/
#bookmarks-view-children, #historyTree {
height: .75 em !important;
}
#bookmarks-view, #historyTree {
background-color: rgb(235,235,235) !important;
}

#bookmarksMenuPopup * {
background-color: rgb(235,235,235) !important;
color: #333333 !important;
}

#sidebar-search-container {
background-color: rgb(235,235,235) !important;
}
/* Standard folder */
#bookmarks-view treechildren::-moz-tree-image(container),
#PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon,
#PlacesToolbarItems menu[container="true"] .menu-iconic-left,
#BMB_bookmarksPopup menu[container="true"] .menu-iconic-icon {
fill: #e8bb00 !important; /* slightly muted gold */
}
/* Live Bookmark (RSS Feed) */
#bookmarks-view treechildren::-moz-tree-image(container, livemark),
#PlacesToolbarItems toolbarbutton[container="true"][livemark="true"] .toolbarbutton-icon,
#PlacesToolbarItems menu[container="true"][livemark="true"] .menu-iconic-left,
#BMB_bookmarksPopup menu[container="true"][livemark="true"] .menu-iconic-icon {
fill: orange !important;
}
/* Smart bookmark folder */
#bookmarks-view treechildren::-moz-tree-image(container, query),
#PlacesToolbarItems toolbarbutton[container="true"][query="true"] .toolbarbutton-icon,
#PlacesToolbarItems menu[container="true"][query="true"] .menu-iconic-left,
#BMB_bookmarksPopup menu[container="true"][query="true"] .menu-iconic-icon {
fill: #69c !important; /* similar to blue smart folder color */
}
/* These "containers" are SVG in the sidebar, not yet on the menu */
#bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu) {
fill: olive !important;
}
#bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar) {
fill: olive !important;
}
#bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks) {
fill: olive !important;
}

/*Chuyển tab bar xuống dưới*/
#nav-bar { /* main toolbar */
-moz-box-ordinal-group: 1 !important;
box-shadow: none !important;
}
#PersonalToolbar { /* bookmarks toolbar */
-moz-box-ordinal-group: 2 !important;
}
#TabsToolbar { /* tab bar */
-moz-box-ordinal-group: 3 !important;
padding-top: 0 !important;
}
/* Clean up spacing */
.titlebar-placeholder {
display: none !important;
}
toolbarbutton.bookmark-item {
padding-top: 2px !important;
padding-bottom: 2px !important;
}

/* Vertical space for min/max/close buttons above the main toolbar */
/* On Mac, if not showing title bar, allow 20 pixels */
#main-window[tabsintitlebar="true"]:not([inFullscreen="true"]) #toolbar-menubar:not([accesskey]) ~ #nav-bar {
margin-top: 20px !important;
}
/* On Windows, if not showing title bar or menu bar, allow 20 pixels */
#main-window[tabsintitlebar="true"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar {
margin-top: 20px !important; /* More px may be better on Win10 */
}
/* Sorry, Linux users, I don't know the best approach for you! */
/* Background for Light and Dark themes */
#main-window[lwthemetextcolor="bright"] #TabsToolbar,
#main-window[lwthemetextcolor="dark"] #TabsToolbar {
background-color: var(--chrome-secondary-background-color) !important;
background-image: none !important;
}
#main-window[lwthemetextcolor="dark"] .scrollbutton-up,
#main-window[lwthemetextcolor="dark"] .scrollbutton-down,
#main-window[lwthemetextcolor="dark"] .tabs-newtab-button,
#main-window[lwthemetextcolor="dark"] #new-tab-button,
#main-window[lwthemetextcolor="dark"] #alltabs-button {
fill: var(--lwt-text-color) !important;
}
/* Left and right borders on Win 7 & 8, but not on 10 and later: */
@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) {
/* Vertical toolbar border */
#main-window[sizemode=normal] #navigator-toolbox > toolbar#TabsToolbar {
border-left: 1px solid hsla(240,5%,5%,0.3) !important;;
border-right: 1px solid hsla(240,5%,5%,0.3) !important;;
background-clip: padding-box;
}
}
/* Override vertical shifts when moving a tab (9 Jan 2018) */
#TabsToolbar[movingtab] {
padding-bottom: 0 !important;
}
#TabsToolbar[movingtab] > .tabbrowser-tabs {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#TabsToolbar[movingtab] #nav-bar {
margin-top: 0 !important;
}

/*Ẩn 3 nút Close/Minimizer/Maximizer*/
#titlebar-min, #titlebar-max, #titlebar-close {display:none;}

/*Ẩn 2 nút Back/Forward*/
#back-button, #forward-button {display: none;}

/*Chỉ hiện thanh bookmark ở tab mới (giống chrome)*/
#main-window #PersonalToolbar {visibility: collapse !important;}
#main-window[title^="about:newtab"] #PersonalToolbar,
#main-window[title^="New Tab"] #PersonalToolbar,
#main-window[title^="Nightly"] #PersonalToolbar,
#main-window[title^="Mozilla Firefox"] #PersonalToolbar,
#main-window[title^="Firefox"] #PersonalToolbar,
#main-window[title^="Customize Firefox"] #PersonalToolbar {visibility: visible !important;}
Bổ sung 1 vài web kiếm code
Mời các thím bổ sung
 

idmresettrial

Member
Joined
Sep 27, 2017
Messages
6,810
Reaction score
0
Thôi sửa #1 thành link sang reddit luôn đi các # sau đỡ phải mất công. :rofl:
 

moelogxam

New Member
Joined
Nov 20, 2017
Messages
1,911
Reaction score
0
idmresettrial said:
Thôi sửa #1 thành link sang reddit luôn đi các # sau đỡ phải mất công. :rofl:
Có nhiều cái nhặt được xong quên mất link rồi nên phải post vậy đó thím


H.FPGA said:
https://www.reddit.com/r/FirefoxCSS/...ly_happy_with/
Có tí :D theme này thu gọn sidebar của TST, có hover (di chuột tới mới mở rộng sidebar)... :D mời các thím.
Ngon ahihi

Mà page1 chắc chưa cần tổng hợp đâu nhỉ
 

H.FPGA

New Member
Joined
Sep 28, 2017
Messages
2,873
Reaction score
0
Phần màu sắc từng phần chỗ sidebar các thím có thể tự thay bằng màu phù hợp trong phần code là được :D
 
Top