DokuWiki

It's better when it's simple

User Tools

Site Tools


template:ghw

jcox Template

Compatible with DokuWiki

No compatibility info given!

template Wiki created to be similar to the stripe.com/docs/ documentation layout and to emphasize its sleek design while still maintaining most if not all of standard DokuWiki functionality

Last updated on
2017-03-14
Repository
Source

This extension has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues.

Similar to dokuwiki

Since my company wanted to emulate the design of stripe.com's documentation layout in the form of a wiki I mainly drew a lot of design features from their site.

We wanted this wiki to have all of the functionality of a standard doku wiki with none of the styling, which is pretty out of date.

Most of the bulk of the changes that differentiate this template from the default dokuwiki template is found in the custom_styles.css file which is under the css subdirectory. Apart from that, some reordering of the header, main, and footer files and some code in the bottom of the script.js file was added to support filtering in the left navbar.

You'll honestly find that whatever you can do in a regular dokuwiki is supported but the aesthetic appeal is much nicer. Enjoy! :)

Download and Install

Use the following URL to download this template:

JCOX DokuWiki

Refer to template on how to install and use templates in DokuWiki.

Hacks for /conf/userstyle.css

… to insert into /conf/userstyle.css.

Dark Mode

userstyle.css
/* Dark Mode */
body {
	background-color: #0d1117;
	color: #c9d1d9;
}
h1, h2, h3, h4, h5, h6 {
    color: inherit;
}
h2 {
	/* border-color: #21262d; */
	border-color: #6e7681;
}
a, a:link, a:visited,
.dokuwiki a.wikilink1, .dokuwiki a.wikilink2:link, .dokuwiki a.wikilink2:visited {
    color: #c9d1d9;
}
input, option, select, textarea {
	background-color: #090d13;
	/* color: #eee !important; */ /* Conflicts with DokuWiki config input fields. */
    font-weight: normal;
}
input:active, input:focus, input:hover,
select:active, select:focus, select:hover,
textarea:active, textarea:focus, textarea:hover {
    background-color: #0d1117;
    border-color: #388bfd;
    outline: none;
    box-shadow: 0 0 0 3px #0c2d6b;
}
/* Color to 'options' of Select box list (see: 'RefNotes' plugin Admin page and 'Compare article revisions' page) */
select option {
    color: #c9d1d9;
}
/* DokuWiki Config page */
#config__manager tr .input, #config__manager tr input, #config__manager tr textarea, #config__manager tr select {
    background-color: #090d13;
    color: #c9d1d9;
}
/* Buttons */
input[type=submit],
input[type=button],
input[type=reset],
input.button,
a.button,
button,
.qq-upload-button {
	background-color: #21262d !important;
	background-image: none !important;
	color: #c9d1d9 !important;
	border: 1px solid !important;
	border-color: #30363d !important;
	transition: .2s cubic-bezier(.3,0,.5,1);
    transition-property: color,background-color,border-color;
	border-radius: 6px;
    /* margin: 5px; /* Breaks "Extension Manager" (Search and Install > Search box button) */
}
input[type=submit]:hover, input[type=submit]:active, input[type=submit]:focus,
input[type=button]:hover, input[type=button]:active, input[type=button]:hover,
input[type=reset]:hover, input[type=reset]:active, input[type=reset]:hover,
input.button:hover, input.button:active, input.button:focus,
a.button:hover, a.button:active, a.button:focus,
button:hover, button:active, button:focus,
.qq-upload-button:hover {
	background-color: #30363d !important;
	border-color: #8b949e !important;
	transition-duration: .1s;
}
/* Save Button - 'Edit', 'Recover draft' and 'DokuWiki Config' pages */
/* form#dw__editform div.no button:first-of-type, */ /* Apply CSS for all first form buttons from 'Edit' and 'Recover draft' pages */
button#edbtn__save, /* 'Save' button - Edit page */
button[name="do[recover]"], /* 'Restore draft' - Recover draft page */
#config__manager p button[type="submit"], /* 'Save' button - DokuWiki Config page */ 
form#dw__register button[type="submit"] /* 'Save' button - User Profile page */ {
    background-color: #238636 !important;
    border-color: #2ea043 !important;
    color: #FFF !important;
}
/* form#dw__editform div.no button:first-of-type:hover, */ /* Apply CSS for all first form buttons from 'Edit' and 'Recover draft' pages */
button#edbtn__save:hover, 
button[name="do[recover]"]:hover, 
#config__manager p button[type="submit"]:hover,
form#dw__register button[type="submit"]:hover {
    background-color: #2ea043 !important;
    border-color: #3fb950 !important;
}
button[name="do[draftdel]"], /* 'Exclude draft' - Recover draft page */
form#dw__profiledelete button[type="submit"] /* 'Exclude user account' button - User Profile page */ {
    border-color: rgba(248,81,73,0.4) !important;
    color: #f85149 !important;
}
button[name="do[draftdel]"]:hover,
form#dw__profiledelete button[type="submit"]:hover {
    background-color: #b62324 !important;
    border-color: #f85149 !important;
    color: #fff !important;
}
/* Forms - Fieldset */
.dokuwiki fieldset,
legend {
    background-color: #0d1117 !important;
    color: #c9d1d9 !important;
    border-color: #6e7681 !important;
}
/* Navbar */
.openbtn, .closebtn {
	background-color: none !important;
	background-image: none !important;
    border: none;
    color: #f0f6fc !important;
    fill: #f0f6fc;
}
.openbtn:focus, .openbtn:hover,
.closebtn:focus, .closebtn:hover {
    color: rgba(240,246,252,0.7) !important;
    fill: rgba(240,246,252,0.7);
}
header#main-header {
	border-bottom: 1px solid #6e7681;
	/* background-color: #161b22; */
}
header#main-header a {
   color: #f0f6fc;
   font-weight: 600;
}
header#main-header a:hover, header#main-header a:focus {
    color: rgba(240,246,252,0.7);
	text-decoration: none;
}
/* Sidebar */
#sidebar {
	background-color: #161b22;
}
#sidebar:before {
	background-image: none;
}
#sidebar .logo a {
    color: #c9d1d9;
}
/* Sidebar - IndexMenu plugin */
.dokuwiki .aside .dtree a,
.dokuwiki .dtree a:visited,
.dokuwiki .aside .dtree a:visited,
.dokuwiki .dtree a:link,
.dokuwiki .aside .dtree a:link {
    font-size: 14px;
    color: rgb(27, 149, 224) !important;
}
.dokuwiki .dtree a.nodeFdUrl:hover,
.dokuwiki .dtree a.nodeSel:hover,
.dokuwiki a.navSel:hover,
.dokuwiki .dtree a.nodeUrl:hover {
    color: rgb(27, 149, 224) !important;
    background-color: transparent;
    text-decoration: underline;
}
.dokuwiki .dtree a.navSel {
    background-color: transparent !important;
    /* color: yellow !important; */
    font-weight: bold;
}
.dokuwiki .dtree a.navSel:hover {
    text-decoration: underline !important;
}
/* PageMenu */
#edit-dash ul#fixed-collapse li {
	/* border-color: #21262d; */
	border-bottom: 1px solid #21262d !important;
}
#edit-dash ul#fixed-collapse li a {
    color: #8b949e;
}
#edit-dash ul#fixed-collapse li svg {
    fill: #8b949e;
}
#edit-dash ul#fixed-collapse li:hover i,
#edit-dash ul#fixed-collapse li:hover svg {
    color: #c9d1d9;
    fill: #c9d1d9;
}
#edit-dash ul#fixed-collapse li:hover {
	/* border-color: #6e7681; */
	border-bottom: 1px solid #6e7681;
}
/* #edit-dash ul#fixed-collapse li:hover a p, */
#edit-dash ul#fixed-collapse li:hover a span:nth-child(2) {
    color: #c9d1d9;
	transition-timing-function: ease-out;
    transition-duration: .12s;
}
/* Article */
article#content {
    /* border-color: #6e7681; */
	border: none;
}
article#content a, a:link {
    color: rgb(27, 149, 224);
}
/* Article - Wrap plugin */
article#content .content .plugin_wrap {
    color: #0d1117;
}
/* Breadcrumbs */
.dokuwiki div.breadcrumbs {
    border-top: none;
}
.dokuwiki div.breadcrumbs,
.dokuwiki div.breadcrumbs div:first-child {
	border-color: #6e7681;
}
/* Bookcreator plugin */
div.bookcreator__bookbar {
    background-color: #161b22;
	border: 1px solid #6e7681;
}
/* TOC */
#dw__toc {
    background-color: #161b22;
	border: 1px solid #6e7681 !important;
	border-left: solid 5px #0670c2 !important;
}
#dw__toc a {
    color: #c9d1d9;
}
/* Tables */
.dokuwiki table,
.dokuwiki div.table {
    background-color: #0d1117;
}
/* article table th */
.dokuwiki table th,
.dokuwiki table td {
    background-color: #0d1117;
    color: #c9d1d9;
}
/* .dokuwiki table.inline tr:hover */
.dokuwiki table tr:hover th,
.dokuwiki table tr:hover td {
    color: #0d1117;
}
/* 'Recover draft' page */
.dokuwiki table.diff th, .dokuwiki table.diff td {
    background-color: inherit;
    color: inherit;
}
.dokuwiki table.diff td.diff-context {
    background-color: #161b22;
}
/* Search page buttons */
/* .dokuwiki fieldset.search-form button {
    margin: 5px;
} */
/* Search results */
.dokuwiki dl.search_results dd.snippet {
    color: #c9d1d9;
}
/* Revision plugin */
.dokuwiki form.changes li .sizechange {
    color: #0d1117;
}
.dokuwiki .diffnav a:before {
    background-color: #090d13;
    color: #c9d1d9;
}
.dokuwiki .diffnav a:hover:before, .dokuwiki .diffnav a:active:before, .dokuwiki .diffnav a:focus:before {
    background-color: #0d1117;
    outline: none;
    border: 1px solid #388bfd;
    box-shadow: 0 0 0 3px #0c2d6b;
}
/* Admin page */
#content div.ui-admin a,
#content div.ui-admin svg path {
    color: #c9d1d9;
    fill: #c9d1d9;
}
/* DokuWiki Configuration page */
#config__manager td.label span.outkey {
    background-color: #0d1117;
    font-size: 10px;
}
#config__manager td.label a {
    background-color: #0d1117;
}
#config__manager td.label label {
    color: #c9d1d9;
}
#config__manager tr:hover td.label label {
    color: #0d1117;
}
/* Extension manager */
#extension__manager .panelHeader {
    background-color: #0d1117;
    border: 1px solid #c9d1d9;
}
.dokuwiki .tabs > ul li a, .dokuwiki ul.tabs li strong, .dokuwiki ul.tabs li a {
    color: #0d1117 !important;
}
#extension__list ul.extensionList li {
    color: #c9d1d9;
}
#content form.search input {
    border: 1px solid #c9d1d9;    
}
/* Wiki Upgrade plugin */
#plugin__upgrade_meter ol li .stage {
    color: #0d1117;
}
#plugin__upgrade_meter ol li .step {
    color: #222;
}
/* User Profile page */
form#dw__profiledelete fieldset span:nth-child(2) {
    color: #f85146;
}
/* Upload Media */
#media__content .odd {
    background-color: #161b22;
}
/* Media Manager */
/* Information about specific media */
#mediamanager__page .file dl {
    color: #373e42;
}
/* Fix: 'Edit' metadata tab from Media Manager form fields */
#mediamanager__page form.meta label {
    color: #373e42;
}
 
@media (max-width: 1023px) {
  #edit-dash ul#fixed-collapse {
    background-color: #0d1117;
    border-color: #6e7681;
  }
}

Sites using this Template

Great Healthworks Wiki *internal*

template/ghw.txt · Last modified: 2023-05-17 18:47 by Aleksandr

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki