Firefox CSS 사용자 정의 다양한
소개
Firefox 은 스타일 시트를 사용하여 UI 파트를 사용자 정의할 수 있습니다.
다양한 커스텀 커스텀 익스텐션도 출시되었지만, 조금 뻣뻣하거나 자신의 커스텀을 원한다면 스타일 시트를 직접 조작해야합니다.
XUL의 커스텀 관계는 검색해도 정보가 별로 나오지 않으므로, 비망록으로서 남겨 둡니다.
맞춤형 도구
Stylish 애드온 (CSS 사용자 정의 필수 도구)
Bookmarks Folder Images 애드온 (폴더 이미지 변경이 간단)
주요 XUL
브라우저
chrome://browser/content/browser.xul
※여기에서 인스펙터로 다양한 요소를 조사할 수 있지만, 최근의 버젼에서는 사이드 바를 표시할 수 없다(그 내부에 있는 요소는 별도 XUL를 표시등 하지 않으면 조사할 수 없다) 제한이 있는 모양.
북마크 툴바
chrome://browser/content/bookmarks/bookmarksPanel.xul
주요 스타일 시트
기타 리소스
twisty 계 svg
TIPS
표시 혼란
새 탭에 표시할 미리보기 이미지 수
browser.newtabpage.columns browser.newtabpage.rows를 변경합니다..newtab-side-margin .newtab-cell #newtab-grid북마크 사이드바 맞춤 예
Windows 10에서 북마크 사이드바 사용자 지정 예제.
이런 느낌.
+-나 트리 라인의 표시를 XP풍으로.
폴더 이미지는 Bookmarks Folder Images 애드온에서 변경되었습니다.
/* ブックマークツールバーの余白 */
.bookmark-item {
padding-left: 8px !important;
padding-right: 7px !important;
}
/* サイドバーのフォルダツリーを点線に */
#bookmarksPanel treechildren::-moz-tree-line,
#history-panel treechildren::-moz-tree-line,
#treeBbsMenu treechildren::-moz-tree-line,
#sbTree treechildren::-moz-tree-line {
visibility:visible !important;
border: 1px dotted #999 !important;
}
/* サイドバーのブックマークセパレーターを調整 */
#bookmarksPanel treechildren::-moz-tree-separator,
#history-panel treechildren::-moz-tree-separator,
#treeBbsMenu treechildren::-moz-tree-separator,
#sbTree treechildren::-moz-tree-separator {
margin: 0em 0.5em 0em 0.3em !important;
}
/* サイドバーのツリーに表示される +- をXP風に */
#bookmarksPanel treechildren::-moz-tree-twisty,
#history-panel treechildren::-moz-tree-twisty,
#treeBbsMenu treechildren::-moz-tree-twisty,
#sbTree treechildren::-moz-tree-twisty {
list-style-image: url("file://path/to/dest/twisty-XP.svg#clsd");
margin-right: 0.3em
}
#bookmarksPanel treechildren::-moz-tree-twisty(open),
#history-panel treechildren::-moz-tree-twisty(open),
#treeBbsMenu treechildren::-moz-tree-twisty(open),
#sbTree treechildren::-moz-tree-twisty(open) {
list-style-image: url("file://path/to/dest/twisty-XP.svg#open");
margin-right: 0.3em
}
/* サイドバーのセパレーター行でツリーライン表示が乱れるのを補正（FF56～） */
treechildren::-moz-tree-twisty(title, separator) {
margin-left: 1px !important;
}
/* サイドバーのツリーインデントを調節 */
treechildren::-moz-tree-indentation {
width: 1.6em !important;
}
/* 新しいタブ > よく見るサイト */
.newtab-side-margin {
-moz-box-flex: 1;
min-width: 0;
}
.newtab-cell {
display: -moz-box;
height: 192px;
margin: 20px 10px 30px;
width: 265px;
}
#newtab-grid {
max-height: 735px !important;
}
Mac이라면 마진계를 조정하여 사용할 수 있습니다.
참고 정보
/* ブックマークツールバーの余白 */
.bookmark-item {
padding-left: 8px !important;
padding-right: 7px !important;
}
/* サイドバーのフォルダツリーを点線に */
#bookmarksPanel treechildren::-moz-tree-line,
#history-panel treechildren::-moz-tree-line,
#treeBbsMenu treechildren::-moz-tree-line,
#sbTree treechildren::-moz-tree-line {
visibility:visible !important;
border: 1px dotted #999 !important;
}
/* サイドバーのブックマークセパレーターを調整 */
#bookmarksPanel treechildren::-moz-tree-separator,
#history-panel treechildren::-moz-tree-separator,
#treeBbsMenu treechildren::-moz-tree-separator,
#sbTree treechildren::-moz-tree-separator {
margin: 0em 0.5em 0em 0.3em !important;
}
/* サイドバーのツリーに表示される +- をXP風に */
#bookmarksPanel treechildren::-moz-tree-twisty,
#history-panel treechildren::-moz-tree-twisty,
#treeBbsMenu treechildren::-moz-tree-twisty,
#sbTree treechildren::-moz-tree-twisty {
list-style-image: url("file://path/to/dest/twisty-XP.svg#clsd");
margin-right: 0.3em
}
#bookmarksPanel treechildren::-moz-tree-twisty(open),
#history-panel treechildren::-moz-tree-twisty(open),
#treeBbsMenu treechildren::-moz-tree-twisty(open),
#sbTree treechildren::-moz-tree-twisty(open) {
list-style-image: url("file://path/to/dest/twisty-XP.svg#open");
margin-right: 0.3em
}
/* サイドバーのセパレーター行でツリーライン表示が乱れるのを補正（FF56～） */
treechildren::-moz-tree-twisty(title, separator) {
margin-left: 1px !important;
}
/* サイドバーのツリーインデントを調節 */
treechildren::-moz-tree-indentation {
width: 1.6em !important;
}
/* 新しいタブ > よく見るサイト */
.newtab-side-margin {
-moz-box-flex: 1;
min-width: 0;
}
.newtab-cell {
display: -moz-box;
height: 192px;
margin: 20px 10px 30px;
width: 265px;
}
#newtab-grid {
max-height: 735px !important;
}
Reference
이 문제에 관하여(Firefox CSS 사용자 정의 다양한), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/taka-tactical/items/9000660faf14d26ba231텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
