meta data for this page
  •  

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
wiki:dokuwiki-css-doc [25/08/2021 06:52] – [Styling based on page property] ztrulphcswiki:dokuwiki-css-doc [25/08/2021 07:21] (current) – ztrulphcs
Line 1: Line 1:
-====== CSS Stylesheets ======+====== css ======
  
-Most of [[:DokuWiki]]'s presentation can be controlled through CSS stylesheets. DokuWiki defines some very minimal styles itself. The rest of the CSS definitions come from the [[:template]] and [[:plugins]] used.+using css... bla bla bla
  
-All CSS files are fetched through a single dispatcher in [[xref>lib/exe/css.php]] which also handles caching, pattern replacement, [[LESS]] preprocessing and optimizing. The loading of the stylesheets amongst other things is done via the ''tpl_metaheaders()'' function, so don't forget to have it within your template. 
-===== Stylesheet Modes ===== 
- 
-There are five types of stylesheet modes: 
- 
-  * **screen**: This is used when displaying pages in the web browser 
-  * **print**: Definitions here will be used for printing pages 
-  * **all**: Applied in all display modes 
-  * <del>**rtl**: Definitions in ''rtl'' files will be loaded additionally when a right-to-left [[:localization|language]] is used</del> :!: **[[deprecated]], see [[#RTL Styles]]** 
-  * **feed**: Applied when displaying the [[:syndication|feed]] 
- 
-==== RTL styles ==== 
- 
-The RTL mode has [[devel:releases#deprecation|deprecated]] since release 2012-10-13 "Adora Belle", and should therefore not be used anymore. The new and better technique to write styles for right-to-left [[:localization|languages]] is by using ''[dir=rtl]'' in front of each CSS selector within styles for any of the other modes. E.g. 
- 
-<code css> 
-.someClass { 
-    float: left; 
-    background-color: __background__; 
-} 
-[dir=rtl] .someClass { 
-    float: right; 
-} 
-</code> 
- 
- 
-===== DokuWiki Stylesheets ===== 
- 
-[[:DokuWiki]] loads its stylesheets from 4 sources, which are loaded in this order: 
- 
- 
-==== 1. Base Stylesheets ==== 
- 
-These stylesheets are located within ''/lib/styles''. They define basic styling, like the appearance of error messages. 
- 
-==== 2. Plugins Styles ==== 
- 
-Plugins may define their own style definitions using the following files: 
- 
-^ Mode        ^ CSS File ^ 
-| screen      | ''style.css'' or ''screen.css''  | 
-| print       | ''print.css''  | 
-| all         | ''all.css'' | 
-| <del>rtl</del>         | <del>''rtl.css''</del> :!: **deprecated, see [[#RTL Styles]]**  | 
-| feed        | ''feed.css'' | 
- 
-Stylefiles with extension ''.less'' are supported as well. However you can use [[LESS]] formatting in both the ''*.css'' and ''*.less'' files. 
- 
-To fit in well into any template's color scheme, plugin authors should use the [[style.ini#guaranteed color placeholders]]. 
- 
-:!: Stylesheets from plugins are loaded even if a plugin is not used (but not if a plugin is [[plugin:extension|disabled]]). 
- 
-:!: Styles defined here should take care of conflicts. So please be careful when writing a plugin. If possible add a prefix to your styles so that you're sure they won't conflict. 
- 
-==== 3. Templates Styles ==== 
- 
-Template's stylesheets are loaded from the selected template dir. [[:DokuWiki]] reads the template's ''[[style.ini]]'' located within the directory and loads all CSS that are referenced within that file. The loading is done according to the [[#Stylesheet Modes|current mode]]. 
- 
-  * Changes to ''style.ini'' by wiki admins have to be stored in ''conf/tpl/<tpl>/style.ini''. If the changes are applied via the [[plugin:Styling]] Plugin, this file is automatically created. 
-  * See also: [[templates|Template Development]] 
- 
-==== 4. User Styles ==== 
- 
-Additional styles, independently from the used template can be defined by the wiki administrator by creating the following CSS files in the wiki's configuration folder (''conf/'' in unadjusted wikis): 
- 
-^ CSS File                                                             ^ When it is used                                                                                  ^ 
-| ''conf/userstyle.css''\\ ''conf/userstyle.less''                     | Applied in screen mode                                                                           | 
-| ''conf/userprint.css''\\ ''conf/userprint.less''                     | Applied when a page is printed                                                                   | 
-| <del>''conf/userrtl.css''</del>\\ <sub>Since Angua deprecated</sub>  | Applied when a right-to-left interface language is used :!: **deprecated, see [[#RTL Styles]]**  | 
-| ''conf/userfeed.css''\\ ''conf/userfeed.less''                       | Applied when displaying the [[:syndication|feed]]                                                | 
-| ''conf/userall.css''\\ ''conf/userall.less''                         | Applied in all display modes                                                                     | 
- 
-(Note: the ''.less'' are possible since 2015-08-10 "Detritus".) 
- 
-These style files are useful to override small portions of template or plugin styles without running into problems on updating those later. 
- 
-The following example reduces the bottom margin of the h2 and h3 headings when viewing in browser:  
-<code css userstyle.css> 
-h2, h3 { 
-  margin-bottom: 4px; 
-} 
- 
-</code> 
 ===== Using IDs ===== ===== Using IDs =====
  
Line 174: Line 91:
  
  
- 
-===== Using images and importing styles ===== 
- 
-Relative links to images (''url(...)'') and imported stylesheets (''@import ...'') in your own stylesheets are automatically fixed by DokuWiki's CSS dispatcher by treating them relative to the template's root directory. 
- 
-An example: In a plugin, you want to use an image in the sub directory ''images'' from your ''style.css''. You can simply write the following CSS: 
- 
-<code css> 
-.someclass { 
-   background-image: url(images/icon.gif); 
-} 
-</code> 
- 
-DokuWiki will automatically change the URL, so that the image will be found in the plugin directory, relative to the template directory. 
- 
-**Notes**:  
-  * ''url(...)'' in ''@import folder/style.less'' are not automatically fixed, the dispatcher assumes these are at top level ''lib/exe/'', not in the actual folder. 
-  * ''@import folder/style.css'' is handled by the CSS-dispatcher/LESS-parser as normal [[https://developer.mozilla.org/en-US/docs/Web/CSS/@import|CSS]]. So it is not directly included in the ''css.php''. However, the relative references with ''url(...)'' to ''style.css'''s actual folder are working. Importing css-files is only working if you add these in a ''all.css''/''all.less'', because these place them as really the first lines of the css.php-file. Via the other files these css-imports are ignored, because they are not really on the first line but on the first line of the e.g. a ''@media screen {...}'' block. 
- 
-===== Caching ===== 
- 
-All CSS files are fetched through a single dispatcher in ''lib/exe/css.php'' which also handles caching, amongst other things. The cache expires if files are changed that are mentioned above in the section   [[#DokuWiki stylesheets]] or are referred in the ''style.ini'' of your template. Note: Imported stylesheets (''@import'') are not checked for changes.  
- 
-If you are making changes, ensure that you refresh the cache of your browser by a //Hard reload/Force Refresh// (e.g. in Chrome/Firefox use ''Ctrl+F5''). 
- 
-===== Browser (Internet Explorer) Specific CSS ===== 
- 
-DokuWiki does not provide features to address browser specific CSS rendering, therefore any standard approach can be used in your template files.  
- 
-The [[https://forum.dokuwiki.org/post/40148|suggested approach]], which will allow the DokuWiki CSS-Dispatcher to process and deliver the CSS normally, is to use conditional comments ([[http://www.mediacollege.com/internet/html/detect/detect-ie.html|mediacollege:detect-IE]] or [[http://en.wikipedia.org/wiki/Conditional_comment|WikiPedia Conditional Comments]]) to create <div id> wrappers around the entire content - the wrappers specify the version of IE in use (see the [[https://github.com/selfthinker/dokuwiki_template_starter/blob/master/main.php#L30|dokuwiki_template_starter]] as an example). 
- 
-This wrapper method inserts a specific CSS style ID around the entire content. Your template .css file (design.css, content.css, etc.) then creates browser specific styles by starting a line with #ID.  An example, as used for IE7 would be: 
- 
-<code css> 
-#IE8 #dokuwiki__header h1 { 
-  ...css styles... 
-} 
-</code> 
- 
-You will need to edit the files in your template (ie. ''detail.php'', ''main.php'', etc.) and insert the relevant conditional checks.