tips:styling-headers
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
tips:styling-headers [2009-02-05 02:28] – ryan.chappelle | tips:styling-headers [2016-11-29 15:48] – [{{:images:icon.png}} MyHeading] Wodzu | ||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ====== Using CSS to Style Headers ====== | ||
+ | |||
+ | //This work **in progress** is a contribution originated from discussion in the Forum Thread [[http:// | ||
+ | |||
+ | One of the limitations((as :!: discussed [[faq: | ||
+ | |||
+ | < | ||
+ | ==== {{: | ||
+ | </ | ||
+ | |||
+ | Which renders as: | ||
+ | ==== {{: | ||
+ | |||
+ | 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, '' | ||
+ | |||
+ | Headers can be stylized with normal CSS tags as follows: | ||
+ | <code css> | ||
+ | h1 { | ||
+ | font-family: | ||
+ | font-variant: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Which, on my particular installation, | ||
+ | |||
+ | | {{http:// | ||
+ | |||
+ | |||
+ | But the key to efficiently customize the headers is to remember these three simple rules: | ||
+ | - Every header is a (direct) child of '' | ||
+ | - Every header, except the first, is preceded with a '' | ||
+ | - An '' | ||
+ | |||
+ | 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: | ||
+ | |||
+ | : | ||
+ | |||
+ | It is recommended that one reloads from server (via ''? | ||
+ | |||
+ | ===== Case 1: A simple modification of the text style ===== | ||
+ | |||
+ | This example is very simple. We will apply " | ||
+ | |||
+ | To do this, let's paste the following at the end of our '' | ||
+ | <code css> | ||
+ | h2{ | ||
+ | font-variant: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Reload and marvel before the results: | ||
+ | |||
+ | | {{http:// | ||
+ | |||
+ | ===== Case 2: Borders and backgrounds ===== | ||
+ | |||
+ | This example is a bit more complicated. Paste the following into the '' | ||
+ | <code css> | ||
+ | h2 { | ||
+ | margin: 2px; | ||
+ | padding: 2em; | ||
+ | border: 2px solid __text_alt__; | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | |||
+ | The result is as follows: | ||
+ | |||
+ | | {{http:// | ||
+ | |||
+ | Here you can see that, despite the fact that we have specified a __padding__, | ||
+ | |||
+ | Watch the effects of the following modification: | ||
+ | |||
+ | <code css> | ||
+ | h2 { | ||
+ | margin: 2px; | ||
+ | padding: 2em !important; | ||
+ | border: 2px solid __text_alt__; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | The **'' | ||
+ | |||
+ | | {{http:// | ||
+ | |||
+ | So, bottom line, if you want to do anything with the //size// or //shape// of your headers, you must add the "'' | ||
+ | |||
+ | |||
+ | ===== 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 [[: | ||
+ | |||
+ | Paste the following into the '' | ||
+ | <code css> | ||
+ | h2:before { | ||
+ | content: url(http:// | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | | {{http:// | ||
+ | |||
+ | 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 '': | ||
+ | <code css> | ||
+ | h2:before, h3:before, h4:before { | ||
+ | </ | ||
+ | |||
+ | 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: ' | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | | {{http:// | ||
+ | |||
+ | The '' | ||
+ | |||
+ | ==== The solution for all browsers ==== | ||
+ | |||
+ | The above solution won't work for " | ||
+ | |||
+ | <code css> | ||
+ | h2 { | ||
+ | background: url(http:// | ||
+ | padding-left: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Case 4: Styling a header with respect to the preceding content ===== | ||
+ | |||
+ | //To be done// | ||
+ | |||
+ | {{http:// | ||
+ | |||
+ | ===== Case 5: Styling a header depending on key terms ===== | ||
+ | |||
+ | //To be done// | ||
+ | |||
+ | {{http:// | ||
+ | |||
+ | ====== See also ====== | ||
+ | * [[faq: | ||
+ | * [[tips: | ||
+ | |||
tips/styling-headers.txt · Last modified: 2023-05-03 01:06 by 77.11.72.113