掌上百科 - PDAWIKI

 找回密码
 免费注册

QQ登录

只需一步,快速开始

查看: 3519|回复: 19

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

[复制链接]
  • TA的每日心情
    慵懒
    2023-10-14 18:34
  • 签到天数: 210 天

    [LV.7]常住居民III

    发表于 2017-9-25 13:45:21 | 显示全部楼层 |阅读模式
    本帖最后由 deeke 于 2017-10-10 23:34 编辑
    9 D# e- G. S8 X( W, ~. Q7 G+ |
    ( R) Q$ {% l$ i) |171010:更换图例一。稍微减少 词典名称 与 分割线 的距离(代码区 Line 17. 18.)。
    , o2 r4 L8 V: o$ k5 t" M170928:更换图例一、二。修改一处 宽高比例(代码区 Line 30. ~ 33.)。. b3 Y. @6 w7 \
    ------------------------------------------
    ( w" \! e% w8 P& z+ f
    ) u. i* Y$ c  L2 L2 v------------------------------------------2 Y/ v, O# j# M$ l/ z
    我的软件环境是:Win8.1 + GoldenDict_Qt5_x64_portable3 W/ @7 u. @& z1 i- h$ K* f7 ?

    ! r; `8 k/ ]' r) H8 Y- R  k1 l. V9 V3 [不给 mp3 加上 tag 就睡不着觉,不调整 GD 外观就不能查词典,这是“磨刀专误砍柴工”系列的第三集:% Z2 Q" K* Z+ k2 w& f
    使词典名称条更紧凑,在缩放页面时它几乎不会错位。
    / o: b; Y$ K8 |. C
    + Z& \. D& X9 @" d5 C1. 选择风格:灵格斯。
    3 P8 ?: Z; B9 a& L4 F' m. L$ f2. 隐藏 词典名称的蓝色背景、词典图标。" [8 X1 T  r- u( ~$ l* ^" u
    3. 隐藏 右侧展开、折叠的箭头图片。( i: ?4 V  E# ]7 o  F8 l
    4. 调整 尺寸、间距、边框、颜色。5 u* M9 Z0 r" \( M; H* k

    8 g+ |) w' F7 U+ k, g/ ], d# Y, [修改 GD 的配置文件:“ c:\...\GoldenDict\portable\article-style.css ” 。
    $ @9 g$ v" U- K2 F* ~: C
    1. /* 拉近 词典名称条 之间的距离。如果太近,就会重叠。 */
      % X$ x6 u$ C9 q0 _! Q8 A. ~0 V, p
    2. .gdarticle { margin-top: .3rem; margin-bottom: 0; }
      & p* v4 E7 L/ ^+ F9 c. R6 j6 k8 M0 V

    3. 4 i+ }: ]3 x3 j
    4. /* 隐藏 词典名称 外部容器的蓝色背景和边框 */. _' s9 W' C/ P/ K( T; d
    5. .gddictname {: \. Q( h$ v* ]* s; [
    6.   font-size: .625rem;
        p$ w1 E" l5 |3 Z! Z- |  N
    7.   margin: -.0625rem 0;# c' K! [0 D7 m; C( B6 ]. d
    8.   padding-left: 0;
      6 o9 |: n& L" n% A; [
    9.   vertical-align: bottom;
      , S2 l0 k% H+ s  }) `  @; a7 G
    10.   border-width: 0;
      2 W8 M" G% G7 x9 A" Z( I
    11.   background-color: transparent;
      0 t! y6 ?; Y2 O7 e  }
    12. }
      4 G3 t" z. ^  H3 G* P0 _
    13. " P( a. K7 Y, C7 v5 q# s( X; k/ ~+ C
    14. /* 加粗 词典名称 文字的下边框 */, L+ X( k6 u" ^
    15. .gddicttitle {1 T5 \% ^! P2 N$ }) C- r) \! m
    16.   position: relative;
      6 n; M( J: X$ Z# B' n
    17.   top: .01rem;% f: G. Y5 e% s) \( }( Q. y
    18.   padding-bottom: .0625rem;
      $ A; u9 {$ Y  X/ p% [9 Q2 N
    19.   color: gray;
      / ?5 `& e) f: b* Q* s
    20.   border-bottom: .23rem solid gray;5 P/ f* ~+ O/ G2 x
    21. }
      , Z4 f: S& ?8 D/ K9 X7 h6 \! q
    22.   m: _* D6 Z* E4 m" v
    23. /* 隐藏 词典图标 和 “来自于……” */3 x9 c5 d+ m0 f' \. ?; s' J) l2 F
    24. .gddicticon,.gdfromprefix { display: none; }
      ) I2 A7 ~2 \; W& N+ x# E
    25. 6 G  Y- R/ m  a  ]" b
    26. /* 隐藏 右侧箭头,调整尺寸、边框 */* x4 Q5 [/ ~( K
    27. .gdcollapseicon,.gdexpandicon {9 y+ c7 U' x2 [5 K9 n
    28.   position: relative;
      ) q  d! \. p! k2 l1 m; x; \3 ~6 t
    29.   top: .2745rem;
      : e* v% I5 q9 y, V0 B' j# a
    30.   /* w:h = 1:1 *// x8 X5 N! J( x: k
    31.   width: .645rem;
      8 C6 _' f/ }: ?% s' O  P8 o; \
    32.   /* w:h = 2:1 */
      ' c1 F6 d# |" t- E! K
    33.   /* width: 1.45rem; */
      : X# a! g* B* d, m. K  G6 n& g
    34.   height: .475rem;
      3 f3 P# Y  |# c- D2 f
    35.   border: .08rem solid gray;+ i0 _& B0 [4 b$ D9 ?6 L
    36.   background-color: transparent;
      : h8 V( @1 y) Y  H3 G0 S- |7 w
    37.   background-image: none;
      # }9 u7 _! m) x& O6 X& x# v3 K# E
    38. }; {' f: m* h/ O! W

    39. / B% B% P/ H6 T3 o
    40. /* 展开、鼠标悬停的展开、折叠、鼠标悬停的折叠,共四种样式 */
      ( D/ R0 d7 [. _7 H2 n% I; j
    41. .gdexpandicon { background-color: gray; }
      8 P( A1 C0 N2 |2 [
    42. .gdexpandicon:hover { border-color: black; background-color: black; background-image: none; }  U* c: S+ V1 S8 u' S
    43. .gdcollapseicon { border-bottom-width: .25rem; }
      1 n+ |( i* T9 h$ a+ s+ m
    44. .gdcollapseicon:hover { border-color: black; background-image: none; }: H9 @/ T$ Y( G4 i# q+ M) F
    45. 9 s) e/ {8 A9 s8 R$ q' g
    46. /* 分割线 *// b$ i+ E7 U+ [$ }; |& K% O, e( t5 j% h& P
    47. .gddictnamebodyseparator { display: block; margin-bottom: -.0625rem; border-top: .08rem solid gray; }) E1 E2 t( D" k/ L" i
    48. ; X! b, d$ Y$ {  X0 N* j6 w
    49. /* 拉近 mdx 和 dsl 词典内容 与它们的 词典名称条 距离 */
      * \& t3 |$ A/ `: h! k+ a
    50. .mdict,.dsl_article { margin-top: .625rem; }
    复制代码
    , X" f$ @1 s2 S$ N
    ------------------------------------------
    ( ^2 e( I' @* R( ]通过 qt-style.css 调整 软件界面文字大小
    / o  a& d, w; y
    - f" R4 Y/ x' I4 ^5 V- z! A在我的机器上 20px 比较合适(注意 qt-style.css 中不要用单位 rem ,没有效果)。
    & d$ v( s6 w- a! Y( a9 V% k. u+ @1 v) ]- }  C9 _+ z
    修改 GD 的配置文件:“ c:\...\GoldenDict\portable\qt-style.css ” 。
    & B+ I9 R, q2 a; l' ]5 V
    1. QToolTip, /* 按钮或链接的提示信息 */+ F. n) V$ ?) Y5 L
    2. ArticleView #searchText, /* 按 Ctrl+F 后的搜索框 */
      0 u7 H% d  h1 r' L
    3. MainStatusBar #text, /* 右下角的提示信息 */
      5 |! |* @$ b* @" _2 H; z2 w7 h
    4. ScanPopup #translateLine, /* 弹出窗口的搜索框 */' K/ }: `, }; y6 b& {& t( f
    5. MainWindow #translateLine, /* 主窗口的搜索框 */( C$ f( x: ^* V+ M; _& F7 |9 ]
    6. MainWindow #wordList, /* 搜索框下方的单词列表 */5 J' n# T5 s3 V, K; C
    7. MainWindow #dictsPane #dictsList, /* 查到单词的词典列表 */
      0 d4 d9 N: ^' h$ S' S3 D3 b
    8. MainWindow #historyPane #historyList, /* 历史面板的单词列表 */0 f5 H- @( q3 M( p+ c0 x! b
    9. MainWindow #favoritesPane #favoritesTree /* 收藏面板的单词列表 */
        X& t2 X* U' G
    10. { font-size: 20px; }
    复制代码
    5 f1 b2 z4 E  M9 y" @
    ------------------------------------------
    ; d# \, ]* ^# T/ f9 a& P+ k2 Y* {* B5 w8 T- j1 ?: t
    ------------------------------------------) b, j4 p6 C' U: P* M! J

    / c5 @' w; n( n, {9 M* Y最后再来个图,别忘了帮我评分呦~~~

    评分

    9

    查看全部评分

  • TA的每日心情
    开心
    2023-4-4 20:46
  • 签到天数: 337 天

    [LV.8]以坛为家I

    发表于 2017-9-27 14:12:37 | 显示全部楼层
    HMPT 发表于 2017-9-25 14:38
    ' }& Z" @& S& p5 A/ T9 v4 [论坛为了防止复制,而加上的随机字符, 好烦人啊

      j6 _2 u0 l. L4 Z按F12,在CSS中加入; D2 J* Y8 u3 I( ]
    1. .jammer {
      ) A6 r0 {( [7 [; X3 Z" L+ ~0 I
    2.     display: none;8 ?3 ?9 p- x( Q3 O) w
    3. }
    复制代码

    点评

    有效, 感谢  发表于 2017-9-27 14:20
  • TA的每日心情
    慵懒
    2023-10-14 18:34
  • 签到天数: 210 天

    [LV.7]常住居民III

     楼主| 发表于 2017-9-25 15:04:30 | 显示全部楼层
    本帖最后由 deeke 于 2017-9-25 20:41 编辑
      r2 k9 O( o3 ?; A/ S4 q9 R4 k7 I% b1 h; P  W8 j6 O  ~' ]
    听说 评分 以后随机字符都会消失 :p
    ) i4 ^# E) \" r( M0 B; y0 }# f' a1 Q) Y' j9 l- z- N1 ~, K

    点评

    这就涉嫌恶意误导了  发表于 2017-9-25 16:45
  • TA的每日心情

    2019-9-20 08:37
  • 签到天数: 214 天

    [LV.7]常住居民III

    发表于 2017-9-25 14:38:38 | 显示全部楼层
    论坛为了防止复制,而加上的随机字符, 好烦人啊

    点评

    可以用“审查元素”大法  发表于 2017-9-25 14:58
  • TA的每日心情
    开心
    2020-9-21 12:00
  • 签到天数: 22 天

    [LV.4]偶尔看看III

    发表于 2017-9-25 15:11:38 | 显示全部楼层
    deeke 发表于 2017-9-25 15:04+ R5 r7 T( }& t7 j( w
    评分 以后随机字符就会消失,是真的。

    8 m( V2 E+ h" ^2 C居然还有这种操作
  • TA的每日心情
    开心
    2019-10-12 09:43
  • 签到天数: 1 天

    [LV.1]初来乍到

    发表于 2017-9-25 19:01:35 | 显示全部楼层
    牛!这个是css能定义全局js文件吗?大大

    点评

    只调整 词典名称条 的外观,不能影响 JavaScript 文件。  发表于 2017-9-25 21:14

    该用户从未签到

    发表于 2017-10-10 09:21:25 | 显示全部楼层
    本帖最后由 henices 于 2017-10-10 09:25 编辑
    ' b# b5 W6 N) d  T% ?. v& q5 k" x/ A" C
    效果非常不错, 感谢.7 t0 s7 g! y+ l

    : f2 j. c1 N, o* G
    & k4 g$ U4 ^  c) i; s. L1 @+ C; x( ^" a0 k$ a2 m
    ======================
    + z. l3 H+ h2 N$ w

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有账号?免费注册

    x
  • TA的每日心情
    开心
    2017-10-25 12:37
  • 签到天数: 8 天

    [LV.3]偶尔看看II

    发表于 2017-10-10 21:27:21 | 显示全部楼层
    求教樓主,有些詞典中漢語標點的分號和逗號(;,)在goldendict中會顯示爲英文的分號和逗號(;,),這個有辦法控制嗎?
  • TA的每日心情
    慵懒
    2023-10-14 18:34
  • 签到天数: 210 天

    [LV.7]常住居民III

     楼主| 发表于 2017-10-10 22:52:00 | 显示全部楼层
    arbzn 发表于 2017-10-10 21:27; V/ y4 \' @0 X4 a& n$ d
    求教樓主,有些詞典中漢語標點的分號和逗號(;,)在goldendict中會顯示爲英文的分號和逗號(;,),這個有辦法 ...

    ' a0 m! G; d# J# Q& z; `汉语分号的 Unicode 编码是 FF1B、逗号是 FF0C,英文是 3B、2C,应该是不会混淆。
  • TA的每日心情
    慵懒
    2023-10-14 18:34
  • 签到天数: 210 天

    [LV.7]常住居民III

     楼主| 发表于 2017-10-11 00:23:38 | 显示全部楼层
    henices 发表于 2017-10-10 09:215 F2 Z" i6 N* Y
    效果非常不错, 感谢.

    , n0 i: ]3 a) |1 x
    - v/ W) V. s. Z6 H2 H6 J你的“朗文4”里,第二行 “7national se'curity”,那个 7 是因为用了特殊字体:Kingsoft Phonetic Plain,音标也是它。/ _' \2 z" z. d* T: N

    * C5 m  b& o/ i% r1 |) V
    0 o6 X; L& v6 {& e# z) n% T! L8 P! D# K9 E, p& J
  • TA的每日心情
    开心
    2017-10-25 12:37
  • 签到天数: 8 天

    [LV.3]偶尔看看II

    发表于 2017-10-11 13:25:49 | 显示全部楼层
    & O5 m' |& \. l% j

    - D, |7 l9 f5 ?/ G% ?: Q1 M: {8 [8楼的问题如上图,stardict词库的逗号显示不对。另外,该词库引用的外部图片也没法显示。(bgl文件是内置的图片。)
    + B- u- D; z' N+ y. e& a  u; c以前都是用stardict词库的,一时无法割舍。。。。。

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有账号?免费注册

    x
  • TA的每日心情
    慵懒
    2023-10-14 18:34
  • 签到天数: 210 天

    [LV.7]常住居民III

     楼主| 发表于 2017-10-12 10:22:59 | 显示全部楼层
    arbzn 发表于 2017-10-11 13:256 M% H! `: v- W/ z# x
    8楼的问题如上图,stardict词库的逗号显示不对。另外,该词库引用的外部图片也没法显示。(bgl文件是内置 ...

    & V; d  E# H  s" X: i7 z1 g) F$ z. u  g# K& L
    法鼓山做的 Stardict 格式的佛学词典# y: r- W9 l1 }' Q" W
    我在这下载了“丁福保佛學大辭典”,标点和图片显示都很正常。3 f- f& P! F/ _1 R' D
  • TA的每日心情
    开心
    2017-10-25 12:37
  • 签到天数: 8 天

    [LV.3]偶尔看看II

    发表于 2017-10-13 16:36:22 | 显示全部楼层
    用stardict-editor导出这个**的词典为xml文件后,再用stardict-editor编译成stardict格式词典,就和我以前的一样了,在Goldendict中不能正常显示逗号(在stardict程序中也是一样显示不正常)。不只是上面那一个词条的问题。
    7 v; ?  D" ^1 V1 ?+ Z! v  `; `( l7 J6 w" M5 r6 U$ Q" n) W
    有的Mdict的词库在Mdict中能正常显示逗号,在Goldendict中就不行了。
  • TA的每日心情
    郁闷
    2017-10-18 00:48
  • 签到天数: 26 天

    [LV.4]偶尔看看III

    发表于 2017-10-18 15:46:57 | 显示全部楼层
    感謝分享,要慢慢學習才行!!
  • TA的每日心情
    擦汗
    2021-2-3 10:35
  • 签到天数: 327 天

    [LV.8]以坛为家I

    发表于 2017-11-30 01:07:39 | 显示全部楼层
    网上找到的相关分享
    5 K" w, \: C. _7 U+ p% M作个留存,有时间再来研究~
    & \0 Y! y/ L5 I1 l6 g3 |1 v
    & b# O# Z: K+ l  @1 F& _: }1 ?% `谢谢deeke大的分享!
  • TA的每日心情
    开心
    2019-6-12 09:10
  • 签到天数: 141 天

    [LV.7]常住居民III

    发表于 2018-1-25 16:06:26 | 显示全部楼层
    感谢楼主分享,非常感谢。
    您需要登录后才可以回帖 登录 | 免费注册

    本版积分规则

    小黑屋|手机版|Archiver|PDAWIKI |网站地图

    GMT+8, 2024-3-29 00:48 , Processed in 0.042126 second(s), 10 queries , MemCache On.

    Powered by Discuz! X3.4

    Copyright © 2001-2023, Tencent Cloud.

    快速回复 返回顶部 返回列表