首页>Firefox 专区>Firefox 主题外观>Firefox29及后续版本界面恢复旧样式，不用扩展
回复
« 返回列表
toughstrong
toughstrong
火狐狸
火狐狸
  • UID16742
  • 注册日期2007-01-19
  • 最后登录2015-03-18
  • 发帖数100
  • 经验29枚
  • 威望0点
  • 贡献值12点
  • 好评度1点
写私信
  • 社区居民
  • 忠实会员
阅读：5656回复：4

Firefox29及后续版本界面恢复旧样式，不用扩展

楼主#
更多 发布于：2014-09-05 20:05
其实道理和使用扩展一样，我只是把相关的CSS直接添加到了Firefox\myprofile\chrome\userChrome.css文件中，实现了：
1、方形标签
2、标签位于URL栏（Nav bar）下方
3、缩小后退、前进图标

好处是加快了启动，不会被Classic Theme Restorer拖慢。

实现的效果如图所示：

描述：UI

图片：firefox29.jpg

UI

其中功能1和2是从Classic Theme Restorer中提取出来的CSS代码。链接：https://addons.mozilla.org/en-US/firefox/addon/classicthemerestorer/
功能3是从Firefox贴吧中粘贴过来的。链接：http://tieba.baidu.com/p/3019477321

图中的界面配色位于我自己另外的代码中，还在改进。这3个CSS代码使用火狐默认的界面颜色。

相关CSS代码：
1、方形标签
/*方形标签样式开始*/
#TabsToolbar {
    background: transparent !important;
    margin-bottom: 0 !important;
}

#TabsToolbar .arrowscrollbox-scrollbox {
    padding: 0 !important;
}

#TabsToolbar .tabbrowser-tabs {
    min-height: 26px !important;
    margin-top: 1px !important;
}

#TabsToolbar .tabbrowser-tab {
    -moz-border-top-colors: none !important;
    -moz-border-left-colors: none !important;
    -moz-border-right-colors: none !important;
    -moz-border-bottom-colors: none !important;
    border-style: solid !important;
    border-color: rgba(0,0,0,.2) !important;
    border-width: 1px 1px 0 1px !important;
    text-shadow: 0 0 4px rgba(255,255,255,.75) !important;
    padding: 4px 0px !important;
    background: rgba(255,255,255,.27) !important;
    background-clip: padding-box !important;
    transition: all .1s !important;
    margin-left: 1px !important;
    font-size: 13px !important;
}

#TabsToolbar .tabs-newtab-button {
    -moz-border-top-colors: none !important;
    -moz-border-left-colors: none !important;
    -moz-border-right-colors: none !important;
    -moz-border-bottom-colors: none !important;
    border-style: solid !important;
    border-color: transparent !important;
    border-width: 1px 1px 0 1px !important;
    margin: 0 !important;
    width: auto !important;
    padding: 0 5px !important;
    text-shadow: 0 0 4px rgba(255,255,255,.75) !important;
    background: transparent !important;
    background-clip: padding-box !important;
    transition: all .1s !important;
    font-size: 13px !important;
}

#TabsToolbar .tabs-newtab-button:hover,
#TabsToolbar .tabbrowser-tab:hover:not([selected]) {
    border-color: rgba(0,0,0,.2) !important;
    background-color: rgba(255,255,255,.55) !important;
}

#TabsToolbar .tabbrowser-tab[first-tab][last-tab],
#TabsToolbar .tabbrowser-tab[last-visible-tab] {
    border-right-width: 1px !important;
}

#TabsToolbar .tabbrowser-tab[afterselected] {
   border-left-color: rgba(0,0,0,.25) !important;
}

#TabsToolbar .tabbrowser-tab[selected] {
    color: rgba(0,0,0,1) !important;
    background: #EAF2FA !important;
    background-clip: padding-box !important;
    border-color: rgba(0,0,0,.25) !important;
}

#TabsToolbar .tab-background {
    margin: 0 !important;
    background: transparent !important;
}

#TabsToolbar .tab-background-start,
#TabsToolbar .tab-background-end {
    display: none !important;
}

#TabsToolbar .tab-background-middle {
    margin: -4px -2px !important;
    background: transparent !important;
}

#TabsToolbar .tabbrowser-tab:after,
#TabsToolbar .tabbrowser-tab:before {
    display: none !important;
}
/*方形标签样式结束*/

2、标签栏位于下方
/*tabsontop_off2.css*/
/*tabs under nav bar*/
#print-preview-toolbar,
#printedit-toolbar,
#titlebar {
-moz-box-ordinal-group: 0 !important;
}

/* START: navigator-toolbox toolbars */
#navigator-toolbox #toolbar-menubar {
-moz-box-ordinal-group: 1 !important;
}
#navigator-toolbox #nav-bar {
-moz-box-ordinal-group: 2 !important;
}
#navigator-toolbox #ctraddon_extra-bar {
-moz-box-ordinal-group: 3 !important;
}
#navigator-toolbox #PersonalToolbar {
-moz-box-ordinal-group: 4 !important;
}
/* other toolbars like google, amazon etc.*/
#navigator-toolbox toolbar {
-moz-box-ordinal-group: 10 !important;
}
#navigator-toolbox #TabsToolbar {
-moz-box-ordinal-group: 100 !important;
}
/* END: navigator-toolbox toolbars */

/* fix for popup windows, which disable 'menubar' by force*/
window[chromehidden~="menubar"] #titlebar{
margin-bottom:-26px !important;
}

#TabsToolbar,
#TabsToolbar:not(:-moz-lwtheme),
#main-window[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"][inactive="true"]:not([customizing="true"]) ~ #TabsToolbar{
margin-top: 0px !important;
}

#main-window:-moz-lwtheme #navigator-toolbox::after {
background: none !important;
}


#main-window[tabsintitlebar] #TabsToolbar .titlebar-placeholder{
visibility: collapse !important;
}

#tabbrowser-tabs .tab-drop-indicator {
margin-bottom:0px !important;
}

/* Personas support */
#nav-bar:-moz-lwtheme {
background-image: none !important;
box-shadow: none !important;
border: none !important;
}
}
/*tabs on bottom ends*/

3、缩小后退、前进图标
/*前进后退按钮和地址栏分离*/
#TabsToolbar{
background-image: none !important;
}

#navigator-toolbox #nav-bar:not([tabsontop="false"]) .toolbarbutton-1 > .toolbarbutton-menubutton-button,
#navigator-toolbox #nav-bar:not([tabsontop="false"]) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
#navigator-toolbox #nav-bar:not([tabsontop="false"]) .toolbarbutton-1 {
padding: 0px 0px !important;
margin: 0.1px 0 0 0 !important;
}

#navigator-toolbox #nav-bar #back-button > .toolbarbutton-icon,
#navigator-toolbox #nav-bar #forward-button > .toolbarbutton-icon{
padding: 2px !important;
margin: 0px !important;
}

#urlbar-container:-moz-locale-dir(ltr) > #urlbar-wrapper > #urlbar,
#urlbar-container[forwarddisabled]:-moz-locale-dir(ltr) > #urlbar-wrapper > #urlbar {
margin-left: 3px !important;
transition: none !important;
transition-property: none !important;
transition-delay: 0s !important;
}

#nav-bar #back-button > .toolbarbutton-icon,
#nav-bar #forward-button > .toolbarbutton-icon{
-moz-appearance: none !important;
border: 0px solid transparent !important;
box-shadow: none !important;
background: none !important;
}

/* --- 固定前进后退按钮 --- */
#back-button,#forward-button {
-moz-appearance: none !important;
border: 0px solid rgba(165,175,185,0.8)!important;
min-height: 24px !important;
max-height: 24px !important;
min-width: 26px !important;
max-width: 26px !important;
margin-bottom: 2px !important;
margin-top: 2px !important;}

#back-button {
border-radius: 0px;
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
margin-left: 2px !important;
margin-right: 3px !important;}

#forward-button {
border-radius: 0px;
background-color: #DDDDDD !important;
margin-left: 10px !important;
margin-right: 3px !important;}

#downloads-button:hover,#back-button:hover,#forward-button:hover {
background-image: -moz-linear-gradient(#ECF1FD,#E5EAF6,#D5D9E6) !important;}

#forward-button[disabled="true"] {
display: none !important;}

#back-button[disabled="true"]:hover {
background:white !important;}

#back-button{
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAASCAYAAAAzI3woAAACFElEQVRIie2VS2sTURzFD0nQrlITfM1kXpnJDCVNIhm6USQqNC4Eg4KIUQNKaQNqfGyUkrGd1rwKlkLtKyL4GeKAnyRZpLgpQr7AfIC/i44SmhjTTN3lwNnNOfd37/zvDDDWWP9XPgD3AHx0W3SO5b9eDElPgOu+UTsmARQArGiaVnMLNHP5ap0VIzsMHzb8fn/wuHkFwHsAbwEYhULBcAv0brFY5kR1U5Sj6yFe3mBZaWrYbArAKoA3APIAio1GI+MWyLK+3+ZEdVOL6aasxtcYXt49z7I3B2VOAXgEwMThq1pw/BrAMoASgHKXKwBeHC25EOKLjCB+ZgSp3m0uLG/JWrymxWZMLaabihYrs+HI9llGyAM43UPj9XqfOou+7IIZ5OcAemaL4cJflOlE6XDhwZamEhVGkOqcIL3qAep0Og/T6XQNwJKz83+ekK7ra0d7bqRv7Q17QlxY3rpzP7t9cPDzcQ8QEU0QUdYwjIrH4/nggOQBGM1mc4WIzD6e69Mz1+/ZVqtV+jNDWrzGS+reslnaIKIsEU30AHUVpizLWg0EAlU4t4zjuLt/DQypRPLKg9+3TI1eqn+zrCoRXRsqTERKu91eTCaTNQBmMBhccgsUnU6us2JkJzU7u7u//6NIRMqxCoho0rbtfC6Xq+KEvtTzC88+2badJ6IzI5UQkY+IMkRkugVyZilDRCP/OsYCgF8sk+xOyXYK4QAAAABJRU5ErkJggg==")!important;
-moz-image-region: rect(1px, 18px, 17px, 0)!important;}

#forward-button{
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAASCAYAAAAzI3woAAACFElEQVRIie2VS2sTURzFD0nQrlITfM1kXpnJDCVNIhm6USQqNC4Eg4KIUQNKaQNqfGyUkrGd1rwKlkLtKyL4GeKAnyRZpLgpQr7AfIC/i44SmhjTTN3lwNnNOfd37/zvDDDWWP9XPgD3AHx0W3SO5b9eDElPgOu+UTsmARQArGiaVnMLNHP5ap0VIzsMHzb8fn/wuHkFwHsAbwEYhULBcAv0brFY5kR1U5Sj6yFe3mBZaWrYbArAKoA3APIAio1GI+MWyLK+3+ZEdVOL6aasxtcYXt49z7I3B2VOAXgEwMThq1pw/BrAMoASgHKXKwBeHC25EOKLjCB+ZgSp3m0uLG/JWrymxWZMLaabihYrs+HI9llGyAM43UPj9XqfOou+7IIZ5OcAemaL4cJflOlE6XDhwZamEhVGkOqcIL3qAep0Og/T6XQNwJKz83+ekK7ra0d7bqRv7Q17QlxY3rpzP7t9cPDzcQ8QEU0QUdYwjIrH4/nggOQBGM1mc4WIzD6e69Mz1+/ZVqtV+jNDWrzGS+reslnaIKIsEU30AHUVpizLWg0EAlU4t4zjuLt/DQypRPLKg9+3TI1eqn+zrCoRXRsqTERKu91eTCaTNQBmMBhccgsUnU6us2JkJzU7u7u//6NIRMqxCoho0rbtfC6Xq+KEvtTzC88+2badJ6IzI5UQkY+IMkRkugVyZilDRCP/OsYCgF8sk+xOyXYK4QAAAABJRU5ErkJggg==")!important;
-moz-image-region: rect(1px, 36px, 17px, 18px)!important;}

/*==去除前进后退按钮圆圈==*/
#nav-bar #back-button > .toolbarbutton-icon,
#nav-bar #forward-button > .toolbarbutton-icon{
-moz-appearance: none !important;
border: 0px solid transparent !important;
box-shadow: none !important;
background: none !important;
}

/* urlbar border tweaks */
#urlbar {
border: 1px solid ThreeDShadow !important;
}

@media (-moz-windows-default-theme) {
#urlbar {
border-color: rgba(0,0,0,.22) !important;}
}

#urlbar:-moz-lwtheme {
border-color: rgba(0,0,0,.32) !important;
}

#nav-bar #ctr_appbutton > .toolbarbutton-icon {
padding-left: 0px !important;
padding-right: 0px !important;
margin-left: 0px !important;
margin-right: 0px !important;
}

#ctr_puib_separator{
margin-top: 2px !important;
margin-bottom: 2px !important;
}
/*前进后退按钮和地址栏分离结束*/
喜欢1

最新喜欢：

cdhua2010cdhua2...
回复
文科
文科
千年狐狸
千年狐狸
  • UID39959
  • 注册日期2013-10-17
  • 最后登录2019-07-27
  • 发帖数2069
  • 经验1328枚
  • 威望4点
  • 贡献值340点
  • 好评度256点
写私信
  • 最爱沙发
  • 社区居民
  • 忠实会员
1楼#
发布于：2014-09-05 21:06
Classic Theme Restorer的功能之多远不是一个css能够实现的，不过要求简单css够用了
回复(0) 喜欢(0)
Atester
Atester
狐狸大王
狐狸大王
  • UID45325
  • 注册日期2014-04-03
  • 最后登录2016-09-14
  • 发帖数391
  • 经验358枚
  • 威望0点
  • 贡献值56点
  • 好评度23点
写私信
  • 社区居民
  • 忠实会员
2楼#
发布于：2014-09-06 12:09
我试过用css把标签改成原来的样子，就是颜色总调不好，感觉缺乏梯度，再就是效果总是平板的感觉（还是和颜色有关），第三点是总觉得标签下方有一条白线，强迫症表示不能忍
Doing good is all our mission!
回复(0) 喜欢(0)
pcxfirefox
pcxfirefox
千年狐狸
千年狐狸
  • UID39042
  • 注册日期2012-06-22
  • 最后登录2018-01-15
  • 发帖数2539
  • 经验1263枚
  • 威望2点
  • 贡献值242点
  • 好评度133点
写私信
  • 最爱沙发
  • 忠实会员
  • 社区居民
3楼#
发布于：2014-09-06 15:48
好厉害
附加组件栏也有了？
http://pcxfirefox.wordpress.com/
回复(0) 喜欢(0)
hongtao
hongtao
小狐狸
小狐狸
  • UID2398
  • 注册日期2005-01-21
  • 最后登录2020-03-28
  • 发帖数12
  • 经验12枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
写私信
  • 社区居民
4楼#
发布于：2014-11-19 10:31
求教, 怎么能把那个重新载入也挪到地址栏外面啊?
回复(0) 喜欢(0)
游客

关于FirefoxMozilla 技术支持谋智中国手机版(Beta)了解 Mozilla

返回顶部