[3] 通过 article-style.css 调整 词典名称条

deeke

' B5 A7 s+ `! G, @' p
171010：更换图例一。稍微减少 词典名称 与 分割线 的距离（代码区 Line 17. 18.）。
5 T7 K9 N6 L- N170928：更换图例一、二。修改一处 宽高比例（代码区 Line 30. ~ 33.）。
( J1 a6 j! I& M3 [: R------------------------------------------
0 a& w( n% i. D, O" e7 T$ J
( J; \1 _  G8 _------------------------------------------
, R4 l3 T+ S, e6 x6 g我的软件环境是：Win8.1 + GoldenDict_Qt5_x64_portable 。

1 w, G' q- e; x8 S+ r/ @不给 mp3 加上 tag 就睡不着觉，不调整 GD 外观就不能查词典，这是“磨刀专误砍柴工”系列的第三集：
使词典名称条更紧凑，在缩放页面时它几乎不会错位。

. M. Z. k* b& P. }4 Z1. 选择风格：灵格斯。
/ v. b9 }$ z# _$ C# F# {6 j( p/ H2. 隐藏 词典名称的蓝色背景、词典图标。
3. 隐藏 右侧展开、折叠的箭头图片。
8 ^' R# x( T# t3 G4. 调整 尺寸、间距、边框、颜色。
7 j. O0 c. g, d) H
4 @: L% j: `! e$ Z* Y修改 GD 的配置文件：“ c:\...\GoldenDict\portable\article-style.css ” 。
2 w% @0 v: q( j" q' Q! M9 u

1. /* 拉近 词典名称条 之间的距离。如果太近，就会重叠。 */
   8 _% A$ J$ h3 ~2 i; K5 b- U$ C( w
2. .gdarticle { margin-top: .3rem; margin-bottom: 0; }
   % Z0 E' @3 n' D' J2 e5 k& L4 K7 C
3. 
   
4. /* 隐藏 词典名称 外部容器的蓝色背景和边框 */
   
5. .gddictname {
   
6.   font-size: .625rem;
   
7.   margin: -.0625rem 0;
   ! h8 P3 U# }8 Q. \0 T2 v+ Q5 H/ u
8.   padding-left: 0;
   
9.   vertical-align: bottom;
   
10.   border-width: 0;
    * ?# `+ v9 D( M% Y  z5 y, x
11.   background-color: transparent;
    
12. }
    ; u. k7 X; z" p7 u
13. 
    $ T+ W$ ~: L: Q& D# Q1 O8 }4 ?# d9 G2 n
14. /* 加粗 词典名称 文字的下边框 */
    1 [3 v: V6 a( q+ m
15. .gddicttitle {
    
16.   position: relative;
    5 E4 a! P; @, _! X8 i0 q( Z% c: S
17.   top: .01rem;
    
18.   padding-bottom: .0625rem;
    : |" t: y6 ~- Q2 X
19.   color: gray;
    
20.   border-bottom: .23rem solid gray;
    
21. }
    - @+ a3 P8 B" \- `; c
22. 
    $ d3 @1 T' D! ~0 L4 T. D' f. |
23. /* 隐藏 词典图标 和 “来自于……” */
    
24. .gddicticon,.gdfromprefix { display: none; }
    & W2 L  F% @9 x) K
25. 
    . F, i8 D: C; w4 ~
26. /* 隐藏 右侧箭头，调整尺寸、边框 */
    
27. .gdcollapseicon,.gdexpandicon {
    
28.   position: relative;
    
29.   top: .2745rem;
    
30.   /* w:h = 1:1 */
    # K9 m" p' Z& J* C
31.   width: .645rem;
    : P% E9 r2 d* I- M5 G
32.   /* w:h = 2:1 */
    
33.   /* width: 1.45rem; */
    ( @  o! ?1 b$ F5 n% [
34.   height: .475rem;
    
35.   border: .08rem solid gray;
    - C7 b" f( [% v+ U8 q: J; }( C
36.   background-color: transparent;
    / P* e" E0 a7 q- P$ `* ?
37.   background-image: none;
    ( f3 F+ _& G' k
38. }
    
39. 
    
40. /* 展开、鼠标悬停的展开、折叠、鼠标悬停的折叠，共四种样式 */
    
41. .gdexpandicon { background-color: gray; }
    
42. .gdexpandicon:hover { border-color: black; background-color: black; background-image: none; }
    
43. .gdcollapseicon { border-bottom-width: .25rem; }
    
44. .gdcollapseicon:hover { border-color: black; background-image: none; }
    ) ]6 K  y1 M& G. t* Y: n
45. 
    $ l$ @5 }+ Z4 O- f. h  d" z* A4 q6 @
46. /* 分割线 */
    
47. .gddictnamebodyseparator { display: block; margin-bottom: -.0625rem; border-top: .08rem solid gray; }
    
48. 
    
49. /* 拉近 mdx 和 dsl 词典内容 与它们的 词典名称条 距离 */
    
50. .mdict,.dsl_article { margin-top: .625rem; }

复制代码

3 b' X. D+ H4 J7 w9 o7 B------------------------------------------
通过 qt-style.css 调整 软件界面文字大小

' J1 K; y" O" v. Q4 `在我的机器上 20px 比较合适（注意 qt-style.css 中不要用单位 rem ，没有效果）。

修改 GD 的配置文件：“ c:\...\GoldenDict\portable\qt-style.css ” 。
- U7 X6 R! v) g' r

1. QToolTip, /* 按钮或链接的提示信息 */
   
2. ArticleView #searchText, /* 按 Ctrl+F 后的搜索框 */
   ( d8 A/ J! E$ H) @
3. MainStatusBar #text, /* 右下角的提示信息 */
   
4. ScanPopup #translateLine, /* 弹出窗口的搜索框 */
   
5. MainWindow #translateLine, /* 主窗口的搜索框 */
   
6. MainWindow #wordList, /* 搜索框下方的单词列表 */
   . s& X5 [" s4 t  Q7 Q3 ~
7. MainWindow #dictsPane #dictsList, /* 查到单词的词典列表 */
   5 |9 _2 d& v% ~# [% C% x
8. MainWindow #historyPane #historyList, /* 历史面板的单词列表 */
     j; l: `: W: P$ V& }& I
9. MainWindow #favoritesPane #favoritesTree /* 收藏面板的单词列表 */
   ' c) e- W0 D4 k* m3 k* {: k
10. { font-size: 20px; }

复制代码

4 @0 N  M2 p! g! A* U------------------------------------------
( Q- R8 z4 _* P' j- g8 n
2 Y( Y' c/ ]4 y------------------------------------------
+ t- W8 _$ n" @+ Q. |6 R
3 A3 R$ x, A# f5 P" Y5 B最后再来个图，别忘了帮我评分呦~~~

独行者

HMPT 发表于 2017-9-25 14:38
: G  N! [2 ?6 @! l( y论坛为了防止复制,而加上的随机字符, 好烦人啊

按F12，在CSS中加入

1. .jammer {
   ( B# C( e3 `$ D/ U/ d0 H0 H
2.     display: none;
   
3. }

复制代码

deeke

! }: v4 ~! Q7 l+ \听说 评分 以后随机字符都不会消失 :p
& x# @  s+ a, e8 M9 ^' X

HMPT

论坛为了防止复制,而加上的随机字符, 好烦人啊

neikice

deeke 发表于 2017-9-25 15:04
评分 以后随机字符就会消失，是真的。

$ b1 @" E9 S3 x% q居然还有这种操作

learnfun

牛！这个是css能定义全局js文件吗？大大

henices

效果非常不错, 感谢.
  w) A3 Z; v7 B9 B& m% \


======================
# P- A- b- D: u7 n4 d

arbzn

求教樓主，有些詞典中漢語標點的分號和逗號(；，)在goldendict中會顯示爲英文的分號和逗號(;,)，這個有辦法控制嗎？

deeke

arbzn 发表于 2017-10-10 21:27
求教樓主，有些詞典中漢語標點的分號和逗號(；，)在goldendict中會顯示爲英文的分號和逗號(;,)，這個有辦法 ...

汉语分号的 Unicode 编码是 FF1B、逗号是 FF0C，英文是 3B、2C，应该是不会混淆。

deeke

henices 发表于 2017-10-10 09:21
9 ]7 v( ]2 t: ?6 v# H' j7 x效果非常不错, 感谢.

你的“朗文4”里，第二行 “7national se'curity”，那个 7 是因为用了特殊字体：Kingsoft Phonetic Plain，音标也是它。
+ g* m; i$ i# W  v! n6 y) B0 r
) k- w; L, r8 P! j3 R" k

1 q0 p  g% Y+ H, v7 W

arbzn

" {' g' Z2 F6 O, B5 j! u  \- b) \* }
8楼的问题如上图，stardict词库的逗号显示不对。另外，该词库引用的外部图片也没法显示。(bgl文件是内置的图片。)
以前都是用stardict词库的，一时无法割舍。。。。。

deeke

arbzn 发表于 2017-10-11 13:25
2 J5 k  o: y% V1 i8楼的问题如上图，stardict词库的逗号显示不对。另外，该词库引用的外部图片也没法显示。(bgl文件是内置 ...

4 i2 T$ K& F7 I4 @' l
法鼓山做的 Stardict 格式的佛学词典
3 \4 b4 j+ I* y+ j& x我在这下载了“丁福保佛學大辭典”，标点和图片显示都很正常。
9 I) p' U2 c) M4 N/ A+ m" |! c

arbzn

用stardict-editor导出这个**的词典为xml文件后，再用stardict-editor编译成stardict格式词典，就和我以前的一样了，在Goldendict中不能正常显示逗号(在stardict程序中也是一样显示不正常)。不只是上面那一个词条的问题。

" d/ R; w5 U) d1 c& D# ~  J8 m有的Mdict的词库在Mdict中能正常显示逗号，在Goldendict中就不行了。

stcjap

感謝分享，要慢慢學習才行！！

helloit

网上找到的相关分享
: o9 ^+ Y- J, W! ~9 }$ A作个留存，有时间再来研究~
2 |/ }) S8 K! n: d5 N4 i# x
! l, ^6 p% r- a: O4 ^7 G) h; [谢谢deeke大的分享！

jerrybag

感谢楼主分享，非常感谢。