Startseite anpassen

Matthias Haun

Hallo -
auf meiner Startseite von Stadterkundung.com gibt es Hinweise auf meine Beiträge mit Bild, Titel, Veröffentlichungsdatum, Kategorie und einem kurzen Text (siehe meine Seite https://stadterkundung.com und dann "Click to begin").
Ich möchte nun gerne die Infos zum Datum und der Kategorie (nur auf der Startseite) entfernen, finde dazu aber keine Möglichkeit im Customizer (Theme: Sydney).
Kann mir jemand helfen? Muss ich dazu einen eigenen CSS-Code eingeben oder gibt es eine andere "Stellschraube"?
Zudem habe ich das Problem, dass die einzelnen Beitragskästen (Bilder mit Text) manchmal einen sehr großen Abstand zu dem dadrüber liegenden haben, manchmal ist es gut und manchmal kommt es vor, dass sich das untere über das obere legt... Nicht so schön!
Freue mich über Infos und Hilfe!
Matthias

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

maxe

z.B. mit der Body class home:
body.home .hentry .meta-post .posted-on, body.home .hentry .meta-post .cat-links {display:none;}

SEpp55

hat sich erledigt - maxe war schneller

Matthias Haun

Hallo Maxe -
Wow - vielen Dank! Es hat für mich ja etwas von Hexerei - aber wahrscheinlich, da ich von den CSS-Codes/HTML kaum etwas verstehe. Ich weiß wohl, dass es eine Sprache ist, die man lernen kann - doch war ich schon immer sehr unbegabt, was Sprachen angeht... Gibt es dazu eigentlich auch Bildungsurlaube - von Dir oder anderen? Wenn ich mit der WordPress-Seite mehr machen will, sollte ich es vielleicht doch mal versuchen mir der neuen Sprache?!

Dir auf jeden Fall erst einmal Dank für den Code (und auch Dank an SEpp55, der mir ja auch helfen wollte!).

Gruß
Matthias

Matthias Haun

Hallo Maxe - (oder SEpp55) -
ich habe mich jetzt zu einem Kurs angemeldet - allerdings erst Ende März...
Vielleicht könntest Du mir inzwischen nochmals helfen? Wie ich oben schon schrieb, verschiebt sich ein Bild (das zweite der ersten Spalte) auf der Startseite (im Gitter-Stil) oft über die darüber liegende Schrift und verdeckt diese. (Siehe das Foto in der Anlage). Gibt es dafür auch einen CSS-Code oder eine sonstige Einstellung, die das korrigiert? Ich habe inzwischen auf den Foren zum Sydney-Theme gesucht, aber nichts gefunden.
Wäre für Hilfe - mal wieder - dankbar.
Gruß
Matthias

Sailor56

Dein Problem ist weniger der CSS Code, sondern das JavaScript, mit dem der CSS Code bei Änderung der Seitenbreite manipuliert wird.
Das mag eine gute Idee sein, wenn es denn richtig funktiniert, aber in deinem Fall tut es das ja nicht. An den JavaScript Code müsste der Entwickler die Korrekturen einbringen, denn das ist eine Sache für sich und bei WP Installationen auch nicht trivial... also ich zumindest kann das nicht.
Was ich aber versucht habe, ist die JavaScript Manipulationen durch CSS zu überschreiben...

HTML

#main .posts-layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100% !important;
  height:  auto !important;
}
#main .posts-layout article {
  position: relative !important;
  top: 0px !important;
  left: 0px !important;
  width: 30%;
  height:  auto !important;
  padding: 0px !important;
 
}
.sydney-hero-area {
  height: calc(100vw / 2.35) !important;
}


@media screen and (max-width: 1199px) {
   .masonry-layout .hentry {
      width: 30%;
   }
   #main .posts-layout article {
      width: 30%;
   }
   .sydney-hero-area {
      height: calc(100vw / 1.75) !important;
    }
}
@media screen and (max-width: 991px) {
   .masonry-layout .hentry {
      width: 45%;
   }
   #main .posts-layout article {
      width: 45%;
   }
    .sydney-hero-area {
      height: calc(100vw / 1.66) !important;
    }
}
@media screen and (max-width: 767px) {
   .masonry-layout .hentry {
      width: 90%;
   }
   #main .posts-layout article {
      width: 90%;
     margin: 0px auto;
   }
   .sydney-hero-area {
      height: calc(100vw / 1.65) !important;
    }
}

Alles anzeigen

Bitte den CSS Code mal versuchsweise in das 'zusätzliche CSS' (vom Dashboard -> Design -> Customizer -> zusätzliches CSS) einfügen.
Bitte auch auf unerwünschte Nebenwirkungen in anderen Bereichen der Seite achten.
Wenn es nicht zufriedenstellend funktioniert, einfach den Code im zusätzlichen CSS wieder löschen.

Matthias Haun

Hallo Sailor56 -
vielen Dank für Deine Mühe, die Du Dir gemacht hast!
Mit den Kästen funktioniert jetzt alles gut und sie stehen schön "in Reih und Glied" neben- und übereinander. Leider ergibt sich daraus jetzt das Problem, dass beim Start und der Startseite unten schon ein weißer Balken und die Oberkanten der ersten Fotos zu sehen sind. (Siehe Foto in der Anlage.) Kann man das auch noch rückgängig machen?
Gruß
Matthias

Sailor56

Ja das kann man... da hab ich wohl etwas beim testen des Codes etwas geschludert.
In dem Code, den ich geschickt habe, taucht mehrfach der Selektor '.sydney-hero-area' auf - jeweils in unterschiedlichen MediaQueries für unterschiedliche Bildschirmbreiten... zB

HTML

.sydney-hero-area {
  height: calc(100vw / 2.35) !important;
}

Die Zahl 2.35 (oder was auch immer bei den anderen Vorkommen des genannten Selektors steht) gibt hier jeweils die Höhe des Container, in dem der Slider läuft, im Verhältnis zur Bildschirmbreite (Bildschirmbreite = 100vw) an.
In obigen Beispiel ist die Containerhöhe also die Bildschirmbreite / 2.35. Diesen Wert kannst du so anpassen, dass es für dich passt und somit die Höhe einjustieren.
Bitte beachten: Die Schreibweise in diesem Ausdruck.. also die Leerzeichen und der Dezimalpunkt (kein Komma)... muss erhalten bleiben.
Der Selektor '.sydney-hero-area' kommt im Code für unterschiedliche Bildschirmbreiten mehrfach vor - da müsste dann ebenfalls eine Anpassung für die betreffende Breite vorgenommen werden.

Matthias Haun

Ja danke - ich konnte es jetzt für meine Bildschirmbreite so einstellen, dass es gut passt. Jetzt muss ich wahrscheinlich mal auf verschiedenen Bildschirmen gucken ob es da auch passt.Nur werde ich ja nicht alle Breiten berücksichtigen können, oder?
Danke auf jeden Fall und ich werde jetzt mal rumprobieren.

Sailor56

Für alle Bildschirmbreiten wirst du es sowieso nicht machen können - da werden immer Kompromisse nötig sein. Denk nur an Handy-Displays, die in der Portait-Ansicht ja deutlich höher als breit sind. Letztlich sind es die Proportionen der Bilder im Slider, die den machbaren Rahmen vorgeben.
Mach halt so gut es geht und nimm in Kauf, dass gerade bei mobilen Endgeräten die Startseite nicht ganz mit dem Slider ausgefüllt ist.

Matthias Haun

Jetzt habe ich es mal so installiert, dass es für mich auf der Startseite passt. Nur habe ich dann gesehen, dass es leider bei den Beiträgen nicht mehr passt... Der Weißraum oben ist dann viel zu groß und man muss erst scrollen, um den Beitrag überhaupt zu sehen und das geht gar nicht, schade! Vielleicht muss ich mich doch an den Entwickler wenden, damit das JavaSkript verändert wird?!

Matthias Haun

Für alle, die dies Thema interessiert, zur Info: ich habe mich jetzt an den Support des Themes Sydney gewandt und die sagten, es könnte an einer Unvereinbarkeit mit einem installierten Plugin liegen. Ich habe deshalb alle Plugins deaktiviert und eins nach dem anderen wieder aktiviert und so herausgefunden, dass es das Plugin "Jetpack" ist, dass den Fehler verursacht. Dies habe ich nun gelöscht und die Seite funktioniert, wie sie soll.

Matthias Haun

Noch ein Nachtrag: ich habe doch festgestellt, dass ein generelles Löschen von Jetpack nicht so gut ist, da dann viele Funktionen, die ich eingebaut hatte, fehlen. Also habe ich Jetpack wieder installiert und alle einzelnen Einstellungen von Jetpack deaktiviert und wieder aktiviert und dabei rausgefunden, dass es die Einstellung "Aktiviere verzögertes Laden von Bildern" war, die das Problem hervorgerufen hat. Diese Funktion habe ich nun deaktiviert und die Seite läuft so auch mit Jetpack richtig.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Startseite anpassen

Jetzt mitmachen!

Benutzer online in diesem Thema