Differences

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

--- devel:css [2015-11-24 20:50] – 204.101.2.230
+++ devel:css [2023-01-26 05:03] (current) – Spent hours not knowing that Google Fonts worked as if magic 184.103.8.4
@@ Line 4: / Line 4: @@
 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.
-dfgdfgdfgdfgdfgdfgdfgdfg f d gdf gfd gdf df fd g
 ===== Stylesheet Modes =====
@@ Line 50: / Line 49: @@
 | feed        | ''feed.css'' |
-Stylefiles with extension ''.less'' are supported as well. However you can use in both, the ''*.css'' and ''*.less'',  the [[LESS]] formatting.
+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 [[:config:disableactions|disabled]]).
+:!: 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.
@@ Line 69: / Line 68: @@
 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 ^
+^ CSS File                                                             ^ When it is used                                                                                  ^
-| ''conf/userstyle.css''\\ ''conf/userstyle.less''| Applied in screen mode |
+| ''conf/userstyle.css''\\ ''conf/userstyle.less''                     | Applied in screen mode                                                                           |
-| ''conf/userprint.css''\\ ''conf/userprint.less''  | Applied when a page is printed |
+| ''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]]** |
+| <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/userfeed.css''\\ ''conf/userfeed.less''                       | Applied when displaying the [[:syndication|feed]]                                                |
-| ''conf/userall.css''\\ ''conf/userall.less''    | Applied in all display modes |
+| ''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>
+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 99: / Line 115: @@
 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 =====
@@ Line 114: / 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.