Adm:HAWK-Design

Aus Salzwiki
Zur Navigation springen Zur Suche springen

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 ...

[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
  • 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;
}

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]

Die Überschriften h1 bis h6 sind 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;
}