Zuletzt bearbeitet vor 2 Monaten
von Margit Link-Rodrigue

MediaWiki:Common.css und Vorlagen Download/PortalFlex: Unterschied zwischen den Seiten

(Unterschied zwischen Seiten)
Keine Bearbeitungszusammenfassung
 
(Die Seite wurde neu angelegt: „{{DISPLAYTITLE:Portal flex}} <div class="downloadarea"> <span class="getButton">Download</span> Datei:HW-PortalFlex-Combo-de…“)
Markierung: 2017-Quelltext-Bearbeitung
 
Zeile 1: Zeile 1:
/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */
{{DISPLAYTITLE:Portal flex}}
/*Discussions and attachments currently not in use in the helpdesk, therfore hiding for no */
<div class="downloadarea">
<span class="getButton">[[Medium:HW-PortalFlex-de.zip|Download]]</span>


#data-after-content {display: none;}
[[Datei:HW-PortalFlex-Combo-de.png|450x450px]]
table {font-size: var(--content-font-size);}
.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {padding: 0.8em 0.4em;}
span.new::after { content: 'neu!'; vertical-align: super; background: #64b334; margin-left: 3px;font-size: 10px;padding: 2px 5px; border-radius: 50%;
color:#ffffff;}
.flexbox{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;align-content:stretch;}
.flexbox div{margin:5px;padding:2px 8px;text-align:center;background:#ececec}
.center > div.thumb {margin-top:2em}
#content .toctitle h2 {margin-right: 1em; display: inline;font-size: 1.4rem;}
.qtip {font-size: 1em;line-height: 1.4em;}


/*Related links */
</div>
h2#relatedinfo
Die Vorlage ''Portal flex'' erlaubt es, mehrspaltig formatierte Inhalte auf einer Seite darzustellen. Zusätzlich kann am Beginn der Seite ein Einleitungsabschnitt vorangestellt werden.  
{border-left: solid 4px #d8d8d9;
background:#f1f3f9;
color: #868585;
margin-top: 3rem;
margin-bottom:0 !important;
padding: 20px 10px 2px 30px;
}
.relatedtopics {
display:flex;
flex-wrap: wrap;
border-left: solid 4px #d8d8d9;
background:#f1f3f9;
padding: 2em !important;
margin:0  !important;
}
.relatedtopics .col{flex-basis: 50%; flex-grow: 1; flex-shrink: 1;}


/*Themen*/
Einzelne mit ''Portal flex'' erstellte Seiten können auch über Transklusion zu einer Portalseite vereint werden (siehe '''Abbildung''' rechts).  
.flexbox.themenhd div {background:#fff; border:1px solid #d8d8d9; padding:10px 20px; flex-basis:24%; text-align:left}
.flexbox.themenhd div [class*=" bi-"]::before {font-size: 1.6em; vertical-align: middle;background-color: #fff; padding: 6px; border-radius: 50%;}
.flexbox.themenhd div [class*=" bi-"]::before {font-size:2em; vertical-align:middle; background-color:#f1f3f9; padding: 10px; }
.themenhd div a {display:block}
.themenhd div:hover {background:rgb(233,233,238,0.5)}
ul.smw-format.ul-format.alltopics-col {column-count: 3;}


/*Tours */
Das so entstandene Layout ist responsiv und wird entsprechend für mobile Geräten optimiert angezeigt.  
.nextstep {display: inline-block;padding: 6px;background: #36c;border-radius: 2px;color: #ffffff;font-weight: bold;}
==Import der Vorlage==
#mw-content-text .nextstep a:not(.new), [class^="mw-content-"] .nextstep a:not(.new), #mw-content-text .nextstep a:link:not(.new), [class^="mw-content-"] .nextstep a:link:not(.new) {
Die benötigte Import-Datei befindet sich im Archiv ''HW-PortalFlex-de.zip''.  
    color: #ffffff;    font-weight: bold;}
#mw-content-text .nextstep a:not(.new):hover, #mw-content-text .nextstep a:link:not(.new):hover, [class^="mw-content-"] .nextstep a:link:not(.new):hover {
    color: #efefef;}
.nextstep a:not(.new)::after, .nextstep a:link:not(.new)::after {content: " \25B6";}


/*Main page*/
Führen Sie auf der Seite ''Spezial:Import'' in Ihrem Wiki folgende Schritte durch:
.flexbox-portal div > h2 span::before {vertical-align: text-bottom; size:1.1em;}
.mw-parser-output .flexbox-portal.col3 > div:nth-child(3n) {margin-right:0 !important}
#maintopics ul {list-style: none!important;}
#maintopics li {padding-bottom:0.6em!important;margin-left: 12px!important;}
#mpbanner {background:#fff url(/w/nsfr_img_auth.php/f/fa/BlueSpice-Demo_Header.jpg) -90px no-repeat; padding-bottom: 20px; background-size: 1000px 122px;}
#mpbanner-byline {font-size:1.8em; color:#3e5389;line-height: 0.8rem; padding-top: 20px;}
#mpbanner-title {font-size:3.4em; color:#3e5389; line-height:1.2em; font-weight: 900;letter-spacing: 1px;}
#maintopics h2 span::before {vertical-align: text-bottom;padding-bottom: 2px;}


/** Cards **/
#'''Entpacken''' Sie die zip-Datei.
.cards {display:flex; flex-wrap:wrap;  justify-content: space-around;}
#'''Klicken''' Sie ''Browse...'' und wählen Sie die Datei ''HW-PortalFlex-de.xml''.
.cards > div {flex-basis:290px; margin-bottom:50px; border-top: 1px solid #f0f0f0; box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
#'''Geben''' Sie ein Interwiki-Präfix '''an'''. Da dieses Feld erforderlich ist, geben Sie hier einfach ''hw'' (für hallowelt) ein.
    transition: all .3s cubic-bezier(.25,.8,.25,1); cursor: pointer; text-align:center}
#Belassen Sie die Vorauswahl ''Zu den Standard-Speicherorten'' importieren.
.cards > div:hover {
#'''Klicken''' Sie ''Datei hochladen...'' .
    box-shadow: 0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);
}
.cards a.image img {max-width:600px}
.cards .screenshot {width:300px;height:200px; overflow:hidden; border-top:14px solid #eee; border-bottom:14px solid #eee}
#content #bodyContent .cards h2 {margin:10px; padding:0; font-size:1.1rem; font-color:#444; border:none; text-align:center}
.cards h2 .mw-editsection {display:none}
.cards .text {font-size:0.85rem; padding:20px 10px; text-align:center; font-weight:bold;}
#mw-content-text text a:not(.new), [class^="mw-content-"] .text a:not(.new), #mw-content-text .text a:link:not(.new), [class^="mw-content-"] .text a:link:not(.new), #mw-content-text .text a:not(.new):visited, [class^="mw-content-"] .text a:not(.new):visited, #mw-content-text .text a:link:not(.new):visited, [class^="mw-content-"] .text a:link:not(.new):visited
{color:#444;}
.cards .emptycard, .cards > div.emptycard:hover
{border: 0;
box-shadow: none;}
.getButton {
    display: inline-block;
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 8px 20px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 0 0 10px 0;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    border-radius: 8px;}


#mw-content-text .getButton a:not(.new), [class^="mw-content-"] .getButton  a:not(.new), #mw-content-text .getButton  a:link:not(.new), [class^="mw-content-"] .getButton  a:link:not(.new), #mw-content-text .getButton a:not(.new):visited, [class^="mw-content-"] a:not(.new):visited, #mw-content-text .getButton a:link:not(.new):visited, [class^="mw-content-"] .getButton a:link:not(.new):visited
Die Vorlage ist nun in Ihrem Wiki verfügbar und kann über Formular bearbeitet werden.  
{color:#ffffff;}
.getButton:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
color:'f5f5f5';
}
.getButton:active {
position:relative;
top:1px;
}
.getButton a:before {font-family: 'fontawesome';
content: '\f019 ';
font-size: 1.3em;
vertical-align: middle;
margin-right: 10px;
}


.cart a:before {font-family: 'fontawesome';
==Portalseite erstellen==
content: '\f217 ';
Um eine Portalseite zu erstellen, '''öffnen''' Sie die Seite <code>Formular:Portal flex</code>. {{Box Note|boxtype=note|Note text=Sie können das Formularfeld <code><nowiki>{{#forminput:form=Portal flex}}</nowiki></code> auf jeder beliebigen Wikiseite einbinden, um von dort aus  neue Portalseiten zu erstellen.}}
}


.downloadarea {
#'''Geben''' Sie im Formularfeld einen Seitennamen für Ihre neue Portalseite '''ein''' und drücken Sie ''Erstellen oder bearbeiten''. Das Formular für die Seite wird geöffnet.
text-align:center;
#'''Wählen''' Sie die gewünschten Einstellungen. Alle Einstellungen müssen einen Wert ausgewählt haben.
display: inline-block;
#'''Erstellen''' Sie über die Schaltfläche ''Neue Box'' ihre Boxen und füllen Sie diese mit Inhalt. Sie können die Boxen anschließend auf der Seite nach oben oder unten verschieben.  Hier können Sie auch eine Akzent-Hintergrundfarbe für eine einzelne Box wählen und die Überschrift der Box ausblenden. (z.B. können Sie alle Boxen mit weißem Hintergrund belassen und eine Einzelbox mit grauem oder rotem Hintergrund hervorheben).<br />[[Datei:HW-PortalFlex-boxverschieben.png|verweis=https://de.wiki.bluespice.com/wiki/Datei:HW-PortalFlex-boxverschieben.png|alternativtext=Box verschieben oder löschen|zentriert|mini|650x650px|Boxen verschieben (1), löschen (2) oder neue Box über der aktuellen Box einfügen (3)]]<br />
float: right;
#'''Wählen''' Sie, falls nötig, die Anzahl der Platzhalter (1). Wenn Sie z.B. ein 2-spaltiges Layout gewählt haben, aber 3 Boxen auf der Seite anzeigen, dann wird die 3. Box standarmäßig in voller Breite angezeigt. Wenn Sie 2 leere Platzhalter-Boxen auswählen, dann wird die 3. Box im 3-Spalten Layout auch nur 1/3 der Seitenbreite einnehmen.  <br />[[Datei:HW-PortalFlex-Platzhalter.png|alt=Platzhalter-Boxen für ungenützte Spalten (1), Vorschau-Schaltfläche (2)|zentriert|mini|650x650px|Platzhalter-Boxen für ungenützte Spalten]]
margin: 0 0 20px 40px;
#Klicken Sie auf V''orschau zeigen'' (2). Hier können Sie ihre bisherigen Einstellungen überprüfen. Scrollen Sie anschließend an das Ende der Seite, um wieder zum Formular zu gelangen.
padding: 10px;
#Klicken Sie ''Seite speichern'' wenn Sie die Bearbeitung abgeschlossen haben.
background: #efefef;
background: linear-gradient(270deg, rgb(240, 240, 240) 0%, rgb(224, 224, 224) 52%, rgb(240, 240, 240) 100%);
}
.downloadarea p {margin:0}
@media only screen and (max-width: 768px)
{.cards > div {flex-basis:98%; }}


.headertabsbox  .oo-ui-panelLayout-framed {border: 0;}
==Portalseiten kombinieren==
.headertabsbox .oo-ui-tabSelectWidget-framed {border-bottom: 1px solid #d3d5da;}
Jede Seite, die über Portal flex erstellt wurde, kann nur ein bestimmes Spalten-Layout haben (also z.B. 2-spaltig). Wenn Sie mehrere Layouts mit verschiedener Spaltenanzahl kombinieren wollen, erstellen Sie für eine Portalseite am besten über die Seite <code>Formular:Portal flex</code> mehrere Unterseiten zur eigentlichen Portalseite und transkludieren Sie diese in die Haupt-Portalseite.  


Die so entstandene Hauptseite kann praktischerweise auch andere Elemente (zusätzliche Vorlagen oder Seitenabschnitte) enthalten.


/*HP Aktuelles */
{{Box Note|boxtype=important|Note text=Wenn eine Portalseite eine Kombination aus mehreren mit ''Portal flex'' erstellten Seiten ist, kann das Menü ''Mit Formular bearbeiten'' nicht genutzt werden. Obwohl es für die ''Bearbeiten''-Schaltfläche angeboten wird, können Sie die Seite nur im normalen ''Bearbeiten''-Modus bearbeiten. Die transkludierten ''Portal flex'' Seiten müssen wie bei jeder Transklusion über die jeweilige Originalseite bearbeitet werden.}}
#aktuelles {background: rgba(201, 224, 143, .3); padding:10px; margin:20px 0}
 
#aktuelles h2::before {font-family:'fontawesome'; font-size:0.8em; content:'\f02e'; color: #64b334; margin-right:10px}
==Enthaltene Importdateien==
#aktuelles h2 {margin: 8px 0 8px 24px; color: #454545; font-size: 1.4em; border-bottom: none; }
Der xml-Import erstellt folgende Dateien im Wiki:
#aktuelles table {margin: 0 8px 15px 37px}
 
#aktuelles td {padding:3px 10px}
*Vorlage:Portal flex/Start
*Vorlage:Portal flex/Box
*Vorlage:Portal flex/End
*Vorlage:Portal flex/styles.css
*Formular:Portal flex<br />
__NOTOC__

Version vom 1. Februar 2022, 13:05 Uhr

Download

HW-PortalFlex-Combo-de.png

Die Vorlage Portal flex erlaubt es, mehrspaltig formatierte Inhalte auf einer Seite darzustellen. Zusätzlich kann am Beginn der Seite ein Einleitungsabschnitt vorangestellt werden.

Einzelne mit Portal flex erstellte Seiten können auch über Transklusion zu einer Portalseite vereint werden (siehe Abbildung rechts).

Das so entstandene Layout ist responsiv und wird entsprechend für mobile Geräten optimiert angezeigt.

Import der Vorlage[Bearbeiten | Quelltext bearbeiten]

Die benötigte Import-Datei befindet sich im Archiv HW-PortalFlex-de.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-PortalFlex-de.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 und kann über Formular bearbeitet werden.

Portalseite erstellen[Bearbeiten | Quelltext bearbeiten]

Um eine Portalseite zu erstellen, öffnen Sie die Seite Formular:Portal flex. Vorlage:Box Note

  1. Geben Sie im Formularfeld einen Seitennamen für Ihre neue Portalseite ein und drücken Sie Erstellen oder bearbeiten. Das Formular für die Seite wird geöffnet.
  2. Wählen Sie die gewünschten Einstellungen. Alle Einstellungen müssen einen Wert ausgewählt haben.
  3. Erstellen Sie über die Schaltfläche Neue Box ihre Boxen und füllen Sie diese mit Inhalt. Sie können die Boxen anschließend auf der Seite nach oben oder unten verschieben. Hier können Sie auch eine Akzent-Hintergrundfarbe für eine einzelne Box wählen und die Überschrift der Box ausblenden. (z.B. können Sie alle Boxen mit weißem Hintergrund belassen und eine Einzelbox mit grauem oder rotem Hintergrund hervorheben).
    Box verschieben oder löschen
    Boxen verschieben (1), löschen (2) oder neue Box über der aktuellen Box einfügen (3)

  4. Wählen Sie, falls nötig, die Anzahl der Platzhalter (1). Wenn Sie z.B. ein 2-spaltiges Layout gewählt haben, aber 3 Boxen auf der Seite anzeigen, dann wird die 3. Box standarmäßig in voller Breite angezeigt. Wenn Sie 2 leere Platzhalter-Boxen auswählen, dann wird die 3. Box im 3-Spalten Layout auch nur 1/3 der Seitenbreite einnehmen.
    Platzhalter-Boxen für ungenützte Spalten (1), Vorschau-Schaltfläche (2)
    Platzhalter-Boxen für ungenützte Spalten
  5. Klicken Sie auf Vorschau zeigen (2). Hier können Sie ihre bisherigen Einstellungen überprüfen. Scrollen Sie anschließend an das Ende der Seite, um wieder zum Formular zu gelangen.
  6. Klicken Sie Seite speichern wenn Sie die Bearbeitung abgeschlossen haben.

Portalseiten kombinieren[Bearbeiten | Quelltext bearbeiten]

Jede Seite, die über Portal flex erstellt wurde, kann nur ein bestimmes Spalten-Layout haben (also z.B. 2-spaltig). Wenn Sie mehrere Layouts mit verschiedener Spaltenanzahl kombinieren wollen, erstellen Sie für eine Portalseite am besten über die Seite Formular:Portal flex mehrere Unterseiten zur eigentlichen Portalseite und transkludieren Sie diese in die Haupt-Portalseite.

Die so entstandene Hauptseite kann praktischerweise auch andere Elemente (zusätzliche Vorlagen oder Seitenabschnitte) enthalten.

Vorlage:Box Note

Enthaltene Importdateien[Bearbeiten | Quelltext bearbeiten]

Der xml-Import erstellt folgende Dateien im Wiki:

  • Vorlage:Portal flex/Start
  • Vorlage:Portal flex/Box
  • Vorlage:Portal flex/End
  • Vorlage:Portal flex/styles.css
  • Formular:Portal flex

Eingangsseite für einen Themenschwerpunkt. Hier wird auf themenbezogene Artikel im Wiki verwiesen.

Abgerufen von „https://de.wiki.bluespice.com/w/index.php?title=MediaWiki:Common.css&oldid=3545“
Keine Kategorien vergebenBearbeiten