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, 06: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

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
Zeichenfolgeoptional
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