Handbuch:Erweiterung/MenuEditor und MediaWiki:Common.css: Unterschied zwischen den Seiten

(Unterschied zwischen Seiten)
(Die Kategorien wurden geändert.)
 
Keine Bearbeitungszusammenfassung
 
Zeile 1: Zeile 1:
{{DISPLAYTITLE:Hauptnavigation anpassen}}__INHALTSVERZEICHNIS_ERZWINGEN__
/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */
h2 {margin: 1.8em 0 1.2em 0;}
/*Discussions and attachments currently not in use in the helpdesk, therfore hiding for no */


Benutzer mit Admin-Rechten (Berechtigung:''editinterface'') können die Navigationslinks in der Hauptnavigation anpassen.  
#data-after-content {display: none;}
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;}


==Wie funktioniert die Hauptnavigation?==
/*Related links */
Standardmäßig werden in der Hauptnavigation einige Einstiegslinks angezeigt. Wiki-Administratoren können diese Links bei Bedarf deaktivieren und zusätzliche Links anlegen. Es können keine hierarchischen Links angelegt werden. Damit die Hauptnavigation nicht zu umfangreich wird, ist es sinnvoll, hier hauptsächlich Links zu den wichtigsten Themen sowie zu weiterführenden Portalseiten einzurichten.
h2#relatedinfo
[[Datei:Handbuch:skin-discovery-hauptnavigation.png|alternativtext=Hauptnavigation|zentriert|mini|345x345px|Hauptnavigation]]
{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;}


== Links hinzufügen ==
/*Themen*/
.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 */
.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";}


'''So fügen Sie neue Links hinzu:'''
/*Main page*/
.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;}


# '''Öffnen''' Sie über die Browser-Adressleiste die Seite ''MediaWiki:Sidebar.''
/** Cards **/
# '''Wechseln''' Sie in den Bearbeitungsmodus.
.cards {display:flex; flex-wrap:wrap;  justify-content: space-around;}
# '''Erstellen''' Sie einen oder mehrere Navigationslinks (mit oder ohne Überschrift). Im folgenden Beispiel erstellen wir einen Link zur Wikiseite "Firma" mit der Beschriftung "Unsere Firma" und einen externen link zur BlueSpice Website mit der Bezeichung "Website". Die Links sind unter der Überschrift "Wichtige Infos" gruppiert:<syntaxhighlight lang="text">
.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);
*Wichtige Infos
    transition: all .3s cubic-bezier(.25,.8,.25,1); cursor: pointer; text-align:center}
**Firma|Unsere Firma
.cards > div:hover {
**https//www.bluespice.com/de|Website
    box-shadow: 0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);
</syntaxhighlight>
}
# '''Speichern''' Sie die Seite. Der Link wird nun in der Hauptnavigation angezeigt.
.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;}


{{Hinweisbox|boxtype=Hinweis|icon=|Note text=Sobald Sie mindestens einen Zusatzlink angelegt haben, wird Ihnen ein direkter Bearbeitungslink zur Seite MediaWiki:Sidebar angezeigt, wenn Sie mit der Maus über einen Zusatzlink fahren (siehe vorhergehender Screenshot),.|bgcolor=}}
#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
Unter Umständen kann es zu Kollisionen von Linkbezeichnungen mit Systemnachrichten kommen. Ist dies der Fall, so hängen Sie der Bezeichnung einfach den HTML-Code für ein Leerzeichen an:<syntaxhighlight lang="text">
{color:#ffffff;}
**Portal|Portal&#160;
.getButton:hover {
</syntaxhighlight>
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';
content: '\f217 ';
}


'''So fügen Sie eine Überschrift ein:'''
.downloadarea {
text-align:center;
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%; }}


# '''Wechseln''' Sie in den Bearbeitungsmodus der Seite ''MediaWiki:Sidebar''.
.headertabsbox .oo-ui-panelLayout-framed {border: 0;}
# '''Erstellen''' Sie über einer Gruppe von Zusatzlinks eine Überschrift mit folgender Syntax (eine Verlinkung der Überschrift ist nicht möglich): <code>*Meine Überschrift</code>
.headertabsbox .oo-ui-tabSelectWidget-framed {border-bottom: 1px solid #d3d5da;}
# '''Speichern''' Sie die Seite. Die Überschrift wird nun in der Hauptnavigation angezeigt.


==Standardlinks deaktivieren==
Die Standardlinks können über die [[Handbuch:Erweiterung/BlueSpiceConfigManager|Konfigurationsverwaltung]] deaktiviert werden. Folgende Einstellungen sind hierbei unter dem Menüpunkt "Benutzeroberfläche" zu fnden:


/*HP Aktuelles */
#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}
#aktuelles h2 {margin: 8px 0 8px 24px; color: #454545; font-size: 1.4em; border-bottom: none; }
#aktuelles table {margin: 0 8px 15px 37px}
#aktuelles td {padding:3px 10px}


 
/*Training Handout */
BlueSpiceDiscovery:
body.traininghandout {margin-right:1cm; margin-top:1cm;}
 
.traininghandout .toc  {border:0;}
*Einstiegspunkt "Hauptseite" anzeigen
.traininghandout h1 {visibility:hidden;}
*Einstiegspunkt "Alle Seiten" anzeigen
.traininghandout p img, .traininghandout  img, .traininghandout a.image img {max-width:17cm !important; padding-left:10px;}
*Einstiegspunkt "Letzte Änderungen" anzeigen
.traininghandout .arrow-icon {float: left; padding-left: 4px; padding-bottom: 0;}
 
.traininghandout #deckblatt h1,.traininghandout #deckblatt #firstHeading {visibility:hidden;}
BlueSpiceSocial:
.traininghandout h2 {border-bottom:1px solid grey;}
 
.traininghandout h3 {margin:24pt 0 24pt 0}
*Einstiegspunkt "Timeline" anzeigen
.traininghandout  p, .traininghandout ul {font-size:10pt; margin-top:0;}
 
.traininghandout ol > li {margin-bottom:0.25cm}
BlueSpiceSocialBlog:
.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;}
*Einstiegspunkt "Blog" anzeigen
.traininghandout table td ul {padding-left:16pt;}
 
.traininghandout .bookicon {margin:0;padding:0;}
== Gruppenspezifische Navigation ==
.helpref svg {  vertical-align: baseline;}
Mithilfe von ''[[Referenz:UserFunctions|UserFunctions]]'' ist es möglich, Navigationselemente nur für bestimmte Benutzergruppen anzuzeigen. Beachten Sie, dass innerhalb dieser Funktion der Trennstrich (|) zwischen Seitenname und Bezeichnung als <code><nowiki>{{!}}</nowiki></code> maskiert werden muss.<syntaxhighlight lang="text">
.traininghandout img.fullwidth {width:16cm !important;}
{#ifingroup:sysop,widgeteditor |
table.padded td {padding:8px;}/*extra padding in table cells*/
*Test2                     
/* indicate training transclusions in edit mode */
**somepage{{!}}Some page
section ~ div.training.ve-ce-branchNode {background: #fffde2;}
|}}
section ~ div.training.anwender.ve-ce-branchNode {background: #f8f9fa;}
</syntaxhighlight>
section ~ div.training.redakteur.ve-ce-branchNode {background: #c5e8c9;}
 
section ~ div.training.maintainer.ve-ce-branchNode {background: #e0ecf8;}
== Zusätzliche Anpassungen ==
section ~ div.training.semantic.ve-ce-branchNode {background: #fff0dd;}
 
* [[Handbuch:Erweiterung/BlueSpiceDiscovery/Hauptnavigation anpassen/Icons|Icons vor den Links anzeigen]]
* [[Handbuch:Erweiterung/BlueSpiceDiscovery/Hauptnavigation anpassen/Sprachen|Navigation in mehrsprachigen Wikis]]
 
<br />
 
{{Box Links
|Thema1=[[Vorlagen/Beispiel/Translate|Übersetzungen von Wikiseiten]]}}
[[de:{{FULLPAGENAME}}]]
[[en:Navigation]]
[[Category:Administration]]

Version vom 17. Februar 2022, 10:57 Uhr

/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */
h2 {margin: 1.8em 0 1.2em 0;}
/*Discussions and attachments currently not in use in the helpdesk, therfore hiding for no */

#data-after-content {display: none;}
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 */
h2#relatedinfo
{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*/
.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 */
.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*/
.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 **/
.cards {display:flex; flex-wrap:wrap;  justify-content: space-around;}
.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
{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';
content: '\f217 ';
}

.downloadarea {
text-align:center;
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;}
.headertabsbox .oo-ui-tabSelectWidget-framed {border-bottom: 1px solid #d3d5da;}


/*HP Aktuelles */
#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}
#aktuelles h2 {margin: 8px 0 8px 24px; color: #454545; font-size: 1.4em; border-bottom: none; }
#aktuelles table {margin: 0 8px 15px 37px}
#aktuelles td {padding:3px 10px}

/*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;}
.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;}




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

Keine Kategorien vergebenBearbeiten

Diskussionen