kb:intranet:services:wiki:dokuwiki:css_example
This wiki's CSS
As a live document of the custom CSS used, this documentation makes replicating the look-and-feel after a fresh installation relatively easy.
The /conf/tpl/dokuwiki/style.ini
file as follows, for each component listed in the sections below:
[stylesheets] code.css = all scroll.css = all
Code block and syntax highlighting
Hints for Python syntax highlighting from Atom's One Light syntax highlighting and ReadTheDocs. The rest were lifted wholesale from the suggested syntax highlighting.
/conf/userstyle.css
/* manual universal Dokuwiki overrides */ /* bash overrides */ .code.bash .re1 { color: #0000ff; } .code.bash .re2 { color: #0000ff; } .code.bash .re3 { color: #808080; font-style: italic; } .code.bash .re4 { color: #0000ff; } /* c overrides */ .code.c .co2 { color: #339933; } .code.c .me1 { color: #202020; } .code.c .me2 { color: #202020; } /* cpp overrides */ .code.cpp .br0 { color: #000000; } .code.cpp .co1 { color: #ff0000; } .code.cpp .co2 { color: #339900; } .code.cpp .coMULTI { color: #ff0000; font-style: italic; } .code.cpp .es0 { color: #666666; font-weight: bold; } .code.cpp .kw1 { color: #0000ff; } .code.cpp .kw2 { color: #0000ff; } .code.cpp .kw3 { color: #0000dd; } .code.cpp .kw4 { color: #0000ff; } .code.cpp .me1 { color: #00eeff; } .code.cpp .me2 { color: #00eeff; } .code.cpp .nu0 { color: #0000dd; } .code.cpp .st0 { color: #666666; } .code.cpp .sy0 { color: #000000; } /* css overrides */ .code.css .co1 { color: #a1a100; } .code.css .kw1 { color: #000000; font-weight: bold; } .code.css .kw2 { color: #993333; } .code.css .re0 { color: #cc00cc; } .code.css .re1 { color: #6666ff; } .code.css .re2 { color: #3333ff; } .code.css .re3 { color: #933; } .code.css .re4 { color: #933; } /* ini overrides */ .code.ini .co0 { color: #666666; font-style: italic; } .code.ini .re0 { color: #000066; font-weight: bold; } .code.ini .re1 { color: #000099; } .code.ini .re2 { color: #660066; } .code.ini .st0 { color: #933; } .code.ini .sy0 { color: #000066; font-weight: bold; } /* javascript overrides */ .code.javascript .co1 { color: #009900; font-style: italic; } .code.javascript .coMULTI { color: #009900; font-style: italic; } .code.javascript .kw1 { color: #000066; font-weight: bold; } .code.javascript .kw2 { color: #003366; font-weight: bold; } .code.javascript .nu0 { color: #CC0000; } .code.javascript .re0 { color: #0066FF; } .code.javascript .st0 { color: #3366CC; } /* mysql overrides */ .code.mysql .kw1 { color: #993333; font-weight: bold; } .code.mysql .kw2 { color: #aa9933; font-weight: bold; } .code.mysql .kw3 { color: #aa3399; font-weight: bold; } .code.mysql .kw4 { color: #33aa99; font-weight: bold; } .code.mysql .kw5 { color: #993333; font-weight: bold; } /* php overrides */ .code.php .re1 { color: #ff0000; } /* python overrides */ /* note that Geshi 1.0.9.1 syntax highlighting is very outdated, * last updated in 2008 for Python 3.0, e.g. 'print' is a reserved word, * string methods are treated differently... */ :root { --syntax-black: black; --syntax-purple: #A626A4; --syntax-orange: #FF7700; --syntax-grey: #A0A1A7; --syntax-blue: #4078F2; --syntax-green: #50A14F; --syntax-red: #E45649; --syntax-yellow: #B76B01; --syntax-teal: #0184BC; } .code.python .co1 { color: var(--syntax-grey); font-style: italic; } /* comments */ .code.python .br0 { color: var(--syntax-black); } /* brackets */ .code.python .sy0 { color: var(--syntax-black); } /* symbols */ .code.python .kw1 { color: var(--syntax-orange); } /* reserved words */ .code.python .kw2 { color: var(--syntax-purple); font-weight: 100; } /* builtins, self */ .code.python .kw3 { color: var(--syntax-black); } /* stdlib, e.g. struct, datetime */ .code.python .kw4 { color: var(--syntax-black); } /* next, magic methods, string methods */ .code.python .me1 { color: var(--syntax-blue); } /* methods references */ .code.python .nu0 { color: var(--syntax-red); } /* numbers */ .code.python .st0 { color: var(--syntax-green); } /* strings, docstrings */ /* sql overrides */ .code.sql .kw1 { color: #993333; font-weight: bold; } /* xml overrides */ .code.xml .re0 { color: #000066; } .code.xml .re1 { font-weight: bold; color: black; } .code.xml .re2 { font-weight: bold; color: black; } .code.xml .sc0 { color: #00bbdd; } .code.xml .sc1 { color: #ddbb00; } .code.xml .sc2 { color: #339933; } .code.xml .sc3 { color: #009900; }
/conf/tpl/dokuwiki/code.css
p, ul, ol, dl, pre, table, hr, blockquote, figure, details, fieldset, address { margin: 0 0 1.2em 0; } pre, code, samp, kbd { font-size: .85em; background-color: #fafafa; } pre { border: 1px solid #e1e4e5; border-radius: 8px; box-shadow: none; } code { color: #e74c3c; background-color: #fff; box-shadow: none; border: 1px solid #e1e4e5; padding: 2px 5px; }
Scrollbars
Because scrollbars are intuitive enough in the 21st century, so doing away with the arrows.
Note that these scrollbars apply to the ones in the editor as well.
/conf/tpl/dokuwiki/scroll.css
/* https://stackoverflow.com/q/44334106 */ /* Also from Stackoverflow styled scrollbars */ ::-webkit-scrollbar { height: 6px; width: 8px; } ::-webkit-scrollbar-track { border-radius: 0px 0px 10px 10px; background: #fafafa; } ::-webkit-scrollbar-thumb { border-radius: 10px; background: #ddd; }
kb/intranet/services/wiki/dokuwiki/css_example.txt · Last modified: 19 months ago ( 2 May 2023) by 127.0.0.1