Nature Theme - 2 kleine Anpassungen - Farbe Überschrift, Fett in Fussnote

[claudiacarolina]

Hallo zusammen

Ich verwende gerade das "Nature Theme", das mir sehr gut gefällt und auch sehr benutzerfreundlich ist.

Es geht um diese Webseite: http://rmgzzaxeme.cyon.link/

1. Da möchte ich die h1 - Überschriften in einer anderen Farbe.
Dazu gibt es ja das "custom.scss", um solch individuellen Anpassungen zu machen.

Ich habe es mal damit versucht:

.content h1 {
  font-size: 1.5em;
  color: rgb(0, 110, 199);
}

Das funktioniert für die Schriftgrösse, aber nicht für die Farbe. Was ist zu tun?


2. möchte ich in der Fussnote gewisse Wörter FETT schreiben. Doch wenn ich diese als solches markiere, dann wird die Schrift nicht fett, sondern ändert die Farbe von weiss zu schwarz. Was müsste ich da in die "custom.scss" reinschreiben, damit es funktioniert?


Vielen herzlichen Dank für eure Hilfe,
Claudia

[dazzle89]

Zur Fußnote:

Diese beiden Definitionen sorgen dafür, dass das Wort schwarz und nicht in fett dargestellt:

body strong {
  font-weight: 500;
}

strong {
  color: #0a0a0a;
}

Du könntest das also folgendermaßen lösen

.footer strong {
   color: #fff;
   font-weight: 700;
}

Zur Überschrift kann ich gerade nichts sagen, gibt es eine Seite wo eine h1 und das Problem zu sehen ist?

[dazzle89]

Ich habe Anweisungen gefunden, die die Farbe bei der h1 überschreiben:

.ce_ct_contentBox .inside, 
.ce_ct_contentBox .inside h1, 
.ce_ct_contentBox .inside h2, 
.ce_ct_contentBox .inside h3, 
.ce_ct_contentBox .inside h4, 
.ce_ct_contentBox .inside h5, 
.ce_ct_contentBox .inside h6, 
.ce_ct_contentBox .inside a {
  color: #4a4a4a;
}

Hier ist die Spezifität höher, als wenn man nur .content h1 schreibt.

[claudiacarolina]

Ja, genau, habe auch gerade bemerkt, dass es damit zu tun hat, dass diese h1 in einer Box drin sind!! Versuche es gleich, ob es klappt.
Fussnote konnte ich bereits regeln.

Vielen herzlichen Dank!

Ich habe Anweisungen gefunden, die die Farbe bei der h1 überschreiben:

.ce_ct_contentBox .inside, 
.ce_ct_contentBox .inside h1, 
.ce_ct_contentBox .inside h2, 
.ce_ct_contentBox .inside h3, 
.ce_ct_contentBox .inside h4, 
.ce_ct_contentBox .inside h5, 
.ce_ct_contentBox .inside h6, 
.ce_ct_contentBox .inside a {
  color: #4a4a4a;
}

Hier ist die Spezifität höher, als wenn man nur .content h1 schreibt.

[claudiacarolina]

Danke sehr dazzle89! Ich konnte alles regeln. Super.

Ich hätte da noch ein Problemchen, dass sich wohl nicht so leicht lösen lässt... und ich wahrscheinlich damit leben muss. Aber ich frage trotzdem mal:

Es geht nochmals um die Fusszeile: Das sind 2 Spalten: links eine breitere und rechts eine schmälere. Gerne würde ich daraus 3 Spalten machen resp. aus der erste Spalte (links) 2 Spalten machen.

Hier nochmals die Webseite, um die es geht: http://rmgzzaxeme.cyon.link/

Mit einer Tabelle könnte ich das zwar lösen, ist dann aber fürs Handy schlecht gelöst so.

Wer weiss, vielleicht gibt es ja einen Weg...

So oder so vielen Dank!
Claudia

[dazzle89]

Also sollen nur aus der linken Hälfte zwei Spalten werden?

Falls das Theme nicht zufällig ein Gridsystem benutzt und es schon Spalten-Elemente gibt, die man dafür nutzen könnte, würde ich es einfach mit HTML lösen. Je nach Umsetzung entweder im Template oder als HTML-Inhaltselement.

Einfach ein <div> als Wrapper und dann noch jeweils ein <div> für jede Spalte.

Ungetesteter Beispielcode:

.wrapper {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}

.wrapper .column {
   width: 45%;
}

[claudiacarolina]

Ja genau, aus der linken Spalte sollen 2 werden...

Doch, es gibt da was... (siehe unten) Ich blicke einfach noch nicht so recht durch... :-) mal schauen und pröbeln... Danke sehr!

spalten.JPG

Ich befasse mich mal damit! Danke,
Claudia

Also sollen nur aus der linken Hälfte zwei Spalten werden?

Falls das Theme nicht zufällig ein Gridsystem benutzt und es schon Spalten-Elemente gibt, die man dafür nutzen könnte, würde ich es einfach mit HTML lösen. Je nach Umsetzung entweder im Template oder als HTML-Inhaltselement.

Einfach ein <div> als Wrapper und dann noch jeweils ein <div> für jede Spalte.

Ungetesteter Beispielcode:

.wrapper {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}

.wrapper .column {
   width: 45%;
}

[claudiacarolina]

Hallo zusammen

Es geht bei mir immer noch um das "Nature Theme" und um diese Webseite: http://rmgzzaxeme.cyon.link/

Zuerst ist mir aufgefallen, dass die Headerbilder, die ich eingesetzt habe, dunkler erscheinen, als sie tatsächlich sind. Und das soll nicht sein.

Dann ist mir folgendes aufgefallen - man sieht es vorallem dann, wenn man die Webseite zum ersten Mal lädt (oder den Verlauf löscht), weil die Headerbilder (noch) recht schwer ist:
Wenn man also die Webseite öffnet, dann sieht man im Bereich des Headerbildes kurz eine graue Fläche, bis dann das Bild geladen ist. Die graue Fläche will ich weg haben, dass meine Headerbilder nicht davon beeinflusst werden und dunkler erscheinen.

Im Nature Theme kann man ja in der Datei custom.scss solche Sache korrigieren. Ich hatte es mal so probiert:

.hero-header-image {
   background-color: #FFFFFF;
}

Was jedoch nichts gebracht hat.

Kann mir da jemand weiterhelfen? Das wäre suuuuuuper.

Danke sehr und beste Grüsse
Claudia

[dazzle89]

Es wird mittels ::after ein "Overlay" über das Bild gelegt, das es abdunkelt:

.header-image.dark-image .image_container::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
    content: "";
}

Ich weiß nicht, ob das Thema eine Einstellung dafür hat, du könntest es aber z.B. so entfernen

.header-image.dark-image .image_container::after {
   display: none;
}

[claudiacarolina]

Vielen, vielen Dank! Es hat geklappt!!!!!!

Jupi.

[Janborg]

Einfacher wäre es noch, statt das css zu überschreiben, im Backend die entsprechende css-Klasse "dark-image" oder, wie es bei der Stilauswahl heißt "Dunkles Bild/Video" zu entfernen.

Bildschirmfoto vom 2022-07-26 14-02-20.png

[claudiacarolina]

Ah super, vielen Dank für den Hinweis! Gut zu wissen.

Da ich schon viele Seiten mit Headerbild erstellt habe, ist es nun doch einfacher "das Problem" an einer Stelle zu lösen.

Einfacher wäre es noch, statt das css zu überschreiben, im Backend die entsprechende css-Klasse "dark-image" oder, wie es bei der Stilauswahl heißt "Dunkles Bild/Video" zu entfernen.

Bildschirmfoto vom 2022-07-26 14-02-20.png