Differences

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

--- devel:css [2014-12-11 20:16] – [4. User Styles] 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 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.
 ===== 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 62: / Line 61: @@
 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]]
@@ Line 68: / 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''([[devel:develonly]])| Applied in screen mode |
+| ''conf/userstyle.css''\\ ''conf/userstyle.less''                     | Applied in screen mode                                                                           |
-| ''conf/userprint.css''\\ ''conf/userprint.less''([[devel:develonly]])  | 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''([[devel:develonly]])  | Applied when displaying the [[:syndication|feed]] |
+| ''conf/userfeed.css''\\ ''conf/userfeed.less''                       | Applied when displaying the [[:syndication|feed]]                                                |
-| ''conf/userall.css''\\ ''conf/userall.less''([[devel:develonly]])    | Applied in all display modes |
+| ''conf/userall.css''\\ ''conf/userall.less''                         | Applied in all display modes                                                                     |
-This is useful to override small portions of template or plugin styles without running into problems on updating those later.
+(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 81: / Line 100: @@
 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 [[:pagenames]], they will never contain adjacent underscores.
-In plugins use <pluginname>%%__%%<id>. For example '' 'searchindexplugin%%__%%buttonfield' ''
+In plugins use ''<pluginname>%%__%%<id>''. For example '' 'searchindexplugin%%__%%buttonfield' ''
 ===== Using images and importing styles =====
@@ Line 96: / 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 106: / Line 135: @@
 <code css>
-#IE7 #dokuwiki__header h1 {
+#IE8 #dokuwiki__header h1 {
   ...css styles...
 }
 </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           ^
-| #IE7  | IE 7 and Earlier  |
-| #IE8  | IE 8 only         |
-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.