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

deeke

* \/ [: ?# }/ o1 ~& m" R  h3 N9 F171010：更换图例一。稍微减少 词典名称 与 分割线 的距离（代码区 Line 17. 18.）。
170928：更换图例一、二。修改一处 宽高比例（代码区 Line 30. ~ 33.）。
' M# `3 L% {* F- B------------------------------------------

# `6 t. I& j8 d( \$ u------------------------------------------
' X: s2 G: X5 t7 p! X& L6 Y我的软件环境是：Win8.1 + GoldenDict_Qt5_x64_portable 。
% t5 G. m( r+ ?
不给 mp3 加上 tag 就睡不着觉，不调整 GD 外观就不能查词典，这是“磨刀专误砍柴工”系列的第三集：
/ F* P% v# v* Y- K  n! |使词典名称条更紧凑，在缩放页面时它几乎不会错位。

1. 选择风格：灵格斯。
2. 隐藏 词典名称的蓝色背景、词典图标。
1 |2 w0 V  X5 ^1 ~- k. C+ b3. 隐藏 右侧展开、折叠的箭头图片。
4. 调整 尺寸、间距、边框、颜色。

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

1. /* 拉近 词典名称条 之间的距离。如果太近，就会重叠。 */
   % B9 S5 f6 P  A) b4 C/ J$ q& s
2. .gdarticle { margin-top: .3rem; margin-bottom: 0; }
   
3. 
   
4. /* 隐藏 词典名称 外部容器的蓝色背景和边框 */
   
5. .gddictname {
   ( A  I" {/ ^# J1 k2 U
6.   font-size: .625rem;
   
7.   margin: -.0625rem 0;
   
8.   padding-left: 0;
   / d  y3 b0 U5 l/ V- |
9.   vertical-align: bottom;
   ) k4 R1 E& k4 l( A
10.   border-width: 0;
    8 ]3 Q$ k- S' I+ M. k* e
11.   background-color: transparent;
    $ q1 f8 ~  M& g8 x- A
12. }
    & \% U* l' o* x' E& z
13. 
    
14. /* 加粗 词典名称 文字的下边框 */
    6 T. _4 i7 Y$ P  t
15. .gddicttitle {
    + |3 _& u6 H, e/ q! z: N
16.   position: relative;
    ( m; R& G8 W+ K
17.   top: .01rem;
    
18.   padding-bottom: .0625rem;
    
19.   color: gray;
    
20.   border-bottom: .23rem solid gray;
    ) X! a7 ~5 j. ~$ W; I6 E+ G, C$ s) e6 i; A9 Z
21. }
    
22. 
    - L4 J$ R; Q4 X* s
23. /* 隐藏 词典图标 和 “来自于……” */
    
24. .gddicticon,.gdfromprefix { display: none; }
    
25. 
    - v4 }% o; q% I: j! j4 D) I
26. /* 隐藏 右侧箭头，调整尺寸、边框 */
    % i$ P" p: c- g3 L4 Z" |0 G
27. .gdcollapseicon,.gdexpandicon {
    + d# X8 b# e- Q; W  P0 I$ X
28.   position: relative;
    
29.   top: .2745rem;
    
30.   /* w:h = 1:1 */
    
31.   width: .645rem;
    
32.   /* w:h = 2:1 */
    
33.   /* width: 1.45rem; */
    3 Y; e1 N& |& k
34.   height: .475rem;
    
35.   border: .08rem solid gray;
    
36.   background-color: transparent;
    8 U$ a0 b: ~" W6 n4 o
37.   background-image: none;
    ' j9 w8 R! q  \9 r7 r( h7 ^# S
38. }
    " I% g/ D- r- ^; ^( |
39. 
    
40. /* 展开、鼠标悬停的展开、折叠、鼠标悬停的折叠，共四种样式 */
    ( \% J9 N$ L7 l) m; m' G+ w
41. .gdexpandicon { background-color: gray; }
    
42. .gdexpandicon:hover { border-color: black; background-color: black; background-image: none; }
    & J( t$ G) F6 r2 _( d/ e
43. .gdcollapseicon { border-bottom-width: .25rem; }
    3 H& K& h! s) Z
44. .gdcollapseicon:hover { border-color: black; background-image: none; }
    
45. 
    8 Q4 x4 w& a9 e* H, K3 h* j- r
46. /* 分割线 */
    . t, F5 Y' `4 a3 v; J; y
47. .gddictnamebodyseparator { display: block; margin-bottom: -.0625rem; border-top: .08rem solid gray; }
    4 m, O+ l, R' i
48. 
    # U8 Q. v/ O" l
49. /* 拉近 mdx 和 dsl 词典内容 与它们的 词典名称条 距离 */
    6 J0 z7 L+ X0 \4 E+ D5 @
50. .mdict,.dsl_article { margin-top: .625rem; }

复制代码

& v5 i' M7 x# F, s7 i4 J------------------------------------------
通过 qt-style.css 调整 软件界面文字大小

在我的机器上 20px 比较合适（注意 qt-style.css 中不要用单位 rem ，没有效果）。

修改 GD 的配置文件：“ c:\...\GoldenDict\portable\qt-style.css ” 。
0 }; X+ P: E7 n2 m% ~! o

1. QToolTip, /* 按钮或链接的提示信息 */
   
2. ArticleView #searchText, /* 按 Ctrl+F 后的搜索框 */
   
3. MainStatusBar #text, /* 右下角的提示信息 */
   / D9 @# U, x! ?6 M+ E
4. ScanPopup #translateLine, /* 弹出窗口的搜索框 */
   
5. MainWindow #translateLine, /* 主窗口的搜索框 */
   
6. MainWindow #wordList, /* 搜索框下方的单词列表 */
   % `: |' V3 p) y5 K4 J* U
7. MainWindow #dictsPane #dictsList, /* 查到单词的词典列表 */
     L" N* p4 @  S. ]% |# |! d  G
8. MainWindow #historyPane #historyList, /* 历史面板的单词列表 */
   
9. MainWindow #favoritesPane #favoritesTree /* 收藏面板的单词列表 */
   
10. { font-size: 20px; }

复制代码

& [8 x6 `* S- C2 ^+ c------------------------------------------

------------------------------------------

* q: }5 z# u1 Q: S% u* i! a8 I最后再来个图，别忘了帮我评分呦~~~

独行者

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

按F12，在CSS中加入
% K4 k. S* L& U( u

1. .jammer {
   4 @* ?: ~& d% q  s! m! Z  ~' F
2.     display: none;
   . E6 Y) Y6 T' F. F2 ^
3. }

复制代码

deeke

! i. ?6 k7 J+ Y4 W% V0 r; _$ ~
  ^6 w3 R& f. J, O1 Y: f听说 评分 以后随机字符都不会消失 :p

HMPT

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

neikice

deeke 发表于 2017-9-25 15:04
' G( I( _- O& ^0 y$ j评分 以后随机字符就会消失，是真的。

居然还有这种操作

learnfun

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

henices

$ z7 Q* a, E# F' A  Y
8 ~2 Q1 l/ M( d3 \+ V效果非常不错, 感谢.
% G* K: c4 z  R9 x, E* N
3 h( J' |9 S/ M4 U, V9 Y5 F

/ e. J" o5 b- @======================

arbzn

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

deeke

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

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

deeke

henices 发表于 2017-10-10 09:21
8 b& \* Q, J/ x4 {效果非常不错, 感谢.

1 X$ O" F0 w2 L6 n  @! {1 b: P: t3 O你的“朗文4”里，第二行 “7national se'curity”，那个 7 是因为用了特殊字体：Kingsoft Phonetic Plain，音标也是它。
/ t* g2 [1 y* w& B$ g1 W
2 `4 [6 u  O' X7 D- R$ I
0 @0 M3 }2 M+ y; `) A

arbzn

+ \1 n. ]6 o+ V$ t/ ]8楼的问题如上图，stardict词库的逗号显示不对。另外，该词库引用的外部图片也没法显示。(bgl文件是内置的图片。)
6 B, M0 F# y6 J: N, D以前都是用stardict词库的，一时无法割舍。。。。。

deeke

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

/ U: B+ V$ t# N; y
; @  s  W% P2 P8 [9 X/ D法鼓山做的 Stardict 格式的佛学词典
我在这下载了“丁福保佛學大辭典”，标点和图片显示都很正常。

arbzn

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

7 ~0 a* K7 d, \, T$ V有的Mdict的词库在Mdict中能正常显示逗号，在Goldendict中就不行了。

stcjap

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

helloit

网上找到的相关分享
, B0 C0 `' K  I作个留存，有时间再来研究~
' [3 [+ Z% u) u9 E
, Q8 M; j3 }6 c; X$ _谢谢deeke大的分享！

jerrybag

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