Vorlage:Hugo-Notiz: Unterschied zwischen den Versionen

Aus KGS-Wiki
Die Seite wurde neu angelegt: „<templatestyles src="Hugo-Notiz/style.css"/> <includeonly>{{#tag:templatestyles||src="{{PAGENAME}}/style.css"}}</includeonly> <div class="notices {{{1}}}"> {{{2}}} </div> <noinclude> <templatedata> { "params": { "1": { "label": "CSS-Klasse", "description": "Bezeichnung für die CSS-Klasse, die verwendet werden soll", "example": "todo, info, warning", "type": "string", "required": true }, "2": { "label": "Text", "description": "…“
 
Keine Bearbeitungszusammenfassung
 
(14 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
<templatestyles src="Hugo-Notiz/style.css"/>
<onlyinclude><templatestyles src="Hugo-Notiz/style.css"/>
<includeonly>{{#tag:templatestyles||src="{{PAGENAME}}/style.css"}}</includeonly>
<div class="notices {{{1|}}}">
<div class="notices {{{1}}}">
<div class="notices-icon">{{{ICON|🗿}}}</div>
<div class="notices-title">{{{TITLE|Info}}}</div>
<div class="notices-content" style="background: {{{BGCOLOR|#ddd}}}; border-top-color: {{{TITLECOLOR|#888}}};">
{{{2}}}
{{{2}}}
</div>
</div>
</div></onlyinclude>
<noinclude>
<noinclude>
<templatedata>
<templatedata>
Zeile 10: Zeile 13:
"1": {
"1": {
"label": "CSS-Klasse",
"label": "CSS-Klasse",
"description": "Bezeichnung für die CSS-Klasse, die verwendet werden soll",
"description": "Bezeichnung für die CSS-Klasse, die verwendet werden soll, falls für eine Vorlagenart Extra-CSS definiert werden soll.",
"example": "todo, info, warning",
"example": "todo, info, warning",
"type": "string",
"type": "string",
"required": true
"required": false
},
},
"2": {
"2": {
Zeile 22: Zeile 25:
}
}
},
},
"description": "Erzeugt einen Hinweisbaustein im Stil vom Hugo der Weiterbildung",
"description": "Erzeugt einen Hinweisbaustein im Stil vom Hugo der Weiterbildung. Diese Vorlage soll nicht direkt eingesetzt werden, sondern nur als Baukasten für andere Vorlagen.",
"format": "inline"
"format": "inline"
}
}
</templatedata>
</templatedata>
== Zu implementierendes CSS ==
Die folgenden Regeln müssen auf der Seite <code>Vorlage:VORLAGE/style.css</code> eingefügt werden:
<syntaxhighlight lang="css" line>
div.notices.{{{1}}} p {
    background: #E6F9E6;
}
div.notices.{{{1}}} p:first-child {
    border-top: 30px solid rgba(92, 184, 92, 0.8);
}
div.notices.{{{1}}} p:first-child:after {
    content: 'TITEL';
}
div.notices.{{{1}}} p:first-child::before {
    content: "ICON";
}
</syntaxhighlight>
== Beispiel ==
Erzeugt wird die Vorlage <code>Vorlage:Todo</code> mit der CSS-Klasse <code>todo</code>
<syntaxhighlight lang="html" line>
{{Hugo-Notiz|todo|{{{1|Dieser Abschnitt wird gerade überarbeitet}}}}}
</syntaxhighlight>
Die Seite <code>[[Vorlage:Todo/style.css]]</code> enthält folgende Regeln:
{{#tag:syntaxhighlight|{{Todo/style.css}}|lang=css|line=1}}
Die Einbindung <code><nowiki>{{Todo|Sn}}</nowiki></code> erzeugt folgenden Baustein:
{{Todo|Sn}}
</noinclude>
</noinclude>

Aktuelle Version vom 12. November 2024, 07:20 Uhr

🗿
Info

{{{2}}}

Erzeugt einen Hinweisbaustein im Stil vom Hugo der Weiterbildung. Diese Vorlage soll nicht direkt eingesetzt werden, sondern nur als Baukasten für andere Vorlagen.

Vorlagenparameter[Vorlagendaten bearbeiten]

Diese Vorlage bevorzugt Inline-Formatierung von Parametern.

ParameterBeschreibungTypStatus
CSS-Klasse1

Bezeichnung für die CSS-Klasse, die verwendet werden soll, falls für eine Vorlagenart Extra-CSS definiert werden soll.

Beispiel
todo, info, warning
Mehrzeiliger Textoptional
Text2

Text, der in dem Hinweisbaustein erscheinen soll

Unausgeglichener Wikitexterforderlich

Zu implementierendes CSS

Die folgenden Regeln müssen auf der Seite Vorlage:VORLAGE/style.css eingefügt werden:

div.notices.{{{1}}} p {
    background: #E6F9E6;
}
div.notices.{{{1}}} p:first-child {
    border-top: 30px solid rgba(92, 184, 92, 0.8);
}
div.notices.{{{1}}} p:first-child:after {
    content: 'TITEL';
}

div.notices.{{{1}}} p:first-child::before {
    content: "ICON";
}

Beispiel

Erzeugt wird die Vorlage Vorlage:Todo mit der CSS-Klasse todo

{{Hugo-Notiz|todo|{{{1|Dieser Abschnitt wird gerade überarbeitet}}}}}

Die Seite Vorlage:Todo/style.css enthält folgende Regeln:

div.notices.todo div.notices-content {
    border-image: repeating-linear-gradient(135deg, black, black 50px, #fc3 50px, #fc3 100px) 25 0!important;
}

Die Einbindung {{Todo|Sn}} erzeugt folgenden Baustein:

🏗
Baustelle

Dieser Abschnitt wird gerade von Sn überarbeitet