no way to compare when less than two revisions

Differences

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

@@ Line 1: / Line 1: @@
+====== Using CSS to Style Headers. ======
+//This work **in progress** is a contribution originated from discussion in the Forum Thread [[http://forum.dokuwiki.org/thread/3207|Use of small images in the section headers]].//
+One of the limitations((as :!: discussed [[faq:headerlinks|here]] and in the mailing lists)) of the DokuWiki software is the inability to use formatting style and links inside headings (titles). In other words, the following is not possible:
+<code>
+==== {{:images:icon.png}} MyHeading ====
+</code>
+Which renders as:
+==== {{:images:icon.png}} MyHeading ====
+However, this does not mean that headers can not be stylized. As any other element in a wikipage, headers are affected by the styles defined in, preferably, and among other files, ''conf/userstyle.css''. So it is possible to use even very basic CSS rules to add some style to headers.
+Headers can be stylized with normal CSS tags as follows:
+<code css>
+h1 {
+  font-family: fantasy;
+  font-variant: italic;
+  }
+</code>
+Which, on my particular installation, has the following effect:
+| {{http://informatica.temuco.udelmar.cl/~lmachuca/files/dokuwiki/dw-headercss-case00.png}} |
+But the key to efficiently customize the headers is to remember these three simple rules:
+  - Every header is a (direct) child of ''div.page''((the class name can change depending on template)).
+  - Every header, except the first, is preceded with a ''div''.
+  - An ''a'' tag inside the header is the __real__ container of the header text.
+With this simple knowledge, one can do some nice stuff to their headers.
+Here some examples, as well as pictures displaying the effect, will be provided:
+:!:**Note**: these examples are intended for //decent// web browsers, at least. The testsuite is comprised of __Opera 9.6__ and __Firefox 3.0__. These enhacements were not tested in Internet Explorer (and, if they were, most probably they would fail). And the pictures were taken from the __default template__ and rendering by Opera 9.6.
+It is recommended that one reloads from server (via ''?purge=true'', for example) to see the results.
+===== Case 1: A simple modification of the text style =====
+This example is very simple. We will apply "small-caps" to all our ''h2'' headings.
+To do this, let's paste the following at the end of our ''conf/userstyle.css'':
+<code css>
+h2{
+  font-variant: small-caps;
+  }
+</code>
+Reload and marvel before the results:
+| {{http://informatica.temuco.udelmar.cl/~lmachuca/files/dokuwiki/dw-headercss-case1a.png}} |
+===== Case 2: Borders and backgrounds =====
+This example is a bit more complicated. Paste the following into the ''conf/userstyle.css'':
+<code css>
+h2 {
+  margin: 2px;
+  padding: 2em;
+  border: 2px solid __text_alt__;
+  }
+</code>
+The result is as follows:
+| {{http://informatica.temuco.udelmar.cl/~lmachuca/files/dokuwiki/dw-headercss-case2a.png}} |
+Here you can see that, despite the fact that we have specified a __padding__, the text appears very close to the border. The reason for that lies in both the CSS box model and the DokuWiki rendering rules. Besides, there's about //one em// of extra height //above// the  text. This is caused by the ''<a>'' tag placed inside the header.
+Watch the effects of the following modification:
+<code css>
+h2 {
+  margin: 2px;
+  padding: 2em !important;
+  border: 2px solid __text_alt__;
+  }
+</code>
+The **''!important''** modification is necessary because the headers are already being stylized by the ''style.css'' corresponding to the template. The "!important" modificator indicates to the browser that this style takes precedence over a style that is usually overriden by the presence of children elements, of which we have none((the ''<a>'' is an inline element, thus any padding or size setting is ignored as per CSS)).
+| {{http://informatica.temuco.udelmar.cl/~lmachuca/files/dokuwiki/dw-headercss-case2b.png}} |
+So, bottom line, if you want to do anything with the //size// or //shape// of your headers, you must add the "''!important''" modificator to the corresponding rules.
+===== Case 3: Adding a small icon before the heading =====
+A more advanced case would be to add a small icon to the left of our headers, just like what is one with [[:interwiki]] links. For this, we need more advanced CSS rules: in particular, we need __CSS Selectors__.
+Paste the following into the ''conf/userstyle.css'':
+<code css>
+h2:before {
+  content: url(http://informatica.temuco.udelmar.cl/~lmachuca/files/doku.gif);
+  }
+</code>
+| {{http://informatica.temuco.udelmar.cl/~lmachuca/files/dokuwiki/dw-headercss-case3a.png}} |
+Again, reload from server to see the results. See how simple it is to __add a icon to a header__?
+To add the same icon to a group of headers, one would need to indicate the '':before'' selector for all of them:
+<code css>
+h2:before, h3:before, h4:before {
+</code>
+Of course, if you want a text symbol (like, a discus or something, just like __lists__) instead of an image, one can still do that:
+<code css>
+h2:before {
+  content: '\26a0\00a0';
+  }
+</code>
+| {{http://informatica.temuco.udelmar.cl/~lmachuca/files/dokuwiki/dw-headercss-case3b.png}} |
+The ''content'' is added using the Unicode values for the symbols. You can check a list of symbols, as well as their availability for web rendering in your system, at [[http://allanwood.net/|Allan Wood's Page]]. The ''\00a0'' is actually a //nonbreaking space// (the ''&nbsp;'' entity) and is being used to prevent the "warning" symbol from being too close to the text.
+==== The solution for all browsers ====
+The above solution won't work for "old-fashioned" browsers. Here is the variant that will also work in IE6 + IE7:
+<code css>
+h2 {
+  background: url(http://informatica.temuco.udelmar.cl/~lmachuca/files/doku.gif) no-repeat left center;
+  padding-left: 20px;
+}
+</code>
+===== Case 4: Styling a header with respect to the preceding content =====
+//To be done//
+{{http://informatica.temuco.udelmar.cl/~lmachuca/files/dokuwiki/dw-headercss-case4a.png}}
+===== Case 5: Styling a header depending on key terms =====
+//To be done//
+{{http://informatica.temuco.udelmar.cl/~lmachuca/files/dokuwiki/dw-headercss-case5a.png  }}
+====== See also ======
+  * [[faq:headerlinks]]
+  * [[tips:code_css]]