Schriftgröße Blöcke

[Dieter53]

Ich hatte immer gedacht, das die Veränderung der Schriftgrößen Blockweise funktioniert. Habe aber leider festgestellt, wenn ich eine Schrift, z.B. auf Seite 1 Text 1 Größe 0,7 habe und auf Seite 4 auch Text 1 Größe 7 und diese auf Seite 1 verändere dann wird sie auf Seite 4 auch verändert. Dieses möchte ich natürlich nicht. Wie bekomme ich das hin?

[stobi_de]

Das musst Du im entsprechenden Block im Codeeditor via CSS machen.
Der Style-Editor ist global - was ja eigentlich auch OK ist.

Im Css des Blocks müsstest Du dann eintragen

Code: Alles auswählen

h1 {font-size:2rem}

und nicht die Media-Queries vergessen, wenn es auf dem Handy anders aussehen soll

Code: Alles auswählen

@media (max-width: 768px) {
h1 {font-size:1.5rem}
    }

[Dieter53]

Ok, vielen DANK, dann werde ich das mal ausprobieren.

[Dieter53]

So richtig weiß ich nicht wo ich das verändern kann, oder muss ich zusätzlich was eintragen?

[Tommy Herrmann]

Moin,

welcher Block aus welchem Thema ist denn das genau?

Mache mal einen Screenshot von der Blockübersicht und markiere diesen Block.

Dann muss man gucken, mit welchem HTML-Tag - also z.B. einem <p> oder <h> Tag - die Schrift von Mobirise gestaltet wurde und dann kann man die Größe über die CSS anpassen.

Das muss dann sehr wahrscheinlich nirgendwo geändert werden, sondern eben als CSS-Anweisung dann in diesem Bereich "CSS Editor" hinzugefügt werden.

[Dieter53]

Der im 1. Screenshoot, weiß aber nicht wo der jetzt genau her ist? Oder verstehe ich das nicht richtig?

[Tommy Herrmann]

... na ja - wenn wir nicht wissen wo der her ist, dann musst Du das schon sagen

Welches Mobirise-Thema hast Du denn für Deine Seite verwendet? Das steht doch oben rechts in der Block-Übersicht. Kannst Du diesen Block denn nicht mehr finden?

Du könntest auch einen Link (URL) zu Deiner Seite hier posten, sodass man die Seite online betrachten kann. Wir können dann sehr wahrscheinlich selbst, anhand des Quellcodes, den Block herausfinden und Dir dann genaue Anweisungen geben.

[Dieter53]

https://angeln.sellstedt.de/
unten auf der Home Seite

[Tommy Herrmann]

Der Block ist aus dem Thema "StartM5" und ist ein "Footer":

Was willst Du jetzt in welcher Größe verändern? Aber bitte bald antworten, ich muss demnächst weg hier.

[Tommy Herrmann]

Du könntest zum Beispiel für die Überschriften der Rubriken diese CSS-Anweisung unten in den Bereich "CSS Editor" kopieren:

Code: Alles auswählen

.display-5 {
  font-size: 2.5rem;
}

Das würde die Überschriften größer darstellen:

[Dieter53]

Ok, Danke das probiere ich erst einmal.

[Tommy Herrmann]

Du kannst die Font-Größe "font-size" dann schrittweise ändern, bis Du es richtig findest:

font-size: 2.0rem;

oder

font-size: 2.7rem;

oder

font-size: 3.1rem;

usw.

Das "rem" steht für "Root EM" - ist eine flexible Größen-Einheit, bezogen auf die Root (Wurzeleingabe). Du könntest das auch durch "px" (Pixel) ersetzen, wie z.B.:

font-size: 24px;

Dann bleibt das aber immer in dieser Größe und passt sich nicht flexibel an die Display-Größen an.

[Tommy Herrmann]

... die eigentliche Listen unter den Überschriften sind "Listen Einträge" also <li> Tags. Die kannst Du ebenso in der Größe anpassen, wie z.B.:

Code: Alles auswählen

li {
  font-size: 1.5rem;
}

Ich muss gleich los und helfe gerne morgen wieder...

[Dieter53]

Das hat soweit funktioniert.
Ich habe den Code genommen .display-5 {
font-size: 2.5rem;
}
Habe den dann nochmals kopiert dann mit Display -04.
Es sind ja einmal die Links und einmal die Downloads
Ob das so richtig ist weiß ich nicht.
Ich möchte jetzt nur die Überschrift größer haben, muss ich die markieren und wie dann, oder......?

Code 1 18.12.2024.jpg (9.58 KiB) 2156 mal betrachtet

Ich hatte den Beitrag von Tommy leider nicht zu Ende gelesen. Versuche seine Vorschläge jetzt nochmals umzusetzen.

[Tommy Herrmann]

Moin,

immer wenn da ein Punkt vor dem Namen steht, nennt man das "class" (Klasse):

.display-5

display-5 ist also ein beliebig erstellter Name, der ebenso z.B. so heißen könnte: anzeige-0815

Wenn anstelle des Punktes ein Raute-Zeichen # steht, handelt es sich nicht um eine Class, sondern um eine einmalige ID:

#display-5

CSS-Klassen stehen dann im HTML-Code (im linken Fenster vom "Code Editor") an dem Ausgabe-Tag, wie z.B. einem <div> (division = Bereichsverteilung) oder auch <p> (paragraph = Absatz) oder eben einem <h> (header = Überschrift) oder einem <li> (list = Aufzählung) als:

class="display-5"

Dieser Bereich, der diesen Class-Namen trägt, wird dann eben automatisch, so wie in der Class definiert, auch dargestellt.

Man kann eine Class nennen wie man will, wenn man eigene Klassen-Namen erstellt. Sie sollten nur mit einem Kleinbuchstaben beginnen und sollten keine Sonderzeichen oder Umlaute beinhalten und natürlich auch keine Leerzeichen, also z.B. könnte eine eigene Class auch heißen:

class="meineFarbeRot"

Definiert wird diese dann wieder im CSS mit dem Punkt davor:

.meineFarbeRot {
color: red;
font-size: 1rem;
font-weight: bold;
}

Die {geschweiften Klammern} beinhalten alle Anweisungen von diesem Klassen-Namen, im Beispiel oben also die Farbe Rot; Schriftgröße 1rem; Fettschrift. Die einzelnen Anweisungen werden durch Semikolon getrennt. Nach der letzten Anweisung muss daher eigentlich kein Semikolon mehr stehen, kann aber.

Man kann verschiedene Klassen beliebig zusammenfassen, sodass alle Anweisungen der unterschiedlichen Klassen verarbeitet werden. Bei identischen Anweisungen wird dabei stets die zuletzt geschriebene Anweisung die vorherige überschreiben.

Dann zum Beispiel also:

class="display-5 meineFarbeRot"

[Dieter53]

Na Tommy, dass ist mal eine ausführliche Erklärung. Vielen Dank dafür.