devel:css
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
devel:css [2014-03-02 08:26] – Aleksandr | devel:css [2023-01-26 05:03] (current) – Spent hours not knowing that Google Fonts worked as if magic 184.103.8.4 | ||
---|---|---|---|
Line 3: | Line 3: | ||
Most of [[: | Most of [[: | ||
- | All CSS files are fetched through a single dispatcher in [[xref> | + | All CSS files are fetched through a single dispatcher in [[xref> |
===== Stylesheet Modes ===== | ===== Stylesheet Modes ===== | ||
Line 17: | Line 16: | ||
==== RTL styles ==== | ==== RTL styles ==== | ||
- | The RTL mode will be [[devel: | + | The RTL mode has [[devel: |
<code css> | <code css> | ||
Line 49: | Line 48: | ||
| < | | < | ||
| feed | '' | | feed | '' | ||
+ | |||
+ | Stylefiles with extension '' | ||
To fit in well into any template' | To fit in well into any template' | ||
- | :!: Stylesheets from plugins are loaded even if a plugin is not used (but not if a plugin is [[:config: | + | :!: 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. | :!: 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 60: | Line 61: | ||
Template' | Template' | ||
+ | * Changes to '' | ||
* See also: [[templates|Template Development]] | * See also: [[templates|Template Development]] | ||
Line 66: | 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 ('' | 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 ('' | ||
- | ^ CSS File ^ When it is used ^ | + | ^ CSS File |
- | | '' | + | | '' |
- | | '' | + | | '' |
- | | < | + | | < |
- | | '' | + | | '' |
- | | '' | + | | '' |
- | This is useful to override small portions of template or plugin styles without running into problems on updating those later. | + | (Note: the '' |
+ | |||
+ | 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: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Note that an included feature of DokuWiki allows you to use open-source [[https:// | ||
+ | <code css userall.css> | ||
+ | h1, body { | ||
+ | font-family: | ||
+ | } | ||
+ | pre, code { | ||
+ | font-family: | ||
+ | } | ||
+ | </ | ||
===== Using IDs ===== | ===== Using IDs ===== | ||
Line 79: | 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 [[: | 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 [[: | ||
- | In plugins use < | + | In plugins use '' |
===== Using images and importing styles ===== | ===== Using images and importing styles ===== | ||
Line 94: | Line 115: | ||
DokuWiki will automatically change the URL, so that the image will be found in the plugin directory, relative to the template directory. | DokuWiki will automatically change the URL, so that the image will be found in the plugin directory, relative to the template directory. | ||
+ | |||
+ | **Notes**: | ||
+ | * '' | ||
+ | * '' | ||
+ | |||
+ | ===== Caching ===== | ||
+ | |||
+ | All CSS files are fetched through a single dispatcher in '' | ||
+ | |||
+ | If you are making changes, ensure that you refresh the cache of your browser by a //Hard reload/ | ||
===== Browser (Internet Explorer) Specific CSS ===== | ===== Browser (Internet Explorer) Specific CSS ===== | ||
Line 104: | Line 135: | ||
<code css> | <code css> | ||
- | #IE7 # | + | #IE8 # |
...css styles... | ...css styles... | ||
} | } | ||
</ | </ | ||
- | 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. '' |
- | ^ 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. '' | + |
devel/css.1393745174.txt.gz · Last modified: 2014-03-02 08:26 by Aleksandr