''. For example '' 'searchindexplugin%%__%%buttonfield' ''
===== 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:
.someclass {
background-image: url(images/icon.gif);
}
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 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:
#IE8 #dokuwiki__header h1 {
...css styles...
}
You will need to edit the files in your template (ie. ''detail.php'', ''main.php'', etc.) and insert the relevant conditional checks.