Michaelsy wrote
[Off topic:]
Ashtagon wrote
... which I can then address using a custom css page ...
... include plugin to insert a page that contains nothing but a grandiose set of customised css...
Oh, sounds very interesting. How can I generate such a "grandiose set of customised css" which i can include with the Include-plugin?
Thanks in advance for the answer
Michael Sy.
(Still off-topic)
At the end of each page that uses customised css, I have something similar to the following:
{{page>5e css}}
This snippet of dokuwiki code use of the
include plugin.
This specific example is written to emulate the look and feel of D&D 5th edition role-playing game books, and doesn't something conceptually similar to
this website. The "5e css" page used in the example above, as I have currently written it, looks like this (scroll to bottom).
The key points to note from this are:
:-) All headers have an alternate method of being formed, using, for example,
<div h3> for a level 3 header. I occasionally found it necessary to create level 6 headers (or at least the appearance of level 6 headers; dw doesn't support this natively), and decided it was simpler to create the code to support both methods, should dw ever catch up.
:-) Dropcaps are formatted by wrapping the paragraph in
<div dropcap>.
:-) Inline "sidebars" are formatted by wrapping the entire "sidebar" in
<div sb>[/m], or more usually, something like [m]<div sb right 50%> to emulate the layout better.
:rolleyes: Sidebar "headers" use
<div sbh3> in this code snippet (quite why I started sidebar header numbering from three is ayone's guess, but I'm used to it now).
This whole thing could easily be done by editing userstyle.css, but that would mean that either the entire site would have the same look and feel across all pages, or the css coding would get hideously complex (e.g., I know of no way to have different header styles in different pages if all the css is in userstyle.css and not in included pages).
<html>
<style type="text/css">
/*
header dark: rgb(88,23,13)
header medium: rgb(201,173,106)
*/
@font-face {
font-family: 'Olde_English';
font-weight: normal;
font-style: normal;
src:
local('Olde_English'), /* not a valid font name */
url('http://127.0.0.1/doku/lib/exe/fetch.php/font/Olde_English.ttf') format('truetype');
}
div.page.group {
background-color: hsl(39,28.4%,92.1%); /* rgb(240,236,229); */
color: black;
text-align: justify;
}
/* ****************** lists ************ */
div.page.group ul {
list-style: disc outside;
}
div.page.group ul li {
color: black;
margin-left: 1.5em;
}
div.page.group ul li div.li {
color: black;
text-align: justify;
}
/* ****************** headers ************ */
h3, div.wrap_h3 p, h4, div.wrap_h4 p {
color: rgb(88,23,13);
font-family: serif;
font-variant: small-caps;
font-weight: bold;
}
h1, div.wrap_h1 p {
color: rgb(88,23,13);
font-family: serif;
font-size: 267%;
font-variant: small-caps;
font-weight: bold;
text-shadow: 1px 1px rgb(208,210,199), -1px -1px rgb(208,210,199), -1px 1px rgb(208,210,199), 1px -1px rgb(208,210,199);
}
h2, div.wrap_h2 p {
color: rgb(88,23,13);
font-family: serif;
font-size: 222%;
font-variant: small-caps;
font-weight: bold;
text-shadow: 1px 1px rgb(208,210,199), -1px -1px rgb(208,210,199), -1px 1px rgb(208,210,199), 1px -1px rgb(208,210,199);
}
h3, div.wrap_h3 p { font-size: 166%; border-bottom: 2px solid rgb(201,172,105); width: 100%; }
h4, div.wrap_h4 p { font-size: 133%; }
h5, div.wrap_h5 p { font-size: 122%; color: black; font-weight: bold; }
/* ****************** boxes ************ */
div.wrap_sb,
div.wrap_table,
div.wrap_inline,
div.wrap_col2, div.wrap_col3 {
margin-bottom: 1em;
padding: 0.5em;
}
div.wrap_col2 div.wrap_sb, div.wrap_col3 div.wrap_sb,
div.wrap_col2 div.wrap_table, div.wrap_col3 div.wrap_table,
div.wrap_col2 div.wrap_inline, div.wrap_col3 div.wrap_inline {
display: table;
width: 100%
}
div.wrap_sb {
background-color: rgb(224,229,193);
border-top: solid 3px black;
border-bottom: solid 3px black;
box-shadow: 0px 4px 4px 0px hsl(0,0%,50%), 4px 4px 4px 0px hsl(0,0%,50%), -4px 4px 4px 0px hsl(0,0%,50%);
}
div.dokuwiki div.wrap_sb {
background-color: transparent;
background:
linear-gradient(150deg, hsl(39,28.4%,92.1%) 0em, hsl(39,28.4%,92.1%) 1em, rgba(0,0,0,0) 1em, rgba(0,0,0,0) 70%) top left,
linear-gradient(210deg, hsl(39,28.4%,92.1%) 0em, hsl(39,28.4%,92.1%) 1em, rgba(0,0,0,0) 1em, rgba(0,0,0,0) 70%) top right,
linear-gradient(330deg, hsl(39,28.4%,92.1%) 0em, hsl(39,28.4%,92.1%) 1em, rgba(0,0,0,0) 1em, rgba(0,0,0,0) 70%) bottom right,
linear-gradient(30deg, hsl(39,28.4%,92.1%) 0em, hsl(39,28.4%,92.1%) 1em, rgba(0,0,0,0) 1em, rgba(0,0,0,0) 70%) bottom left,
-moz-linear-gradient(top, rgba(0,0,0,0) 0em, rgba(0,0,0,0) 0.8em, rgb(0,0,0) 0.8em, rgb(0,0,0) 1em, rgb(224,228,192) 1em, rgb(224,228,192) 60%, rgba(224,228,192,0) 70%),
-moz-linear-gradient(bottom, rgba(0,0,0,0) 0em, rgba(0,0,0,0) 0.8em, rgb(0,0,0) 0.8em, rgb(0,0,0) 1em, rgb(224,228,192) 1em, rgb(224,228,192) 60%, rgba(224,228,192,0) 70%),
-moz-linear-gradient(left, rgb(0,0,0) 0em, rgb(0,0,0) 2em, rgba(0,0,0,0) 2em, rgba(0,0,0,0) 70%),
-moz-linear-gradient(right, rgb(0,0,0) 0em, rgb(0,0,0) 2em, rgba(0,0,0,0) 2em, rgba(0,0,0,0) 70%);
border: 0px;
box-shadow: none;
margin: 0.5em;
padding: 1.5em;
padding-left: 0.5em;
padding-right: 0.5em;
}
div.dokuwiki div.wrap_readout {
background-color: rgb(224,228,192);
border-left: 1px solid black;
border-right: 1px solid black;
box-shadow: none;
margin: 0.5em;
padding: 1.5em;
padding-left: 0.5em;
padding-right: 0.5em;
}
div.wrap_table {
border-left: solid 4px rgb(88,23,13);
border-right: solid 4px rgb(88,23,13);
border-top: double 8px rgb(88,23,13);
border-bottom: double 8px rgb(88,23,13);
border-radius: 20px;
}
div.wrap_inline {
box-shadow: 2px 2px 4px 2px hsl(356,9.6%,50%);
}
/* ****************** text styles ************ */
div.wrap_fluff {
font-style: italic;
margin-left: 1.5em;
}
div.wrap_fluff span.bbcode_smallcaps {
font-style: normal;
}
div.wrap_sig {
text-align: right;
}
div.wrap_dropcap p:first-child:first-letter {
float: left;
font-size: 4.62em;
font-family: Olde_English, Primitive, serif;
font-style: normal;
padding-top: 3px;
padding-right: 3px;
/* text-shadow: 0px 0px 4px black; */
vertical-align: text-top;
}
div.wrap_sbh3 p {
font-size: 122%; /* estimate */
font-weight: bold;
line-height: 1.2;
margin-top: 0;
padding-top: 0;
}
</style>
</html>