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

deeke

7 Z) y' g& {1 B0 V0 j$ y
0 [2 K" u( [8 g9 B. |3 |3 }' O8 Q8 Y5 L171010：更换图例一。稍微减少 词典名称 与 分割线 的距离（代码区 Line 17. 18.）。
170928：更换图例一、二。修改一处 宽高比例（代码区 Line 30. ~ 33.）。
------------------------------------------

------------------------------------------
. l3 x9 N4 o; O* A! F0 K我的软件环境是：Win8.1 + GoldenDict_Qt5_x64_portable 。
1 c+ P4 s7 Y) |6 {
$ U* T; d+ Y' s" D8 n, {不给 mp3 加上 tag 就睡不着觉，不调整 GD 外观就不能查词典，这是“磨刀专误砍柴工”系列的第三集：
3 h5 R& b, b, o3 `6 b! ?! K0 i使词典名称条更紧凑，在缩放页面时它几乎不会错位。

9 B8 V+ Z/ S) E9 H1. 选择风格：灵格斯。
- F/ `8 ?% Z* w" x( p+ S2. 隐藏 词典名称的蓝色背景、词典图标。
  s. x- U- }, k6 g0 o7 X/ Z) `0 O3. 隐藏 右侧展开、折叠的箭头图片。
4. 调整 尺寸、间距、边框、颜色。
! M9 r& h" R/ u/ ~
# m8 c0 P0 d2 t% M! [2 g修改 GD 的配置文件：“ c:\...\GoldenDict\portable\article-style.css ” 。
' ]/ _( p! x$ @: Z$ x. T7 x7 ]

1. /* 拉近 词典名称条 之间的距离。如果太近，就会重叠。 */
   
2. .gdarticle { margin-top: .3rem; margin-bottom: 0; }
   
3. 
   
4. /* 隐藏 词典名称 外部容器的蓝色背景和边框 */
   % m' f& R8 ]7 Y$ [
5. .gddictname {
   
6.   font-size: .625rem;
   
7.   margin: -.0625rem 0;
   4 y! I" @# P1 C6 W
8.   padding-left: 0;
   
9.   vertical-align: bottom;
     b. l8 r" Z$ T9 r; N
10.   border-width: 0;
    
11.   background-color: transparent;
    6 s. F: N$ u- B1 ~/ ^
12. }
    
13. 
      _- B  Y) V0 ]$ Q- H/ B
14. /* 加粗 词典名称 文字的下边框 */
    1 Y( g8 \! c7 r, R' V9 I
15. .gddicttitle {
    
16.   position: relative;
    
17.   top: .01rem;
    $ m; c. b3 W; j, `( A" C
18.   padding-bottom: .0625rem;
    9 p" |$ E$ I5 T/ ?7 `
19.   color: gray;
    
20.   border-bottom: .23rem solid gray;
    : M1 r; c( y: L, L, B- e5 @
21. }
    / \# c: M* I2 ?: {: j9 B8 h
22. 
    
23. /* 隐藏 词典图标 和 “来自于……” */
    
24. .gddicticon,.gdfromprefix { display: none; }
    
25. 
    " K4 ]/ S; L8 R
26. /* 隐藏 右侧箭头，调整尺寸、边框 */
    + S% b3 U, ~, r: @4 L9 @9 Y
27. .gdcollapseicon,.gdexpandicon {
    $ V6 F; W% D6 X. S, S  J, k
28.   position: relative;
    + q. m) V4 T  M* g% n' j9 d
29.   top: .2745rem;
    * T0 K8 t% S& B' B# w3 g
30.   /* w:h = 1:1 */
    3 |( {2 @+ |0 Q  }; i* k2 r' n) h
31.   width: .645rem;
    , h) C( R8 `  B: w5 T2 U1 B+ }
32.   /* w:h = 2:1 */
    
33.   /* width: 1.45rem; */
    " n- G  Y2 {$ e. C
34.   height: .475rem;
    ; {* \, D  Q! ^
35.   border: .08rem solid gray;
    
36.   background-color: transparent;
    
37.   background-image: none;
    
38. }
    " E9 }' y) f& r1 V  D8 b  T
39. 
    
40. /* 展开、鼠标悬停的展开、折叠、鼠标悬停的折叠，共四种样式 */
    ( N+ X; P( I) x6 [) d1 ]
41. .gdexpandicon { background-color: gray; }
    % o9 _: u8 S& ?* w
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; }
    % G: Q  I) C+ I7 k: }1 e- Z
45. 
    
46. /* 分割线 */
    
47. .gddictnamebodyseparator { display: block; margin-bottom: -.0625rem; border-top: .08rem solid gray; }
    
48. 
    
49. /* 拉近 mdx 和 dsl 词典内容 与它们的 词典名称条 距离 */
    " U9 n" M+ Q) C, l% K/ ?
50. .mdict,.dsl_article { margin-top: .625rem; }

复制代码

8 ^6 _4 X: D3 Y& Z; \5 ?1 T6 X% ^------------------------------------------
通过 qt-style.css 调整 软件界面文字大小
' a- w5 v3 {! U6 \
9 _* ?: j6 {9 p' K9 s在我的机器上 20px 比较合适（注意 qt-style.css 中不要用单位 rem ，没有效果）。

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

1. QToolTip, /* 按钮或链接的提示信息 */
   ! @1 @, j1 Z  i! ?1 a( ^
2. ArticleView #searchText, /* 按 Ctrl+F 后的搜索框 */
   4 z5 r, O% A9 M' O3 v9 h
3. MainStatusBar #text, /* 右下角的提示信息 */
   
4. ScanPopup #translateLine, /* 弹出窗口的搜索框 */
   8 u& X- e# r# {
5. MainWindow #translateLine, /* 主窗口的搜索框 */
   ( a4 u) p1 G! }" O, }& q/ ~$ X5 X
6. MainWindow #wordList, /* 搜索框下方的单词列表 */
   
7. MainWindow #dictsPane #dictsList, /* 查到单词的词典列表 */
   
8. MainWindow #historyPane #historyList, /* 历史面板的单词列表 */
   
9. MainWindow #favoritesPane #favoritesTree /* 收藏面板的单词列表 */
   
10. { font-size: 20px; }

复制代码

! m) I2 A2 H" I& L$ w5 S5 K------------------------------------------

8 m% r  W/ u; e! g$ f------------------------------------------

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

独行者

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

) C! }7 e% A8 k+ Q按F12，在CSS中加入

1. .jammer {
   
2.     display: none;
   # }. x* b- Q$ e
3. }

复制代码

deeke

9 ?$ N& q$ @$ W
听说 评分 以后随机字符都不会消失 :p
/ ^% e  |0 g4 k5 s
' n$ _7 ]. u, `4 ~; w8 {% I, ?

HMPT

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

neikice

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

  r; K7 f! _  ^4 C3 e& T, ?居然还有这种操作

learnfun

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

henices

# A+ B: d; j! @( j效果非常不错, 感谢.
8 ~. S9 a& A0 E4 c, ^: V' p4 I

' S9 I% u, j; P5 i  l, q& G, [+ I
# k6 g6 c* L% ]: N/ `% r======================
) ?% @9 ?) z: [- i! L, ]

arbzn

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

deeke

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

8 x# M7 k; f( @7 E, W" H汉语分号的 Unicode 编码是 FF1B、逗号是 FF0C，英文是 3B、2C，应该是不会混淆。

deeke

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

2 }/ `( c6 K, J5 O
你的“朗文4”里，第二行 “7national se'curity”，那个 7 是因为用了特殊字体：Kingsoft Phonetic Plain，音标也是它。

arbzn

4 k& x+ u* A% j8楼的问题如上图，stardict词库的逗号显示不对。另外，该词库引用的外部图片也没法显示。(bgl文件是内置的图片。)
以前都是用stardict词库的，一时无法割舍。。。。。

deeke

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

% r# t" D; W& g+ G
法鼓山做的 Stardict 格式的佛学词典
我在这下载了“丁福保佛學大辭典”，标点和图片显示都很正常。

arbzn

用stardict-editor导出这个**的词典为xml文件后，再用stardict-editor编译成stardict格式词典，就和我以前的一样了，在Goldendict中不能正常显示逗号(在stardict程序中也是一样显示不正常)。不只是上面那一个词条的问题。
9 Y! v( v! c. f8 }1 f
( U; p$ H0 V) F( l" X$ G9 h9 W有的Mdict的词库在Mdict中能正常显示逗号，在Goldendict中就不行了。

stcjap

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

helloit

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

谢谢deeke大的分享！

jerrybag

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