Zuletzt bearbeitet vor 2 Monaten
von Margit Link-Rodrigue

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

(Unterschied zwischen Seiten)
Keine Bearbeitungszusammenfassung
 
Keine Bearbeitungszusammenfassung
Markierung: 2017-Quelltext-Bearbeitung
 
Zeile 1: Zeile 1:
/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */
<div class="downloadarea">
h2 {margin: 1.8em 0 1.2em 0;}
<span class="getButton">[[Medium:HW-hinweisbox.zip|Download]]</span>
/*Discussions and attachments currently not in use in the helpdesk, therfore hiding for no */


#data-after-content {display: none;}
[[Datei:HW-Infobox-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
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.  
{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*/
Das Symbol kann aktiviert und deaktiviert werden.  
.flexbox.themenhd div {background:#fff; border:1px solid #d8d8d9; padding:10px 20px; flex-basis:24%; text-align:left}
==Import der Vorlage==
.flexbox.themenhd div [class*=" bi-"]::before {font-size: 1.6em; vertical-align: middle;background-color: #fff; padding: 6px; border-radius: 50%;}
Die benötigte Import-Datei befindet sich im Archiv ''HW-hinweisbox.zip''. Sie enthält die Datei ''HW-hinweisbox.xml''.
.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 */
Führen Sie auf der Seite ''Spezial:Import'' in Ihrem Wiki folgende Schritte durch:
.nextstep {display: inline-block;padding: 6px;background: #36c;border-radius: 2px;color: #ffffff;font-weight: bold;}
#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) {
    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*/
#'''Entpacken''' Sie die zip-Datei.
.flexbox-portal div > h2 span::before {vertical-align: text-bottom; size:1.1em;}
#'''Klicken''' Sie ''Browse...'' und wählen Sie die Datei ''HW-hinweisbox.xml''.
.mw-parser-output .flexbox-portal.col3 > div:nth-child(3n) {margin-right:0 !important}
#'''Geben''' Sie ein Interwiki-Präfix '''an'''. Da dieses Feld erforderlich ist, geben Sie hier einfach ''hw'' (für hallowelt) ein.
#maintopics ul {list-style: none!important;}
#Belassen Sie die Vorauswahl ''Zu den Standard-Speicherorten'' importieren.
#maintopics li {padding-bottom:0.6em!important;margin-left: 12px!important;}
#'''Klicken''' Sie ''Datei hochladen...'' .
#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 **/
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.
.cards {display:flex; flex-wrap:wrap;  justify-content: space-around;}
{{Hinweisbox|boxtype=Hinweis|Note text=Wenn Ihnen die Eingabefelder nach dem Import der Vorlage bei der ersten Einbindung in eine Wikiseite nicht angezeigt werden, öffnen Sie die Vorlage im Vorlagen-Namesnraum, machen Sie eine Änderung (z.B. Leerzeichen einfügen) und speichern Sie die Vorlage ab. Die Eingabefelder sollten nun beim Einbinden korrekt angezeigt werden.}}<br />[[Datei:HW-Infobox-templatedata.png|alternativtext=Bearbeitungsdialog der Vorlage|zentriert|mini|300x300px|Bearbeitungsdialog der Vorlage]]
.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);
    transition: all .3s cubic-bezier(.25,.8,.25,1); cursor: pointer; text-align:center}
.cards > div:hover {
    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
== Enthaltene Importdateien ==
{color:#ffffff;}
Der xml-Import erstellt folgende Dateien in Ihrem Wiki:
.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';
*Vorlage:Hinweisbox
content: '\f217 ';
*Vorlage:Hinweisbox/styles.css
}


.downloadarea {
== <span class="mw-headline" id="Alignment_adjustments">Anpassung d</span>er Ausrichtung ==
text-align:center;
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.
display: inline-block;
float: right;
margin: 0 0 20px 40px;
padding: 10px;
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;}
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:
.headertabsbox .oo-ui-tabSelectWidget-framed {border-bottom: 1px solid #d3d5da;}


'''Ersetzen''' Sie für den CSS-Selektor ''.hw-messagebox'' die Deklaration "clear:both" durch "overflow:hidden".


/*HP Aktuelles */
Vorher:
#aktuelles {background: rgba(201, 224, 143, .3); padding:10px; margin:20px 0}
<span class="p">.</span><span class="nc">hw-messagebox</span> <span class="p">{</span>
#aktuelles h2::before {font-family:'fontawesome'; font-size:0.8em; content:'\f02e'; color: #64b334; margin-right:10px}
<span class="err">...</span>
#aktuelles h2 {margin: 8px 0 8px 24px; color: #454545; font-size: 1.4em; border-bottom: none; }
<span class="k">clear</span><span class="p">:</span><span class="kc">both</span><span class="p">;</span>
#aktuelles table {margin: 0 8px 15px 37px}
<span class="p">}</span>
#aktuelles td {padding:3px 10px}
Nachher:
<span class="p">.</span><span class="nc">hw-messagebox</span> <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]]


/*Training Handout */
 
body.traininghandout {margin-right:1cm; margin-top:1cm;}
 
.traininghandout .toc  {border:0;}
 
.traininghandout h1 {visibility:hidden;}
 
.traininghandout p img, .traininghandout  img, .traininghandout a.image img {max-width:17cm !important; padding-left:10px;}
__NOTOC__
.traininghandout .arrow-icon {float: left; padding-left: 4px; padding-bottom: 0;}
.traininghandout #deckblatt h1,.traininghandout #deckblatt #firstHeading {visibility:hidden;}
.traininghandout h2 {border-bottom:1px solid grey;}
.traininghandout h3 {margin:24pt 0 24pt 0}
.traininghandout  p, .traininghandout ul {font-size:10pt; margin-top:0;}
.traininghandout ol > li {margin-bottom:0.25cm}
.traininghandout .toc ol > li {margin-bottom:12pt; border: 1px solid red;}
.traininghandout li {margin-bottom:0.3cm; font-size:10pt;margin-top:0; padding-top:0;}
.traininghandout table td ul {padding-left:16pt;}
.traininghandout .bookicon {margin:0;padding:0;}
.helpref svg {  vertical-align: baseline;}
.traininghandout img.fullwidth {width:16cm !important;}
table.padded td {padding:8px;}/*extra padding in table cells*/
/* indicate training transclusions in edit mode */
section ~ div.training.ve-ce-branchNode {background: #fffde2;}
section ~ div.training.anwender.ve-ce-branchNode {background: #f8f9fa;}
section ~ div.training.redakteur.ve-ce-branchNode {background: #c5e8c9;}
section ~ div.training.maintainer.ve-ce-branchNode {background: #e0ecf8;}
section ~ div.training.semantic.ve-ce-branchNode {background: #fff0dd;}

Version vom 24. Februar 2022, 13:24 Uhr

Download

HW-Infobox-de.png

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[Bearbeiten | Quelltext bearbeiten]

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:

  1. Entpacken Sie die zip-Datei.
  2. Klicken Sie Browse... und wählen Sie die Datei HW-hinweisbox.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 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.

Hinweis:Wenn Ihnen die Eingabefelder nach dem Import der Vorlage bei der ersten Einbindung in eine Wikiseite nicht angezeigt werden, öffnen Sie die Vorlage im Vorlagen-Namesnraum, machen Sie eine Änderung (z.B. Leerzeichen einfügen) und speichern Sie die Vorlage ab. Die Eingabefelder sollten nun beim Einbinden korrekt angezeigt werden.


Bearbeitungsdialog der Vorlage
Bearbeitungsdialog der Vorlage

Enthaltene Importdateien[Bearbeiten | Quelltext bearbeiten]

Der xml-Import erstellt folgende Dateien in Ihrem Wiki:

  • Vorlage:Hinweisbox
  • Vorlage:Hinweisbox/styles.css

Anpassung der Ausrichtung[Bearbeiten | Quelltext bearbeiten]

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: 

.hw-messagebox {
...
clear:both;
}

Nachher: 

.hw-messagebox {
...
overflow hidden;
}
Hinweisbox im Textfluss
Hinweisbox im Textfluss




Cascading Style Sheets. Eine Computersprache für die Gestaltung digitaler, vorwiegend webbasierter Dokumente.

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