Jimdo-Elemente » H1 Balkenfarbe bei San Francisco

H1 Balkenfarbe bei San Francisco

13.02.2020 09:40 (zuletzt bearbeitet: 17.02.2020 13:59)

Roger
#1

Guten Morgen zusammen

Ist das richtig, dass ich die Balkenfarbe der Überschrift H1 nur via "Head bearbeiten" anpassen kann?
Und es dafür bei "Design > Style" kein griff gibt?

habe es so gelöst und funktioniert (aber wenn es einfacher geht, umso besser)

1
2
3
4
5
6
7
8
9
10
 

 
/* ---------- Balkenfarbe H1 ---------- */
 
.jtpl-section-main .j-module h1, 
.jtpl-section-main .j-static-page h1 {
    background-color: #689384;
    }
 
 
 

Gruss Roger

Antworten

Beitrag melden

17.02.2020 14:11 (zuletzt bearbeitet: 17.02.2020 14:12)

az_
#2

az_

Hallo Roger,

...das ist richtig, so. Du kannst es aber noch besser machen:

1
2
3
4
5
6
7
8
9
10
11
 

 
h1.my-headline, 
h2.my-headline, 
h3.my-headline  {
    background-color: #689384;
    padding: 5px;
    color: white !important;
}
 

 

...und dann setzt Du statt der Überschrift alles in ein Textfeld und änderst das html wie folgt:

statt:

1
2
3
4
5
6
7
8
9
 

<p>
     Lorem ipsum dolor sit amet
<p>
<p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.&nbsp;
</p>
 
 

schreibst Du:

1
2
3
4
5
6
7
8
9
10
 

<h2 class="my-headline">
    Lorem ipsum dolor sit amet
</h2>
<p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.&nbsp;
</p>
 

 

...so wird aus dem "Lorem ipsum dolor sit amet" eine Überschrift h2 mit der richtigen Formatierung.

LG, az

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html