Vorlagen Download/Hinweisbox und Vorlagen Download/Icon: Unterschied zwischen den Seiten

(Unterschied zwischen Seiten)
Keine Bearbeitungszusammenfassung
 
Keine Bearbeitungszusammenfassung
 
Zeile 1: Zeile 1:
{{Textbox|boxtype=note|header=|text=Ab BlueSpice 4.3 können Hinweisboxen als [[Handbuch:Erweiterung/ContentDroplets|Content Droplet]] eingefügt werden. Deshalb wird diese Vorlage nicht mehr benötigt.|icon=yes}}<div class="downloadarea">
{{Textbox|boxtype=note|header=|text=Ab BlueSpice 4.3 können Icons als [[Handbuch:Erweiterung/ContentDroplets|Content Droplet]] eingefügt werden. Deshalb wird diese Vorlage nicht mehr benötigt.|icon=yes}}
<span class="getButton">[[Medium:HW-hinweisbox.zip|Download]]</span>
<div class="downloadarea">
<span class="getButton">[[Medium:HW-Icon.zip|Download]]</span>


[[Datei:HW-Infobox-de.png|450x450px]]
[[File:Icon-template.png|350x350p|alt=Screenshots von Icons auf einer Wikiseite]]</div>Diese Vorlage ermöglicht das Einfügen von Bootstrap-Icons auf einer Seite.
==Vorlage importieren==
Die benötigte Import-Datei befindet sich im Archiv ''HW-Icon.zip''.


</div>
Führen Sie auf der Seite'' Spezial:Import'' in Ihrem Wiki folgende Schritte durch:
Diese Vorlage kann über die Editorleiste auf jeder Wikiseite eingebunden werden. Die Art der Box (Hinweis, Tipp, Warnung, etc.) kann als Parameter angegeben werden. Dieser Parameter bewirkt die entsprechende farbige Formattierung und die jeweilige fettgedruckte Bezeichnung vor dem eigentlichen Hinweistext.
 
Das Symbol kann aktiviert und deaktiviert werden.
==Import der Vorlage==
Die benötigte Import-Datei befindet sich im Archiv ''HW-hinweisbox.zip''. Sie enthält die Datei ''HW-hinweisbox.xml''.
 
Führen Sie auf der Seite ''Spezial:Import'' in Ihrem Wiki folgende Schritte durch:


#'''Entpacken''' Sie die zip-Datei.
#'''Entpacken''' Sie die zip-Datei.
#'''Klicken''' Sie ''Browse...'' und wählen Sie die Datei ''HW-hinweisbox.xml''.
#'''Klicken''' Sie ''Browse...'' und wählen Sie die Datei ''HW-Icon.xml''.
#'''Geben''' Sie ein Interwiki-Präfix '''an'''. Da dieses Feld erforderlich ist, geben Sie hier einfach ''hw'' (für hallowelt) ein.
#'''Geben''' Sie ein Interwiki-Präfix '''an'''. Da dieses Feld erforderlich ist, geben Sie hier einfach ''hw'' (für hallowelt) ein.
#Belassen Sie die Vorauswahl ''Zu den Standard-Speicherorten'' importieren.
#Belassen Sie die Vorauswahl ''Zu den Standard-Speicherorten'' importieren.
#'''Klicken''' Sie ''Datei hochladen...'' .
#'''Klicken''' Sie ''Datei hochladen...'' .


Die Vorlage ist nun in Ihrem Wiki verfügbar und kann über den visuellen Editor eingefügt und bearbeitet werden. Die Standard-Hintergrundfarbe einer Box kann manuell überschrieben werden. So können Sie z.B. den grauen Hintergrund der neutralen Box in jede beliebige Farbe umwandeln. Eine Farbtabelle mit Hex-Werten finden Sie z.B. hier: https://www.w3schools.com/colors/colors_picker.asp. Da die Textfarbe dunkel ist, sollten Sie eine sehr helle Hintergrundfarbe wählen.
Die Vorlage ist nun in Ihrem Wiki verfügbar.
 
[[Datei:HW-Infobox-templatedata.png|alternativtext=Bearbeitungsdialog der Vorlage|zentriert|mini|300x300px|Bearbeitungsdialog der Vorlage]]
 
== Enthaltene Importdateien ==
Der xml-Import erstellt folgende Dateien in Ihrem Wiki:
 
*Vorlage:Hinweisbox
*Vorlage:Hinweisbox/styles.css
 
== <span class="mw-headline" id="Alignment_adjustments">Anpassung d</span>er Ausrichtung ==
Standardmäßig wird daie Box in voller Breite angezeigt. Dies bedeutet, dass es unter jedem Bild angezeigt wird, das direkt vor der Box verwendet wird.
 
Um dieses Verhalten so zu ändern, dass die Box im Textfluss bleibt, können Sie folgende Änderung auf der Seite Vorlage:Hinweisbox/styles.css vornehmen:
 
'''Ersetzen''' Sie für den CSS-Selektor ''.hw-messagebox'' die Deklaration "clear:both" durch "overflow:hidden".


Vorher:
==Enthaltene Importdateien==
.cd-textbox <span class="p">{</span>
Der xml-Import erstellt folgende Datei in Ihrem Wiki:
<span class="err">...</span>
<span class="k">clear</span><span class="p">:</span><span class="kc">both</span><span class="p">;</span>
<span class="p">}</span>
Nachher:
.cd-textbox <span class="p">{</span>
<span class="err">...</span>
<span class="err">overflow</span> <span class="err">hidden</span><span class="p">;</span>
<span class="p">}</span>
[[Datei:hw-messagebox-textflow.png|alternativtext=Hinweisbox im Textfluss|zentriert|mini|650x650px|Hinweisbox im Textfluss]]


*Vorlage:Icon


==Anwendung==
{{Hinweisbox|boxtype=Wichtig|icon=|Note text=BlueSpice beinhaltet nicht immer die aktuellste Version der Bootstrap-Icons.[https://de.wiki.bluespice.com/w/skins/BlueSpiceDiscovery/resources/bootstrap/icons/index.html Hier ist eine Liste der aktuell unterstützten Icons.]|bgcolor=}}
#'''Finden'''  Sie ein Bootstrap-Icon auf der Webseite https://icons.getbootstrap.com/
#'''Klicken''' Sie '''auf''' das gewünschte Icon.  Die Seite für das Icon zeigt Ihnen den class-Namen auf der rechten Seite:[[File:bootstrap-award-icon.png|center|thumb|650x650px|Bootstrap icon css-class|verweis=Special:FilePath/bootstrap-award-icon.png]]
#'''Markieren''' Sie den "class"-Namen (im Format ''bi bi-meinIcon'') aund '''kopieren''' Sie ihn in Ihre Zwischenablage (Strg+c).
#'''Gehen''' Sie zurück auf Ihre Wikiseite.
#'''Geben''' Sie im visuellen Bearbeitungsmodus über Ihr Keyboard zwei geschweifte Klammern '''ein'''  <code><nowiki>{{</nowiki></code> . Der Vorlagen-Editor öffnet sich.[[Datei:vorlagen-editor-icon.png|alternativtext=Vorlagen-Editor|zentriert|mini|400x400px|Vorlagen-Editor]]
#'''Fügen'''  Sie das Icon aus der Zwischenablage '''ein''' (Strg+v):
#'''Ändern''' Sie die Schriftgröße (optional), wenn Sie das Icon größer oder kleiner als die umgebende Schriftgröße darstellen wollen. Kleinere Icons sind meistens nicht kleiner als 0.85em und größere Icons meistens bis höchstens 2.5em.
#'''Farbe:''' Wenn Sie möchten, dass sich die Farbe vom umgebenden Text unterscheidet, können Sie eine beliebige Webfarbe angeben (z. B. einen Farbnamen wie ''blue'' oder einen Hex-Wert wie ''#0059b3'' für ein spezifischeres Blau). Eine Liste der Webfarben finden Sie unter https://www.w3schools.com/colors/colors_picker.asp
#'''Vertikale Ausrichtung:''' Es sollte nicht erforderlich sein, einen Ausrichtungswert anzugeben. Der Standard ist auf ''text-top'' eingestellt und funktioniert normalerweise in Überschriften und im Fließtext. Wenn es schlecht ausgerichtet aussieht, können Sie andere Werte für die vertikale Ausrichtung ausprobieren, z. B. ''text-bottom''. Eine vollständige Liste der möglichen Werte finden Sie unter https://www.w3schools.com/cssref/pr_pos_vertical-align.asp.
#'''Klicken''' Sie auf ''Änderungen speichern''.


Das Icon ist nun auf der Seite sichtbar.


[[File:bootstrap-icon-on page.png|center|thumb|450x450px|Inserted Bootstrap icon|]]


__NOTOC__
== Icon Beispiele ==
[[Category:Neu]]
https://icons.getbootstrap.com/
{| class="wikitable"
|-
|<span class="bi bi-alarm" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-alarm
|<span class="bi bi-archive" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-archive
|<span class="bi bi-arrow-down-circle" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-arrow-down-circle
|<span class="bi bi-arrow-right-circle" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-arrow-right-circle
|<span class="bi bi-award" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-award
|-
|<span class="bi bi-bag" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-bag
|<span class="bi bi-bar-chart" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-bar-chart
|<span class="bi bi-bell" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-bell
|<span class="bi bi-bicylce" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-cup
|<span class="bi bi-book" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-cup
|-
|<span class="bi bi-box" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-box
|<span class="bi bi-box-seam" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-box-seam
|<span class="bi bi-braces" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-braces
|<span class="bi bi-bricks" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-bricks
|<span class="bi bi-briefcase" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-briefcase
|-
|<span class="bi bi-broadcast" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-broadcast
|<span class="bi bi-bug" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-bug
|<span class="bi bi-building" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-building
|<span class="bi bi-bullseye" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-bullseye
|<span class="bi bi-calculator" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-calculator
|-
|<span class="bi bi-calendar-date" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-calendar-date
|<span class="bi bi-card-image" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-card-image
|<span class="bi bi-chat-dots" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-chat-dots
|<span class="bi bi-clipboard-check" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-clipboard-check
|<span class="bi bi-cloud" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-cloud
|-
|<span class="bi bi-code-square" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-code-square
|<span class="bi bi-columns-gap" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-columns-gap
|<span class="bi bi-cone-striped" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-chat-dots
|<span class="bi bi-cup" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-cup
|<span class="bi bi-door-open" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-door-open
|-
|<span class="bi bi-envelope" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-envelope
|<span class="bi bi-eye" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-eye
|<span class="bi bi-flower1" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-flower1
|<span class="bi bi-folder" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-folder
|<span class="bi bi-gear" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-gear
|-
|<span class="bi bi-gem" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-gem
|<span class="bi bi-geo-alt" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-geo-alt
|<span class="bi bi-gift" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-gift
|<span class="bi bi-globe" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-globe
|<span class="bi bi-graph-up" style="font-size:1.8em; font-weight:bold"></span>
|bi bi-graph-up
|}

Aktuelle Version vom 21. Juli 2023, 10:33 Uhr

Ab BlueSpice 4.3 können Icons als Content Droplet eingefügt werden. Deshalb wird diese Vorlage nicht mehr benötigt.

Diese Vorlage ermöglicht das Einfügen von Bootstrap-Icons auf einer Seite.

Vorlage importieren

Die benötigte Import-Datei befindet sich im Archiv HW-Icon.zip.

Führen Sie auf der Seite Spezial:Import in Ihrem Wiki folgende Schritte durch:

  1. Entpacken Sie die zip-Datei.
  2. Klicken Sie Browse... und wählen Sie die Datei HW-Icon.xml.
  3. Geben Sie ein Interwiki-Präfix an. Da dieses Feld erforderlich ist, geben Sie hier einfach hw (für hallowelt) ein.
  4. Belassen Sie die Vorauswahl Zu den Standard-Speicherorten importieren.
  5. Klicken Sie Datei hochladen... .

Die Vorlage ist nun in Ihrem Wiki verfügbar.

Enthaltene Importdateien

Der xml-Import erstellt folgende Datei in Ihrem Wiki:

  • Vorlage:Icon

Anwendung

Wichtig!BlueSpice beinhaltet nicht immer die aktuellste Version der Bootstrap-Icons.Hier ist eine Liste der aktuell unterstützten Icons.
  1. Finden Sie ein Bootstrap-Icon auf der Webseite https://icons.getbootstrap.com/
  2. Klicken Sie auf das gewünschte Icon. Die Seite für das Icon zeigt Ihnen den class-Namen auf der rechten Seite:
    Bootstrap icon css-class
  3. Markieren Sie den "class"-Namen (im Format bi bi-meinIcon) aund kopieren Sie ihn in Ihre Zwischenablage (Strg+c).
  4. Gehen Sie zurück auf Ihre Wikiseite.
  5. Geben Sie im visuellen Bearbeitungsmodus über Ihr Keyboard zwei geschweifte Klammern ein {{ . Der Vorlagen-Editor öffnet sich.
    Vorlagen-Editor
    Vorlagen-Editor
  6. Fügen Sie das Icon aus der Zwischenablage ein (Strg+v):
  7. Ändern Sie die Schriftgröße (optional), wenn Sie das Icon größer oder kleiner als die umgebende Schriftgröße darstellen wollen. Kleinere Icons sind meistens nicht kleiner als 0.85em und größere Icons meistens bis höchstens 2.5em.
  8. Farbe: Wenn Sie möchten, dass sich die Farbe vom umgebenden Text unterscheidet, können Sie eine beliebige Webfarbe angeben (z. B. einen Farbnamen wie blue oder einen Hex-Wert wie #0059b3 für ein spezifischeres Blau). Eine Liste der Webfarben finden Sie unter https://www.w3schools.com/colors/colors_picker.asp
  9. Vertikale Ausrichtung: Es sollte nicht erforderlich sein, einen Ausrichtungswert anzugeben. Der Standard ist auf text-top eingestellt und funktioniert normalerweise in Überschriften und im Fließtext. Wenn es schlecht ausgerichtet aussieht, können Sie andere Werte für die vertikale Ausrichtung ausprobieren, z. B. text-bottom. Eine vollständige Liste der möglichen Werte finden Sie unter https://www.w3schools.com/cssref/pr_pos_vertical-align.asp.
  10. Klicken Sie auf Änderungen speichern.

Das Icon ist nun auf der Seite sichtbar.

bootstrap-icon-on page.png

Icon Beispiele

https://icons.getbootstrap.com/

bi bi-alarm bi bi-archive bi bi-arrow-down-circle bi bi-arrow-right-circle bi bi-award
bi bi-bag bi bi-bar-chart bi bi-bell bi bi-cup bi bi-cup
bi bi-box bi bi-box-seam bi bi-braces bi bi-bricks bi bi-briefcase
bi bi-broadcast bi bi-bug bi bi-building bi bi-bullseye bi bi-calculator
bi bi-calendar-date bi bi-card-image bi bi-chat-dots bi bi-clipboard-check bi bi-cloud
bi bi-code-square bi bi-columns-gap bi bi-chat-dots bi bi-cup bi bi-door-open
bi bi-envelope bi bi-eye bi bi-flower1 bi bi-folder bi bi-gear
bi bi-gem bi bi-geo-alt bi bi-gift bi bi-globe bi bi-graph-up



Feedback zur Dokumentation ist im Community-Forum möglich.

Keine Kategorien vergebenBearbeiten

Diskussionen