Difference between revisions of "Template:Hint"
(Refactor again) |
(Fix the new line problem, thanks fxc for point ths out, and https://stackoverflow.com/questions/686898) |
||
| (3 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<noinclude> | <noinclude> | ||
{{Template}} | {{Template}} | ||
| Line 6: | Line 5: | ||
== Usage == | == Usage == | ||
<nowiki>{{Hint|hint content}}</nowiki> | |||
== Example == | |||
<nowiki>{{Hint|This is an hint.}}</nowiki> | <nowiki>{{Hint|This is an hint.}}</nowiki> | ||
{{Hint | This is an hint.}} | |||
For a more flexible usage, it doesn't start with "'''Hint:'''" by default, | |||
you may add it manually with <code><nowiki>'''Hint:'''</nowiki></code>: | |||
<nowiki>{{Hint|'''Hint:''' This is another hint.}}</nowiki> | |||
{{Hint|This is | {{Hint | '''Hint:''' This is another hint.}} | ||
== Technical notes == | == Technical notes == | ||
This template uses class <code>.template-box</code> and <code>.template-hint</code> | The boxes use <code>display: table</code> to support both adaptive width and floating siblings, all other alternatives can't archive them as perfect as this solution within just one HTML element. However, it has its own flaw, if you put it into another table, its padding will gone. Avoid putting hints, notes and warnings into any tables until solution was found, or we give up and use two elements for just one box. | ||
This template uses class <code>.template-box</code> and <code>.template-hint</code>. | |||
In the future, if the [https://www.mediawiki.org/wiki/Extension:TemplateStyles TemplateStyles Extension] is installed on this MediaWiki instance, | In the future, if the [https://www.mediawiki.org/wiki/Extension:TemplateStyles TemplateStyles Extension] is installed on this MediaWiki instance, | ||
one may move the embedded inline styles to Template Style files. | one may move the embedded inline styles to Template Style files. | ||
| Line 24: | Line 34: | ||
* [[Template:Note]] | * [[Template:Note]] | ||
* [[Template:Warning]] | * [[Template:Warning]] | ||
</noinclude><includeonly><div role="note" class="template-box template-hint" style=" | |||
</noinclude><includeonly> | |||
<div role="note" class="template-box template-hint" style=" | |||
display: table; | display: table; | ||
min-width: 16em; | min-width: 16em; | ||
min-height: 1.6em; | min-height: 1.6em; | ||
margin: .5em 0 | margin: .5em 0; | ||
padding: .5em 1em; | padding: .5em 1em; | ||
border: 1px solid #9bcdfd; | border: 1px solid #9bcdfd; | ||
color: #003670; | color: #003670; | ||
background-color: #d1ecfd; | background-color: #d1ecfd; | ||
">{{{1|}}}</div> | ">{{{1|}}}</div></includeonly> | ||
</includeonly> | |||
Revision as of 22:53, 7 October 2021
For more information, read Template:Template.
A hint box for showing helpful hints.
Usage
{{Hint|hint content}}
Example
{{Hint|This is an hint.}}
For a more flexible usage, it doesn't start with "Hint:" by default,
you may add it manually with '''Hint:''':
{{Hint|'''Hint:''' This is another hint.}}
Technical notes
The boxes use display: table to support both adaptive width and floating siblings, all other alternatives can't archive them as perfect as this solution within just one HTML element. However, it has its own flaw, if you put it into another table, its padding will gone. Avoid putting hints, notes and warnings into any tables until solution was found, or we give up and use two elements for just one box.
This template uses class .template-box and .template-hint.
In the future, if the TemplateStyles Extension is installed on this MediaWiki instance,
one may move the embedded inline styles to Template Style files.
See also
- ArchWiki: Template:Tip: the template on which this one is based on
- Template:Note
- Template:Warning