Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- grauwert:dokuwiki_css_anpassen [2021/09/19 18:15] – GRAUWERT
+++ grauwert:dokuwiki_css_anpassen [2025/07/08 11:23] (aktuell) – grauwert
@@ Zeile 23: / Zeile 23: @@
 ----
-===== 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**
-. Simply add another CSS rule with ! important , and give the selector a higher specificity \\ (adding an additional tag, id or class to the selector)
-. 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
-<code css>
-@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;
-  }
-}
-</code>
-oder im HTML
-<code html4strict>
-<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,
-  -->
-</code>
-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 !//
-<code html4strict>
-<link rel="stylesheet" type="text/css" href="../save/source/css/override.css">
-</code>
-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 ====
-<code css>
-@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;
-  */
-</code>
-==== Links zum Thema ====
-[[https://stackoverflow.com/questions/11178673/how-to-override-important|https://stackoverflow.com/questions/11178673/how-to-override-important]]
-[[https://smallbusiness.chron.com/override-css-inside-div-classes-51609.html|https://smallbusiness.chron.com/override-css-inside-div-classes-51609.html]]
- \\ … \\ [[:grauwert:grauwert_start|GRAUWERT's Kochbuch]] — erstellt: //[[GRAUWERT@kaalug.de|GRAUWERT]] 2020/02/26 22:00//