由于你的浏览器上的标签太多而对阅读和查找带来不便。很多人想让自己的浏览器拥有在侧面显示标签的功能,本文将对此进行解答,并进行一些美化。

添加了侧边栏的Firefox浏览器
要在Firefox 2.0中实现上图效果,你需要做如下两步:
1. 安装Tab Mix Plus并设置;
2. 创建修改 userChrome.css文件。
下面进行详细讲解。
一、Tab Mix Plus扩展
首先需要安装Tab Mix Plus扩展。
在“工具——Tab Mix Plus选项”中,对其设置:

“外观——标签栏外观——标签栏位置”设置为“底部”。
“外观——标签栏外观”选中“内建的样式”。
“外观——标签栏外观”中,“当所有标签占用宽度超过标签栏时启动”,选择“自动滚动”。

“外观——标签页外观”中,关闭“标签页长度符合其内容”。
二、创建修改userChrome.css
userChrome.css的路径:
在Windows Vista/XP/2000中,路径通常为%AppData%\Mozilla\Firefox\Profiles\xxxxxxxx.default\, xxxxxxxx 是8个字符的任意组合。Windows XP/2000中只需浏览
C:\Documents and Settings\[User Name]\Application Data\Mozilla\Firefox\Profiles\ ,在Windows Vista中浏览 C:\users\[User Name]
\AppData\Roaming\Mozilla\Firefox\Profiles\。
在Windows 95/98/Me中,路径通常为 C:\WINDOWS\Application Data\Mozilla\Firefox\Profiles\xxxxxxxx.default\
在Linux中,路径通常为 ~/.mozilla/firefox/xxxxxxxx.default/
在Mac OS X中,路径通常为 ~/Library/Application Support/Firefox/Profiles/xxxxxxxx.default/
userChrome.css在默认情况下在不存在的,默认路径下有 userChrome-example.css ,你可以简单将其重命名为userChrome.css。
然后编辑该文件,复制如下内容,完全替代原内容:
/* beginning of file userChrome.css */
/*
* Do not remove the @namespace line -- it's required for correct functioning
*/
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
/* works in in FF2.0 */
#content > tabbox {
-moz-box-orient: horizontal;
}
.tabbrowser-strip {
-moz-box-orient: vertical;
/* note: you can set this to -moz-scrollbars-vertical instead,
but then the scrollbar will *always* be visible. this way
there is never a scrollbar, so it behaves like the tab bar
normally does */
overflow: -moz-scrollbars-none;
}
.tabbrowser-tabs {
-moz-box-orient: horizontal;
/* min-width: 50ex; */ /* >1680 pixels screens */
/* min-width: 40ex; /* =1680,1600 pixels screens */
/* min-width: 35ex; */ /* =1440 pixels screens */
min-width: 30ex; /* <1440 pixels screens */
/* min-width: 20ex; */ /* 1280 pixels screens */
/* min-width: 17ex; */ /* this is almost the minimum to go down to on small screens */
-moz-box-align: start;
}
/*> stack > vbox > hbox*/
.tabbrowser-tabs > stack > vbox > hbox > hbox {
-moz-box-orient: vertical;
-moz-box-align: stretch;
}
.tabbrowser-tabs > stack > vbox > hbox > hbox > tab {
-moz-box-align: start;
-moz-box-orient: horizontal;
}
/* to put the tabs on the right un-comment this line (not needed if using Tab Mix Plus)
#content > tabbox {-moz-box-direction: reverse;} */
/***** Tabbar *****/
/* Background for tabbrowser strip */
tabs.tabbrowser-tabs {
background-color: none !important;
background: url("bkgrd\\topbar.jpg") !important;
}
/* stop refcontrol context menu item */
#refcontrol_options, #refcontrol_options_link, #refcontrol_options_image, #refcontrol_sep
{ display: none !important; }
/* remove the search button (magnifying glass) */
.search-go-button-stack { display: none !important; }
/* remove the search engine drop-down button as this line */
/* .searchbar-engine-button { display: none !important } */
/* end of file userChrome.css */
但是“min-width: 30ex; /* <1440 pixels screens */”这行要根据实际分辨率,参考注释内容,进行修改。
现在你就可以在两侧显示你的标签栏,可以允许建立40和或者更多的标签,充分利用宽屏的空间!

添加了侧边栏的Firefox浏览器
要在Firefox 2.0中实现上图效果,你需要做如下两步:
1. 安装Tab Mix Plus并设置;
2. 创建修改 userChrome.css文件。
下面进行详细讲解。
一、Tab Mix Plus扩展
首先需要安装Tab Mix Plus扩展。
在“工具——Tab Mix Plus选项”中,对其设置:

“外观——标签栏外观——标签栏位置”设置为“底部”。
“外观——标签栏外观”选中“内建的样式”。
“外观——标签栏外观”中,“当所有标签占用宽度超过标签栏时启动”,选择“自动滚动”。

“外观——标签页外观”中,关闭“标签页长度符合其内容”。
二、创建修改userChrome.css
userChrome.css的路径:
在Windows Vista/XP/2000中,路径通常为%AppData%\Mozilla\Firefox\Profiles\xxxxxxxx.default\, xxxxxxxx 是8个字符的任意组合。Windows XP/2000中只需浏览
C:\Documents and Settings\[User Name]\Application Data\Mozilla\Firefox\Profiles\ ,在Windows Vista中浏览 C:\users\[User Name]
\AppData\Roaming\Mozilla\Firefox\Profiles\。
在Windows 95/98/Me中,路径通常为 C:\WINDOWS\Application Data\Mozilla\Firefox\Profiles\xxxxxxxx.default\
在Linux中,路径通常为 ~/.mozilla/firefox/xxxxxxxx.default/
在Mac OS X中,路径通常为 ~/Library/Application Support/Firefox/Profiles/xxxxxxxx.default/
userChrome.css在默认情况下在不存在的,默认路径下有 userChrome-example.css ,你可以简单将其重命名为userChrome.css。
然后编辑该文件,复制如下内容,完全替代原内容:
/* beginning of file userChrome.css */
/*
* Do not remove the @namespace line -- it's required for correct functioning
*/
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
/* works in in FF2.0 */
#content > tabbox {
-moz-box-orient: horizontal;
}
.tabbrowser-strip {
-moz-box-orient: vertical;
/* note: you can set this to -moz-scrollbars-vertical instead,
but then the scrollbar will *always* be visible. this way
there is never a scrollbar, so it behaves like the tab bar
normally does */
overflow: -moz-scrollbars-none;
}
.tabbrowser-tabs {
-moz-box-orient: horizontal;
/* min-width: 50ex; */ /* >1680 pixels screens */
/* min-width: 40ex; /* =1680,1600 pixels screens */
/* min-width: 35ex; */ /* =1440 pixels screens */
min-width: 30ex; /* <1440 pixels screens */
/* min-width: 20ex; */ /* 1280 pixels screens */
/* min-width: 17ex; */ /* this is almost the minimum to go down to on small screens */
-moz-box-align: start;
}
/*> stack > vbox > hbox*/
.tabbrowser-tabs > stack > vbox > hbox > hbox {
-moz-box-orient: vertical;
-moz-box-align: stretch;
}
.tabbrowser-tabs > stack > vbox > hbox > hbox > tab {
-moz-box-align: start;
-moz-box-orient: horizontal;
}
/* to put the tabs on the right un-comment this line (not needed if using Tab Mix Plus)
#content > tabbox {-moz-box-direction: reverse;} */
/***** Tabbar *****/
/* Background for tabbrowser strip */
tabs.tabbrowser-tabs {
background-color: none !important;
background: url("bkgrd\\topbar.jpg") !important;
}
/* stop refcontrol context menu item */
#refcontrol_options, #refcontrol_options_link, #refcontrol_options_image, #refcontrol_sep
{ display: none !important; }
/* remove the search button (magnifying glass) */
.search-go-button-stack { display: none !important; }
/* remove the search engine drop-down button as this line */
/* .searchbar-engine-button { display: none !important } */
/* end of file userChrome.css */
但是“min-width: 30ex; /* <1440 pixels screens */”这行要根据实际分辨率,参考注释内容,进行修改。
现在你就可以在两侧显示你的标签栏,可以允许建立40和或者更多的标签,充分利用宽屏的空间!
