Beiträge von Sailor56
-
-
Dann solltest du dich mal näher mit der Systematik von CSS Selektoren auseinander setzen...
https://wiki.selfhtml.org/wiki/CSS/Selektoren -
-
-
Versuche folgendes - im zusätzlichen CSS ((vom Dashboard -> Design -> Customizer -> zusätzliches CSS):
Das sollte jeweils ein Padding von 0.5em ober- und unterhalb der einzelnen Punkte erzeugen und kann natürlich nach Bedarf beliebig angepasst werden.
Das border-bottom ist nur Spielerei, um die Trennung deutlicher zu machen - kann auch ganz weggelassen werden.
Nach der Änderung bitte prüfen, ob nicht irgendwo an anderer Stelle unerwünschte Nebenwirkungen auftauchen. -
Das liegt daran, dass sich das Bild in seinen Dimensionen an die verfügbare Breite anpasst. Bedeutet, wenn du eine schmalere Anzeige zB von 1000px auf 500px einstellst, dann wird dein Bild von 1000x500 auf 500x250 runterskaliert... der umgebende Container behält aber seine Höhe bei und nun deckt das Bild nicht mehr den ganzen Hintergrund aus.
Am einfachsten wäre es, wenn du deinem Bild mehr Höhe gibst, so dass es auch beim runterskalieren noch den Container ausfüllt.
So wie es jetzt ist, ist dein Bild 1920x350 ... versuche mal 1920x750.
Gäbe auch noch CSS Lösungen, die hätten aber seltsame Verzerrungen (Verschiebungen) des Bildes zur Folge.
Die Stelle, an der in deinem Code/CSS die Höhe des Containers (auch die könnte man ja reduzieren, damit es passt) formatiert wird, kann ich auf die Schnelle nicht finden - ist bei diesem WP-Code-Gewusel auch nicht so einfach, weil alles irgendwie alles andere beeinflusst. -
-
Ja... aber das ist kein Hintergrundbild, sondern ist das im Theme eingestellte Header-Bild... da wirst du (allein) mit CSS nicht wirklich was machen können.
Ich weiß auch nicht, ob du bei Twenty Seventeen Headerbilder individuell für einzelne Seiten unterschiedliche Bilder einstellen kannst.
Aber vielleicht kennt sich hier ja jemand mit dem Theme besser aus und kann spontan sagen...so geht's.Sollte das nicht möglich sein, kann ich dir nur eine Bastellösung anbieten:
HTML
Alles anzeigen.page-id-136 #wp-custom-header img, .page-id-134 #wp-custom-header img { opacity: 0; } .page-id-134 #wp-custom-header { background-image: url('...dein Bild für .page-id-134...'); background-attachment: fixed; background-repeat: no-repeat; background-size: 100%; height: 100%; } .page-id-136 #wp-custom-header { background-image: url('...dein Bild für .page-id-136...'); background-attachment: fixed; background-repeat: no-repeat; background-size: 100%; height: 100%; }... allerdings ohne Gewähr... ob es davon irgendwelche unerwünschten Nebenwirkungen gibt, musst du gründlich testen.
Da es sich aber nur um ein paar Zeilen Code im zusätzlichen CSS handelt, kann man die Änderung ja mit wenigen Klicks risikolos wieder löschen. -
-
-
-
-
Schau mal im Post #11... da sollte die Lösung für den Hintergrund schon drin stehen.
Außerdem kannst du im CSS jede deiner Seiten individuell ansprechen, wenn du jeweils die Page ID... .home... .page-id-134....
.page-id-136... als Selektor auswählst. Die Änderungen wirken dann zuverlässig nur auf der angesprochenen Seite.
so könntest du auch einem passenden Container ein Hintergrundbild geben, welches nur auf der angesprochenen Seite vorhanden ist. -
Wäre gut, wenn du auch bekannt geben würdest, was du nachgebessert hast. Vielleicht hat irgendwann jemand das gleiche Problem und freut sich dann, wenn er hier eine 'vollständige' Lösung findet.
-
-
-
Ja ich sehe was du meinst... das ist gar nicht gut. Hängt aber auch mit dem sehr langsamen Seitenaufbau deiner Seite zusammen... von meinem Browser gemessen > 25 Sekunden - kein guter Wert. Aber das abzustellen wäre dann eine richtige Großbaustelle und WP Seiten sind eh nicht für schnelle Ladezeiten bekannt.
Man müsste tatsächlich darüber nachdenken auf den Seiten Impressum und Datenschutz das Top Menü auszublenden und ggf. durch einen Link zur Hauptseite zu ersetzen... so was wie 'zurück zur Startseite'.
Das müsste auch relativ einfach mit dem existierenden Menü (das mit nur dem Ankerlinks '#.....') zu realisieren sein.
Wenn ich mich recht erinnere kannst du ja jedem Link eine individuelle CSS Klasse zuweisen - das sollte auch bei TwentySeventeen so sein.
Dann gebe allen Links, die auf der Startseite zu sehen sein sollen die CSS Klasse 'nur_home'. Der Name ist eigentlich egal, er darf nur nicht auch woanders als Klassenname verwendet werden.
Dann musst du diesem Menü noch einen weiteren Menüpunkt hinzufügen mit einem individuellen Link der 'anderen' Art - mit dem absoluten Link 'http://johnpetrucci.de/WordPress2018' . Der muss dann eine wieder einmalige CSS Klasse bekommen (zB 'nicht_home').
Dann könntest du mit ein paar Zeilen CSS je nach der aufgerufenen Seite (page ID) mal die 'nur_home' oder die 'nicht_home' ausblenden.
Das könnte dann in etwa so aussehen:HTML.home #top-menu li a.nicht_home { display: none; } .page-id-136 #top-menu li a.nur_home, .page-id-134 #top-menu li a.nur_home { display: none; }
Allerdings kann ich das so nicht testen - könnte aber klappen - Versuch macht kluch ;)! -
Zunächst mal gehe ich davon aus, dass das Top-Menü in den Griff zu bekommen ist... mir fehlt nur das Wissen und die Erfahrung, wie das in deinem konkreten Fall mit deinem Theme geht.
...aber das funktioniert leider nicht wirklich.
Was passiert denn, wenn du die Ergänzung in das Menü einträgst?
Du hast doch in deinem Menü unten genau diese absoluten Adressen eingetragen, um zum Impressum und zurück zur Startseite zu kommen - warum sollte das im Top-Menü 'nicht wirklich funktionieren'? -
Jep... kann sein, dass deine Änderungen im CSS, wenn du dann 'zusätzlich' meine Vorschläge integrierst, zu unerwünschten Dingen führen - ich kann mich aber nur an dem orientieren, was ich in deinem Link aus Post #5 sehe. Aber wenn es funktioniert, dann hast du ja alles richtig gemacht.. viele Wege führen nach Rom.
Kannst du in deinem Menü-Setup nicht einfach deine Sprunganker so ergänzen, dass statt '#tour' dort 'http://johnpetrucci.de/WordPress2018#tour' steht? -
Die Hintergrundfarbe könntest du mit....
HTML.page-id-136 .site-content-contain, .page-id-134 .site-content-contain { background-color: rgba(255,255,255,1.0); }
nach deinen Wünschen einrichten ( rgba(255,255,255,1.0) = weiß 100% deckend ).
Den Code in das 'zusätzliche CSS' eintragen (vom Dashboard -> Design -> Customizer -> zusätzliches CSS).
Wenn das nicht auf Anhieb funktioniert, dann versuchen das Format mit background-color: rgba(255,255,255,1.0) [COLOR=#ff0000]!important[/COLOR]; zu verstärken.Die zu breite Seite (horizontaler Scrollbar) tritt nur bei einer Bildschirmbreite von ~ 730px bis ~ 1130px auf und scheint von der Breite bzw. dem 'margin-left' des Bildes (Schriftzug im Header) verursacht zu sein.
Dem kann man entgegen wirken, indem man das Elternelement mit 'float: right;'...
aus den Texfluss raus nimmt und sich am rechten Seitenrand ausrichten lässt. Änderung wieder im zusätzlichen CSS.Zum Linkproblem - da habe ich keine einfache Lösung :-(.
Es liegt daran, dass im Menü keine absoluten und keine relativen Sprungadressen angegeben sind, sondern nur 'Sprunganker' (zB #tour), die dann beim anklicken an die entsprechende Position auf der Seite springen ... aber in dieser Form eben nicht auf eine andere Seite - das funktioniert nur dann, wenn Link und Anker auf der selben Seite sind.
Dein Impressum und der Datenschutzteil sind aber auf separaten Seiten und durch den Link wird weiterhin auf den Anker verwiesen, den es aber auf der separaten Seite gar nicht gibt!
Es muss also in den Menüzeilen auf den Unterseiten der href="#...." ergänzt werden um die Adresse der Startseite... href="startseite#..."
Aber wie du das in deinem Theme einstellen/ändern kannst, weiß ich nicht aber es gibt hier bestimmt ein paar 'Auskenner', die dir da weiter helfen können.