所罗门
小狐狸
小狐狸
  • UID33218
  • 注册日期2010-06-30
  • 最后登录2010-08-04
  • 发帖数11
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
阅读:4030回复:11

新手修改了下FF外观,还有很多问题不懂,望不吝分享

楼主#
更多 发布于:2010-07-25 22:55
用惯opera了,发现折腾起firefox还算比较容易上手,但毕竟了解不深,有些问题还望指教。
    xp、4.0b3、Hide Caption Titlebar Plus+userChrome.css得图中效果[/list:u]
    我懂一点css,参考别人的做了些修改,先分享一下代码:
    /*菜单按钮样式*/
    #appmenu-button-container {
    	position: fixed !important;
    }
    #appmenu-button {
    	height: 22px !important;
    	padding-left: 5px !important;
    	padding-right: 1px !important;
    }
    /*标签栏背景*/
    #TabsToolbar {
    	padding-left:78px !important;
    	background-color: #889EAA !important;
    }
    /* 地址栏、搜索栏、页面查找栏 圆角*/
    #urlbar, .searchbar-textbox, .findbar-textbox {
    	-moz-appearance: none !important;
    	-moz-border-radius: 15px !important;
    	background-color: #889AA7 !important;
    	color:#F88C22!important;
    	font-size:14px!important;
    }
    /* 标签颜色、动态 */
    /*默认未选中标签宽度100px*/
    .tabbrowser-tab {
    	margin-top: -2px !important;
    	max-width:100px !important;
    } 
    
    /*选中标签长度、颜色、字体,hover事件样式  */
    .tabbrowser-tab[selected="true"] {
    	min-width: 200px !important;
    	font-weight:bold !important;
    	color: blue !important;
    }
    .tabbrowser-tab[selected="true"]:hover {
    	color:#F60!important;
    	text-shadow: 1px 1px #000 !important;
    }
    /* 未选中标签动态、样式 */
    .tabbrowser-tab:not([selected]) {
     background-color: #568585!important;
     color: #fff !important;
     -moz-opacity: .50 !important;
    }
    .tabbrowser-tab:not([selected]):hover {
     min-width: 300px !important;
     color: #FC0!important;
     font-weight: bold!important;
     text-shadow: 1px 1px #000 !important;
     -moz-opacity: 1 !important;
    }

    以下是问题:
      1.如图中问题,还是不要插什么的办法了吧,不喜欢
      2.新建标签总觉得弹出很生硬,有什么办法做出一个淡入淡出的效果?
      3.如何获取载入过程的事件,想给标签载入过程加个动态:D
      4.有没有人收集过一个完整的FF界面元素的名称列表?分享一下,先谢。比如我现在知道.tabbrowser-tab为标签,#urlbar为地址栏,但是还有很多元素我不知道名字,也不清楚之间的层级附属关系,无从下手,也许给我这样一个列表我就能自己解决很多问题了。
      5.config里很多不懂的,有没有一个中文的解释呢?[/list:u]
      呵呵,问题挺多,望不吝分享!
alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2024-05-02
  • 发帖数2766
  • 经验577枚
  • 威望1点
  • 贡献值128点
  • 好评度99点
  • 社区居民
  • 最爱沙发
  • 忠实会员
1楼#
发布于:2010-07-25 22:55
1.整个按钮是一张图片,要去掉正方形自己用photoshop处理一下按钮图片,按钮图片在安装文件夹下\Mozilla Firefox\chrome\classic.jar里,解压之后找找;图片处理好后用下面的css更换原按钮;
/*要更换的按钮的id,下面的id是刷新按钮的*/
#reload-button
{list-style-image: none !important;
-moz-appearance: none !important; 
/*url后面引号之间是新的按钮图片,本地或者base64格式的都可以*/
background:url("")no-repeat !important;
background-position:center !important;}

按钮背景色用background-color更改;
地址栏白色用css去掉:
#identity-box 
{background:transparent !important;}

滚动条样式css好像不能改;
4.firefox的界面元素id和结构可以用dom inspector扩展查看;
所罗门
小狐狸
小狐狸
  • UID33218
  • 注册日期2010-06-30
  • 最后登录2010-08-04
  • 发帖数11
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
2楼#
发布于:2010-07-25 22:55
alanfly
4.firefox的界面元素id和结构可以用dom inspector扩展查看;
回到原帖

哦,原来是这样!谢了
其实能找到id我的问题估计也就能解决一半了,不过扩展对4.0b3pre的兼容还是有问题,即使是设置了不检查版本,估计得晚些时候才能试
像问题2.3.有研究过麽?给点提示吧
 
alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2024-05-02
  • 发帖数2766
  • 经验577枚
  • 威望1点
  • 贡献值128点
  • 好评度99点
  • 社区居民
  • 最爱沙发
  • 忠实会员
3楼#
发布于:2010-07-25 22:55
所罗门
哦,原来是这样!谢了
其实能找到id我的问题估计也就能解决一半了,不过扩展对4.0b3pre的兼容还是有问题,即使是设置了不检查版本,估计得晚些时候才能试
像问题2.3.有研究过麽?给点提示吧
 
回到原帖

2,3.firefox4会加入这个效果,在论坛里看见过视频了。
所罗门
小狐狸
小狐狸
  • UID33218
  • 注册日期2010-06-30
  • 最后登录2010-08-04
  • 发帖数11
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
4楼#
发布于:2010-07-25 22:55

2,3.firefox4会加入这个效果,在论坛里看见过视频了。

原来是我out了,那就再等等吧,我觉得得用js来解决,但是我对js不熟。
剩下就只有config了,那一大对东西看起来还真头痛
alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2024-05-02
  • 发帖数2766
  • 经验577枚
  • 威望1点
  • 贡献值128点
  • 好评度99点
  • 社区居民
  • 最爱沙发
  • 忠实会员
5楼#
发布于:2010-07-25 22:55
2,3可以先用这个扩展:Liquid Tabs :: Add-ons for Firefox
about:config据我所知只有英文解释:About:config entries - MozillaZine Knowledge Base
所罗门
小狐狸
小狐狸
  • UID33218
  • 注册日期2010-06-30
  • 最后登录2010-08-04
  • 发帖数11
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
6楼#
发布于:2010-07-25 22:55
alanfly:2,3可以先用这个扩展:Liquid Tabs :: Add-ons for Firefox
about:config据我所知只有英文解释:About:config entries - MozillaZine Knowledge Base
回到原帖

要加扩展就先搁置下来了,我还是不喜欢加太多扩展,直接有代码的最好,哈哈。
  阴沟里死!
总比没有好,有空慢慢研究
zebraman
狐狸大王
狐狸大王
  • UID6956
  • 注册日期2005-06-25
  • 最后登录2017-11-15
  • 发帖数445
  • 经验35枚
  • 威望0点
  • 贡献值44点
  • 好评度0点
  • 社区居民
  • 忠实会员
7楼#
发布于:2010-07-25 22:55
1.整个按钮是一张图片,要去掉正方形自己用photoshop处理一下按钮图片


要去掉正方形用photoshop处理不了地,因为他不是图片。
alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2024-05-02
  • 发帖数2766
  • 经验577枚
  • 威望1点
  • 贡献值128点
  • 好评度99点
  • 社区居民
  • 最爱沙发
  • 忠实会员
8楼#
发布于:2010-07-25 22:55
zebraman

要去掉正方形用photoshop处理不了地,因为他不是图片。
回到原帖

的确不是图片,是css弄出的效果?
试了下用css没去掉正方形。
zebraman
狐狸大王
狐狸大王
  • UID6956
  • 注册日期2005-06-25
  • 最后登录2017-11-15
  • 发帖数445
  • 经验35枚
  • 威望0点
  • 贡献值44点
  • 好评度0点
  • 社区居民
  • 忠实会员
9楼#
发布于:2010-07-25 22:55
问题一:用CSS去掉工具栏按钮方形背景,然后重新收缩排布一下按钮之间的距离,代码如下:

.toolbarbutton-1{

-moz-appearance: toolbarbutton !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: none !important;
  color: transparent !important;
  padding: 0  !important;

  }


问题二:去掉地址栏快取白色背景,代码:

#identity-box {
background: none !important;
border: none !important;
-moz-box-shadow: none !important;
}

#page-proxy-stack {
 background: none  !important;
}


第三问题:滚动栏样式自己到这里搜搜。:lol:

第四个问题:隐藏标题栏后那三个控制按钮是带有Alpha通道的独立图片,所以图片的背景是你自定义(例如:tabsontop)后三个按钮图片所处位置的背景,从贴的图样上看就是标签栏的背景。你的标签栏背景是什么色调,这三个按钮的背景就是什么色调。如果三个按钮自定义在导航栏(tabsontop未勾选),那就是导航栏的背景色调。
alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2024-05-02
  • 发帖数2766
  • 经验577枚
  • 威望1点
  • 贡献值128点
  • 好评度99点
  • 社区居民
  • 最爱沙发
  • 忠实会员
10楼#
发布于:2010-07-25 22:55
谢谢楼上朋友指点。
zebraman
狐狸大王
狐狸大王
  • UID6956
  • 注册日期2005-06-25
  • 最后登录2017-11-15
  • 发帖数445
  • 经验35枚
  • 威望0点
  • 贡献值44点
  • 好评度0点
  • 社区居民
  • 忠实会员
11楼#
发布于:2010-07-25 22:55
alanfly:谢谢楼上朋友指点。回到原帖


你客气了,我还是个菜鸟,还需要学习。
游客

返回顶部