Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 13

Thema: WOrdpress News Ansicht mittels CSS ändern

  1. #1
    HTML Newbie
    Registriert seit
    15.03.2017
    Beiträge
    7
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard 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

  2. #2
    Samurai
    Registriert seit
    24.10.2016
    Beiträge
    211
    Danke
    0
    Bekam 14 mal "Danke" in 13 Postings

    Standard AW: WOrdpress News Ansicht mittels CSS ändern

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

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    15.03.2017
    Beiträge
    7
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: WOrdpress News Ansicht mittels CSS ändern

    Zitat Zitat von Bandit Beitrag anzeigen
    Bist du dir sicher, dass .so-panel article richtig ist?
    Ich denke schon da ich nichts anderes dazu finden kann.

  4. #4
    Samurai
    Registriert seit
    24.10.2016
    Beiträge
    211
    Danke
    0
    Bekam 14 mal "Danke" in 13 Postings

    Standard AW: WOrdpress News Ansicht mittels CSS ändern

    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.

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    15.03.2017
    Beiträge
    7
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: WOrdpress News Ansicht mittels CSS ändern

    Zitat Zitat von Bandit Beitrag anzeigen
    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.

  6. #6
    HTML Newbie
    Registriert seit
    09.03.2017
    Beiträge
    4
    Danke
    0
    Bekam 1 mal "Danke" in 1 Posting

    Standard AW: WOrdpress News Ansicht mittels CSS ändern

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

    Screenshot_2.jpg

    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:

    Screenshot_1.jpg

    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.

  7. #7
    HTML Newbie
    Themenstarter

    Registriert seit
    15.03.2017
    Beiträge
    7
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: WOrdpress News Ansicht mittels CSS ändern

    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 Zitat von Royal Beitrag anzeigen
    Hallo andreas,
    wenn du die Bilder mal mit Browser Dev Tools untersuchst, merkst du, dass sie nicht ganz angezeigt werden:

    Screenshot_2.jpg

    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:

    Screenshot_1.jpg

    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.

  8. #8
    HTML Newbie
    Themenstarter

    Registriert seit
    15.03.2017
    Beiträge
    7
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: WOrdpress News Ansicht mittels CSS ändern

    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 Zitat von andreasrisse Beitrag anzeigen
    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!

  9. #9
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    438
    Danke
    0
    Bekam 45 mal "Danke" in 45 Postings

    Standard AW: WOrdpress News Ansicht mittels CSS ändern

    Du brauchst keine 2 Bilder
    Code:
     .entry-thumbnail img { opacity:.6;}
     .entry-thumbnail:hover img { opacity:1;}

  10. #10
    HTML Newbie
    Themenstarter

    Registriert seit
    15.03.2017
    Beiträge
    7
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: WOrdpress News Ansicht mittels CSS ändern

    Top Danke.

    Zitat Zitat von djheke Beitrag anzeigen
    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

Ähnliche Themen

  1. Wordpress: Blockquote Layout CSS ändern
    Von aerosolme im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 05.02.2017, 21:14
  2. Wordpress Titel bricht nicht richtig um in mobiler Ansicht
    Von Shayenna im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 27.07.2016, 17:57
  3. Adminbereich zum eintragen und ändern von News etc.
    Von DOMCELL90 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 09.05.2009, 13:33
  4. src in iframe mittels vbs dynamisch ändern.
    Von Woolf22 im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 09.05.2007, 14:18
  5. PHP Nuke news Modul ändern aber wie ???
    Von Minotaurus im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 3
    Letzter Beitrag: 02.02.2005, 17:01

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •