Layouts

Aus DG HochN-Wiki
Wechseln zu:Navigation, Suche
K
K
 
(Eine dazwischenliegende Version desselben Benutzers wird nicht angezeigt)
Zeile 1: Zeile 1:
 
Überblick über Layoutbedarf und existierende Vorlagen:
 
Überblick über Layoutbedarf und existierende Vorlagen:
 
Alle Vorlagen: [[Spezial:Vorlagen]]
 
Alle Vorlagen: [[Spezial:Vorlagen]]
 +
[[Media:HochNWikiFarben.pdf]]
  
== Seiten mit Layout Elementen  ==
+
== Vorgehen ==
 +
[https://getbootstrap.com/docs/4.6/components/alerts/ Bootstrap Version 4] wird unterstützt.
 +
 
 +
* Cards werden Hauptelement für die Übersichtsseiten
 +
** Card-Class stylen: Hintergrundfarbe?, runde Ecken...?
 +
** separat Card-headings und Body, Text stylen, sofern sie genutzt werden haben die dann einheitliche Form
 +
** müssen weitere stylings vorgenommen werden falls eine Card ein [https://getbootstrap.com/docs/4.6/components/card/#image-overlays Hintergrundbild] haben soll, bzw. [https://getbootstrap.com/docs/4.6/components/card/#images oben] oder an der [https://getbootstrap.com/docs/4.6/components/card/#horizontal Seite]?
 +
* Tabellen .wikitable mit Hintergrund aus der HochN bzw DG Farbwelt
 +
* Standard-Farbe für Hintergründe etc [https://www.mediawiki.org/wiki/Snippets/Image_Slideshow_created_by_CSS differenzieren nach nach Namensraum]: HOCH-N Namensraum bekommt das grüne Profil
 +
 
 +
* Farben für die einzelnen Banner festlegen, als div oder Tabelle Wikistyle?
 +
 
 +
 
 +
 
 +
== Sammlung ==
 +
=== Seiten mit Layout Elementen  ===
 
Cards etc. werden für Seiten benötigt, die einen Überblick über ein Themengebiet liefern. Hier sind Beispiele für Übersichtseiten:
 
Cards etc. werden für Seiten benötigt, die einen Überblick über ein Themengebiet liefern. Hier sind Beispiele für Übersichtseiten:
 
* [[Hauptseite]] drei Boxen mit den drei Grundfunktionen des Wikis: Suchen, Schreiben und Vernetzen
 
* [[Hauptseite]] drei Boxen mit den drei Grundfunktionen des Wikis: Suchen, Schreiben und Vernetzen
Zeile 14: Zeile 30:
 
* [[HOCH-N:Nachhaltigkeit im Hochschulbetrieb]] auch eine Handlungsfeldseite aber mit Tabelle
 
* [[HOCH-N:Nachhaltigkeit im Hochschulbetrieb]] auch eine Handlungsfeldseite aber mit Tabelle
  
== Seitentypen zum Überblick und Bedarf an Layout und Elementen ==
+
=== Seitentypen zum Überblick und Bedarf an Layout und Elementen ===
 
Diese Seiten sollten ein eigenes Layout und Design haben anlegen.
 
Diese Seiten sollten ein eigenes Layout und Design haben anlegen.
 
* Überblickseiten
 
* Überblickseiten
Zeile 24: Zeile 40:
 
* Hubseite (Seite einer Veranstaltung, hier werden Standardinhalte für jede Sitzung festgehalten bspw. [[Community - Hub - Überblick und Einstieg ins HochN-Wiki: Auftakt]])
 
* Hubseite (Seite einer Veranstaltung, hier werden Standardinhalte für jede Sitzung festgehalten bspw. [[Community - Hub - Überblick und Einstieg ins HochN-Wiki: Auftakt]])
  
== Benötigte Layout-Elemente ==
+
=== Benötigte Layout-Elemente ===
 
* Cards (Boxen, für Einzelaspekte in einem Überblick)
 
* Cards (Boxen, für Einzelaspekte in einem Überblick)
 
** Mit Überschrift ()
 
** Mit Überschrift ()
Zeile 37: Zeile 53:
 
* Banner (Boxen als Hinweis etc.)
 
* Banner (Boxen als Hinweis etc.)
 
** Achtung allgemeine Warnung rot
 
** Achtung allgemeine Warnung rot
** Tipp / Hinweis extra? freundlich
+
** Tipp extra? freundlich
 +
** Hinweis
 
** Leseempfehlung mit Buch icon oä
 
** Leseempfehlung mit Buch icon oä
 
** Block-Quote ohne Kasten drumrum wie [https://www.mediawiki.org/wiki/Template:Quote hier] (einfach blockquote html-Element stylen)
 
** Block-Quote ohne Kasten drumrum wie [https://www.mediawiki.org/wiki/Template:Quote hier] (einfach blockquote html-Element stylen)
  
== Font Awesome Icons {{#fas:toilet}} ==
+
=== Font Awesome Icons {{#fas:toilet}} ===
{{#fas:anchor}}
+
* Anker {{#fas:anchor}} {{#far:anchor}} wei noch nicht wofür, finde ihn aber cool
{{#fas:toilet}}
+
* Entscheidung / Abwägung {{#fas:balance-scale-left}}
{{#fas:graduation-cap}}
+
* Uni {{#fas:university}}
{{#fas:balance-scale-left}}
+
* Person {{#fas:user-alt}} {{#far:user}}
 +
* Forschung oder Lehre {{#fas:graduation-cap}} {{#far:graduation-cap}}
 +
* Suche / Recherche {{#fas:search}} {{#fas:glasses}}
 +
* Lesetipp / Literatur {{#fas:book}} oder {{#fas:book-open}} {{#far:book}} {{#far:book-open}}
 +
* Tipp {{#fas:lightbulb}} {{#far:lightbulb}}
 +
* Hinweis {{#fas:info-circle}} {{#far:info-circle}}
 +
* Achtung / Gefahr {{#fas:exclamation-triangle}} {{#far:exclamation-triangle}}
 +
* Block-Quote {{#fas:quote-right}} und {{#fas:quote-left}} oder {{#fas:angle-double-right}} und {{#fas:angle-double-left}}
 +
* Network {{#fas:project-diagram}}
 +
* Mitmachen {{#fas:door-open}}
 +
* marker {{#fas:map-marker-alt}}

Aktuelle Version vom 6. Januar 2022, 10:02 Uhr

Überblick über Layoutbedarf und existierende Vorlagen: Alle Vorlagen: Spezial:Vorlagen Media:HochNWikiFarben.pdf

Vorgehen

Bootstrap Version 4 wird unterstützt.

  • Cards werden Hauptelement für die Übersichtsseiten
    • Card-Class stylen: Hintergrundfarbe?, runde Ecken...?
    • separat Card-headings und Body, Text stylen, sofern sie genutzt werden haben die dann einheitliche Form
    • müssen weitere stylings vorgenommen werden falls eine Card ein Hintergrundbild haben soll, bzw. oben oder an der Seite?
  • Tabellen .wikitable mit Hintergrund aus der HochN bzw DG Farbwelt
  • Standard-Farbe für Hintergründe etc differenzieren nach nach Namensraum: HOCH-N Namensraum bekommt das grüne Profil
  • Farben für die einzelnen Banner festlegen, als div oder Tabelle Wikistyle?


Sammlung

Seiten mit Layout Elementen

Cards etc. werden für Seiten benötigt, die einen Überblick über ein Themengebiet liefern. Hier sind Beispiele für Übersichtseiten:

Seitentypen zum Überblick und Bedarf an Layout und Elementen

Diese Seiten sollten ein eigenes Layout und Design haben anlegen.

Benötigte Layout-Elemente

Font Awesome Icons

  • Anker wei noch nicht wofür, finde ihn aber cool
  • Entscheidung / Abwägung
  • Uni
  • Person
  • Forschung oder Lehre
  • Suche / Recherche
  • Lesetipp / Literatur oder
  • Tipp
  • Hinweis
  • Achtung / Gefahr
  • Block-Quote und oder und
  • Network
  • Mitmachen
  • marker
Cookies helfen uns bei der Bereitstellung von DG HochN-Wiki. Durch die Nutzung von DG HochN-Wiki erklärst du dich damit einverstanden, dass wir Cookies speichern.