Xiao Shan

[uc]sideBookmarkBar for firefox4 - 20110930更新

(69,196 views)

November 10, 2010

Tags: bookmarkbar, firefox4, sidebar, userChrome

大家现在一般都用宽频的显示器，屏幕两边的空间多，上下的空间少。
所以为了利用两边的空间，这个脚本：

书签栏挪到屏幕左侧，只显示书签图标。
书签下拉菜单按钮固定在这个侧栏的最底部。

看效果请点我
 下载请点我

辅助功能索引：

隐藏书签文字
修改书签文件夹图标
自动隐藏侧栏书签Bar
书签文件夹悬停自动打开
点击书签在新标签页打开
定制书签样式

更新：

———————————————————————————–
0.4.1 – 20110218

修复“点击书签文件夹时，文件夹内容在sidebar右侧展开”功能在使用“自动隐藏侧栏书签Bar”CSS时不生效的问题
修复在定制了toolbar后bookmarks-menu-button被自动从sidebar移除的问题

———————————————————————————-
0.4 – 20110217

点击书签文件夹时，文件夹内容在sidebar右侧展开（避免在下方展开时遮挡其他的书签） – 感谢Tshine的建议
修复在定制了toolbar后可能会导致脚本失效的bug

———————————————————————————-
0.3 – 20110124

书签文件夹增加tooltip显示功能，鼠标悬停时显示文件夹名称 – 感谢lianyi的建议

———————————————————————————————-
0.2 – 20101111

修复书签separator不显示的问题
拖拽时的位置指示器正常工作，指示器横向显示
脚本内直接包含了CSS

———————————————————————————–
0.1 – 20101110
0.1版里面不包含CSS代码，需要手动添加到userChrome.css文件中或者新建一个stylish的style

/* display bookmark icon only, hide text */
#personal-bookmarks .toolbarbutton-text {display: none !important;}
#personal-bookmarks .toolbarbutton-icon {display: -moz-box !important;}

/* bookmark separator */
#PlacesToolbarItems toolbarseparator {
    -moz-appearance:none !important;
    min-height: 1px !important;/*thickness*/
    max-height: 1px !important;
    background: gray !important;/*color*/
    margin:2px 2px 2px 0px!important;/*length*/
}

———————————————————————————————
辅助功能:
———————————————————————————————-

隐藏书签文字

#personal-bookmarks .toolbarbutton-text {display: none !important;}
#personal-bookmarks .toolbarbutton-icon {display: -moz-box !important;}

定制书签样式

用下面的CSS很方便定制书签的呈现样式

#PlacesToolbarItems > .bookmark-item {
    -moz-appearance: none !important;
    background: rgba(151,152,153,.05)
              -moz-linear-gradient(rgba(251,252,253,.95), rgba(246,247,248,.47) 49%,
                                   rgba(231,232,233,.45) 51%, rgba(225,226,229,.3)) !important;
    background-clip: padding-box !important;
    border-radius: 4px !important;
    border: 1px solid !important;
    border-color: rgba(0,0,0,.12) rgba(0,0,0,.19) rgba(0,0,0,.38) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset,
                0 0 0 2px rgba(255,255,255,.1) inset,
                0 1px 0 rgba(0,0,0,.15) !important;
    color: black !important;
    text-shadow: 0 0 2px white !important;

    padding-left: 5px !important;
    padding-right: 0px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;

    margin-left: 2px !important;
    margin-right: 2px !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}

#PlacesToolbarItems > .bookmark-item > .toolbarbutton-menu-dropmarker {
  -moz-border-start-style: none;
}

#PlacesToolbarItems > .bookmark-item[container] {
    /* 书签文件夹的背景色 */
    background-color: hsla(190,60%,70%,.5) !important;
}

/* 选中书签的样式 */
#PlacesToolbarItems > .bookmark-item:hover {
    background-color: hsla(190,60%,70%,.5) !important;
    border-color: hsla(190,50%,65%,.8) hsla(190,50%,50%,.8) hsla(190,50%,40%,.8) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset,
                      0 0 0 1.5px rgba(255,255,255,.1) inset,
                      0 1px 0 rgba(0,0,0,.1),
                      0 0 3.5px hsl(190,90%,80%) !important;
    -moz-transition: background-color .4s ease-in,
                           border-color .3s ease-in,
                           box-shadow .3s ease-in !important;
}

/* 定制书签分割器样式 */
#PlacesToolbarItems toolbarseparator {
    -moz-appearance:none !important;
    min-height: 1px !important;
    max-height: 1px !important;
    background: gray !important;
    margin:2px 2px 2px 0px!important;
}

———————————————————————————————–

修改书签文件夹图标

可以使用下面的CSS修改

.bookmark-item[container="true"][label="foldername"] .toolbarbutton-icon {
    list-style-image: url("gmail.ico") !important;
    -moz-image-region: auto !important;
}

foldername对应要修改的书签文件夹名称，gmail.ico是要替换成的新图标

推荐使用userChrome.css添加这个css，这样新图标文件放到chrome目录下即可
如果使用stylish，图标url需要使用绝对路径
图标支持ico和png两种格式
每一个需要改的文件夹都需要写一条这样的css样式
对于不带favicon的书签，也可以用这种办法添加。另外改书签图标可以考虑用Favicon Picker扩展，不知道对firefox4支持有没有问题。

———————————————————————————————-

点击书签在新标签页打开 – 20101231

建议配合GOLF-AT的让书签、历史、url、搜索在新的标签页打开脚本使用。

或者用下面这个脚本，只有“点击书签新开标签”功能，是在GOLF-AT脚本的基础上做了一点增强的，使得：点击的书签如果是bookmarklet，不会新开窗口
openBookmarkInNewTab.uc
———————————————————————————————-

自动打开书签文件夹 – 20101112

通过下面这个脚本，可以实现鼠标悬停书签文件夹时自动打开。
原作者：GOLF-AT
这个脚本可以使几乎所有的popup都可以在悬停时自动弹出，我修改了一下，使书签文件夹弹出popup时是靠右的，避免遮住纵向排列的其他书签
autoPopup.uc
———————————————————————————————-

自动隐藏 – 20101112

如果想隐藏侧栏书签toolbar，可以使用下面的CSS

#sideBookmarkBar {
    position: fixed !important;
    background-color: rgb(207, 219, 236) !important;
    background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgb(207,220,236)) !important;
    border-right: 1px solid rgba(0,0,0,.25) !important;
    border-bottom: 1px solid rgba(0,0,0,.25) !important;
    border-radius: 0 0 4px 0;
    padding: 0 !important;
    margin: 0 !important;
}

#PlacesToolbar {
    display: none;
}

#sideBookmarkBar:hover #PlacesToolbar {
    display: -moz-box;
}

#personal-bookmarks {
    min-height: 20px !important;
}

————————————————————————————————-
效果如图：

附件：
sideBookmarkBar_0.4.1.uc
sideBookmarkBar_0.4.uc
sideBookmarkBar_0.3.uc
sideBookmarkBar_0.2.uc
sideBookmarkBar.uc

—————————————————————————————————

文章更新历史

2011-02-11：添加一个定制书签样式的CSS
2010-11-10：初稿

(69,196 views)

Filed under:
firefox by admin

81 Responses to [uc]sideBookmarkBar for firefox4

yy says:

2011/06/05 at 11:43

您好，我使用了0.4.1之后，书签栏的背景色是透明的，显示为我墙纸的背景。这个有办法改变吗？我尝试把“定制书签样式”这一段复制进去，似乎没有作用。

Reply
- admin says:
  
  2011/06/07 at 21:29
  
  这个脚本没有设置书签栏背景透明相关的CSS，可能是你用了其他全局的透明样式包含了书签栏元素
  
  Reply
  - MAX says:
    
    2012/03/29 at 15:56
    
    我这变装上也是透明效果，FF的默认皮肤。透明的效果和空白的标签栏一样！
    我在想能不能给书签栏单独加个背景颜色的调整的代码；
V G says:

2011/08/17 at 17:15

升級到FF6後，sideBookmarkBar工作不正常，檢查了下代碼，發現用來給CSS編碼的是encodeURI方法，而不是encodeURIComponent，用到這個uc的自己改下就可以了，也請admin更新下腳本。很奇怪為何直到FF6才有問題，照道理之前的版本也會有問題。

Reply
- admin says:
  
  2011/09/30 at 16:01
  
  还真是，感谢分享。
  Firefox6得用encodeURIComponent来生成style的data URI。这个改变导致脚本内嵌的两段CSS没能生效。
  
  下次再升级脚本，就把内嵌的CSS都去掉，大家各自选择需要的CSS，或者放到userChome.css中，或者通过style类扩展加载。
  
  Reply
coolingx says:

2011/08/21 at 13:10

sideBookmarkBar想法很好，能否改为在3.6上用？
我在3.6上用时确实不正常。

Reply
- admin says:
  
  2011/09/30 at 15:39
  
  因为精力有限，不准备支持3.6
  
  Reply
coolingx says:

2011/08/26 at 11:51

您好，在FF4下试用，发现如下问题：
1、每次启动FF4后，侧栏书签显示的都是书签的第一级，而不是书签工具栏中的书签，要将书签工具栏或导航栏隐藏、显示一次才可以显示书签工具栏中的书签；
2、自动隐藏的css我觉得没有直接在左侧隐藏方便，希望能提供左侧隐藏的脚本，这样书签栏直接显示书签名称也无所谓了；
3、左下角“更多书签”的图标有些小了，如何改大点？
4、侧栏书签能否定义书签之间的纵向间距呢？

Reply
- admin says:
  
  2011/09/30 at 15:48
  
  先回答简单的吧
  4、侧栏书签能否定义书签之间的纵向间距呢？
  参考“辅助功能1定制书签样式”：
  其中margin-top和margin-bottom可以控制书签纵向间距
  #PlacesToolbarItems > .bookmark-item {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
  }
  
  Reply
- admin says:
  
  2011/09/30 at 16:31
  
  3、左下角“更多书签”的图标有些小了，如何改大点？
  可以用padding和margin控制调整：
  #bookmarks-menu-button {
  -moz-appearance: none !important;
  border-radius: 4px !important;
  border: 1px solid !important;
  border-color: rgba(0,0,0,.12) rgba(0,0,0,.19) rgba(0,0,0,.38) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset,
  0 0 0 2px rgba(255,255,255,.1) inset,
  0 1px 0 rgba(0,0,0,.15) !important;
  
  padding-left: 5px !important;
  padding-right: 0px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  
  margin-left: 2px !important;
  margin-right: 2px !important;
  margin-top: 2px !important;
  margin-bottom: 2px !important;
  }
  
  Reply
- admin says:
  
  2011/09/30 at 16:33
  
  2、自动隐藏的css我觉得没有直接在左侧隐藏方便，希望能提供左侧隐藏的脚本，这样书签栏直接显示书签名称也无所谓了；
  这个可以参考悬浮侧边栏的CSS
  
  Reply
- admin says:
  
  2011/09/30 at 16:33
  
  第一个问题不是很明白
  
  Reply
OO says:

2011/11/14 at 21:28

侧栏的整体宽度在哪里修改？因为有时候更新火狐版本后，侧栏会变得很宽。

Reply
- admin says:
  
  2011/12/13 at 17:11
  
  #sideBookmarkBar {
  width:40px !important;
  }
  
  Reply
过客 says:

2011/11/28 at 01:30

楼主另一篇文章链接似乎有问题
http://www.slimeden.com/2011/03/firefox/pentadactyl

Reply
- admin says:
  
  2011/12/13 at 17:12
  
  是什么问题？我点了好像没问题
  
  Reply
Yoha says:

2012/03/08 at 16:43

Hi~：）

我从mozest社区中一个链接点过来的。
把书签放在左侧侧边之后，标签栏上的确省了不少空间~
顺着这个方法，我想问下可不可以把扩展组件的图标也移动到左侧侧边栏处？
如果能的话，就太赞了。不过我不懂怎么弄…
请看下这张图。我截了浏览器顶部的部分。
[IMG]http://i72.photobucket.com/albums/i190/02735219/QQ20120308163638.jpg[/IMG]

Reply
w says:

2012/04/09 at 20:37

火狐11版，侧栏会变得很宽,书签文字不能隐藏，求修改

Reply
- Yoha says:
  
  2012/04/09 at 20:41
  
  楼上的，参看博主提供的辅助功能 “1.隐藏书签文字” 把这段代码放进去就可以了。
  
  Reply
  - w says:
    
    2012/04/09 at 21:01
    
    那两行代码在0.4.1里有，不起作用，试加也没用
- Yoha says:
  
  2012/04/09 at 21:08
  
  不会啊，我的也是0.4.1的。
  &lt
  /* hide bookmark text */
  #personal-bookmarks .toolbarbutton-text {display: none !important;}
  #personal-bookmarks .toolbarbutton-icon {display: -moz-box !important;}
  &gt
  
  Reply
  - w says:
    
    2012/04/09 at 21:22
    
    还是搞不定，难道冲突？再琢磨一下
- admin says:
  
  2012/04/11 at 16:01
  
  刚升级到最新版火狐11，书签文字可以隐藏。你是不是css写的不对
  
  Reply
林海聪 says:

2012/05/10 at 21:16

我是用火狐11的，发现装了你这个脚本确实很方便，不过装了这个脚本就无法使用那个定制功能（就是右键菜单里那个），而且当使用这个脚本的时候也无法编辑书签文件夹及其文件夹里的书签（就是当鼠标移动到文件夹自动弹出书签菜单的时候，我们右击某个书签弹出菜单我们选择属性，本来正常情况下，我们可以实现直接对其编辑，但用这书签侧边的脚本的时却无法对其编辑，包括删除或者新建文件夹操作均不可），不知道我讲得楼主能听清楚吗，楼主自己那边正常吗

Reply