[Tổng hợp] Code tùy biến giao diện Firefox Quantum - vozForums
vozForums
Go Back   vozForums > Máy tính để bàn > Phần mềm > Download
Reply
 
Thread Tools
  #1  
Old 07-09-2018, 10:20
moelogxam's Avatar
moelogxam moelogxam is online now
Senior Member
 
Join Date: 11-2017
Posts: 1,142
[Tổng hợp] Code tùy biến giao diện Firefox Quantum

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:
/*Ẩ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

Last edited by moelogxam; 15-09-2018 at 09:00.
Reply With Quote
  #2  
Old 07-09-2018, 10:44
muckc's Avatar
muckc muckc is offline
Senior Member
 
Join Date: 12-2012
Posts: 770
Re: [Tổng hợp] Code tùy biến giao diện Firefox Quantum

Fake safari: https://www.reddit.com/r/FirefoxCSS/..._style_for_57/
Fake chrome: https://github.com/muckSponge/MaterialFox/
Reply With Quote
  #3  
Old 07-09-2018, 11:13
moelogxam's Avatar
moelogxam moelogxam is online now
Senior Member
 
Join Date: 11-2017
Posts: 1,142
Re: [Tổng hợp] Code tùy biến giao diện Firefox Quantum

Cái MaterialFox đẹp phết
Reply With Quote
  #4  
Old 07-09-2018, 11:22
H.FPGA's Avatar
H.FPGA H.FPGA is offline
Senior Member
 
Join Date: 12-2011
Location: ....:L O L:...
Posts: 5,449
Re: [Tổng hợp] Code tùy biến giao diện Firefox Quantum

https://www.reddit.com/r/FirefoxCSS/...ly_happy_with/
Có tí theme này thu gọn sidebar của TST, có hover (di chuột tới mới mở rộng sidebar)... mời các thím.
Reply With Quote
  #5  
Old 07-09-2018, 11:28
idmresettrial's Avatar
idmresettrial idmresettrial is offline
Senior Member
 
Join Date: 09-2014
Location: Before you were born, you were already there
Posts: 8,176
Re: [Tổng hợp] Code tùy biến giao diện Firefox Quantum

Thôi sửa #1 thành link sang reddit luôn đi các # sau đỡ phải mất công.
Reply With Quote
  #6  
Old 07-09-2018, 11:39
moelogxam's Avatar
moelogxam moelogxam is online now
Senior Member
 
Join Date: 11-2017
Posts: 1,142
Re: [Tổng hợp] Code tùy biến giao diện Firefox Quantum

Quote:
Originally Posted by idmresettrial View Post
Thôi sửa #1 thành link sang reddit luôn đi các # sau đỡ phải mất công.
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

Quote:
Originally Posted by H.FPGA View Post
https://www.reddit.com/r/FirefoxCSS/...ly_happy_with/
Có tí theme này thu gọn sidebar của TST, có hover (di chuột tới mới mở rộng sidebar)... mời các thím.
Ngon ahihi
Mà page1 chắc chưa cần tổng hợp đâu nhỉ

Last edited by moelogxam; 07-09-2018 at 11:41.
Reply With Quote
  #7  
Old 07-09-2018, 11:55
H.FPGA's Avatar
H.FPGA H.FPGA is offline
Senior Member
 
Join Date: 12-2011
Location: ....:L O L:...
Posts: 5,449
Re: [Tổng hợp] Code tùy biến giao diện Firefox Quantum

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
Reply With Quote
  #8  
Old 07-09-2018, 12:02
miliket miliket is offline
Đã tốn tiền
 
Join Date: 04-2011
Posts: 2,993
Re: [Tổng hợp] Code tùy biến giao diện Firefox Quantum

Reply With Quote
  #9  
Old 07-09-2018, 13:26
nguyenduchuu378 nguyenduchuu378 is online now
Senior Member
 
Join Date: 02-2017
Posts: 579
Re: [Tổng hợp] Code tùy biến giao diện Firefox Quantum

Ngon quá, cảm ơn thím.

Gửi bằng vozFApp
Reply With Quote
  #10  
Old 07-09-2018, 15:46
Harry James Potter Harry James Potter is offline
Đã tốn tiền
 
Join Date: 02-2012
Posts: 1,264
Re: [Tổng hợp] Code tùy biến giao diện Firefox Quantum

Cho code vào bbcode [code*] đi thớt.

Anh em có thể vào thêm đây để tìm thêm nhé https://reddit.com/r/FirefoxCSS
Reply With Quote
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

All times are GMT +7. The time now is 09:24.
Steam Powered by vBulletin® 0.1 pre-alpha
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.