DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:cssperpage

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
Last revisionBoth sides next revision
plugin:cssperpage [2018-09-17 16:50] – [Syntax] turnermmplugin:cssperpage [2019-11-29 12:14] Dr-Yukon
Line 1: Line 1:
-====== cssperpage Plugin ======+====== CSSPerPage Plugin ======
  
 ---- plugin ---- ---- plugin ----
-description: Enables setting of CSS on a per page basis.+description: Enables setting of CSS on a per page, per section basis
 author     : Myron Turner  author     : Myron Turner 
-email      : turnermm03@shaw.ca  +email      : turnermm02@shaw.ca 
-type       :  +type       : syntax 
-lastupdate : 2018-09-17 +lastupdate : 2018-09-15 
-compatible : +compatible : Elenor of Tsort,Frusterick Manners,Greebo
 depends    :  depends    : 
 conflicts  conflicts 
 similar    :  similar    : 
-tags       : +tags       : css,style,html
  
 downloadurl: https://github.com/turnermm/cssperpage/archive/master.zip downloadurl: https://github.com/turnermm/cssperpage/archive/master.zip
-bugtracker : # eg. http://github.com/turnermm/dokuwiki-plugin-cssperpage/issues +bugtracker : https://github.com/turnermm/cssperpage/issues 
-sourcerepo : # eg. http://github.com/turnermm/dokuwiki-plugin-cssperpage/+sourcerepo : https://github.com/turnermm/cssperpage
 donationurl:  donationurl: 
  
Line 27: Line 27:
 ===== Examples/Usage ===== ===== 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 must be placed in the style.css file of the plugin directory.+''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. 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.
Line 33: Line 33:
 ---- ----
  
-{{  https://i.imgur.com/nPoR7gf.png?direct&510  }}+{{  https://i.imgur.com/nPoR7gf.png?direct&500  }}
  
 ---- ----
Line 40: Line 40:
 <code> <code>
     ~~cssp_openDIV~~     ~~cssp_openDIV~~
-    ~~cssp_user_defined_name_openDIV~~+    ~~cssp_user-defined-name_openDIV~~
     ~~cssp_closeDIV~~     ~~cssp_closeDIV~~
 </code> </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 mus have a closing %%~~cssp_closeDIV~~%%.+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:
  
-You can enclose an entire page between and 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  bouondary 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).  +<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 ==== ==== Change Log ====
 +{{rss>https://github.com/turnermm/cssperpage/commits/master.atom date}}
  
  
plugin/cssperpage.txt · Last modified: 2020-07-26 15:45 by turnermm

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