查看完整版本: 添加侧边 宽屏下Firefox的使用技巧

想想点点 2007-6-23 07:14

添加侧边 宽屏下Firefox的使用技巧

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

[9WL(S,\?R/? \ @T
$r6J5Ib3sP 4`_.h[F*_Z~

_"lb @I    
vs+m1Zq5Z
|4z:\:A5D g:A;J         mk q$p-Fl+hu

4e"qXI3~B(i             ~Au9g-f0W
[img]http://img.skycn.com/articleimg/20070523-17.png[/img]
~*ke$okp1J %rT%B$s#WK `@?iP'F$a

v;IBy1b4J WTY         #F|bw6K7h Ka_

n ]3z.l)YCe&a%|         
(}"pN%f2Hv #Gi k2D&kDw z v] @d
            添加了侧边栏的Firefox浏览器 （点击看大图）
M"m} fny t
1Q:V-Y8A;E$DW H         0K Ga"] A
;bGYH@3A)vU.Z
   
FlN"L:`/UE gK'YR$Wv7{
$K"A8k:r&oZ-KU

t:W.b8Vh Wv   x_Y2F;~o

p3M/qYF Z:@ 要在Firefox 2.0中实现上图效果，你需要做如下两步：  'ucT6Rkr

5W9tVw+u^e5Q` 1. 安装Tab Mix Plus并设置； J+D!k8mJ+F;N
pItS6m-ZH
2. 创建修改 userChrome.css文件。  
-{#e8Ht[6Fa
$q+Of?_+eWn 下面进行详细讲解。   X7vUZI

9s#Bv;P j ViZ 一、Tab Mix Plus扩展  JW*n \\8|

Ne3_Y1f:R5eR 首先需要安装Tab Mix Plus扩展。  
-ieb#W M a c(Vb2R'ip
在工具Tab Mix Plus选项中，对其设置:  ~5c'kq,v-V S(H s"T3@

$y*za"R*Z VA!?
ZR/m!Jd'qq7w4A
(yAR,~RhH i5eYF4f;i8vv1W
3u+q-a3J(A
   
|}y+z7]d;Y ;@hSL rL KeQ
        ]9N7f8S`,\i&Z8}
[om*Ph H&W3[;jJ)R
            ,|1}2H7MY9Z
[img]http://img.skycn.com/articleimg/20070523-1.jpg[/img]/~u%Mek ID
5|:]s0O*L

^ eA7?Y+`         MP{ KuX
WCWKVN
         L'~:c;n\

R ga:_/nY             外观设置
2l0Q%nf[b-w
6Xxu W4{,p!Ch8x         
)tmf r p)G[7l
1V ^/r/H:h:l@5q    
tY}+y"D.h _C1oL8gH)j&h*h [.[

M~GgB H"}9j.X#b(Y w^j9g
  0|~O2s;@ }.y1o
,c'T p#R5X
外观标签栏外观标签栏位置设置为底部。
4P+xYONWk:o }{} JJ`
外观标签栏外观选中内建的样式。
T7uHPJUwX
(Ac:CU4I.q^(gvP#{ 外观标签栏外观中，当所有标签占用宽度超过标签栏时启动，选择自动滚动。  
.S#F:zx[+O KM"QpB3J7KLQ

{ i/LsL1R 2e-^*f8i CQ"Bk

^-["A+\;NRV#d`4V 5D"L9d5x:a:X`
    SV;fuR'S5{
o!L [1t{/ED O-x&S ~
        
$M ho\ s|'\$d`@I
.s IO;oO             
,lk.s"h}y5sq6R [img]http://img.skycn.com/articleimg/20070523-2.jpg[/img] J+be4\.[D9WP*eX

m7L5D;I+Q$r)q %h@S)hv'n n'I+i?)I
        
#]7[ JT#[1~7d Gz6\
J|Wc,C x     .{/e rSsPAP

#[TNPRY n6rm &\I9z:qj)h|Qo
4V J+w^HgPz#`
  
*z1U&[n;y%lq$T `w$w'V7]!P:Iv8Q o
外观标签页外观中，关闭标签页长度符合其内容。  
&@9DG ^aa O2Q;|-o
d1jJ ~hjQ7e 二、创建修改userChrome.css  
"iA&A%@@1l O LH9CMQ
userChrome.css的路径：  ^aI` ?{

e?f#SbD!Sd#Q0S 在Windows Vista/XP/2000中，路径通常为%AppData%\Mozilla\Firefox\Profiles\xxxxxxxx.default\, xxxxxxxx 是8个字符的任意组合。Windows XP/2000中只需浏览   a.K9BAi
-W SX0I2zz{
C:\Documents and Settings\[User Name]\Application Data\Mozilla\Firefox\Profiles\ ，在Windows Vista中浏览 C:\users\[User Name]  
S$of(uYh
nEf)[DFX \AppData\Roaming\Mozilla\Firefox\Profiles\。  
,e%} PD&I6M:Nt,yr ;@5B6JW6I |b/`~
在Windows 95/98/Me中，路径通常为 C:\WINDOWS\Application Data\Mozilla\Firefox\Profiles\xxxxxxxx.default\   "KsX8w s1wjT

?U$O,Eg7v [8]M 在Linux中，路径通常为 "/.mozilla/firefox/xxxxxxxx.default/    d{4e'ez#RH]

([|kF:LL(C 在Mac OS X中，路径通常为 "/Library/Application Support/Firefox/Profiles/xxxxxxxx.default/   
0@p5t/A5yPA "O\S0G tG
userChrome.css在默认情况下在不存在的，默认路径下有 userChrome-example.css ，你可以简单将其重命名为userChrome.css。  
]&\&v"C;L)RW8o &K O-N'^t,M/e
然后编辑该文件，复制如下内容，完全替代原内容：  
)V`7`!Gz/}-g zsGL%e [

\)l5~)^1^ -?2H^iI h%p$A2l qk
7@~8_q-FT
,`X.u)\7J
    } S)P6o O+T

x$p.C9^;ly         
R C.rQDYY7_
4``Nc+\k.|"e"O1q             w3d,P@5hp.g
N)bYE4a.~4Z
            /* beginning of file userChrome.css */
4Yva![6i
A oBKxUw             /*@ G-vq9F.zz,L1oO.Ld
-l"ugL;g-wd
            * Do not remove the @namespace line -- it's required for correct functioning
W*} Z)b.wM a /@"~+B.bGH1i
            */
An:A4SU;Fw
)Zn7q \)|             @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); /* set default namespace to XUL */  7UE{h g`J
[3p!]i;R-s#j
            
9[/G]/LS.H}2c
;jvi`H:_6O             /* works in in FF2.0 */  
x E,E;u^(R(m6v:QC
+As)tK!G[             #content  tabbox {
ck7Gj q ?q{H;MU
th"iW6c+U+Q             -moz-box-orient: horizontal;
+pXy)B1w%~I^g}mT?4d \(N#?$hj![LUrL;TF
            }  B!V k F |*z$n9hR)@
i"E8SH U-g
            .tabbrowser-strip {
jp!c.A"O f7WB
-{Lz;V6n5jX             -moz-box-orient: vertical;
4I/n @+A2]d4[U6Kl
(J(i%xNt3z?}             /* note: you can set this to -moz-scrollbars-vertical instead,1t Q4l)V{
@E9]r9|R
            but then the scrollbar will *always* be visible. this way f%Hr0p,]

"P8B2rik&s?             there is never a scrollbar, so it behaves like the tab bar
(].Fmd0`-|y E3S4T *Gyaw&K3\.]'p-L.c7F
            normally does */$? mq9@1w

6|H{OE1TI             overflow: -moz-scrollbars-none;3m&},R#BS"b

im/j{u a             }  
/B$H6DV!A:@8rg8rj7g
O^VR$N HPr+QU             .tabbrowser-tabs {7~9NgB3W9R

l wo%hN5U%IX             -moz-box-orient: horizontal; ~p_ nd0k(L

G{$l W&v             /* min-width: 50ex; */ /* 1680 pixels screens */ypr8@5r9D-R
!X%w}'p6Ha
            /* min-width: 40ex; /* =1680,1600 pixels screens */
8`u+i?Z+Y2h
,ro?~|5~Vd9m             /* min-width: 35ex; */ /* =1440 pixels screens */
dJ"Ge6t!_0q 4PNC2ti
            min-width: 30ex; /* 1440 pixels screens */
9g(Zk;Gy)\ } WVz)r'W`/F(q
            /* min-width: 20ex; */ /* 1280 pixels screens */s.qm$O#NgN6Jy
$W}7\^8~Z
            /* min-width: 17ex; */ /* this is almost the minimum to go down to on small screens */
|7rJWF9HA i5Y&e0t
T e3fvh             -moz-box-align: start;(S1~DnL4Vbwv
K.v#Q%_U]M5@%~#\
            }  
0q/n mk/eVM+fB
,pT3?B:Z             
*IN2R&x ESX
yu^'@g H6V             /* stack  vbox  hbox*/
6HS3m`8w4f /qbi9g0T_2B|
            .tabbrowser-tabs  stack  vbox  hbox  hbox {/J0h!l^;Iey
z`@ ~/Pu-U
            -moz-box-orient: vertical;
2a0X)q0`,S|l
)Y o o%`*\Hi             -moz-box-align: stretch;.mp3Y Z G$Y"U_
F"q f(T E E[
            }  
n Ccya!\#B@
I yJrC             .tabbrowser-tabs  stack  vbox  hbox  hbox  tab {
z*e&q tQP7q,S [
@(z3j8u.Z1f m             -moz-box-align: start;
6mk2wnXUX ]b
o GNrxW             -moz-box-orient: horizontal;
s,~2[D4^
1e1^Df@Mr4q9\             }WfN)w[4^

0A@'J7Dl7F{             /* to put the tabs on the right un-comment this line (not needed if using Tab Mix Plus),]4N1sWfy Dj-fA ym

:?;lg^8{#i             #content  tabbox {-moz-box-direction: reverse;} */\@"M8B%@(J
/y [-S*?&~L
            /***** Tabbar *****/  
g+OY~{S x#?`
u&lHn2yU             /* Background for tabbrowser strip */F \;~g7js'tk y
#G4{fXZ[
            tabs.tabbrowser-tabs {2?)O,j7`Z3W

;?VB9E \KFaWX             background-color: none !important;0n xFsTyj!hhy
"?z\5d#?vi&`e6p
            background: url(bkgrd\\topbar.jpg) !important;
1B3N%@0j"E a/}-k~d&l/oY$d
            }8\:B1l2F"^:[&dE
@-]-F-S0rDu
            /* stop refcontrol context menu item */
L'F`:zK%F 7a T7B vf!p
            #refcontrol_options, #refcontrol_options_link, #refcontrol_options_image, #refcontrol_sep
~bJ(]^"o9\%G uJM6s)u7S+M a? @
            { display: none !important; }6|8FoapX/Sk
ae5@2x)c8|Uo7X
            /* remove the search button (magnifying glass) */
9t @#m2Dz7{o e1BLCeDds5V
            .search-go-button-stack { display: none !important; }
m!MA!C"TO&W
/t]q)_[-O             /* remove the search engine drop-down button as this line */,}'{$]YHIl`

2kA ~TCNI             /* .searchbar-engine-button { display: none !important } */  
`0Xw)~t"D
'q e!^*vp             /* end of file userChrome.css */   0ZD#_oL
$[wuG@_:b `+du
            ?/GC4Z!Vp
y X"_q Q,N
        
7u0RB.il[ 7Z4TKg&`-@ o#j
    K r1OR-^(Ja

{l r9Fz&T0ci
M+T{\"Tq2S\ M*Xn3F0Z Clvx
   pYj)^L+\Z3y _)Sfp
hPg)H0a
但是min-width: 30ex; /* 1440 pixels screens */这行要根据实际分辨率，参考注释内容，进行修改。  
IWf9JdIgw t%z} P6F.S
现在你就可以在两侧显示你的标签栏，可以允许建立40和或者更多的标签，充分利用宽屏的空间！
页: [1]
查看完整版本: 添加侧边 宽屏下Firefox的使用技巧