最近喜欢把浏览器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就会出来了。
如果要自己找的话:
- Windows 7:C:\Users\<用户名>\AppData\Roaming\Mozilla\Firefox\Profiles\fd3yp4yn.default(这个是随机八位数)\chrome
- Windows XP:C:\Documents and Settings\<用户名>\Application Data\Mozilla\Firefox\Profiles\fd3yp4yn.default(这个是随机八位数)\chrome
- 打开文件夹就可以看到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
等下,火狐浏览器里面的自定义CSS文件叫做Userchrome.css?你确定chrome?
yes,I am sure.你可以自己搜索一下么。是真的。
Firefox 20报告无效
你是写在配置文件夹 下chrome 下的userChrome.css 中?
给力!