這裏顯示兩個版本的差異處。
Both sides previous revision 前次修改 下次修改 | 前次修改 最後一次修改 Both sides next revision | ||
playground:pg9_userdefine [2022/10/17 14:01] kenski [sandbox before userstyle css works] |
playground:pg9_userdefine [2023/10/10 10:35] kenski |
||
---|---|---|---|
行 1: | 行 1: | ||
~~NOTOC~~ | ~~NOTOC~~ | ||
- | ===== PG9 User Define CSS ===== | + | ===== PG09 User Define CSS ===== |
- | * https:// | + | |
- | * https:// | + | * 為了使用者閱讀方便,版面簡潔與色彩或線條區分是必要的,但隨著資訊量增加(ex. tag),便會思考與採用不同的資訊展現方式,由table到two column,使用wrap plugin的box與column,或用tabbox以在最小的版面空間,展現更多分類的資訊量。如果有朝一日這樣仍不足以在單一頁面容納的資訊量,那麼回到以namespace(目錄)與index(索引)等多頁方式來展現便是自然。 |
- | * 放入conf的userstyle.css並沒有如四種CSS順序生效,但發現safety可以產生同box相同不帶icon的效果。(有reload browser也手動清除了css的cache) | + | |
+ | * https:// | ||
+ | * 111.10.13 | ||
+ | * <wrap todo> | ||
+ | * <wrap info>112.10.9 在使用不同theme時發現 在default dokuwiki theme下效果就正常顯示了</ | ||
+ | <nspages playground -h1 -textPages=" | ||
+ | [< | ||
====for simple box==== | ====for simple box==== | ||
+ | wrap plugin中有note類別,只是配色就如同便利貼般顯眼。 | ||
<WRAP center round box 60%> | <WRAP center round box 60%> | ||
- | 「資訊」方盒 | + | box |
</ | </ | ||
<WRAP center round safety 60%> | <WRAP center round safety 60%> | ||
- | 「資訊」方盒 | + | safety |
</ | </ | ||
- | <WRAP center round tip 60%> | + | <WRAP center round warning |
- | 「提示」方盒 | + | warning |
</ | </ | ||
- | <WRAP center round info 60%> | + | <WRAP center round danger |
- | 「協助」方盒 | + | danger |
</ | </ | ||
- | <WRAP center round download | + | <WRAP center round notice |
- | 「下載」方盒 | + | notice |
- | </ | + | |
- | <WRAP center round todo 60%> | + | |
- | 「待辦」方盒 | + | |
</ | </ | ||
---- | ---- | ||
+ | 同樣wrap plugin的box多了icon,配色則較柔和。 | ||
<WRAP center round box 60%> | <WRAP center round box 60%> | ||
bloc simple | bloc simple | ||
行 32: | 行 35: | ||
<WRAP center round info 60%> | <WRAP center round info 60%> | ||
- | bloc information | + | bloc info |
</ | </ | ||
<WRAP center round tip 60%> | <WRAP center round tip 60%> | ||
- | bloc astuce | + | bloc tip |
</ | </ | ||
行 44: | 行 47: | ||
<WRAP center round alert 60%> | <WRAP center round alert 60%> | ||
- | bloc alerte | + | bloc alert |
</ | </ | ||
<WRAP center round help 60%> | <WRAP center round help 60%> | ||
- | bloc aide | + | bloc help |
</ | </ | ||
<WRAP center round download 60%> | <WRAP center round download 60%> | ||
- | bloc téléchargement | + | bloc download |
</ | </ | ||
<WRAP center round todo 60%> | <WRAP center round todo 60%> | ||
- | bloc à faire | + | bloc todo |
</ | </ | ||
- | ====sandbox | + | ====before:: |
<WRAP group> | <WRAP group> | ||
<WRAP half column> | <WRAP half column> | ||
- | <WRAP center round box> | + | <WRAP center round safety> |
- | {{topic> | + | {{topic> |
</ | </ | ||
</ | </ | ||
行 68: | 行 71: | ||
<WRAP half column> | <WRAP half column> | ||
<WRAP center round safety> | <WRAP center round safety> | ||
- | {{topic> | + | {{topic> |
</ | </ | ||
<WRAP center round safety> | <WRAP center round safety> | ||
- | {{topic> | + | {{topic> |
</ | </ | ||
</ | </ | ||
</ | </ | ||
- | ===box cf. tab=== | + | |
+ | ====After:: | ||
+ | <WRAP group> | ||
+ | <WRAP half column> | ||
+ | <WRAP center round download 60%> | ||
+ | {{topic> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <WRAP half column> | ||
+ | <WRAP center round help 60%> | ||
+ | {{topic> | ||
+ | </ | ||
+ | <WRAP center round todo 60%> | ||
+ | {{topic> | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ===tab | ||
<tabbox 相關主題> | <tabbox 相關主題> | ||
- | {{topic> | + | {{topic> |
<tabbox 旅遊資訊> | <tabbox 旅遊資訊> | ||
- | {{topic> | + | {{topic> |
- | < | + | < |
- | {{topic> | + | {{topic> |
+ | <tabbox Business> | ||
+ | {{topic> | ||
</ | </ | ||
<WRAP clear/> | <WRAP clear/> | ||
+ | |||
+ | ===original in table=== | ||
+ | <WRAP group> | ||
+ | <WRAP half column> | ||
+ | {{topic> | ||
+ | </ | ||
+ | |||
+ | <WRAP half column> | ||
+ | {{topic> | ||
+ | |||
+ | {{topic> | ||
+ | </ | ||
+ | </ | ||
+ | <WRAP clear/> | ||
+ | |||
[< | [< |