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

deeke

7 O* `" {/ i) u; {3 |  ]" U% z& i: [
171010：更换图例一。稍微减少 词典名称 与 分割线 的距离（代码区 Line 17. 18.）。
170928：更换图例一、二。修改一处 宽高比例（代码区 Line 30. ~ 33.）。
------------------------------------------

------------------------------------------
- M, Q8 x! S; E- \, r; ~; M7 _( H我的软件环境是：Win8.1 + GoldenDict_Qt5_x64_portable 。

不给 mp3 加上 tag 就睡不着觉，不调整 GD 外观就不能查词典，这是“磨刀专误砍柴工”系列的第三集：
: p& ?, K) K* `; V& \& z使词典名称条更紧凑，在缩放页面时它几乎不会错位。
+ B0 X0 S5 L1 U+ m1 s% Z8 P
1. 选择风格：灵格斯。
; `* M5 L+ i; c" g; j& S+ l3 e2. 隐藏 词典名称的蓝色背景、词典图标。
; b! n# I% T, J1 W3. 隐藏 右侧展开、折叠的箭头图片。
+ {8 r9 _/ p9 Q4. 调整 尺寸、间距、边框、颜色。
4 ]1 S7 k. q+ N( s" \/ b
. G( w/ i6 h1 `- w. s6 p修改 GD 的配置文件：“ c:\...\GoldenDict\portable\article-style.css ” 。

1. /* 拉近 词典名称条 之间的距离。如果太近，就会重叠。 */
   
2. .gdarticle { margin-top: .3rem; margin-bottom: 0; }
   & z7 T7 E8 G% r! z
3. 
   " ?. Y# r5 u5 s9 D3 j, Y
4. /* 隐藏 词典名称 外部容器的蓝色背景和边框 */
   5 D7 i! r# L8 D% B& Z) D" a& c1 M
5. .gddictname {
   1 U* M1 L4 y% ^+ O3 _
6.   font-size: .625rem;
   * d7 ?) \3 A* R: m
7.   margin: -.0625rem 0;
   / C# ]* i7 l2 g* n8 a8 A$ g1 `
8.   padding-left: 0;
   , z3 R+ w( n8 d+ V3 T6 J# N# G
9.   vertical-align: bottom;
   
10.   border-width: 0;
    
11.   background-color: transparent;
    / }5 Z! u/ _2 S" S) g/ R$ o9 ]
12. }
    ' W6 K7 E% q  U: h# ]! @7 n
13. 
    0 }- l# j5 U: @! ^6 }* P4 W0 w2 ^
14. /* 加粗 词典名称 文字的下边框 */
    % w2 ~+ q0 k% x% J
15. .gddicttitle {
    " k6 \* Y3 [2 y$ x+ F0 i9 Z& J' ~
16.   position: relative;
    2 `# q- m& f0 a. O
17.   top: .01rem;
    
18.   padding-bottom: .0625rem;
    : [5 J* t" y+ U5 z! I5 |) n
19.   color: gray;
    
20.   border-bottom: .23rem solid gray;
    
21. }
    # a) [$ z6 p+ F/ L2 j0 b
22. 
    
23. /* 隐藏 词典图标 和 “来自于……” */
    
24. .gddicticon,.gdfromprefix { display: none; }
    
25. 
    8 n- C! g: M! [% z
26. /* 隐藏 右侧箭头，调整尺寸、边框 */
    0 u7 y4 f% l: J
27. .gdcollapseicon,.gdexpandicon {
    
28.   position: relative;
    
29.   top: .2745rem;
    - {2 y+ k. h2 Y/ e
30.   /* w:h = 1:1 */
    
31.   width: .645rem;
    0 \1 m# F$ R* @# N9 _0 H3 q. u0 @4 P
32.   /* w:h = 2:1 */
    4 t$ b6 g2 K4 w1 A$ {
33.   /* width: 1.45rem; */
    7 C& n! N, o) W( C. C7 ]( P% }
34.   height: .475rem;
    5 `/ R" c# O. p  |/ K5 D
35.   border: .08rem solid gray;
    9 ~( v* O& l1 R7 G
36.   background-color: transparent;
    6 a; i6 k: K9 \; o$ b; f' P: @( V
37.   background-image: none;
    1 a! L. ]* @& R: [1 h
38. }
    3 f. K) X$ @* n) U: p2 \
39. 
    ; S  l- c4 p0 j1 ?0 Y/ t8 g: ?2 W8 C* x
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; }
    0 h7 @! H# b- P& ^+ c
45. 
    - d. A: m, Y. F& z
46. /* 分割线 */
    8 C7 \' v* O, o9 ~, C
47. .gddictnamebodyseparator { display: block; margin-bottom: -.0625rem; border-top: .08rem solid gray; }
    & ~( q! R& j+ V- s' u$ O
48. 
    6 z' T' b2 h! [% E' O' {
49. /* 拉近 mdx 和 dsl 词典内容 与它们的 词典名称条 距离 */
    - G1 r5 ^2 {0 [7 O9 ?/ W, ^
50. .mdict,.dsl_article { margin-top: .625rem; }

复制代码

8 f' B4 E7 u( u3 T* C/ Z8 s% J* [0 D------------------------------------------
通过 qt-style.css 调整 软件界面文字大小

# \: m7 b/ S+ A在我的机器上 20px 比较合适（注意 qt-style.css 中不要用单位 rem ，没有效果）。

修改 GD 的配置文件：“ c:\...\GoldenDict\portable\qt-style.css ” 。

1. QToolTip, /* 按钮或链接的提示信息 */
   
2. ArticleView #searchText, /* 按 Ctrl+F 后的搜索框 */
   5 s- j5 w. Y' y% ]
3. MainStatusBar #text, /* 右下角的提示信息 */
   
4. ScanPopup #translateLine, /* 弹出窗口的搜索框 */
   
5. MainWindow #translateLine, /* 主窗口的搜索框 */
   1 ~, X' T' s/ A) |9 E: p# b1 S6 z
6. MainWindow #wordList, /* 搜索框下方的单词列表 */
   
7. MainWindow #dictsPane #dictsList, /* 查到单词的词典列表 */
   $ t' N# M, A. t9 J+ _6 O! O8 l+ P6 c
8. MainWindow #historyPane #historyList, /* 历史面板的单词列表 */
   
9. MainWindow #favoritesPane #favoritesTree /* 收藏面板的单词列表 */
   
10. { font-size: 20px; }

复制代码

3 Q! R! G; ^1 S1 |------------------------------------------
+ |" W) x) ^2 n* t- o( F! P: \
  ~# y4 A1 H. X" [+ c- k------------------------------------------
& f9 I2 w$ E  i9 v7 _
2 q1 W2 h' j4 q! s" s1 c4 k最后再来个图，别忘了帮我评分呦~~~

独行者

HMPT 发表于 2017-9-25 14:38
论坛为了防止复制,而加上的随机字符, 好烦人啊

7 x) ]6 q3 k7 u2 [0 ^按F12，在CSS中加入

1. .jammer {
   2 W% ?5 v+ ]5 e! k' t& i6 X7 {4 p
2.     display: none;
   
3. }

复制代码

deeke

: ?: X$ C) B# G: r1 A3 m! L( c. i/ y听说 评分 以后随机字符都不会消失 :p
' F/ g3 o0 A' H) D$ y" ^! I

HMPT

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

neikice

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

居然还有这种操作

learnfun

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

henices

# @6 L  z* `+ _. L' I0 G2 z) n. d$ ]
, w2 ~1 @5 }7 X效果非常不错, 感谢.
- J' o" U. ?! p  i  y% `- K
- n" @$ u7 d" K5 t- N3 @! s
9 k# `/ I& B: w$ J/ x0 W
$ A+ `6 Z' Z6 e! _& G======================

arbzn

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

deeke

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

' m/ S1 _4 u/ q( g' y! P汉语分号的 Unicode 编码是 FF1B、逗号是 FF0C，英文是 3B、2C，应该是不会混淆。

deeke

henices 发表于 2017-10-10 09:21
效果非常不错, 感谢.

: [8 L/ d8 \; y' d0 C5 Y, i
4 Z2 @$ |' f- \( ?$ U- K你的“朗文4”里，第二行 “7national se'curity”，那个 7 是因为用了特殊字体：Kingsoft Phonetic Plain，音标也是它。
: v( s, ~- T( U. u

7 ~. C, r" \, Z5 d
3 F( F7 o3 P1 [

arbzn

0 ]6 i9 C& k# O8 O" X1 ]
8楼的问题如上图，stardict词库的逗号显示不对。另外，该词库引用的外部图片也没法显示。(bgl文件是内置的图片。)
以前都是用stardict词库的，一时无法割舍。。。。。

deeke

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

  U9 n5 \  G+ X; n8 \法鼓山做的 Stardict 格式的佛学词典
( _2 a$ {# ]& Q% @我在这下载了“丁福保佛學大辭典”，标点和图片显示都很正常。
9 ]( q4 f4 S( l4 @3 T

arbzn

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

有的Mdict的词库在Mdict中能正常显示逗号，在Goldendict中就不行了。

stcjap

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

helloit

网上找到的相关分享
# }4 n4 E1 A$ o' l, s作个留存，有时间再来研究~

* H% Z& ~; z  T3 T4 P4 L/ M谢谢deeke大的分享！

jerrybag

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