[2] 通过 article-style.css 调整跳转词典 JumpToDicts

deeke

. @" c9 i3 V* F; W, `170928：更换图例。
( g- J3 l6 t1 H------------------------------------------
1 u1 S- r; P) B
4 n- h- I; I7 E2 _% T------------------------------------------
: I  F* r* n1 s9 H感谢 ryuya 制作、分享的跳转词典，和 GD 自带的构词法各有用处。
( {6 C1 [5 u6 t5 G9 zJumpToDicts 3.0 (英語構詞法詞典)
JumpToDicts (phrase version add-ons)
; r! |5 @, t+ Z  j$ K我的软件环境是：Win8.1 + GoldenDict_Qt5_x64_portable 。

词典没有外置 css 文件，所以通过 article-style.css 来曲线修改。直接修改 mdx 文件更方便快捷，但是我们就要在平坦的道路上曲折前进。
根据来源不同，外框有四种颜色，此信息体现在小箭头（ u279C ）上，并保持一致。
- V2 `8 c7 V& I1 S
1. 在 GD 里找出词典编号。
- @0 W! d5 o$ d1 Y, D9 D% ?* L$ C鼠标右键“审查元素”，或直接按 F12 。每台电脑的词典编号并不相同。
. g/ t. Z" L9 y7 H2 m. r1 s

1. #gdarticlefrom-af6352032a97251d70ce9ba74e88edb8 对应 JumpToDicts 3.0
   ! ~+ ~/ n4 [1 [4 I1 E
2. #gdarticlefrom-3a6c930edbc61ab69e6c93450b279539 对应 JumpToDicts (phrase version add-ons)

复制代码

9 q# T6 o+ B- x" w$ b
2. 修改 GD 的配置文件：“ c:\...\GoldenDict\portable\article-style.css ” 。

1. /* JumpToDicts | Start */
   
2. #gdarticlefrom-af6352032a97251d70ce9ba74e88edb8 .mdict>div,
   
3. #gdarticlefrom-3a6c930edbc61ab69e6c93450b279539 .mdict>div {
   
4.   font-family: Lato, sans-serif !important;
   6 j' g' \4 P& P) e  A% {
5.   font-size: .625rem !important;
   
6.   font-weight: normal !important;
   % A* q% M6 O3 t! \% a
7.   font-style: italic;
   9 t4 v3 z1 F* w+ ]- p$ B
8.   width: auto !important;
   : S  \3 [5 O) f" W$ d4 Y, r- H
9.   padding: 0 !important;
     x, x6 D0 J4 N
10.   color: gray !important;
    ) u& k8 R1 q$ ?  L1 U  b& _+ ?
11.   border: none !important;
    
12.   border-radius: 0 !important;
    2 R4 e! Z$ e9 n; ?# i( b& l
13.   background-color: transparent !important;
    4 C' z: F( \- i7 z; m: w+ i* H
14.   box-shadow: none !important;
    , I5 F+ v7 s$ }8 K6 f! m
15.   vertical-align: baseline !important;
    
16. }
    . k5 [# z- e1 I! }
17. #gdarticlefrom-af6352032a97251d70ce9ba74e88edb8 .mdict>div::before,
    
18. #gdarticlefrom-3a6c930edbc61ab69e6c93450b279539 .mdict>div::before {
    
19.   font-family: "Segoe UI Symbol";
    
20.   font-size: .5rem;
    
21.   font-style: normal;
    1 u+ J# w7 q5 Q
22.   line-height: 0;
    : R% Z/ Z) c. a4 p
23.   position: relative;
    ! |  k" {' v. v# ?, P
24.   bottom: .0425rem;
    
25.   margin-right: .23rem;
    ) L0 L: y* N# N9 P1 Z2 T0 w' \' b
26.   content: "\279C";
    8 q5 U  k, d7 m" ^6 F) X
27.   vertical-align: baseline;
    
28.   color: green;
    
29. }
    
30. #gdarticlefrom-af6352032a97251d70ce9ba74e88edb8 .mdict>div.MW::before { color: orange; }
    8 m5 ]. z& Y# T0 `
31. #gdarticlefrom-af6352032a97251d70ce9ba74e88edb8 .mdict>div.O8::before { color: deeppink; }
    
32. #gdarticlefrom-af6352032a97251d70ce9ba74e88edb8 .mdict>div.spell::before { color: #444444; }
    
33. #gdarticlefrom-3a6c930edbc61ab69e6c93450b279539 .mdict>div.phrase::before { color: #1E8BB7; }
    
34. #gdarticlefrom-af6352032a97251d70ce9ba74e88edb8 .mdict>br,
    
35. #gdarticlefrom-3a6c930edbc61ab69e6c93450b279539 .mdict>br { display: none; }
    
36. #gdarticlefrom-af6352032a97251d70ce9ba74e88edb8 .mdict>hr,
    8 J4 F1 b2 u; E% K! v
37. #gdarticlefrom-3a6c930edbc61ab69e6c93450b279539 .mdict>hr { margin: .1rem !important; }
    
38. #gdarticlefrom-af6352032a97251d70ce9ba74e88edb8 a,
    . F# n3 c& ^3 m7 X4 x0 A6 u
39. #gdarticlefrom-3a6c930edbc61ab69e6c93450b279539 a {
    
40.   font-size: .875rem !important;
    
41.   font-weight: bold !important;
    + o2 Z9 [  Y; [9 i$ w
42.   font-style: normal !important;
    1 U' u( o1 f2 W( a
43.   margin: auto .23rem !important;
    ! E7 E( F; q* ]4 Z. W
44.   text-decoration: none !important;
    / m, l$ _1 R/ S
45.   color: black !important;
    2 J. u$ |- ?. b! |
46.   border-bottom: .08rem solid transparent !important;
    1 y* _) c4 u# U( C8 ^2 T1 {" ~6 H; z
47.   outline: none !important;
    
48. }
    ( ~) n1 b7 u0 _% y
49. #gdarticlefrom-af6352032a97251d70ce9ba74e88edb8 a:link,
    
50. #gdarticlefrom-3a6c930edbc61ab69e6c93450b279539 a:link,
    % r2 @9 s3 Q+ v0 u0 ^3 [
51. #gdarticlefrom-af6352032a97251d70ce9ba74e88edb8 a:visited,
    
52. #gdarticlefrom-3a6c930edbc61ab69e6c93450b279539 a:visited { color: black !important; }
    " P; `, v" z3 j! W
53. #gdarticlefrom-af6352032a97251d70ce9ba74e88edb8 a:hover,
    6 [2 Q, B5 a; r
54. #gdarticlefrom-3a6c930edbc61ab69e6c93450b279539 a:hover,
    / D7 p0 e. J" V1 z- J5 |! o
55. #gdarticlefrom-af6352032a97251d70ce9ba74e88edb8 a:active,
    
56. #gdarticlefrom-3a6c930edbc61ab69e6c93450b279539 a:active {
    4 P7 F. C' O2 R: ^2 U0 E( l( t: @
57.   color: black !important;
    1 {& r7 M  m! Q; ^) J4 C
58.   border-bottom-color: black !important;
    
59.   background-color: yellow !important;
    : Y8 I; w) T4 {4 v+ f' i; t
60. }
    
61. /* JumpToDicts | End */

复制代码

. r$ ]; g4 y2 A% M' k- ^3 K  e+ W------------------------------------------
修改 dsl 词典的展开按钮

2 B7 F4 p5 {4 ~( I- ]1. 在网上找两个图片表示展开、折叠，改名为 expand.png  、 collapse.png  。
放入文件夹：“ c:\...\GoldenDict\portable\icons\ ”备用。
7 u' \* g3 Z/ X# [9 X
2. 修改 GD 的配置文件：“ c:\...\GoldenDict\portable\article-style.css ”。
9 g8 `/ R4 y1 q8 j调整各种 前后左右、高矮胖瘦。

1. .dsl_headwords img[src$="expand_opt.png"] { content: url("file:///icons/expand.png"); }
   
2. .dsl_headwords img[src$="collapse_opt.png"] { content: url("file:///icons/collapse.png"); }
   $ G% T1 D0 p! d/ A
3. .dsl_headwords img[src$="expand_opt.png"],
   
4. .dsl_headwords img[src$="collapse_opt.png"] {
   
5.   line-height: 0 !important;
   
6.   position: relative;
   
7.   bottom: .125rem;
   
8.   left: .475rem;
   
9.   width: .75rem;
   2 e* l/ j9 Z( m2 B$ `0 h- x" |
10.   height: .75rem;
    & B* U5 k5 C, _. A
11. }

复制代码

% x- d" A7 `8 G------------------------------------------
) m$ W6 H5 k6 j9 x. ~1 x. w
3 v. D1 S+ E& X0 s搞定收工，试试看外链的图床效果如何。别忘了帮我评分呦~~~

HMPT

GoldenDict_Qt5_x64_portable 这种词典是不是只能放在portable目录??

HMPT

@deeke 好方法!!!!!

deeke

HMPT 发表于 2017-9-21 10:29
@deeke 好方法!!!!!

我比较晚才开始用 GD ，都是从置顶的经验贴学来的。

kandict

谢谢，才知道把词典目录的快捷方式放在content那里也可以。

leescott

请问，直接修改mdx文件，怎么实现？
两个词典放在一个文件夹下。手机深蓝词典。
谢谢！