CINXE.COM

<!DOCTYPE html> <html lang="en" dir="ltr" class="no-js"> <head> <meta charset="utf-8" /> <title>devel:css [DokuWiki]</title> <meta name="generator" content="DokuWiki"/> <meta name="theme-color" content="#008800"/> <meta name="robots" content="index,follow"/> <meta name="keywords" content="devel,css"/> <link rel="search" type="application/opensearchdescription+xml" href="/lib/exe/opensearch.php" title="DokuWiki"/> <link rel="start" href="/"/> <link rel="contents" href="/devel:css?do=index" title="Sitemap"/> <link rel="manifest" href="/lib/exe/manifest.php"/> <link rel="alternate" type="application/rss+xml" title="Recent Changes" href="/feed.php"/> <link rel="alternate" type="application/rss+xml" title="Current namespace" href="/feed.php?mode=list&ns=devel"/> <link rel="edit" title="Edit this page" href="/devel:css?do=edit"/> <link rel="alternate" type="text/html" title="Plain HTML" href="/_export/xhtml/devel:css"/> <link rel="alternate" type="text/plain" title="Wiki Markup" href="/_export/raw/devel:css"/> <link rel="canonical" href="https://www.dokuwiki.org/devel:css"/> <link rel="stylesheet" href="/lib/exe/css.php?t=dokuwiki&tseed=f1005bad3d81fc9c803c7f93d32a390e"/> <link rel="alternate" hreflang="ja" href="https://www.dokuwiki.org/ja:devel:css"/> <link rel="alternate" hreflang="pl" href="https://www.dokuwiki.org/pl:devel:css"/> <link rel="alternate" hreflang="ru" href="https://www.dokuwiki.org/ru:devel:css"/> <link rel="alternate" hreflang="x-default" href="https://www.dokuwiki.org/devel:css"/> <script >var NS='devel';var JSINFO = {"plugins":{"edittable":{"default columnwidth":""}},"id":"devel:css","namespace":"devel","ACT":"show","useHeadingNavigation":0,"useHeadingContent":0};(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" defer="defer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" defer="defer"></script> <script src="/lib/exe/js.php?t=dokuwiki&tseed=f1005bad3d81fc9c803c7f93d32a390e&lang=en" defer="defer"></script> <meta name="viewport" content="width=device-width,initial-scale=1" /> <link rel="shortcut icon" href="/lib/tpl/dokuwiki/images/favicon.ico" /> <link rel="apple-touch-icon" href="/lib/tpl/dokuwiki/images/apple-touch-icon.png" /> <meta name="verify-v1" content="OVxl3gsCv2MhZqh1cBQyl0JytWXSwXMjyvwc+4w3WtA=" /> <meta name="google-site-verification" content="YhTVK69hW94ZXUtc2zSLPxTkZKbZIn0zK67mz5WQB-E" />  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-83791-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-83791-1', { 'anonymize_ip': true }); </script> </head> <body> <div id="dokuwiki__site"><div id="dokuwiki__top" class="site dokuwiki mode_show tpl_dokuwiki showSidebar hasSidebar">  <header id="dokuwiki__header"><div class="pad group"> <div class="headings group"> <ul class="a11y skip"> <li><a href="#dokuwiki__content">skip to content</a></li> </ul> <h1 class="logo"><a href="/start" accesskey="h" title="Home [h]"><img src="/lib/tpl/dokuwiki/images/logo.png" width="64" height="64" alt="" /><span>DokuWiki</span></a></h1> <p class="claim">It's better when it's simple</p> </div> <div class="tools group">  <div id="dokuwiki__usertools"> <h3 class="a11y">User Tools</h3> <ul> <li class="action login"><a href="/devel:css?do=login&sectok=" title="Log In" rel="nofollow"><span>Log In</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 17.25V14H3v-4h7V6.75L15.25 12 10 17.25M8 2h9a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2v-4h2v4h9V4H8v4H6V4a2 2 0 0 1 2-2z"/></svg></a></li> </ul> </div>  <div id="dokuwiki__sitetools"> <h3 class="a11y">Site Tools</h3> <form action="/start" method="get" role="search" class="search doku_form" id="dw__search" accept-charset="utf-8"><input type="hidden" name="do" value="search" /><input type="hidden" name="id" value="devel:css" /><div class="no"><input name="q" type="text" class="edit" title="[F]" accesskey="f" placeholder="Search" autocomplete="on" id="qsearch__in" value="" /><button value="1" type="submit" title="Search">Search</button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form> <div class="mobileTools"> <form action="/doku.php" method="get" accept-charset="utf-8"><div class="no"><input type="hidden" name="id" value="devel:css" /><select name="do" class="edit quickselect" title="Tools"><option value="">Tools</option><optgroup label="Page Tools"><option value="edit">Edit this page</option><option value="revisions">Old revisions</option><option value="backlink">Backlinks</option></optgroup><optgroup label="Site Tools"><option value="recent">Recent Changes</option><option value="media">Media Manager</option><option value="index">Sitemap</option></optgroup><optgroup label="User Tools"><option value="login">Log In</option></optgroup></select><button type="submit">></button></div></form> </div> <ul> <li class="action recent"><a href="/devel:css?do=recent" title="Recent Changes [r]" rel="nofollow" accesskey="r">Recent Changes</a></li><li class="action media"><a href="/devel:css?do=media&ns=devel" title="Media Manager" rel="nofollow">Media Manager</a></li><li class="action index"><a href="/devel:css?do=index" title="Sitemap [x]" rel="nofollow" accesskey="x">Sitemap</a></li> </ul> </div> </div>  <div class="breadcrumbs"> <div class="trace"><span class="bchead">Trace:</span> <span class="bcsep">•</span> <span class="curid"><bdi><a href="/devel:css" class="breadcrumbs" title="devel:css">css</a></bdi></span></div> </div> <hr class="a11y" /> </div></header> <div class="wrapper group">  <nav id="dokuwiki__aside" aria-label="Sidebar"><div class="pad aside include group"> <h3 class="toggle">Sidebar</h3> <div class="content"><div class="group"> <div class="plugin_translation is-dropdown"><span class="title">Translations of this page<sup><a href="/localization" class="wikilink1" title="localization" data-wiki-id="localization">?</a></sup>: </span><ul><li class="span"><span class="wikilink1" title="English">English (en)</span></li><li class="a"><a class="wikilink2" title="|العربية" href="/ar:devel:css">|العربية (ar)</a></li><li class="a"><a class="wikilink2" title="Català" href="/ca:devel:css">Català (ca)</a></li><li class="a"><a class="wikilink2" title="Česky" href="/cs:devel:css">Česky (cs)</a></li><li class="a"><a class="wikilink2" title="Dansk" href="/da:devel:css">Dansk (da)</a></li><li class="a"><a class="wikilink2" title="Deutsch" href="/de:devel:css">Deutsch (de)</a></li><li class="a"><a class="wikilink2" title="Ελληνικά" href="/el:devel:css">Ελληνικά (el)</a></li><li class="a"><a class="wikilink2" title="Esperanto" href="/eo:devel:css">Esperanto (eo)</a></li><li class="a"><a class="wikilink2" title="Español" href="/es:devel:css">Español (es)</a></li><li class="a"><a class="wikilink2" title="فارسی" href="/fa:devel:css">فارسی (fa)</a></li><li class="a"><a class="wikilink2" title="Français" href="/fr:devel:css">Français (fr)</a></li><li class="a"><a class="wikilink2" title="עברית" href="/he:devel:css">עברית (he)</a></li><li class="a"><a class="wikilink2" title="Magyar" href="/hu:devel:css">Magyar (hu)</a></li><li class="a"><a class="wikilink2" title="Italiano" href="/it:devel:css">Italiano (it)</a></li><li class="a"><a class="wikilink1" title="日本語" href="/ja:devel:css">日本語 (ja)</a></li><li class="a"><a class="wikilink2" title="한국어" href="/ko:devel:css">한국어 (ko)</a></li><li class="a"><a class="wikilink2" title="Lietuvių Kalba" href="/lt:devel:css">Lietuvių Kalba (lt)</a></li><li class="a"><a class="wikilink2" title="Nederlands" href="/nl:devel:css">Nederlands (nl)</a></li><li class="a"><a class="wikilink2" title="Norsk" href="/no:devel:css">Norsk (no)</a></li><li class="a"><a class="wikilink1" title="Polski" href="/pl:devel:css">Polski (pl)</a></li><li class="a"><a class="wikilink2" title="Português" href="/pt-br:devel:css">Português (pt-br)</a></li><li class="a"><a class="wikilink2" title="Română" href="/ro:devel:css">Română (ro)</a></li><li class="a"><a class="wikilink1" title="Русский" href="/ru:devel:css">Русский (ru)</a></li><li class="a"><a class="wikilink2" title="Српски Језик" href="/sr:devel:css">Српски Језик (sr)</a></li><li class="a"><a class="wikilink2" title="Svenska" href="/sv:devel:css">Svenska (sv)</a></li><li class="a"><a class="wikilink2" title="ไทย" href="/th:devel:css">ไทย (th)</a></li><li class="a"><a class="wikilink2" title="Українська" href="/uk:devel:css">Українська (uk)</a></li><li class="a"><a class="wikilink2" title="中文" href="/zh:devel:css">中文 (zh)</a></li><li class="a"><a class="wikilink2" title="繁體中文" href="/zh-tw:devel:css">繁體中文 (zh-tw)</a></li></ul></div> <p> <strong>Learn about DokuWiki</strong> </p> <ul> <li class="level1"><div class="li"> <a href="/features" class="wikilink1" title="features" data-wiki-id="features">Features</a> & <a href="/blogroll" class="wikilink1" title="blogroll" data-wiki-id="blogroll">reviews</a> </div> </li> <li class="level1"><div class="li"> <a href="/install" class="wikilink1" title="install" data-wiki-id="install">Installation guide</a></div> </li> <li class="level1"><div class="li"> <a href="/manual" class="wikilink1" title="manual" data-wiki-id="manual">User manual</a> & <a href="/wiki:syntax" class="wikilink1" title="wiki:syntax" data-wiki-id="wiki:syntax">syntax</a></div> </li> <li class="level1"><div class="li"> <a href="/changes" class="wikilink1" title="changes" data-wiki-id="changes">Release notes</a></div> </li> <li class="level1"><div class="li"> <a href="/faq" class="wikilink1" title="faq" data-wiki-id="faq">FAQ</a></div> </li> </ul> <p> <strong>Advanced Use</strong> </p> <ul> <li class="level1"><div class="li"> <a href="/extensions" class="wikilink1" title="extensions" data-wiki-id="extensions">Extensions</a></div> </li> <li class="level1"><div class="li"> <a href="/development" class="wikilink1" title="development" data-wiki-id="development">Development manual</a></div> </li> </ul> <p> <strong>Corporate Use</strong> </p> <ul> <li class="level1"><div class="li"> <a href="/faq:support" class="wikilink1" title="faq:support" data-wiki-id="faq:support">Get support</a></div> </li> <li class="level1"><div class="li"> <a href="/donate" class="wikilink1" title="donate" data-wiki-id="donate">Donations</a></div> </li> </ul> <p> <strong>Our Community</strong> </p> <ul> <li class="level1"><div class="li"> <a href="/teams:getting_involved" class="wikilink1" title="teams:getting_involved" data-wiki-id="teams:getting_involved">Get involved</a></div> </li> <li class="level1"><div class="li"> <a href="/dokuinstall" class="wikilink1" title="dokuinstall" data-wiki-id="dokuinstall">Users</a></div> </li> <li class="level1"><div class="li"> <a href="http://forum.dokuwiki.org" class="urlextern" title="http://forum.dokuwiki.org">User forum</a></div> </li> <li class="level1"><div class="li"> <a href="/mailinglist" class="wikilink1" title="mailinglist" data-wiki-id="mailinglist">Development mailinglist</a></div> </li> </ul> <hr /> <p> Follow us on <a href="https://phpc.social/@dokuwiki" class="urlextern" title="https://phpc.social/@dokuwiki">Mastodon</a> and other <a href="/social" class="wikilink1" title="social" data-wiki-id="social">social networks</a>. </p> <p> <a href="/privacy" class="wikilink1" title="privacy" data-wiki-id="privacy">Our Privacy Policy</a> </p> </div></div> </div></nav>  <main id="dokuwiki__content"><div class="pad group"> <div class="pageId"><span>devel:css</span></div> <div class="page group">   <div id="dw__toc" class="dw__toc"> <h3 class="toggle">Table of Contents</h3> <div> <ul class="toc"> <li class="level1"><div class="li"><a href="#css_stylesheets">CSS Stylesheets</a></div> <ul class="toc"> <li class="level2"><div class="li"><a href="#stylesheet_modes">Stylesheet Modes</a></div> <ul class="toc"> <li class="level3"><div class="li"><a href="#rtl_styles">RTL styles</a></div></li> </ul> </li> <li class="level2"><div class="li"><a href="#dokuwiki_stylesheets">DokuWiki Stylesheets</a></div> <ul class="toc"> <li class="level3"><div class="li"><a href="#base_stylesheets">1. Base Stylesheets</a></div></li> <li class="level3"><div class="li"><a href="#plugins_styles">2. Plugins Styles</a></div></li> <li class="level3"><div class="li"><a href="#templates_styles">3. Templates Styles</a></div></li> <li class="level3"><div class="li"><a href="#user_styles">4. User Styles</a></div></li> </ul> </li> <li class="level2"><div class="li"><a href="#using_ids">Using IDs</a></div></li> <li class="level2"><div class="li"><a href="#using_images_and_importing_styles">Using images and importing styles</a></div></li> <li class="level2"><div class="li"><a href="#caching">Caching</a></div></li> <li class="level2"><div class="li"><a href="#browser_internet_explorer_specific_css">Browser (Internet Explorer) Specific CSS</a></div></li> </ul></li> </ul> </div> </div>  <h1 class="sectionedit1" id="css_stylesheets">CSS Stylesheets</h1> <div class="level1"> <p> Most of <a href="/dokuwiki" class="wikilink1" title="dokuwiki" data-wiki-id="dokuwiki">DokuWiki</a>'s presentation can be controlled through <abbr title="Cascading Style Sheets">CSS</abbr> stylesheets. DokuWiki defines some very minimal styles itself. The rest of the <abbr title="Cascading Style Sheets">CSS</abbr> definitions come from the <a href="/template" class="wikilink1" title="template" data-wiki-id="template">template</a> and <a href="/plugins" class="wikilink1" title="plugins" data-wiki-id="plugins">plugins</a> used. </p> <p> All <abbr title="Cascading Style Sheets">CSS</abbr> files are fetched through a single dispatcher in <a href="https://codesearch.dokuwiki.org/search?project=dokuwiki&defs=&path=lib%20exe%20css.php" class="interwiki plugin_xref" title="view definition for lib/exe/css.php">lib/exe/css.php</a> which also handles caching, pattern replacement, <a href="/devel:less" class="wikilink1" title="devel:less" data-wiki-id="devel:less">LESS</a> preprocessing and optimizing. The loading of the stylesheets amongst other things is done via the <code>tpl_metaheaders()</code> function, so don't forget to have it within your template. </p> </div> <div class="secedit editbutton_section editbutton_1"><form class="button btn_secedit" method="post" action="/devel:css"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1674705830" /><input type="hidden" name="summary" value="[CSS Stylesheets] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="css_stylesheets" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="1-564" /><button type="submit" title="CSS Stylesheets">Edit</button></div></form></div> <h2 class="sectionedit2" id="stylesheet_modes">Stylesheet Modes</h2> <div class="level2"> <p> There are five types of stylesheet modes: </p> <ul> <li class="level1"><div class="li"> <strong>screen</strong>: This is used when displaying pages in the web browser</div> </li> <li class="level1"><div class="li"> <strong>print</strong>: Definitions here will be used for printing pages</div> </li> <li class="level1"><div class="li"> <strong>all</strong>: Applied in all display modes</div> </li> <li class="level1"><div class="li"> <del><strong>rtl</strong>: Definitions in <code>rtl</code> files will be loaded additionally when a right-to-left <a href="/localization" class="wikilink1" title="localization" data-wiki-id="localization">language</a> is used</del> <img src="/lib/images/smileys/exclaim.svg" class="icon smiley" alt=":!:" /> <strong><a href="/devel:deprecated" class="wikilink1" title="devel:deprecated" data-wiki-id="devel:deprecated">deprecated</a>, see <a href="#rtl_styles" title="devel:css ↵" class="wikilink1">RTL Styles</a></strong></div> </li> <li class="level1"><div class="li"> <strong>feed</strong>: Applied when displaying the <a href="/syndication" class="wikilink1" title="syndication" data-wiki-id="syndication">feed</a></div> </li> </ul> </div> <div class="secedit editbutton_section editbutton_2"><form class="button btn_secedit" method="post" action="/devel:css"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1674705830" /><input type="hidden" name="summary" value="[Stylesheet Modes] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="stylesheet_modes" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="565-1059" /><button type="submit" title="Stylesheet Modes">Edit</button></div></form></div> <h3 class="sectionedit3" id="rtl_styles">RTL styles</h3> <div class="level3"> <p> The RTL mode has <a href="/devel:releases#deprecation" class="wikilink1" title="devel:releases" data-wiki-id="devel:releases">deprecated</a> 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 <a href="/localization" class="wikilink1" title="localization" data-wiki-id="localization">languages</a> is by using <code>[dir=rtl]</code> in front of each <abbr title="Cascading Style Sheets">CSS</abbr> selector within styles for any of the other modes. E.g. </p> <pre class="code css"><span class="re1">.someClass</span> <span class="br0">{</span> <span class="kw1">float</span><span class="sy0">:</span> <span class="kw2">left</span><span class="sy0">;</span> <span class="kw1">background-color</span><span class="sy0">:</span> __background__<span class="sy0">;</span> <span class="br0">}</span> <span class="br0">[</span><span class="kw5">dir</span><span class="sy0">=</span><span class="kw2">rtl</span><span class="br0">]</span> <span class="re1">.someClass</span> <span class="br0">{</span> <span class="kw1">float</span><span class="sy0">:</span> <span class="kw2">right</span><span class="sy0">;</span> <span class="br0">}</span></pre> </div> <div class="secedit editbutton_section editbutton_3"><form class="button btn_secedit" method="post" action="/devel:css"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1674705830" /><input type="hidden" name="summary" value="[RTL styles] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="rtl_styles" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="1060-1551" /><button type="submit" title="RTL styles">Edit</button></div></form></div> <h2 class="sectionedit4" id="dokuwiki_stylesheets">DokuWiki Stylesheets</h2> <div class="level2"> <p> <a href="/dokuwiki" class="wikilink1" title="dokuwiki" data-wiki-id="dokuwiki">DokuWiki</a> loads its stylesheets from 4 sources, which are loaded in this order: </p> </div> <div class="secedit editbutton_section editbutton_4"><form class="button btn_secedit" method="post" action="/devel:css"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1674705830" /><input type="hidden" name="summary" value="[DokuWiki Stylesheets] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="dokuwiki_stylesheets" /><input type="hidden" name="codeblockOffset" value="1" /><input type="hidden" name="range" value="1552-1671" /><button type="submit" title="DokuWiki Stylesheets">Edit</button></div></form></div> <h3 class="sectionedit5" id="base_stylesheets">1. Base Stylesheets</h3> <div class="level3"> <p> These stylesheets are located within <code>/lib/styles</code>. They define basic styling, like the appearance of error messages. </p> </div> <div class="secedit editbutton_section editbutton_5"><form class="button btn_secedit" method="post" action="/devel:css"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1674705830" /><input type="hidden" name="summary" value="[1. Base Stylesheets] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="base_stylesheets" /><input type="hidden" name="codeblockOffset" value="1" /><input type="hidden" name="range" value="1672-1823" /><button type="submit" title="1. Base Stylesheets">Edit</button></div></form></div> <h3 class="sectionedit6" id="plugins_styles">2. Plugins Styles</h3> <div class="level3"> <p> Plugins may define their own style definitions using the following files: </p> <div class="table sectionedit7"><table class="inline"> <thead> <tr class="row0"> <th class="col0 leftalign"> Mode </th><th class="col1"> <abbr title="Cascading Style Sheets">CSS</abbr> File </th> </tr> </thead> <tr class="row1"> <td class="col0 leftalign"> screen </td><td class="col1 leftalign"> <code>style.css</code> or <code>screen.css</code> </td> </tr> <tr class="row2"> <td class="col0 leftalign"> print </td><td class="col1 leftalign"> <code>print.css</code> </td> </tr> <tr class="row3"> <td class="col0 leftalign"> all </td><td class="col1"> <code>all.css</code> </td> </tr> <tr class="row4"> <td class="col0 leftalign"> <del>rtl</del> </td><td class="col1 leftalign"> <del><code>rtl.css</code></del> <img src="/lib/images/smileys/exclaim.svg" class="icon smiley" alt=":!:" /> <strong>deprecated, see <a href="#rtl_styles" title="devel:css ↵" class="wikilink1">RTL Styles</a></strong> </td> </tr> <tr class="row5"> <td class="col0 leftalign"> feed </td><td class="col1"> <code>feed.css</code> </td> </tr> </table></div> <div class="secedit editbutton_table editbutton_7"><form class="button btn_secedit" method="post" action="/devel:css"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1674705830" /><input type="hidden" name="summary" value="[Table] " /><input type="hidden" name="target" value="table" /><input type="hidden" name="hid" value="table" /><input type="hidden" name="range" value="1928-2192" /><button type="submit" title="Table">Edit</button></div></form></div> <p> Stylefiles with extension <code>.less</code> are supported as well. However you can use <a href="/devel:less" class="wikilink1" title="devel:less" data-wiki-id="devel:less">LESS</a> formatting in both the <code>*.css</code> and <code>*.less</code> files. </p> <p> To fit in well into any template's color scheme, plugin authors should use the <a href="/devel:style.ini#guaranteed_color_placeholders" class="wikilink1" title="devel:style.ini" data-wiki-id="devel:style.ini">guaranteed color placeholders</a>. </p> <p> <img src="/lib/images/smileys/exclaim.svg" class="icon smiley" alt=":!:" /> Stylesheets from plugins are loaded even if a plugin is not used (but not if a plugin is <a href="/plugin:extension" class="wikilink1" title="plugin:extension" data-wiki-id="plugin:extension">disabled</a>). </p> <p> <img src="/lib/images/smileys/exclaim.svg" class="icon smiley" alt=":!:" /> 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. </p> </div> <div class="secedit editbutton_section editbutton_6"><form class="button btn_secedit" method="post" action="/devel:css"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1674705830" /><input type="hidden" name="summary" value="[2. Plugins Styles] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="plugins_styles" /><input type="hidden" name="codeblockOffset" value="1" /><input type="hidden" name="range" value="1824-2769" /><button type="submit" title="2. Plugins Styles">Edit</button></div></form></div> <h3 class="sectionedit8" id="templates_styles">3. Templates Styles</h3> <div class="level3"> <p> Template's stylesheets are loaded from the selected template dir. <a href="/dokuwiki" class="wikilink1" title="dokuwiki" data-wiki-id="dokuwiki">DokuWiki</a> reads the template's <code><a href="/devel:style.ini" class="wikilink1" title="devel:style.ini" data-wiki-id="devel:style.ini">style.ini</a></code> located within the directory and loads all <abbr title="Cascading Style Sheets">CSS</abbr> that are referenced within that file. The loading is done according to the <a href="#stylesheet_modes" title="devel:css ↵" class="wikilink1">current mode</a>. </p> <ul> <li class="level1"><div class="li"> Changes to <code>style.ini</code> by wiki admins have to be stored in <code>conf/tpl/<tpl>/style.ini</code>. If the changes are applied via the <a href="/plugin:styling" class="wikilink1" title="plugin:styling" data-wiki-id="plugin:styling">Styling</a> Plugin, this file is automatically created.</div> </li> <li class="level1"><div class="li"> See also: <a href="/devel:templates" class="wikilink1" title="devel:templates" data-wiki-id="devel:templates">Template Development</a></div> </li> </ul> </div> <div class="secedit editbutton_section editbutton_8"><form class="button btn_secedit" method="post" action="/devel:css"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1674705830" /><input type="hidden" name="summary" value="[3. Templates Styles] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="templates_styles" /><input type="hidden" name="codeblockOffset" value="1" /><input type="hidden" name="range" value="2770-3321" /><button type="submit" title="3. Templates Styles">Edit</button></div></form></div> <h3 class="sectionedit9" id="user_styles">4. User Styles</h3> <div class="level3"> <p> Additional styles, independently from the used template can be defined by the wiki administrator by creating the following <abbr title="Cascading Style Sheets">CSS</abbr> files in the wiki's configuration folder (<code>conf/</code> in unadjusted wikis): </p> <div class="table sectionedit10"><table class="inline"> <thead> <tr class="row0"> <th class="col0 leftalign"> <abbr title="Cascading Style Sheets">CSS</abbr> File </th><th class="col1 leftalign"> When it is used </th> </tr> </thead> <tr class="row1"> <td class="col0 leftalign"> <code>conf/userstyle.css</code><br/> <code>conf/userstyle.less</code> </td><td class="col1 leftalign"> Applied in screen mode </td> </tr> <tr class="row2"> <td class="col0 leftalign"> <code>conf/userprint.css</code><br/> <code>conf/userprint.less</code> </td><td class="col1 leftalign"> Applied when a page is printed </td> </tr> <tr class="row3"> <td class="col0 leftalign"> <del><code>conf/userrtl.css</code></del><br/> <sub>Since Angua deprecated</sub> </td><td class="col1 leftalign"> Applied when a right-to-left interface language is used <img src="/lib/images/smileys/exclaim.svg" class="icon smiley" alt=":!:" /> <strong>deprecated, see <a href="#rtl_styles" title="devel:css ↵" class="wikilink1">RTL Styles</a></strong> </td> </tr> <tr class="row4"> <td class="col0 leftalign"> <code>conf/userfeed.css</code><br/> <code>conf/userfeed.less</code> </td><td class="col1 leftalign"> Applied when displaying the <a href="/syndication" class="wikilink1" title="syndication" data-wiki-id="syndication">feed</a> </td> </tr> <tr class="row5"> <td class="col0 leftalign"> <code>conf/userall.css</code><br/> <code>conf/userall.less</code> </td><td class="col1 leftalign"> Applied in all display modes </td> </tr> </table></div> <div class="secedit editbutton_table editbutton_10"><form class="button btn_secedit" method="post" action="/devel:css"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1674705830" /><input type="hidden" name="summary" value="[Table] " /><input type="hidden" name="target" value="table" /><input type="hidden" name="hid" value="table1" /><input type="hidden" name="range" value="3550-4581" /><button type="submit" title="Table">Edit</button></div></form></div> <p> (Note: the <code>.less</code> are possible since 2015-08-10 “Detritus”.) </p> <p> These style files are useful to override small portions of template or plugin styles without running into problems on updating those later. </p> <p> The following example reduces the bottom margin of the h2 and h3 headings when viewing in browser: </p> <dl class="code"> <dt><a href="/_export/code/devel:css?codeblock=1" title="Download Snippet" class="mediafile mf_css">userstyle.css</a></dt> <dd><pre class="code css">h2<span class="sy0">,</span> h3 <span class="br0">{</span> <span class="kw1">margin-bottom</span><span class="sy0">:</span> <span class="re3">4px</span><span class="sy0">;</span> <span class="br0">}</span></pre> </dd></dl> <p> Note that an included feature of DokuWiki allows you to use open-source <a href="https://fonts.google.com" class="urlextern" title="https://fonts.google.com">Google Fonts</a> without needing a local copy of the font on your server. For example, if you want to change the font that comes with your template for only the h1 title, body, and pre/code, simply create a <code>conf/userall.css</code> with the font names you want: </p> <dl class="code"> <dt><a href="/_export/code/devel:css?codeblock=2" title="Download Snippet" class="mediafile mf_css">userall.css</a></dt> <dd><pre class="code css">h1<span class="sy0">,</span> body <span class="br0">{</span> <span class="kw1">font-family</span><span class="sy0">:</span> Source Sans Pro<span class="sy0">;</span> <span class="br0">}</span> <span class="kw2">pre</span><span class="sy0">,</span> code <span class="br0">{</span> <span class="kw1">font-family</span><span class="sy0">:</span> Source Code Pro<span class="sy0">;</span> <span class="br0">}</span></pre> </dd></dl> </div> <div class="secedit editbutton_section editbutton_9"><form class="button btn_secedit" method="post" action="/devel:css"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1674705830" /><input type="hidden" name="summary" value="[4. User Styles] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="user_styles" /><input type="hidden" name="codeblockOffset" value="1" /><input type="hidden" name="range" value="3322-5434" /><button type="submit" title="4. User Styles">Edit</button></div></form></div> <h2 class="sectionedit11" id="using_ids">Using IDs</h2> <div class="level2"> <p> When you use custom IDs in your template for assigning styles, be sure that the ID does not conflict with an existing ID. In particular, be sure that it won’t conflict with the IDs automatically assigned to section headers. The easiest way to ensure this is to use two adjacent underscores (__) in your ID. Because section IDs are always valid <a href="/pagename" class="wikilink1" title="pagename" data-wiki-id="pagename">pagenames</a>, they will never contain adjacent underscores. </p> <p> In plugins use <code><pluginname>__<id></code>. For example <code> 'searchindexplugin__buttonfield' </code> </p> </div> <div class="secedit editbutton_section editbutton_11"><form class="button btn_secedit" method="post" action="/devel:css"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1674705830" /><input type="hidden" name="summary" value="[Using IDs] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="using_ids" /><input type="hidden" name="codeblockOffset" value="3" /><input type="hidden" name="range" value="5435-5969" /><button type="submit" title="Using IDs">Edit</button></div></form></div> <h2 class="sectionedit12" id="using_images_and_importing_styles">Using images and importing styles</h2> <div class="level2"> <p> Relative links to images (<code>url(…)</code>) and imported stylesheets (<code>@import …</code>) in your own stylesheets are automatically fixed by DokuWiki's <abbr title="Cascading Style Sheets">CSS</abbr> dispatcher by treating them relative to the template's root directory. </p> <p> An example: In a plugin, you want to use an image in the sub directory <code>images</code> from your <code>style.css</code>. You can simply write the following <abbr title="Cascading Style Sheets">CSS</abbr>: </p> <pre class="code css"><span class="re1">.someclass</span> <span class="br0">{</span> <span class="kw1">background-image</span><span class="sy0">:</span> <span class="kw3">url</span><span class="br0">(</span><span class="co2">images/icon.gif</span><span class="br0">)</span><span class="sy0">;</span> <span class="br0">}</span></pre> <p> DokuWiki will automatically change the <abbr title="Uniform Resource Locator">URL</abbr>, so that the image will be found in the plugin directory, relative to the template directory. </p> <p> <strong>Notes</strong>: </p> <ul> <li class="level1"><div class="li"> <code>url(…)</code> in <code>@import folder/style.less</code> are not automatically fixed, the dispatcher assumes these are at top level <code>lib/exe/</code>, not in the actual folder.</div> </li> <li class="level1"><div class="li"> <code>@import folder/style.css</code> is handled by the <abbr title="Cascading Style Sheets">CSS</abbr>-dispatcher/LESS-parser as normal <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@import" class="urlextern" title="https://developer.mozilla.org/en-US/docs/Web/CSS/@import">CSS</a>. So it is not directly included in the <code>css.php</code>. However, the relative references with <code>url(…)</code> to <code>style.css</code>'s actual folder are working. Importing css-files is only working if you add these in a <code>all.css</code>/<code>all.less</code>, 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 <code>@media screen {…}</code> block.</div> </li> </ul> </div> <div class="secedit editbutton_section editbutton_12"><form class="button btn_secedit" method="post" action="/devel:css"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1674705830" /><input type="hidden" name="summary" value="[Using images and importing styles] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="using_images_and_importing_styles" /><input type="hidden" name="codeblockOffset" value="3" /><input type="hidden" name="range" value="5970-7401" /><button type="submit" title="Using images and importing styles">Edit</button></div></form></div> <h2 class="sectionedit13" id="caching">Caching</h2> <div class="level2"> <p> All <abbr title="Cascading Style Sheets">CSS</abbr> files are fetched through a single dispatcher in <code>lib/exe/css.php</code> which also handles caching, amongst other things. The cache expires if files are changed that are mentioned above in the section <a href="#dokuwiki_stylesheets" title="devel:css ↵" class="wikilink1">DokuWiki stylesheets</a> or are referred in the <code>style.ini</code> of your template. Note: Imported stylesheets (<code>@import</code>) are not checked for changes. </p> <p> If you are making changes, ensure that you refresh the cache of your browser by a <em>Hard reload/Force Refresh</em> (e.g. in Chrome/Firefox use <code>Ctrl+F5</code>). </p> </div> <div class="secedit editbutton_section editbutton_13"><form class="button btn_secedit" method="post" action="/devel:css"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1674705830" /><input type="hidden" name="summary" value="[Caching] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="caching" /><input type="hidden" name="codeblockOffset" value="4" /><input type="hidden" name="range" value="7402-7938" /><button type="submit" title="Caching">Edit</button></div></form></div> <h2 class="sectionedit14" id="browser_internet_explorer_specific_css">Browser (Internet Explorer) Specific CSS</h2> <div class="level2"> <p> DokuWiki does not provide features to address browser specific <abbr title="Cascading Style Sheets">CSS</abbr> rendering, therefore any standard approach can be used in your template files. </p> <p> The <a href="https://forum.dokuwiki.org/post/40148" class="urlextern" title="https://forum.dokuwiki.org/post/40148">suggested approach</a>, which will allow the DokuWiki <abbr title="Cascading Style Sheets">CSS</abbr>-Dispatcher to process and deliver the <abbr title="Cascading Style Sheets">CSS</abbr> normally, is to use conditional comments (<a href="http://www.mediacollege.com/internet/html/detect/detect-ie.html" class="urlextern" title="http://www.mediacollege.com/internet/html/detect/detect-ie.html">mediacollege:detect-IE</a> or <a href="http://en.wikipedia.org/wiki/Conditional_comment" class="urlextern" title="http://en.wikipedia.org/wiki/Conditional_comment">WikiPedia Conditional Comments</a>) to create <div id> wrappers around the entire content - the wrappers specify the version of <abbr title="Internet Explorer">IE</abbr> in use (see the <a href="https://github.com/selfthinker/dokuwiki_template_starter/blob/master/main.php#L30" class="urlextern" title="https://github.com/selfthinker/dokuwiki_template_starter/blob/master/main.php#L30">dokuwiki_template_starter</a> as an example). </p> <p> This wrapper method inserts a specific <abbr title="Cascading Style Sheets">CSS</abbr> 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: </p> <pre class="code css"><span class="re0">#IE8</span> <span class="re0">#dokuwiki__header</span> h1 <span class="br0">{</span> ..<span class="re1">.css</span> styles... <span class="br0">}</span></pre> <p> You will need to edit the files in your template (ie. <code>detail.php</code>, <code>main.php</code>, etc.) and insert the relevant conditional checks. </p> </div> <div class="secedit editbutton_section editbutton_14"><form class="button btn_secedit" method="post" action="/devel:css"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1674705830" /><input type="hidden" name="summary" value="[Browser (Internet Explorer) Specific CSS] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="browser_internet_explorer_specific_css" /><input type="hidden" name="codeblockOffset" value="4" /><input type="hidden" name="range" value="7939-" /><button type="submit" title="Browser (Internet Explorer) Specific CSS">Edit</button></div></form></div>  </div> <div class="docInfo"><bdi>devel/css.txt</bdi> · Last modified: <time datetime="2023-01-26T05:03:50+0100">2023-01-26 05:03</time> by <bdi>184.103.8.4</bdi></div> <hr class="a11y" /> </div></main>  <nav id="dokuwiki__pagetools" aria-labelledby="dokuwiki__pagetools__heading"> <h3 class="a11y" id="dokuwiki__pagetools__heading">Page Tools</h3> <div class="tools"> <ul> <li class="edit"><a href="/devel:css?do=edit" title="Edit this page [e]" rel="nofollow" accesskey="e"><span>Edit this page</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg></a></li><li class="revs"><a href="/devel:css?do=revisions" title="Old revisions [o]" rel="nofollow" accesskey="o"><span>Old revisions</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 7v5.11l4.71 2.79.79-1.28-4-2.37V7m0-5C8.97 2 5.91 3.92 4.27 6.77L2 4.5V11h6.5L5.75 8.25C6.96 5.73 9.5 4 12.5 4a7.5 7.5 0 0 1 7.5 7.5 7.5 7.5 0 0 1-7.5 7.5c-3.27 0-6.03-2.09-7.06-5h-2.1c1.1 4.03 4.77 7 9.16 7 5.24 0 9.5-4.25 9.5-9.5A9.5 9.5 0 0 0 12.5 2z"/></svg></a></li><li class="backlink"><a href="/devel:css?do=backlink" title="Backlinks" rel="nofollow"><span>Backlinks</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10.59 13.41c.41.39.41 1.03 0 1.42-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0 5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.982 2.982 0 0 0 0-4.24 2.982 2.982 0 0 0-4.24 0l-3.53 3.53a2.982 2.982 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0 5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.982 2.982 0 0 0 0 4.24 2.982 2.982 0 0 0 4.24 0l3.53-3.53a2.982 2.982 0 0 0 0-4.24.973.973 0 0 1 0-1.42z"/></svg></a></li><li class="top"><a href="#dokuwiki__top" title="Back to top [t]" rel="nofollow" accesskey="t"><span>Back to top</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12z"/></svg></a></li> </ul> </div> </nav> </div>  <footer id="dokuwiki__footer"><div class="pad"> <div class="license">Except where otherwise noted, content on this wiki is licensed under the following license: <bdi><a href="https://creativecommons.org/licenses/by-sa/4.0/deed.en" rel="license" class="urlextern">CC Attribution-Share Alike 4.0 International</a></bdi></div> <div class="buttons"> <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.en" rel="license"><img src="/lib/images/license/button/cc-by-sa.png" alt="CC Attribution-Share Alike 4.0 International" /></a> <a href="https://www.dokuwiki.org/donate" title="Donate" ><img src="/lib/tpl/dokuwiki/images/button-donate.gif" width="80" height="15" alt="Donate" /></a> <a href="https://php.net" title="Powered by PHP" ><img src="/lib/tpl/dokuwiki/images/button-php.gif" width="80" height="15" alt="Powered by PHP" /></a> <a href="//validator.w3.org/check/referer" title="Valid HTML5" ><img src="/lib/tpl/dokuwiki/images/button-html5.png" width="80" height="15" alt="Valid HTML5" /></a> <a href="//jigsaw.w3.org/css-validator/check/referer?profile=css3" title="Valid CSS" ><img src="/lib/tpl/dokuwiki/images/button-css.png" width="80" height="15" alt="Valid CSS" /></a> <a href="https://dokuwiki.org/" title="Driven by DokuWiki" ><img src="/lib/tpl/dokuwiki/images/button-dw.png" width="80" height="15" alt="Driven by DokuWiki" /></a> </div> <div style="margin-top: 2em; font-size:90%" class="dokuwiki"><div style="float:right"><a href="http://www.splitbrain.org/personal#imprint" style="float:right; text-decoration: none; color:#333">Imprint</a></div></div> <style type="text/css"> @media screen { body { padding-top: 30px; } #global__header { position: absolute; top: 0; left: 0; text-align: left; vertical-align: middle; line-height: 1.5; background-color: #333; box-shadow: 0 0 8px rgba(0,0,0,0.5); width: 100%; margin: 0; padding: 5px 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; overflow: hidden; } #global__header h2 { position: absolute; left: -99999em; top: 0; overflow: hidden; display: inline; } #global__header ul, #global__header li { margin: 0; padding: 0; list-style: none; display: inline; line-height: 1.5; } #global__header a { color: #bbb; text-decoration: none; margin-right: 20px; font-size: 14px; font-weight: normal; } #global__header a:hover, #global__header a:active, #global__header a:focus { color: #fff; text-decoration: underline; } #global__header form { float: right; margin: 0 0 0 20px; } #global__header input { background-color: #333; background-image: none; border: 1px solid #bbb; color: #fff; box-shadow: none; border-radius: 2px; margin: 0; line-height: normal; padding: 1px 0 1px 0; height: auto; } #global__header input.button { border: none; color: #bbb; } #global__header input.button:hover, #global__header input.button:active, #global__header input.button:focus { color: #fff; text-decoration: underline; } } /* /@media */ @media only screen and (min-width: 601px) { /* changes specific for www.dokuwiki.org */ #dokuwiki__header { padding-top: 3em; } #dokuwiki__usertools { top: 3em; } /* changes specific for bugs.dokuwiki.org */ div#container div#showtask { top: 40px; } } /* /@media */ @media only screen and (max-width: 600px) { body { padding-top: 0; } #global__header { position: static; white-space: normal; overflow: auto; } #global__header form { float: none; display: block; margin: 0 0 .4em; } } /* /@media */ @media print { #global__header { display: none; } } /* /@media */ </style> <div id="global__header"> <h2>Global DokuWiki Links</h2> <form method="get" action="https://search.dokuwiki.org/" target="_top"> <input type="text" name="q" title="Search all DokuWiki sites at once" class="input" /> <input type="submit" title="Search all DokuWiki sites at once" value="Search" class="button" /> </form> <ul> <li><a href="https://download.dokuwiki.org" title="Download the latest release" target="_top">Download</a></li> <li><a href="https://www.dokuwiki.org" title="Read the DokuWiki documentation" target="_top">Wiki</a></li> <li><a href="https://forum.dokuwiki.org" title="Ask questions in the DokuWiki forum" target="_top">Forum</a></li> <li><a href="https://irc.dokuwiki.org" title="Check IRC chat logs or join the chat" target="_top">IRC</a></li> <li><a href="https://github.com/splitbrain/dokuwiki/issues" title="Report and track bugs" target="_top">Bugs</a></li> <li><a href="https://translate.dokuwiki.org/" title="Help translating the DokuWiki interface" target="_top">Translate</a></li> <li><a href="https://github.com/splitbrain/dokuwiki" title="Access the most recent git commits" target="_top">Git</a></li> <li><a href="https://xref.dokuwiki.org/reference/dokuwiki/" title="Cross-Reference of the DokuWiki source code" target="_top">XRef</a></li> <li><a href="https://codesearch.dokuwiki.org/" title="Search through the sources of DokuWiki, plugins and templates" target="_top">Code Search</a></li> </ul> </div>  </div></footer> </div></div> <div class="no"><img src="/lib/exe/taskrunner.php?id=devel%3Acss&1733904120" width="2" height="1" alt="" /></div> <div id="screen__mode" class="no"></div></body> </html>