Index:
DokuWiki CSS anpassen
Die 80 Zeichen Ergonomie
Wenn beim Lesen das Auge von links nach rechts wandert,
sucht es am Ende, beim Sprung in die nächste Zeile,
automatisch wieder den linken Anfang.
Ist der Text nicht sinnvoll gegliedert,
lässt er sich schwer erfassen.
Kurze Zeilen sind besser zu lesen.
Bei linksbündigen Fließtext und im Blocksatz, sowie im Quelltext
hat sich eine kürzere Zeilenbreite als maximal 80 Zeichen bewährt.
Test Zeilenbreite - zur 80 Zeichen Ergonomie
1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567870 12MAX7880 max 1234567890 1234567100 1234567110 1234567120 1234567130 1234567140
Test DokuWiki CSS - Basis? Schriftgröße/n erhöhen
Die Frage ist:
Gibt es eine Basis Schriftart und Schriftgröße, die geändert werden kann ?
Meine Antwort:
Wenn nicht, kann durch eine nachfolgende CSS-Definition die vorherige überschrieben werden,
aber je nach Aufwand der CSS der HTML-Seiten bzw. PHP/CSS-Ausgabe aufwendig.
In einfachen Seiten hilft ein CSS überschreiben
Es gibt verschiedene Hacks, die kombiniert werden können.
1. Prinzipiell lassen sich CSS durch nachfolgende CSS-Anweisungen einfach überschreiben.
2. Tags für eine höherer Priorität mit !important; abschließen.
3. 1.0rem (root em) als übergeordnete Maßeinheit statt einfach em.
zu 1. Diese Einträge werden in eine externen Datei als letzte CSS override.css überreiten bzw. overwrite.css überschreiben hinterlegt.
DokuWiki stellt selbst diverse CSS-Dateien dafür zur Verfügung:
Wichtig ist hier vorallem die Datei user-all.css
und im folgendem weitere Styles-Dateien nach Thema bzw. Sinn und Zweck für das Web-GUI.
zu 2. nur genaue Selektoren sind zielführen.
Doch bei CMS o.ä. können Java-Scripts oder zuviele importants das verhindern und upgrades das überschreiben.
zu 3. root em - oft ausreichend
erst mal alle einfachen Tags wie body, p, td, li, li li, …
und dann Varianten mit #IDs sowie .Classes einzeln ?
im original DokuWiki CSS: body, p, td, ul - diese 4 haben alle:
font-size: 14px
line-height: 19.6px
Basis Font-Size erhöhen von 90% (14px) auf 100% (16px) normal
Overriding the ! important modifier
1. Simply add another CSS rule with ! important , and give the selector a higher specificity
(adding an additional tag, id or class to the selector)
2. add a CSS rule with the same selector at a later point than the existing one
(in a tie, the last one defined wins).
Ja! - In einer dem Programmierer fremden Umgebung ideal !
Code
Code suchen und durch eine neue nachfolgende Code Definition mit höherer Priorität überschreiben:
IDs und Klassen suchen
etwa an solchen Stelle im CSS zu finden
@media screen { div.error,div.info,div.success,div.notify { color: #000; background-repeat: no-repeat; background-position: 8px 50%; border: 1px solid; font-size: 90%; /* hier */ margin: 0 0 .5em; padding: .4em; padding-left: 32px; overflow: hidden; border-radius: 5px; } }
oder im HTML
<div class="li"> <td class="leftalign"> <td class="rightalign"> /* usw. */ <!-- allgemein: body, p, table, tr, td, ol, ul, li, a * speziell: body p, body ol, body ul, body dl, table tr td, * #ID1 .class1: .li, .td, usw. ... .col0, .col1, .col2, .col3, .col4, .col5, .col6, .wikilink1, .wikilink2, .urlextern, .level1, .level2, .level3, .level4, .level5, .level6, .level7, .pageId label label-primary, -->
dann überschreiben durch eine extra extern gesicherte, also schreibgeschützte override.css oder overwrite.css
im PHP b.z.w. HTML <head> als aller letztes CSS einbinden !
<link rel="stylesheet" type="text/css" href="../save/source/css/override.css">
Ein CSS overwrite important Hack ist nur bedingt erfolgreich, wenn nicht schon zu viele importants auf ein Objekt einwirken. Das wirkt sich besonders bei aufwendige CMS aus, was den Programmieraufwand erschwert und ein Upgrade zu Katastrophe werden lassen kann.
Code zum Überschreiben anfügen
@import url(../save/source/fonts/open-sans-normal.css); @media screen { body { font-family: "Open Sans", Arial, Helvetica, Freesans, sans-serif; /* richtig */ font-family: "Open Sans", serif; /* Test mit Fallback: serif;*/ font-size: 1.25em !important; text-rendering: optimizeLegibility; } .li { font-size: 1.25em !important; } .pageId { background-color: none; } } /* so oder so: font-size: 16px !important; font-size: 100% !important; font-size: 1.25em !important; font-size: 1.25rem !important; */