News Bild und Content

grischabock

Hallo

Kann man das News Bild in der Detailansicht zentrieren oder füllen? Nutzt man ein Bild was nicht so lang ist wie die Newsbreite dann wirkt es verloren. Auch ist der Text direkt an dem Bild dran was unschön ist aber ich finde nur die normale .img klasse und damit verändere ich auch die Bilder in den News drinnen.

Zudem, im aktuellen Design ist der Content nicht Farblich abgehoben, hat dieser eine eigene klasse die ich einfach nicht finden kann?

PoooMukkel

Ich nutze den folgenden CSS, um die News etwas zu formatieren. Vielleicht hilft das bei dir auch?

CSS

/* News - Bilder zentrieren */
.news div.messageText.newsImage {
    margin-left: auto;
    margin-right: auto;
}
.newsList div.messageBody .messageText.newsImage {
    margin-bottom: 30px; 
    text-align: center;
}
#news .newsPreview {
    text-align: center;
}


/* News - Einleitungstext deaktivieren */
#tpl_news_newsAdd #messageContainer > div.section > dl:nth-last-child(2),
#tpl_news_newsAdd #messageContainer .tabMenuContainer > .tabMenuContent > .section > dl:nth-last-child(2) {
    display: none;
}


/* News - Abstand zwischen Likes und Text vergrößern */
#tpl_news_news .likesSummary {
    margin-top: 20px;
}


/* News - Standardbilder beim Einfügen formatieren */
[data-page-identifier="de.wbb-elite.news.NewsAdd"],[data-page-identifier="de.wbb-elite.news.NewsEdit"] {
div.mediaThumbnail > img {
    max-width: 100% !important;
    height: 100% !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

Alles anzeigen

Habe aber schon eine Weile nicht mehr getestet, ob der Code überhaupt noch so notwendig ist.

grischabock

Danke PoooMukkel

Ja damit ist das Bild mal mittig, gerne möchte ich aber erreichen dass das Bild gestreckt wird. Sollte das nicht gehen dann habe ich es mit deinem Code sicherlich mal in der Mitte was auch schon besser aussieht.

Vielen Dank

PoooMukkel

Den Code kann man sicherlich noch optimieren oder ausbauen. Bei meinen News Bildern würde das Strecken aber absolut nicht passen.

grischabock

Ja da macht es keinen Sinn das ist richtig, es ist auch in ordnung so wie es ist nur wenn man grosse Bilder nutzt und halt gerne dann nur das center haben möchte kann man es sicher individuell via CSS realisieren denke ich. Aktuell komme ich gerade nicht drauf wie ich es umsetzten kann aber wenn es etwas gibt, dann hat Olaf sicherlich was rumliegen.

PoooMukkel

Olaf hat bestimmt einen passenden Codeschnipsel. Er hat mir ja auch gut geholfen.

Cyperghost

Wenn du es gerne über die ganze Breite haben möchtest, dann gibt es die einfache Möglichkeit mittels width: 100%;

CSS

#tpl_news_news #news div.newsPreview > img {
    width: 100%;
}

Damit wird das bild über die komplette Breite verwendet, immer! Sollte es zu groß sein z.b. dann wird es kleiner gemacht

News Bild und Content

Dragosius 31. Oktober 2022 um 00:28

Dragosius 22. April 2023 um 23:52

Informationen

Über uns