userchrome.css

最近喜欢把浏览器WaterFox全屏化(F11)看网页,尤其是看漫画的时候特别爽,可是全屏的情况下,书签栏没有了,这叫我存有百多个书签的人情何以堪。查了相关资料才知道,原来还有个Userchrome.css文件可以改变火狐浏览器的外观。

何为userchrome.css?

"userChrome.css"设置了Firefox用户界面中可变元素的显示规则;位置在您的配置文件夹的"chrome"子目录中。和 user.js一样,这个文件默认是不存在的,所以在开始添加您的设置之前,您需要建立这个文件。事实上默认存在一个名叫"userChrome- example.css"的例子文件。本质上您只要重命名文件来除去"-example"部分。@via 网上

说白了就是说,在这个文件中加入你自己定义的CSS样式,就可以修改FireFox的外观定义成你自己想要的样子。

userchrome.css文件在哪?

操作系统 文件位置
Windows "%APPDTAT%\Mozilla\"
Unix/Linux ~/.mozilla/
Mac OS X ~/Library/Mozilla/
~/Library/Application Support/

对于Windows用户来说的话,我建议你安装一个Everything,直接搜索userchrome就会出来了。

如果要自己找的话:

  1. Windows 7:C:\Users\<用户名>\AppData\Roaming\Mozilla\Firefox\Profiles\fd3yp4yn.default(这个是随机八位数)\chrome
  2. Windows XP:C:\Documents and Settings\<用户名>\Application Data\Mozilla\Firefox\Profiles\fd3yp4yn.default(这个是随机八位数)\chrome
  3. 打开文件夹就可以看到userChrome.css文件了,如果没有的话,应该有userChrome-example.css,直接重命名这个就好。

自定义userChrome.css

打开该文件后,请不要乱删除,其中这个namespace就是必须的。在不懂的情况下,只需修改css的东西就好。下面举几个例子:

隐藏Firefox书签栏图标方法

1
menuitem.bookmark-item > .menu-iconic-left {display: none;}

Firefox全屏模式下显示书签工具栏的方法

1
#main-window[inFullscreen="true"] #PersonalToolbar{visibility:visible !important;}

删除Firefox浏览器扩展Firebug工具栏按钮

1
#firebug-button { display: none !important; }

删除Firefox 多余的右键菜单

1
#context-back,#context-forward,#context-reload,#context-stop,#context-sep-stop,#context-bookmarkpage,#context-savepage,#context-sendpage,#context-sep-viewbgimage,#context-openlink,#context-sep-open,#context-bookmarklink,#context-sendlink,#context-sep-copyimage,#context-sendimage,#context-setWallpaper{ display: none !important; }
  • #context-back 后退 Back
  • #context-forward 前进 Forward
  • #context-reload 刷新 Reload
  • #context-stop 停止 Stop
  • #context-sep-stop 停止”下面的分隔符
  • #context-bookmarkpage 加入收藏夹… Bookmark This Page
  • #context-savepage 页面另存为… Save Page As
  • #context-sendpage 发送页面… Send Page
  • #context-sep-viewbgimage 查看背景图片 View Background Image
  • #context-openlink 在新窗口中打开 Open Link In New Window
  • #context-sep-open 在新标签中打开 Open Link In New Tab
  • #context-bookmarklink 加入收藏夹… Bookmark This Link
  • #context-sendlink 发送链接… Send Link
  • #context-sep-copyimage 复制图片地址 Copy Image Location
  • #context-sendimage 发送图片… Send Image
  • #context-setWallpaper 设为桌面壁纸… Set As Desktop Background

地址栏显示样式的更改

1
2
3
4
5
6
7
8
9
10
11
12
/*地址栏显示样式及字体颜色*/
#urlbar{
-moz-appearance: none !important;
-moz-border-radius: 6px !important;
padding-right: 1px !important;
color: blue !important;
font-family: monospace !important;
}
/* 当访问https链接的时候地址栏变成黄色 */
#urlbar[level] .autocomplete-textbox-container {
background-color: #FFFFB7 !important;
}

状态栏、菜单栏、书签栏的自动隐藏

1
2
3
4
5
6
7
/*状态栏自动隐藏*/
#status-bar {margin-bottom: -20px !important;}
#status-bar:hover {margin-bottom: 0 !important;}
/*书签栏自动隐藏*/
#PersonalToolbar {display: none;}#navigator-toolbox:hover > #PersonalToolbar {display: -moz-box;}
/*菜单栏自动隐藏*/
#toolbar-menubar{display: none;}#navigator-toolbox:hover > #toolbar-menubar{display: -moz-box;}

标签样式的更改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*更改非活动标签样式,即未激活标签*/
tab[selected="false"]{
-moz-border-radius: 3px !important;
background-color: #C4DDFB !important;
color: black !important;
font-size: 90%;
}
/*更改活动标签样式,即当前标签*/
tab[selected="true"] {
-moz-border-radius: 3px !important;
background-color: #FAFCFE !important;
color: black !important;
font-size: 110%;
}
/*更改非活动标签悬停样式,即未读标签*/
tab[selected="false"]:hover{
-moz-border-radius: 3px !important;
background-color: #C5DDF9 !important;
font-size: 90%;
}

其他例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
/* Set font size and family for dialogs
 * and other miscellaneous text
 */
window {
  font-size: 3.5mm !important;
  font-family: helvetica !important;
}
 
/* Place the sidebar on the right edge of the window
   Side effect: also moves the mail folder to the right side 
(Bug 226926)
 
 */
window > hbox {
  direction:rtl;
}
window > hbox > * {
  direction:ltr;
}
 
/* PERSONAL TOOLBAR */
/*
 * Note: Rules affecting icons on the PT do not apply to folder contents.
 * Those are governed by "Bookmarks menu" rules.
 */
 
/* Kill bookmark icons in the Personal Toolbar */
toolbarbutton.bookmark-item > .toolbarbutton-icon {
  display: none;
}
 
/* Alternatives: */
/* Select only bookmark folder icons */
/*
.bookmark-item[type="menu"] > .toolbarbutton-icon {
  do something...
}
 */
 
/* Select only tab group icons */
/*
.bookmark-item.bookmark-group > .toolbarbutton-icon {
  do something...
}
 */
 
/* Example: only kill icons on normal bookmarks */
/*
.bookmark-item:not(.bookmark-group):not([type="menu"]) > .toolbarbutton-icon {
  display: none;
}
 */
 
/* Visual aids for no-icons operation */
 
/* Make tab group bookmarks italic and brown */
.bookmark-group > .toolbarbutton-text {
   font-style: italic;
   color: brown;
}
 
/* Make bookmark folders bold and navy blue */
.bookmark-item[type="menu"] > .toolbarbutton-text {
   font-weight: 900;
   color: navy;
}
 
/* BOOKMARKS MENU */
 
/* Kill "normal" bookmark icons in the bookmarks menu */
menuitem.bookmark-item > .menu-iconic-left {
  display: none;
}
 
/* Other examples: */
 
/* kill icons for bookmark folders in Bookmarks menu */
menu.bookmark-item > .menu-iconic-left {
  display: none;
}
 
/* kill icons for bookmark groups in Bookmarks menu */
menuitem.bookmark-group > .menu-iconic-left {
  display: none;
}
 
/* Style the now-iconless bookmark menu items (mimicking the PT styles) */
/* bookmark folders */
menu.bookmark-item {
  color: navy !important;
  font-weight: 900 !important;
}
 
/* tab group bookmarks */
menuitem.bookmark-group {
   color: brown !important;
   font-style: italic !important;
}
 
/* You could select normal bookmarks this way */
/*
menuitem.bookmark-item {
  do something...
}
*/
 
/* TABBROWSER TABS */
 
/* Kill tabbrowser icons */
/* Note: this leaves some empty vertical space in the tab strip in some themes */
 
/* Kill all tab icons, no matter what */
/*
.tabbrowser-tabs .tab-icon {
  display: none;
}
 */
 
/* Alternatively, kill only default tabbrowser icons (no site icon) */
.tabbrowser-tabs *¦tab:not([image]) .tab-icon {
  display: none;
}
 
/* Show icons (no matter what) when hovering over the tab */
/*
.tabbrowser-tabs *¦tab:hover .tab-icon {
  display: -moz-box;
}
 */
 
/* Show tab loading indicator while the tab is loading */
/*
.tabbrowser-tabs *¦tab[busy] .tab-icon {
  display:-moz-box;
}
*/
 
/* Shrink tab titles by 10% */
.tabbrowser-tabs .tab-text {
  font-size: 90%;
}
 
/* Turn off the great big icons on editor/mail toolbars (bugs 78843/94581) */
.toolbar-primary-icon {
    visibility: collapse;
}
 
/* Make menus big, pretty and readable (like the old SGI look):
 * menubar isn't used after 12/19 builds, but is needed for NS6;
 * the rest are for post-12/19
 */
menubar, menubutton, menulist, menu, menuitem {
  font-family: helvetica !important;
  font-style: italic !important;
  font-weight: bold !important;
  font-size: 4mm !important;
}
 
/* Next two don't work as either "slider" or "scrollbar".
 * Apparently scrollbar size is controlled by images
 * used for the up/down/left/right arrows.
slider {
   height: 20px !important;
}
slider[align="vertical"] {
   width: 20px !important;
}
*/
 
/* Single line text fields */
input {
  /* Set font size and family of text fields */
  font-family: clean !important;
  font-size: 13px !important;
 
  /* Set background color to something a little prettier */
  background-color: rgb(200, 255, 220) !important;
 
  /* Add some key bindings.
   * For an explanation of how to do this,
   * see below under "Custom key bindings".
   */
  -moz-binding: url("resource:///res/builtin/myHTMLBindings.xml#myInputFields") !important;
}
 
/* Multi-line textareas */
textarea {
  background-color: rgb(200, 255, 220) !important;
}
 
/* The  dropdown address and autocomplete windows are grey.
 * To make them match better with the URL field and look more like 4.x:
 */
 
/*  URL dropdown box  */
#ubhist-popup
  {
    background            : white !important;
    border                : 1px solid black !important;
    padding               : 0px !important;            
  }
 
/*  autocomplete text field  */
.textfield-popup
  {
    background            : white !important;
    border                : 1px solid black !important;
  }
 
#ubhist-popup > .popup-internal-box, .textfield-popup > .popup-internal-box
  {
    border-left           : 1px solid white !important;
    border-top            : 1px solid white !important;
    border-right          : 1px solid white !important;
    border-bottom         : 1px solid white !important;
  }
 
/* 3. Add a border (line of 1px) to the tooltips. */
.tooltip-label
   {
     border                : 1px solid !important;
   }
 
/* MAIL
 *
 * For other things you can change in mail windows,
 * see the files in the source tree under themes/modern/messenger
 */
 
/* Specify the font used for the subject in the message pane
 * (it was bold, fixed-width and too wide).
 */
.subjectvalue {
  font-family; helvetica !important;
  font-weight: normal !important;
}
 
/* Make the thread and folder panes readable. */
treechildren {
  font-size: 14px !important;
}
 
/* Change the background colour of the messages (top right hand
 * pane in 3-pane view) of Mail/News from gray to white.
 */
outliner {
     background-color : white !important;
}

扩展阅读:略谈userChrome.css(自己动手设置Firefox的外观)转载

>> 若为原创,转载请注明: 转载自Laycher's Blog

>> 本文链接地址: 自定义FireFox的样式[userChrome.css]

>> 订阅本站: http://feed.feedsky.com/laycher



无觅相关文章插件,快速提升流量