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

deeke

: [6 t3 b6 U  O- O
" `8 `$ z% ]; H, T5 B7 F7 i171010：更换图例一。稍微减少 词典名称 与 分割线 的距离（代码区 Line 17. 18.）。
1 s! _/ z% ]% \% R, F& g- Q2 G170928：更换图例一、二。修改一处 宽高比例（代码区 Line 30. ~ 33.）。
. q7 ^: W) U: I( h------------------------------------------

- q- G, T" x7 V7 G------------------------------------------
1 d: F! e- D% y7 f% P) O我的软件环境是：Win8.1 + GoldenDict_Qt5_x64_portable 。
; Z1 u* u# J' y: C, w8 f
! D; c. F/ P0 r/ m不给 mp3 加上 tag 就睡不着觉，不调整 GD 外观就不能查词典，这是“磨刀专误砍柴工”系列的第三集：
使词典名称条更紧凑，在缩放页面时它几乎不会错位。
! Q8 \) E0 B& y1 g0 G# q6 G5 ^
# }& a/ X9 [! M- T$ e  Y8 s1. 选择风格：灵格斯。
  C  J1 y' K7 G2. 隐藏 词典名称的蓝色背景、词典图标。
3. 隐藏 右侧展开、折叠的箭头图片。
4. 调整 尺寸、间距、边框、颜色。

, q5 Z" d* J/ B* L/ e3 m& [修改 GD 的配置文件：“ c:\...\GoldenDict\portable\article-style.css ” 。
1 ?9 e8 I4 z/ i" Q8 o4 F+ G& L; y8 u

1. /* 拉近 词典名称条 之间的距离。如果太近，就会重叠。 */
   ; ~- q9 _0 y5 F4 M
2. .gdarticle { margin-top: .3rem; margin-bottom: 0; }
   5 h+ c" Q" q9 y8 s" G5 t3 |
3. 
   " E  V- v' d8 }! F: H5 ~
4. /* 隐藏 词典名称 外部容器的蓝色背景和边框 */
   # `5 p: @  {( h$ S
5. .gddictname {
   
6.   font-size: .625rem;
   
7.   margin: -.0625rem 0;
   
8.   padding-left: 0;
   1 k! a% Z. h  @
9.   vertical-align: bottom;
   
10.   border-width: 0;
    + j1 F- ?6 G& i6 L& i
11.   background-color: transparent;
    
12. }
    0 j" r% L) }/ z* B# a
13. 
    
14. /* 加粗 词典名称 文字的下边框 */
    
15. .gddicttitle {
    1 M; b0 A: ~5 X
16.   position: relative;
    " v5 o( @# {" m3 n5 m& i
17.   top: .01rem;
    2 z, y9 Z- K. Z/ N% _1 c
18.   padding-bottom: .0625rem;
    
19.   color: gray;
    3 ^# g* `2 o8 O
20.   border-bottom: .23rem solid gray;
    9 c* A" d  z5 ~9 X) _( `7 n4 m
21. }
    3 u) Z) @2 r* `: A( ~/ A( B# Q$ k
22. 
    . D" @& W& d' U) }! P
23. /* 隐藏 词典图标 和 “来自于……” */
    
24. .gddicticon,.gdfromprefix { display: none; }
    
25. 
    
26. /* 隐藏 右侧箭头，调整尺寸、边框 */
    " I( A# u; `, D2 K# x
27. .gdcollapseicon,.gdexpandicon {
    & [+ y" F) B$ o) M0 l4 J6 N
28.   position: relative;
    ! H; [' z# w2 Z4 N
29.   top: .2745rem;
    " m+ l& \* O$ ~! Q1 {5 t3 }0 Y5 a
30.   /* w:h = 1:1 */
    ; n  ?. m- W6 T/ ]! W9 |: E
31.   width: .645rem;
    9 P6 v: B1 N  E6 {1 C" J1 Z9 H
32.   /* w:h = 2:1 */
    : t* H) c8 n* N* r9 }  \' \
33.   /* width: 1.45rem; */
    
34.   height: .475rem;
    
35.   border: .08rem solid gray;
      {" h1 S. `/ Z6 e8 w
36.   background-color: transparent;
    / F0 S5 h5 p: j+ X, x9 \% f+ K1 J
37.   background-image: none;
    8 q# _. k& w6 p- g
38. }
    
39. 
    
40. /* 展开、鼠标悬停的展开、折叠、鼠标悬停的折叠，共四种样式 */
    , `: G, H) R  D- Z- A1 T9 ^% Q* @# e
41. .gdexpandicon { background-color: gray; }
    
42. .gdexpandicon:hover { border-color: black; background-color: black; background-image: none; }
    ; z) I1 \1 R" I) j
43. .gdcollapseicon { border-bottom-width: .25rem; }
    - T# t& Z1 O9 d' D
44. .gdcollapseicon:hover { border-color: black; background-image: none; }
    ! S$ J0 P5 p! q  d. G; L
45. 
    
46. /* 分割线 */
    
47. .gddictnamebodyseparator { display: block; margin-bottom: -.0625rem; border-top: .08rem solid gray; }
    
48. 
    0 e' K2 e4 F8 P, h: M) P
49. /* 拉近 mdx 和 dsl 词典内容 与它们的 词典名称条 距离 */
    
50. .mdict,.dsl_article { margin-top: .625rem; }

复制代码

------------------------------------------
通过 qt-style.css 调整 软件界面文字大小

( H4 L& r+ f/ h在我的机器上 20px 比较合适（注意 qt-style.css 中不要用单位 rem ，没有效果）。

修改 GD 的配置文件：“ c:\...\GoldenDict\portable\qt-style.css ” 。
8 S* [$ Q0 o+ W) u3 k/ d

1. QToolTip, /* 按钮或链接的提示信息 */
   
2. ArticleView #searchText, /* 按 Ctrl+F 后的搜索框 */
   5 w; W/ {% I  @; V4 O7 i2 b/ u
3. MainStatusBar #text, /* 右下角的提示信息 */
   
4. ScanPopup #translateLine, /* 弹出窗口的搜索框 */
   ! {9 q& g. m4 O' [" W) C
5. MainWindow #translateLine, /* 主窗口的搜索框 */
   
6. MainWindow #wordList, /* 搜索框下方的单词列表 */
   
7. MainWindow #dictsPane #dictsList, /* 查到单词的词典列表 */
   
8. MainWindow #historyPane #historyList, /* 历史面板的单词列表 */
   5 A  |& p4 W8 G, _
9. MainWindow #favoritesPane #favoritesTree /* 收藏面板的单词列表 */
     W. t( C( G1 I! U8 k! P
10. { font-size: 20px; }

复制代码

6 ^. d7 H2 e" F' I! P+ f8 I------------------------------------------
) T; _+ \* H6 `/ t- R
------------------------------------------

最后再来个图，别忘了帮我评分呦~~~

独行者

HMPT 发表于 2017-9-25 14:38
) ^- s- u# y" p, m+ u论坛为了防止复制,而加上的随机字符, 好烦人啊

按F12，在CSS中加入

1. .jammer {
   
2.     display: none;
   % k; G( M  U5 r! B- y
3. }

复制代码

deeke

: B1 {$ z& C9 f/ \9 b  C
! _& S! }7 c( R1 l6 d/ I听说 评分 以后随机字符都不会消失 :p

HMPT

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

neikice

deeke 发表于 2017-9-25 15:04
. V+ k4 ^- ?4 C评分 以后随机字符就会消失，是真的。

居然还有这种操作

learnfun

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

henices

- ]: v* r8 ^* n( i/ @" u
效果非常不错, 感谢.
4 H( H$ x/ p0 y: S
, l- v$ T! [0 _1 \8 E+ B: `

======================
/ u' p0 ^, X3 W

arbzn

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

deeke

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

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

deeke

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

你的“朗文4”里，第二行 “7national se'curity”，那个 7 是因为用了特殊字体：Kingsoft Phonetic Plain，音标也是它。


6 s6 I, g- ~( `
9 |" ^7 s4 g7 N; n: Y

arbzn

0 o5 i7 p# S& E4 h' b8楼的问题如上图，stardict词库的逗号显示不对。另外，该词库引用的外部图片也没法显示。(bgl文件是内置的图片。)
以前都是用stardict词库的，一时无法割舍。。。。。

deeke

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

法鼓山做的 Stardict 格式的佛学词典
- ~/ X9 V/ ^3 D  t: l我在这下载了“丁福保佛學大辭典”，标点和图片显示都很正常。

arbzn

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

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

stcjap

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

helloit

网上找到的相关分享
作个留存，有时间再来研究~
2 `8 q- A+ w+ A+ c5 s: v3 h9 g: d
谢谢deeke大的分享！

jerrybag

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