[1] 通过 article-style.css 调整发音库 Sound-En

deeke

" \0 S9 F+ O  ^+ X+ q# r$ ^+ c171010：使用外链图床，更换图例。增加内容：“修改 dsl 词典的发音按钮”。
2 ^) m0 M+ Q, [9 t+ [------------------------------------------
) t: R6 S- D* s8 D. m. e7 T
2 j3 f- I. @* M" I6 N------------------------------------------
感谢 Hugh 制作、分享的 英语发音库 ，这些年来一直在用。
我的软件环境是：Win8.1 + GoldenDict_Qt5_x64_portable 。
# G0 K8 i5 K, `6 E6 n$ B* m+ X
1. 在网上找两个图片表示英音、美音。
$ C' A: D4 ]- ?7 y1 r  x改名为 snd_uk.png  、 snd_us.png ，放到 Sound-En.mdx 同一文件夹中。
5 j: I( T: i* a7 j我的屏幕小，所以用 64x64 的尺寸。

2 D5 n9 N4 l3 Y9 a
+ b5 {5 G4 @' V4 |0 i6 q2. 在 GD 里找到 Sound-En 的词典编号。
) U0 w% Y; v1 [5 l, ^  y鼠标右键“审查元素”，或直接按 F12 。每台电脑的词典编号并不相同。

1. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1

复制代码

  G: G/ Q7 a5 @& A% S9 H! \
5 D* R+ _) u, @4 B! I" z3. 修改 GD 的配置文件：“ c:\...\GoldenDict\portable\article-style.css ” 。
调整各种 前后左右、高矮胖瘦。

1. /* Sound-En | Start */
   
2. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 { font-size: .875rem; }
   6 Z* m& K: Y* u; A' e
3. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 b { margin-right: .5125rem; }
   % F7 g# j7 R6 u; \
4. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 i { color: gray; }
   7 c: X0 I4 C( H
5. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 a>img[src$="Sound.png"] { display: none; }
   : s- Y; h9 n. A
6. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 a>img[src*="snd_u"] {
   
7.   position: relative;
   . w$ W( c# z& q3 T- m
8.   right: .275rem;
   * {: O% z2 Z2 e- R" G
9.   bottom: .045rem;
   
10.   width: 1rem;
    
11.   height: 1rem;
    
12. }
    
13. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 a { text-decoration: none; outline: none; }
    % k3 N5 }* p+ L' M, `  k
14. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 a::after {
    
15.   font-family: "Segoe UI Symbol";
    
16.   font-size: 1rem;
    + m& C6 P8 f* A" k. g' k3 j( v. R  s
17.   position: relative;
    1 K  h- f5 Y6 h' ^6 n
18.   top: .065rem;
    
19.   right: .2rem;
    / p. g" X$ p+ z0 \) n* Q, [9 M
20.   content: "\1F50A";
    
21.   vertical-align: baseline;
    
22. }
    $ C2 X: N8 t; @; i0 W  B
23. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 a:link { color: black; }
      Q) \  _0 _2 c) O* c% A
24. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 a:visited { color: black; }
    
25. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 a:hover { color: purple; }
    3 ^) W- l- A, K$ [
26. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 a:active { color: purple; }
    
27. /* Sound-En | End */

复制代码

* q& n! f4 V! Y3 V. R+ W+ R$ r0 e------------------------------------------
  b9 u# z$ J8 ~7 K修改 dsl 词典的发音按钮

8 Z$ `: q' Q. t9 X修改 GD 的配置文件：“ c:\...\GoldenDict\portable\article-style.css ”。

1. .dsl_s_wav>a>img { display: none; }
   
2. .dsl_s_wav>a { text-decoration: none; outline: none; }
   
3. .dsl_s_wav>a::after {
   
4.   font-family: "Segoe UI Symbol";
   + r, ?" G2 v, U' r: ~$ ]
5.   font-size: 1rem;
   
6.   line-height: 0;
   
7.   position: relative;
   % q* i& [4 m/ Q1 A, P
8.   top: .065rem;
   
9.   content: "\1F50A";
   
10.   vertical-align: baseline;
    . @) F9 R- v# x- x* }8 N  }
11. }
    
12. .dsl_s_wav>a:link { color: black; }
    
13. .dsl_s_wav>a:visited { color: black; }
    
14. .dsl_s_wav>a:hover { color: purple; }
    . `2 \: R2 _0 G7 Q' l8 S9 u
15. .dsl_s_wav>a:active { color: purple; }

复制代码

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

+ T" k* B. d) }. z7 O  S+ Y: N搞定收工，别忘了评分呦~~~

skydan05

谢谢deeke分享！