search

springers54 / reiki

0 stars 0 forks source link

Hintergrundbild für Kontaktformulare, die nur Teil einer Seite sind #140

Closed springers54 closed 5 years ago

springers54 commented 5 years ago

Jeder Lehrer hat auf seiner Seite ein Kontaktformular, auch dort ist ein Hintergrundbild. https://reiki-lernen.de/team/sylvia-springer/

Wie gehen wir damit um? Ich brauch hier eine Stylingmöglichkeit.

joergsteinhauer commented 5 years ago

Ich habe diese Formulare bereit gesehen und es stellt sich raus, dass diese mit Inline-CSS gestylt sind. Das muss man nun anders lösen, weil inline CSS quatsch ist.

Ich würde hier eine CSS Regel erstellen und exemplarisch auf einer Lehrer-Seite das inline CSS entfernen, danach müsste man alle Lehrer Seiten händisch anpassen.

springers54 commented 5 years ago

Ok. Machen wir so.

joergsteinhauer commented 5 years ago

Ich habe das ganze auf deiner Seite angepasst, es hat sich nur ein Teil des Codes geändert (s.u.). Also statt style="background-color: #374047; padding: 20px;" ist jetzt class="zr-box-contact". Das müsstest du jetz auf allen entsprechenden Seiten anpassen. https://reiki-lernen.de/team/sylvia-springer/

Alter Code:

<div style="background-color: #374047; padding: 20px;">
<h6>Kontakt zu Reiki-Lehrer Sylvia</h6>
[contact-form-7 id="2754" title="Lehrer contact form_Sylvia"]

Neuer Code:

<div class="zr-box-contact">
<h6>Kontakt zu Reiki-Lehrer Sylvia</h6>
[contact-form-7 id="2754" title="Lehrer contact form_Sylvia"]
springers54 commented 5 years ago

lass mich bitte generell die Issues schließen, wenn ich mir das angesehen habe. Ansonsten gehen mir Dinge verloren.

Hier nochmal die jetzige Seite: grafik

Der Stil der Schriften stimmt nicht überein (1). Was hier komisch ist, dass das Gelb von (2) so schmutzig ist, hier haut auch der Abstand nicht hin.

Nun die neue Seite: grafik Abstände sind hier besser. Texte in den weißen Feldern durch das helle grau so gut wie nicht lesbar. Überschrift hat einen anderen Stil.

joergsteinhauer commented 5 years ago

Ich habe deine Wünsche noch in die Aufgabenliste verpackt, hoffe das ist korrekt so. Bitte imemr möglichst als Aufgaben zum Abhaken einfügen.

Geld ist doch eher auf der alten schmutzig, nicht auf der neuen?!

Meinst du, Hintergrundbild einfügen wie auf den Kontaktseiten?

joergsteinhauer commented 5 years ago
springers54 commented 5 years ago

prima, kann ich frühestens Montag anschauen.

joergsteinhauer commented 5 years ago

Passt das so?

Zur Frage, wie man Parallax auf anderen Seiten einfügt: das ist nun doch nicht ganz so trivial. Es hat sich gestern rausgestellt, dass das Plugin nicht ganz so optimal programmiert ist bzw. unsere WP Konfiguration/Architektur, was die Einbindung der JS-files angeht, nicht optimal ist (und ich wüsste erstmal nicht genau, wie man das optimiert - wäre wenn, dann ein Riesenaufwand).

Ich kann daher das Parallax-JS nicht pauschal auf jeder Seite laden, da dadurch sonst JS-Fehler produziert werden, wenn sich auf einer Seite kein Element mit Parallax Effekt befindet.

Deswegen lade ich das JS manuell nur auf Seiten, von denen ich weiß, dass diese eine Parallax Klasse im HTML haben. Und genau das muss ich im JS file manuell angeben: grafik In diesem Fall sind das beide Kontaktseiten und die Startseite.

Fall man also jetzt auf einer weiteren Seite ein Parallax Effekt einbinden möchte, muss im HTML erstmal auf ein Element die Klasse js-has-parallax setzen und dann im JS File in den if-Statement die body-Klasse einfügen.

Ist zwar etwas kompliziert, aber daüfr wird auch das Parallax-Plugin nicht auf jeder beliebigen Seite gestartet, was auch der Performance zugute kommt.

springers54 commented 5 years ago

Ich halte den Effekt eher für eine Spielerei. Daher würde mir reichen, wenn ich wüsste, wie ich dort eventuell eine weitere Seite hinzufügen könnte, also wo diese if Anweisungen stehen. Das kann ich dann auch alleine im Editor machen.

springers54 commented 5 years ago

Deswegen lade ich das JS manuell nur auf Seiten, von denen ich weiß, dass diese eine Parallax Klasse im HTML haben. Und genau das muss ich im JS file manuell angeben:

Wo genau in welcher Datei wird das eingefügt?

joergsteinhauer commented 5 years ago

Das JS zu Parallax findest du in der custom.js. Am Besten eignet sich dann wirklich der Weg über WP Admin: grafik

Wie man auf Zeilen 7-9 sieht, stehen da die body-Klassen der jeweiligen Seiten: page-kontaktformular page-anmeldeformular home

Wenn du also nun den Effekt auf einer anderen Seite einfügen willst, musst du erstmal die body-Klasse rausfinden. Im Falle der Seite https://reiki-lernen.de/system/ wäre das z.B. page-system: grafik

Dann also in der custom.js am besten die Zeile 8 kopieren (body.classList.contains('page-anmeldeformular') ||) und dort die neue body-Klasse reinschreiben: body.classList.contains('page-system') ||

Manko: sobald man den "slug" der Seite ändert, ändert sich auch die Body-Klasse.

Und falls du dann wirklich die custom.js anpasst, gib mir bitte Bescheid, damit ich diese bei mir erstmal synchronisiere. sonst laufen wir Gefahr,d ass ich die Datei zurück überschreibe.

springers54 commented 5 years ago

ok, habe ich soweit verstanden.