====== CSSPerPage Plugin ======

---- plugin ----
description: Enables setting of CSS on a per page, per section basis
author     : Myron Turner 
email      : turnermm02@shaw.ca
type       : syntax
lastupdate : 2018-09-15
compatible : Elenor of Tsort,Frusterick Manners,Greebo,Hogfather
depends    : 
conflicts  : 
similar    : 
tags       : css,style,html

downloadurl: https://github.com/turnermm/cssperpage/archive/master.zip
bugtracker : https://github.com/turnermm/cssperpage/issues
sourcerepo : https://github.com/turnermm/cssperpage
donationurl: 

screenshot_img : 
----

===== Installation =====

Install the plugin using the [[plugin:plugin|Plugin Manager]] and the download URL above, which points to latest version of the plugin. Refer to [[:Plugins]] on how to install plugins manually.

===== Examples/Usage =====

''Cssperpage'' enables setting of CSS styles for an entire page or for sections of a page by placing HTML divs around either the entire page or sections. The CSS references these divs and/or their classes. The CSS must be placed in the style.css file of the plugin directory.

This is a screen shot of a page which uses ''cssperpage'' to create styles. The demo folder of the ''cssperpage'' plugin has a sample dokuwiki page that will produce these styles in combination with the style.css file bundled with the plugin.

----

{{  https://i.imgur.com/nPoR7gf.png?direct&500  }}

----

===== Syntax =====
<code>
    ~~cssp_openDIV~~
    ~~cssp_user-defined-name_openDIV~~
    ~~cssp_closeDIV~~
</code>

Each ''openDIV'' form will create an open HTML div tag with a class name.  In the case of ''%%~~cssp_openDIV~~%%'' the class name will be ''opencss''.  In the case of a user defined name, the class name will be the user defined name.  Each ''openDIV'' must have a closing ''closeDIV''.  The id for these DIVs is ''#css_per_page''. The default class is ''opencss'', and the user defined class is the \\ ''user-defined-name''.  The HTML will look like this:

<code>
<div id="#css_per_page" class="opencss">
  --your page data
</div>

<div id="#css_per_page" class="user_defined_name">
  --your page data
</div>
</code>

You can enclose either an entire page between an openDIV and a closeDIV or a part of the page.  But if you are enclosing a part of the page, the open and close DIVs cannot cross over edit section boundaries.  An edit section  boundary is marked by DokuWiki's in-page edit buttons (as opposed to the edit button or link found outside the page, in the tool bars, top of the page, etc).  

=== The CSS ===
The CSS for these DIVs will look something like this:
<file css style.css>
/*user defined class */
#css_per_page.user-defined-name {
  font-size:14pt;
}

/* css_per_page default class: opencss */
#css_per_page.opencss{
    ul {
        list-style-image: url(images/image.gif);
    }
    font-size: 12pt;
}

</file>
==== Change Log ====
{{rss>https://github.com/turnermm/cssperpage/commits/master.atom date}}