Template:Note: Difference between revisions

From Flexible Survival
Jump to navigationJump to search
m Attempt to fix variables
m Attempt to fix variables
Line 27: Line 27:
}
}
</css>
</css>
<div class="note {{{Icon}}}">
<div class="note {{lc:{{{Icon}}}}}">
[[File:icon_note{{#if: {{{Icon|}}} | _{{lc:{{{Icon}}}}} | }}.png|frameless|link=]]
[[File:icon_note{{#if: {{{Icon|}}} | _{{lc:{{{Icon}}}}} | }}.png|frameless|link=]]
{{{Content|There's an interesting note you should probably be aware of here, but whoever added this note forgot to fill it in.}}}
{{{Content|There's an interesting note you should probably be aware of here, but whoever added this note forgot to fill it in.}}}

Revision as of 01:04, 1 November 2019

A template for short notes.

Usage

{{Note
| Icon = [<empty>|Warning]
| Content = Content of the note, which can be as long as you like really, but this template is intended for notes of a few sentences in length really.
}}

Examples

<css> div.note {

   position: relative;
   min-height: 3.1em;
   margin: 0.5em 5em;
   padding: 0.1em 1em 0.1em 4em;
   border: 1px solid #8d8d8d;
   border-radius: 0.5em;
   display: flex;
   align-items: center;
   box-shadow: 0 12px 18px -12px #373737;
   background-color: #efefef;

} div.note.warning {

   border-color: #c63f17;
   background-color: #ffa270;

} div.note img:first-of-type {

   position: absolute;
   width: 2em;
   height: 2em;
   left: 2em;
   top: 0.6em;
   transform: translatex(-50%);
   opacity: 60%

} </css>

Content of the note, which can be as long as you like really, but this template is intended for notes of a few sentences in length really.


<css> div.note {

   position: relative;
   min-height: 3.1em;
   margin: 0.5em 5em;
   padding: 0.1em 1em 0.1em 4em;
   border: 1px solid #8d8d8d;
   border-radius: 0.5em;
   display: flex;
   align-items: center;
   box-shadow: 0 12px 18px -12px #373737;
   background-color: #efefef;

} div.note.warning {

   border-color: #c63f17;
   background-color: #ffa270;

} div.note img:first-of-type {

   position: absolute;
   width: 2em;
   height: 2em;
   left: 2em;
   top: 0.6em;
   transform: translatex(-50%);
   opacity: 60%

} </css>

Content of the note, which can be as long as you like really, but this template is intended for notes of a few sentences in length really.