Adm:HAWK-Design: Unterschied zwischen den Versionen

Aktuelle Version vom 22. Oktober 2018, 14:04 Uhr

HAWK-Design ab 2016[Bearbeiten]

Die CSS-Angaben wurden bei MW 1.23 in der Datei "[wikiname]\skins\monobook\main.css" angepasst. Die Originaldatei wurde zuvor als Kopie mit dem Dateinamen "main_original.css" gespeichert und die abgeänderte Datei "main.css" zusätzlich als Kopie mit dem Dateinamen "main_SW.css" gespeichert.

Bei MW 1.31 LTS können die CSS-Angaben im Verzeichnis "[wikiname]\skins\MonoBook\resources\" in folgenden Dateien angepasst werden:

"variables.less" in Verbindung mit "screen-commons.less"
- Farben für Hintergrund
- Farben für Text
- Farben für Hyperlinks
- Farben für Rahmen
"screen-desktop.less" nur für Desktopgeräte
"screen-common.less" für Desktop- und Mobilgeräte
"skinStyles\mediawiki.special.preferences.styles.less"
- #preftoc ... => .client-js #preftoc ...
- #preferences
- .mw-htmlform-submit

Die Anpassungen betreffen:

Logo-Position
Hintergrundfarben/-bilder
Navigations-Position
Überschriften
Rahmenfarbe für "Footer" und "Karteikartenreiter"
Tabellen

Bei MW 1.27.4 LTS nicht mehr vorhanden:

input.historysubmit
.prefsection ...

Logo[Bearbeiten]

Logo-Größe[Bearbeiten]

Die Größe des Logos variiert je nachdem, ob es 2-farbig oder einfarbig-transparent ist:

einfarbig-transparent: Breite x Höhe = 152 x 152 px
2-farbig: Breite x Höhe = 145 x 145 px

Logo-Position[Bearbeiten]

Um das Logo mit einem anderen oberen und linken Abstand auszurichten, bestehen 2 Änderungsmöglichkeiten:

oberer Abstand für Logo und Navigation: div#column-one
linker und oberer Abstand für 2-farbiges Logo bei unveränderter Position der Navigation: div#p-logo

Logo-Angaben in "variables.less"[Bearbeiten]

Logo-Hintergrundfarbe wird aus allgemeiner Hintergrundfarbe in Z.6 verwendet:

@background: #fafafa; /* Original: @background: #f9f9f9f; // don't change this; matches headbg images */
...
@text-color: #000;

Logo-Angaben in "screen-desktop.less"[Bearbeiten]

Bei Verwendung des einfarbig-transparenten Logos vergrößert sich bei "div#column-one" in Z.17ff und bei "#p-logo" in Z.59ff der obere Innenabstand um 30px:

div#column-one { /* für HAWK HHG geändert 2018-10-15 */
  padding-top: 190px; /* Original: padding-top: 160px; */
}
...
/* für HAWK HHG top-Position geändert 2018-10-15 */
#p-logo {
  top: 30px; /* Original: top: 0; */
  ...
}

Bei Verwendung des 2-farbigen Logos ändert sich in Z.69f die Angabe für die Position des Hintergrundbildes:

/*
** Logo properties
*/
...
/* background-position geändert für neues 2-farbiges HAWK-Logo 2015-08-17 */
#p-logo a,
#p-logo a:hover {
  ...
  background-position: 35% 85% !important; /* Original: 35% 50% für 2-farbiges Logo: 15% 85%*/
}

Hintergrund[Bearbeiten]

Angaben zu Hintergrundfarben und Grafiken erfolgen an folgenden Stellen:

Datei "variables.less"
- Farben für Hintergrund und Text
Datei "screen-common.less"
- Gesamter body-Bereich aus Datei "variables": body
- Hintergrund-Grafik: body
Datei "screen-desktop.less"
- Navigation links: .pBody
- Inhaltsverzeichnisse und "Preferences": .toc, #toc, .toccolours, #preftoc, #preferences, .prefsection table, .prefsection legend
- Textbereiche: pre, code, .mw-code, .mw-warning, div.thumbinner

Gesamter body-Bereich in "variables.less"[Bearbeiten]

HAWK-Hintergrundfarbe Z.6:

@background: #fafafa; // für HAWK angepasst 2018-10-15, Original: @background: #f9f9f9f; // don't change this; matches headbg images
...
@text-color: #000;
}

Hintergrund-Grafik in "screen-common.less"[Bearbeiten]

Hintergrund-Grafik bei schlichtem CI/CD-Design nicht verwenden und auskommentieren, Z. 47ff:

body { /* für HAWK angepasst 2018-10-22 */
 ...
 /* // don't bother with a fallback; the jpg book won't work with these anyway
 background-image: ( 'images/headbg-gradient.svg' );
 background-position: 0 0;
 background-repeat: repeat-x; */
 ...
div#globalWrapper { /* für HAWK angepasst 2018-10-22 */
 ...
 /* background-image: ( 'images/headbg-gradient.svg' );
 background-position: 0 0;
 background-repeat: no-repeat; */ 
 ...

Navigation links[Bearbeiten]

Navigation links in "screen-desktop.less"[Bearbeiten]

Entfernen der gesonderten Hintergrundfarbe mit Rahmen, Z.49ff:

.pBody { /* für HAWK HHG geändert 2018-10-15 */
  font-size: 95%;
  /*background-color: fff;*/
  /*border: 1px solid #aaa;*/
  padding: 0 .8em .3em .5em;
}

Navigation links in "screen-common.less"[Bearbeiten]

Entfernen der Rahmen-Definition, Z.185:

.pBody { /* für HAWK HHG geändert 2018-10-15 */
  font-size: 95%;
  color: @text-color;
  /*border-collapse: collapse;*/

Inhaltsverzeichnisse und "Preferences"[Bearbeiten]

In der Datei "\skinStyles\mediawiki.special.preferences.styles.less" angepasst Z.23ff und Z.50ff sowie eingefügt Z.49:

.client-js #preftoc {
 ...
 li {
  ...
  &.selected { /* für HAWK HHG geändert 2018-10-18 */
  ...
  background-color: #fafafa; /* Original: background-color: #f9f9f9; */
...
}
#preftoc li.selected {background-color: #fafafa;} /* für HAWK eingefügt 2018-10-15 */
#preferences { /* für HAWK HHG geändert 2018-10-15 */
 ...
 background-color: #fafafa; /* Original: background-color: #f9f9f9; */
 ...
}
...

Nicht mehr in MW 1.31 LTS: Einfügen in "main.css", Z.77, zum Ersetzen der Hintergrundfarbe, die bei MW1.23 in der Datei "\skins\common\commonContent.css", Z.13 und Z.87, definiert ist:

.toc, #toc, .toccolours {background-color: #fafafa;} /* für HAWK HHG eingefügt 2016-03-01 */

Nicht mehr in MW 1.27.4 LTS: Änderungen in "main.css" zum Ersetzen der Hintergrundfarbe, Z. 583ff, Z. 608ff und Z. 625ff:

.prefsection table, .prefsection legend { /* für HAWK HHG geändert 2016-03-01 */
  ...
  background-color: #fafafa; /* Original: background-color: #F9F9F9 */
...
}

Textbereiche[Bearbeiten]

Die Hintergrundfarbe spezieller Textbereiche, die bei MW1.23 in den Dateien "\skins\common\commonElements.css", Z.174 und Z.180, sowie "\skins\common\commonContent.css", Z.13 und Z.119, definiert ist, wird in der Datei "screen-common.less" durch Hinzufügen in Z.97 unter "pre, .mw-code{...}", Z.93ff, geändert:

pre, code, .mw-code, .mw-warning, div.thumbinner {background-color: #fafafa;} /* für HAWK HHG eingefügt 2016-03-01 */

Ausrichtung der Navigation links[Bearbeiten]

Bei der Navigation links wird nach Wegfall des Rahmens und der gesonderten Hintergrundfarbe die linke Ausrichtung der Abschnittsüberschriften in der Datei "screen-desktop.less" angepasst, Z.45ff:

.portlet h3 { /* für HAWK HHG geändert 2018-10-15 */
  padding: 0 1em 0 .6em /* Original: padding: 0 1em 0 .5em */
}

Überschriften[Bearbeiten]

Bei MW1.31 werden die Überschriften nicht gesondert festgelegt, weil das neue HAWK-Design schlichter ausfällt.

Die Überschriften h1 bis h6 sind bei MW1.23 definiert in der Datei "\skins\common\commonElements.css", Z.71ff, so dass Änderungen in der Datei "main.css" hinzugefügt werden müssen, wenn nur das "monobook"-Design geändert werden soll. Um die Original-Zeilennummerierung zu erhalten, wird in Z.104 (MW1.23 Z.91) eine Leerzeile gelöscht, in Z.89 (MW1.23 Z.83) die h1-Definition und darunter in einer neuen Zeile die h2-Definition eingefügt:

h1 {background-color: #031d43; color: #ffffff; font-weight: bold; padding: 0em 0.2em 0em 0.2em;} /* für HAWK HHG eingefügt 2016-03-01 */
h2 {background-color: #585858; color: #ffffff; font-weight: bold; padding: 0.2em 0.2em 0.2em 0.2em;} /* für HAWK HHG eingefügt 2016-03-01 */

Rahmenfarbe für "Karteikartenreiter"[Bearbeiten]

Die Rahmenfarbe der "Karteikartenreiter" wird in der Datei "screen-desktop.less" in der Zeile 221ff von "#fabd23" (gelb-orange) zu "#9acaed" (hellblau) geändert:

#p-cactions li.selected { /* für HAWK HHG border-color angepasst 2018-10-15 */
  border-color: #9acaed; /* Original: border-color: #fabd23; */
  ...
}

Rahmenfarbe für "Footer"[Bearbeiten]

Der "Footer"-Bereich wird bei MW1.31 in den Dateien "variables.less" und "screen-common.less" mit "@content-background", "@orange-border" und "#footer" statt wie bei MW1.23 in der Datei "main.css" mit "div#footer", Z.524ff, gestaltet.

Anpassungen in der Datei "variables.less", Z.9:

...
@orange-border: #9acaed; // für HAWK HHG angepasst 2018-10-15, Original: #fabd23;
...
}

Anpassungen in der Datei "screen-common.less", Z.259ff:

#footer { /* für HAWK HHG angepasst 2018-10-15 */
  background-color: ffffff; /* Original: background-color: @content-background; */
  border-top: 1px solid @orange-border;
  border-bottom: 1px solid @orange-border;
  ...
}

Tabellen[Bearbeiten]

Für die Tabellen, die in der Version MW1.16 mit den Vorlagen "prettytable", "hl2" und "hl3" gestaltet wurden, werden bei MW1.31 in der Datei "screen-common.less" und bei MW1.23 in der Datei "main.css" ganz unten Klassen mit Bezeichnungen passend zu den Vorlagen eingefügt:

/* für HAWK HHG eingefügt 2016-05-27 */
.hi_2 {
  background-color:#A7C1F2;
  color:#000000;
}
.hi_3 {
  background-color:#8DA7D6;
  color:#000000;
}
.prettytable {
  width:100%;
  /*cellspacing="4" cellpadding="3" rules="all"*/
  margin:1em 1em 1em 0;
  border:solid 1px #000000;
  border-collapse:collapse;
  empty-cells:show;
}
.prettytable th, .prettytable td {
  border:solid 1px #000000;
}