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

deeke

: H) R0 N% d' n9 m
; p# U9 k4 H2 E( P171010：更换图例一。稍微减少 词典名称 与 分割线 的距离（代码区 Line 17. 18.）。
, Z0 ^0 X6 `2 [* e% A4 f8 ^- y170928：更换图例一、二。修改一处 宽高比例（代码区 Line 30. ~ 33.）。
------------------------------------------
7 F/ r$ u& J$ G2 R; i) W) x+ n
------------------------------------------
我的软件环境是：Win8.1 + GoldenDict_Qt5_x64_portable 。

$ x0 p) x% D/ G+ I# E$ W' ?  S- Z不给 mp3 加上 tag 就睡不着觉，不调整 GD 外观就不能查词典，这是“磨刀专误砍柴工”系列的第三集：
3 a7 v! w- u7 \- i% e# z6 _7 a+ B使词典名称条更紧凑，在缩放页面时它几乎不会错位。

1. 选择风格：灵格斯。
2. 隐藏 词典名称的蓝色背景、词典图标。
3. 隐藏 右侧展开、折叠的箭头图片。
; N) e2 T. Q0 P7 z3 B4. 调整 尺寸、间距、边框、颜色。

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

1. /* 拉近 词典名称条 之间的距离。如果太近，就会重叠。 */
     H& T, l) e/ R6 [& u( R: d
2. .gdarticle { margin-top: .3rem; margin-bottom: 0; }
   4 o8 ~: a+ q) X5 _8 t( \
3. 
   
4. /* 隐藏 词典名称 外部容器的蓝色背景和边框 */
   
5. .gddictname {
     N6 O0 v4 z, }8 Y
6.   font-size: .625rem;
   0 J$ A. \( R$ i- i. c0 s! T& h* b- Q
7.   margin: -.0625rem 0;
   8 s# s. J' n- p0 l6 h
8.   padding-left: 0;
   
9.   vertical-align: bottom;
   3 p  ], V; `6 L/ Z( F
10.   border-width: 0;
    ; m( i: [: N0 a
11.   background-color: transparent;
    # P* g& J9 h, E+ G: N2 V  e( {
12. }
    
13. 
    
14. /* 加粗 词典名称 文字的下边框 */
    
15. .gddicttitle {
    3 D" |% k; r9 D. A2 K
16.   position: relative;
    
17.   top: .01rem;
    
18.   padding-bottom: .0625rem;
    ! A$ O7 G" Z* [
19.   color: gray;
    ) H8 Z% B& u9 c+ j
20.   border-bottom: .23rem solid gray;
    
21. }
      U( M$ H: C4 _, c1 p
22. 
    
23. /* 隐藏 词典图标 和 “来自于……” */
    
24. .gddicticon,.gdfromprefix { display: none; }
    # Y. x9 }. o9 H9 s, t
25. 
    ( |  p* w% q. A4 X' [
26. /* 隐藏 右侧箭头，调整尺寸、边框 */
    
27. .gdcollapseicon,.gdexpandicon {
    
28.   position: relative;
    
29.   top: .2745rem;
    2 f; Y9 `( X% n2 A5 r
30.   /* w:h = 1:1 */
    ) R6 y: T, b. X$ t; w* N
31.   width: .645rem;
    2 n3 e9 q9 K7 W. z3 n
32.   /* w:h = 2:1 */
    
33.   /* width: 1.45rem; */
    
34.   height: .475rem;
    + d; {/ R0 H! y8 R; S9 `2 K* j: i
35.   border: .08rem solid gray;
    
36.   background-color: transparent;
    
37.   background-image: none;
    9 D# h0 G6 ^3 C
38. }
    # K  `9 c* T- {, y) b6 v
39. 
    ; L6 U3 D: @$ G# _* l+ ^
40. /* 展开、鼠标悬停的展开、折叠、鼠标悬停的折叠，共四种样式 */
    1 p. v" n! b3 P
41. .gdexpandicon { background-color: gray; }
    . |5 x" a4 c( d
42. .gdexpandicon:hover { border-color: black; background-color: black; background-image: none; }
    , e* b. B- a/ n  }0 S
43. .gdcollapseicon { border-bottom-width: .25rem; }
    8 X- S7 v2 m$ K0 `' H" L% w
44. .gdcollapseicon:hover { border-color: black; background-image: none; }
    2 [8 {& Z2 k8 H( w
45. 
    + Q  K. {! Q+ P8 a- S+ N
46. /* 分割线 */
    - m  M% E$ W. ~8 r+ @
47. .gddictnamebodyseparator { display: block; margin-bottom: -.0625rem; border-top: .08rem solid gray; }
    5 e8 h+ Q7 J0 u' z: B* V" ^
48. 
    
49. /* 拉近 mdx 和 dsl 词典内容 与它们的 词典名称条 距离 */
    
50. .mdict,.dsl_article { margin-top: .625rem; }

复制代码

8 D5 Z) V1 ~- v. q' n------------------------------------------
, ]  L8 {" i) Q* l9 g6 u通过 qt-style.css 调整 软件界面文字大小

在我的机器上 20px 比较合适（注意 qt-style.css 中不要用单位 rem ，没有效果）。
/ p. }3 u# [" C
修改 GD 的配置文件：“ c:\...\GoldenDict\portable\qt-style.css ” 。

1. QToolTip, /* 按钮或链接的提示信息 */
   
2. ArticleView #searchText, /* 按 Ctrl+F 后的搜索框 */
   
3. MainStatusBar #text, /* 右下角的提示信息 */
   $ N6 X7 u3 b7 ^* k( P- R
4. ScanPopup #translateLine, /* 弹出窗口的搜索框 */
   
5. MainWindow #translateLine, /* 主窗口的搜索框 */
   
6. MainWindow #wordList, /* 搜索框下方的单词列表 */
   
7. MainWindow #dictsPane #dictsList, /* 查到单词的词典列表 */
   
8. MainWindow #historyPane #historyList, /* 历史面板的单词列表 */
   
9. MainWindow #favoritesPane #favoritesTree /* 收藏面板的单词列表 */
   / o/ e5 B; p: A" y
10. { font-size: 20px; }

复制代码

------------------------------------------
8 M( E$ F& M) \$ s" e
------------------------------------------
9 x% S+ m4 e6 T8 o3 b: x
最后再来个图，别忘了帮我评分呦~~~

独行者

HMPT 发表于 2017-9-25 14:38
# P% j0 Z4 Q- [/ t论坛为了防止复制,而加上的随机字符, 好烦人啊

0 ^8 A$ y0 E8 s' x! Y按F12，在CSS中加入

1. .jammer {
   
2.     display: none;
   2 T- g* a6 @4 q- }7 X+ Y
3. }

复制代码

deeke

6 f* u* }6 t5 ^( r! Q2 [
, g" q) |" N' V听说 评分 以后随机字符都不会消失 :p

HMPT

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

neikice

deeke 发表于 2017-9-25 15:04
7 V6 Q* o- L0 i* q5 D) S* N评分 以后随机字符就会消失，是真的。

4 j6 \2 U2 n( m: m居然还有这种操作

learnfun

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

henices

! q2 A3 ^' ?* b: N) a# U
效果非常不错, 感谢.
; r- k7 h* O4 l/ T+ e7 P

/ C# _# Q; d: P
& |0 y2 T( o3 Z9 Z  u4 J8 _======================
: _6 y# }% }6 d; ?9 I& }% U9 S

arbzn

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

deeke

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

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

deeke

henices 发表于 2017-10-10 09:21
3 q3 K1 e7 ^- n3 x1 z效果非常不错, 感谢.

& b! |2 {$ ^! k9 Z6 K
( Q% \6 k1 J# Q! ?+ j你的“朗文4”里，第二行 “7national se'curity”，那个 7 是因为用了特殊字体：Kingsoft Phonetic Plain，音标也是它。
$ f2 @1 l) t: }; G9 ~

% I. t+ o6 D3 [( G
) ?: \$ T! v" g: K) O; B: H3 x& p  ]. T

arbzn

! v9 R; C& E3 y* C2 q$ B
8楼的问题如上图，stardict词库的逗号显示不对。另外，该词库引用的外部图片也没法显示。(bgl文件是内置的图片。)
以前都是用stardict词库的，一时无法割舍。。。。。

deeke

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

+ d  y; L& x# f) @8 _- p# W5 w
法鼓山做的 Stardict 格式的佛学词典
' ^* |; g$ s& M' u2 C6 L: L* _我在这下载了“丁福保佛學大辭典”，标点和图片显示都很正常。

arbzn

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

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

stcjap

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

helloit

网上找到的相关分享
/ s! S2 R7 ?$ t( h作个留存，有时间再来研究~
( E  `- |" J- S) A* i$ l
2 @. I8 w* ~8 B! t6 f2 ~4 ?谢谢deeke大的分享！

jerrybag

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