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

deeke

3 r( @0 e, ~7 h! E/ U8 x8 m/ q
: }4 Q4 J3 T2 Z# v171010：更换图例一。稍微减少 词典名称 与 分割线 的距离（代码区 Line 17. 18.）。
170928：更换图例一、二。修改一处 宽高比例（代码区 Line 30. ~ 33.）。
------------------------------------------
5 |$ _  j3 j# X0 c" `1 Y0 B' t
  z! n+ H* u0 I* X------------------------------------------
我的软件环境是：Win8.1 + GoldenDict_Qt5_x64_portable 。

不给 mp3 加上 tag 就睡不着觉，不调整 GD 外观就不能查词典，这是“磨刀专误砍柴工”系列的第三集：
使词典名称条更紧凑，在缩放页面时它几乎不会错位。

# D7 ~1 x: _" I3 z  [3 J1. 选择风格：灵格斯。
2. 隐藏 词典名称的蓝色背景、词典图标。
) L( Q" G! i$ D* A1 g8 l3. 隐藏 右侧展开、折叠的箭头图片。
4. 调整 尺寸、间距、边框、颜色。

/ h- c) T5 T" ~0 n修改 GD 的配置文件：“ c:\...\GoldenDict\portable\article-style.css ” 。
4 v! d* u! b" ~0 o4 K% c1 {% |0 ?

1. /* 拉近 词典名称条 之间的距离。如果太近，就会重叠。 */
   6 y: {- g8 l" g- u$ k+ H
2. .gdarticle { margin-top: .3rem; margin-bottom: 0; }
   
3. 
   $ _! o; m/ ?+ V* y' g2 r
4. /* 隐藏 词典名称 外部容器的蓝色背景和边框 */
   ) e4 p) {8 E8 v$ G6 L  c/ v
5. .gddictname {
   
6.   font-size: .625rem;
     k. S# a7 [! u
7.   margin: -.0625rem 0;
   ' W3 C2 }( I) F# S7 |3 W0 I
8.   padding-left: 0;
   
9.   vertical-align: bottom;
   
10.   border-width: 0;
    3 J/ N) a7 C9 D6 Z* a) C+ A
11.   background-color: transparent;
    
12. }
    8 ]3 Q& C! g0 X/ L4 {8 R$ f  D
13. 
    9 B. P/ E+ K" W0 W3 s: ^
14. /* 加粗 词典名称 文字的下边框 */
    
15. .gddicttitle {
    1 c) a3 E7 Z( c; ^8 I
16.   position: relative;
    
17.   top: .01rem;
    ! Z( A; z9 @1 V6 m4 k4 I( R0 S
18.   padding-bottom: .0625rem;
    
19.   color: gray;
    . e: P. j# B! N7 A
20.   border-bottom: .23rem solid gray;
    
21. }
    
22. 
    & V. W% N/ f' A7 N# x
23. /* 隐藏 词典图标 和 “来自于……” */
    $ i& |# q& v6 c! k7 ~
24. .gddicticon,.gdfromprefix { display: none; }
    
25. 
    
26. /* 隐藏 右侧箭头，调整尺寸、边框 */
    
27. .gdcollapseicon,.gdexpandicon {
    + K3 f) z# M: O8 b: S# ?( u
28.   position: relative;
    
29.   top: .2745rem;
    
30.   /* w:h = 1:1 */
    
31.   width: .645rem;
    
32.   /* w:h = 2:1 */
      d+ f, q8 K2 k: X
33.   /* width: 1.45rem; */
    3 E: E1 Q' w2 @/ q) K' C: w" d) Y. x
34.   height: .475rem;
    8 c# }: [: s; q4 o
35.   border: .08rem solid gray;
    
36.   background-color: transparent;
    8 @5 O- u9 P( E3 x- {: h  S/ D
37.   background-image: none;
    
38. }
    3 [8 i: D& }; \& A. R: a7 x0 R
39. 
    
40. /* 展开、鼠标悬停的展开、折叠、鼠标悬停的折叠，共四种样式 */
    6 _0 P" Z5 V' b- b" r5 _0 D$ M
41. .gdexpandicon { background-color: gray; }
    % i. @# l2 W. a
42. .gdexpandicon:hover { border-color: black; background-color: black; background-image: none; }
    2 G: M$ U/ _) G9 P1 [' n
43. .gdcollapseicon { border-bottom-width: .25rem; }
    
44. .gdcollapseicon:hover { border-color: black; background-image: none; }
    + ^2 U6 Z1 Z6 N, ]
45. 
    - b. T# W1 D; p% y+ ]- H- p$ R  e
46. /* 分割线 */
    " V. {4 B% m1 e& i$ Y- P/ }) V, ^
47. .gddictnamebodyseparator { display: block; margin-bottom: -.0625rem; border-top: .08rem solid gray; }
    
48. 
    8 a5 [( [' F/ p
49. /* 拉近 mdx 和 dsl 词典内容 与它们的 词典名称条 距离 */
    9 J( E/ _0 x3 q- q
50. .mdict,.dsl_article { margin-top: .625rem; }

复制代码

------------------------------------------
6 v% a/ ]8 w9 g' i' l通过 qt-style.css 调整 软件界面文字大小
5 ?$ O) m4 l; a5 g3 Y0 o' P
在我的机器上 20px 比较合适（注意 qt-style.css 中不要用单位 rem ，没有效果）。
# h, u8 k, Y) |3 x: ?
: \- n: |* a5 y( ]) f修改 GD 的配置文件：“ c:\...\GoldenDict\portable\qt-style.css ” 。
) w$ j; O% Q1 ~

1. QToolTip, /* 按钮或链接的提示信息 */
   
2. ArticleView #searchText, /* 按 Ctrl+F 后的搜索框 */
   
3. MainStatusBar #text, /* 右下角的提示信息 */
   
4. ScanPopup #translateLine, /* 弹出窗口的搜索框 */
   6 ^: l: J. E# t  l; C4 n
5. MainWindow #translateLine, /* 主窗口的搜索框 */
   
6. MainWindow #wordList, /* 搜索框下方的单词列表 */
   
7. MainWindow #dictsPane #dictsList, /* 查到单词的词典列表 */
   
8. MainWindow #historyPane #historyList, /* 历史面板的单词列表 */
   
9. MainWindow #favoritesPane #favoritesTree /* 收藏面板的单词列表 */
   : ]) g$ c- I, }6 O6 H; A% Q/ {$ L
10. { font-size: 20px; }

复制代码

------------------------------------------
6 q9 Z" L1 f; F* }
------------------------------------------

# X8 W& `, i) O0 G1 r' v2 D最后再来个图，别忘了帮我评分呦~~~

独行者

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

按F12，在CSS中加入

1. .jammer {
   ( u0 ^5 y0 o4 U* t/ s  u! c
2.     display: none;
   - p) ~7 F% b# _, ?
3. }

复制代码

deeke

1 P- N. d4 R/ R5 v9 o  _, P" X- q听说 评分 以后随机字符都不会消失 :p
% N, ^3 h" ^7 T1 k, h! l' b
" x  \# v9 N% b2 X

HMPT

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

neikice

deeke 发表于 2017-9-25 15:04
- d- C  W7 {( s8 n, q6 Q1 z评分 以后随机字符就会消失，是真的。

' W5 E8 S# d# R: g3 `居然还有这种操作

learnfun

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

henices

效果非常不错, 感谢.
! W2 E" {, {, ^, D* L/ j


======================

arbzn

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

deeke

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

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

deeke

henices 发表于 2017-10-10 09:21
' d7 }/ I# P: ~效果非常不错, 感谢.

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

9 h! u( l) G/ U, P- P, G

arbzn

7 C; A) o0 L1 f
( `! o+ b9 {9 E" ?, {8楼的问题如上图，stardict词库的逗号显示不对。另外，该词库引用的外部图片也没法显示。(bgl文件是内置的图片。)
以前都是用stardict词库的，一时无法割舍。。。。。

deeke

arbzn 发表于 2017-10-11 13:25
/ P, Q% W2 h# |* s1 q2 u8楼的问题如上图，stardict词库的逗号显示不对。另外，该词库引用的外部图片也没法显示。(bgl文件是内置 ...

法鼓山做的 Stardict 格式的佛学词典
- X+ H) h( n. r) Y3 o0 Z我在这下载了“丁福保佛學大辭典”，标点和图片显示都很正常。

arbzn

用stardict-editor导出这个**的词典为xml文件后，再用stardict-editor编译成stardict格式词典，就和我以前的一样了，在Goldendict中不能正常显示逗号(在stardict程序中也是一样显示不正常)。不只是上面那一个词条的问题。
  l: \0 z, c+ X2 t5 I
有的Mdict的词库在Mdict中能正常显示逗号，在Goldendict中就不行了。

stcjap

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

helloit

网上找到的相关分享
作个留存，有时间再来研究~

( Q' w) p3 ~3 ]/ ^7 ^- L- ]; J+ U谢谢deeke大的分享！

jerrybag

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