Differences

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

--- devel:css [2020-10-18 21:03] – [Caching] Klap-in
+++ devel:css [2023-01-26 05:03] (current) – Spent hours not knowing that Google Fonts worked as if magic 184.103.8.4
@@ Line 84: / Line 84: @@
   margin-bottom: 4px;
 }
+</code>
+Note that an included feature of DokuWiki allows you to use open-source [[https://fonts.google.com|Google Fonts]] 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 ''conf/userall.css'' with the font names you want:
+<code css userall.css>
+h1, body {
+  font-family: Source Sans Pro;
+}
+pre, code {
+  font-family: Source Code Pro;
+}
 </code>
 ===== Using IDs =====
@@ Line 106: / Line 116: @@
 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 =====
@@ Line 127: / Line 140: @@
 </code>
-If you use the dokuwiki_template_starter as the basis for your template, you can use the following #ID's in your CSS file:
+You will need to edit the files in your template (ie. ''detail.php'', ''main.php'', etc.) and insert the relevant conditional checks.
-^ ID    ^ Browser           ^
-| #IE8  | IE 8 and earlier         |
-To use additional IDs, you will need to edit the files in your template (ie. ''detail.php'', ''main.php'', etc.) and insert the relevant conditional checks.