DokuWiki

It's better when it's simple

User Tools

Site Tools


tips:styling-headers

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
Both sides next revision
tips:styling-headers [2009-02-05 02:50]
ryan.chappelle +pictures and extra cases; spellchecking
tips:styling-headers [2017-05-08 21:52] (current)
64.223.211.18
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]]
 +
  
tips/styling-headers.txt ยท Last modified: 2017-05-08 21:52 by 64.223.211.18