xref: /plugin/pagecss/plugin-page.md (revision 6a458d926978e44b3364ae61e8e8373d66dd839f)
1====== pagecss Plugin ======
2
3---- plugin ----
4description: Inject per-page custom CSS using <css>...</css> blocks. Auto-supports Wrap plugin classes.
5author     : dWiGhT Mulcahy
6email      :
7type       : syntax
8lastupdate : 2025-07-16
9compatible : 2020-07-29 "Hogfather" and later
10depends    :
11conflicts  :
12similar    : plugin:cssperpage
13tags       : css, wrap, style, theme, syntax
14
15downloadurl: https://github.com/dwightmulcahy/dokuwiki-plugin-pagecss/archive/refs/heads/main.zip
16bugtracker : https://github.com/dwightmulcahy/dokuwiki-plugin-pagecss/issues
17sourcerepo : https://github.com/dwightmulcahy/dokuwiki-plugin-pagecss/
18donationurl:
19
20screenshot_img :
21----
22
23//:!: This plugin allows users to style individual pages using inline `<css>` blocks without editing the site template. Useful for per-page banners, notices, or custom layouts.//
24
25===== Installation =====
26
27Install via the [[plugin:extension|Extension Manager]] or manually:
28
29  * Download the ZIP from the link above
30  * Extract it into `lib/plugins/pagecss/`
31  * Make sure `syntax.php` and `plugin.info.txt` are in place
32
33No configuration needed if using the `Wrap` plugin, it works immediately after activation.
34Using the `<div ...>` requires a DocuWiki configuration setting to allow raw HTML.
35
36===== Examples/Usage =====
37
38Define page-specific CSS using the `<css>...</css>` tag:
39
40<code>
41<css>
42.notice {
43  background: #fff3cd;
44  color: #856404;
45  padding: 15px;
46  border-radius: 8px;
47}
48</css>
49</code>
50
51Then apply the class:
52
53  * With **Wrap Plugin**:
54    <code>
55    <WRAP notice>
56    ⚠️ Important notice here.
57    </WRAP>
58    </code>
59
60  * With raw HTML (if `htmlok` is enabled):
61    <code html>
62    <div class="notice">⚠️ Important notice here.</div>
63    </code>
64
65The plugin will automatically generate equivalent `.wrap_notice` styles for use with the Wrap Plugin.
66
67===== Syntax =====
68
69Wrap your CSS block in `<css>...</css>`:
70
71<code>
72<css>
73.highlight {
74  background: #e0f7fa;
75  padding: 10px;
76}
77</css>
78</code>
79
80The plugin will inject this CSS into the HTML `<head>` for the page.
81
82  * Multiple `<css>` blocks are allowed
83  * `.wrap_*` versions are auto-generated to support Wrap Plugin
84  * No output is shown for `<css>` blocks — they only inject CSS
85
86===== Configuration and Settings =====
87
88This plugin requires no configuration if using the `Wrap` plugin.
89
90To use raw `<div class="...">` HTML, enable raw HTML rendering:
91
92In `conf/local.php`:
93<code php>
94$conf['htmlok'] = 1;
95</code>
96
97And make sure your user account has permission to use raw HTML.
98
99===== Development =====
100
101The source code is available at:
102
103  * GitHub: [https://github.com/example/dokuwiki-plugin-pagecss](https://github.com/dwightmulcahy/dokuwiki-plugin-pagecss)
104
105=== Changelog ===
106
107{{rss>https://github.com/dwightmulcahy/dokuwiki-plugin-pagecss/commits/main.atom date 8}}
108
109=== Known Bugs and Issues ===
110
111  * Wrap class generation duplicates entire blocks — can be optimized
112  * No validation on CSS (invalid styles will be silently injected)
113
114=== ToDo/Wish List ===
115
116  * Add support for per-namespace CSS
117  * Option to minify output CSS
118  * Admin option to disable raw `<div>` styling
119
120===== FAQ =====
121
122**Q:** Does this plugin affect other pages?\\
123**A:** No. The CSS is injected only into the page that includes the `<css>` block.
124
125**Q:** Do I need the Wrap plugin?\\
126**A:** No, but if you use Wrap syntax, this plugin ensures your styles apply to `.wrap_*` classes automatically.
127
128**Q:** What if I use the same class name on two pages?\\
129**A:** That's fine — each page injects its own CSS. There’s no global conflict.
130