WOrdpress News Ansicht mittels CSS ändern

Hallo,

bin gerade dabei mir mittel Wordpress eine eigene HP zu erstellen. Ich wollte ganz gerne mittels css Code die News Ansicht so anpassen das diese ähnlich wie diese 6 News beim FCB angezeigt werden:

https://fcbayern.com/de

Bisher habe ich nur diesen Code hinbekommen der aber nicht das bringt was ich suche:

.so-panel article {
height: 150px;
overflow: hidden;
margin: 10px;
padding: 0 20px;
position: relative;
text-align: left;
cursor: pointer;
background-color: #F5F5F5;
width: calc(50% - 20px);
float: left;
box-sizing: border-box;
}

Meine Testseite ist hier zu finden wo ich aktuell erstmal nur 2 News veröffentlicht habe (die mit den 2 kleinen Bildern):

svwkicker.de.dedi4667.your-server.de

Kann mir jemand bei dem Code behilfich sein? Wie gesagt sollte es ungefähr so aussehen wie auf der HP des FCB mit den 6 News.

Danke und Grüße

Zitat von Bandit

Bist du dir sicher, dass .so-panel article richtig ist?

Ich denke schon da ich nichts anderes dazu finden kann.

Zitat von Bandit

Also, deine CSS-Angaben greifen ja, aber ich verstehe dein Problem ehrlich gesagt nicht. Du zeigst aktuell nur jeweils ein Bild, mehr nicht. Und das passt ja auch.

Naja ich bekomme es nicht hin das es so wie beim FCB aussieht.

Bilder ungefähr gleich gross und der Hovereffekt.

Hi,

ich habe Auto eingegeben und schwups wurde darunter Text angezeigt!

Damit die Box eine bessere Ansicht hat wenn ich am dem css Code dafür etwas mache ist diese schwarz. Da sieht man aber nun in den Ecken der Bilder das etwas schwarz zu sehen ist, obwohl ich keinen border radius angegeben habe und auch sind die Bild nicht abgerundet!

Wie ich 3 Beiträge nebeneinander angezeigt bekommen muss ich auch noch herausfinden.

Aber danke für die Hilfe mit Auto!

Zitat von Royal

Hallo andreas,
wenn du die Bilder mal mit Browser Dev Tools untersuchst, merkst du, dass sie nicht ganz angezeigt werden:

Ok, wie können wir dieses Problem lösen? Ganz einfach: Indem wir im Style der Div-Klasse "so-panel" den Wert des Style Attributs "height" von "150px" auf "auto" ändern. Nun sollte das Ganze so aussehen:

Ich denke, deine CSS-Kenntnisse sollten genügen, um den Rest zu tun. Falls nicht, so meldest du dich ganz einfach per Antwort auf den Beitrag nochmal. Übrigens: In den News von der FC-Bayern Seite sieht man zunächst eine kurze Beschreibung des Artikels, dadrunter folgt eine Überschrift und schließlich eine etwas längere Beschreibung. Möchtest du es auch so haben, so musst du in den PHP-Dateien deines WordPress-Templates rumwühlen, was doch schon einige gute Kenntnisse im Webbereich erfordert.

Das mit den den 3 Bildern nebeneinander habe ich hinbekommen indem ich die Breite verringert habe.

Jetzt finde ich nur keinen passenden css Code mit dem die Bilder abgedunkelt werden und bei Hover normal angezeigt werden.

Alles was ich finde ist das ich 2 Bilder (Hell und Dunkel) brauche. Ich suche aber einen css Code mit dem das geht ohne ein 2 Bild zu nutzen.

Zitat von andreasrisse

Hi,

ich habe Auto eingegeben und schwups wurde darunter Text angezeigt!

Damit die Box eine bessere Ansicht hat wenn ich am dem css Code dafür etwas mache ist diese schwarz. Da sieht man aber nun in den Ecken der Bilder das etwas schwarz zu sehen ist, obwohl ich keinen border radius angegeben habe und auch sind die Bild nicht abgerundet!

Wie ich 3 Beiträge nebeneinander angezeigt bekommen muss ich auch noch herausfinden.

Aber danke für die Hilfe mit Auto!

Top Danke.

Zitat von djheke

Du brauchst keine 2 Bilder

Code

.entry-thumbnail img { opacity:.6;}
 .entry-thumbnail:hover img { opacity:1;}

Mal ne blöde Frage aber siehst du auch das alle Bilder auf der Startseite abgerundete Kanten haben? Ich habe niergendwo in der css de Code dafür gefunden das die Kanten abgerundet sein sollen mit Border Radius

Ich habe mit Expression Web die style.css gesucht finde diesen Abschnitt nicht.

Füge ich den Code so in de custom.css ein hilft der auch nicht.

Zitat von djheke

Code

.entry-content img {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;


               border-radius: 3px;


    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.175);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.175);
    box-shadow: 0 1px 2px rgba(0,0,0,0.175);
}

Alles anzeigen