Hallo zusammen,
ich würde gerne die Artikel wie im folgendem Beispiel anordnen.
Wie kann ich das über CSS am besten lösen?
Besten Gruß
Hallo zusammen,
ich würde gerne die Artikel wie im folgendem Beispiel anordnen.
Wie kann ich das über CSS am besten lösen?
Besten Gruß
Nur mit CSS geht das nicht. Dazu muß das Template articleListItems geändert werden:
<ul class="articleList">
{foreach from=$objects item='article'}
<li>
<a href="{$article->getLink()}">
{if $article->getTeaserImage() && $article->getTeaserImage()->hasThumbnail('tiny')}
<div class="box128">
<div class="articleListImage">{@$article->getTeaserImage()->getThumbnailTag('tiny')}</div>
{/if}
<div class="articleListContentWrapper">
<div class="articleListImageWrapper">
<div class="articleListHeroImage" style="background-image:url({@$article->getImage()->getThumbnailLink('medium')});"></div>
</div>
<div class="articleListImageWrapperFooter">
<div class="containerHeadline">
<h3 class="articleListTitle">{$article->getTitle()}</h3>
<ul class="inlineList articleListMetaData">
{if $article->hasLabels()}
<li>
<span class="icon icon16 fa-tags"></span>
<ul class="labelList">
{foreach from=$article->getLabels() item=label}
<li><span class="label badge{if $label->getClassNames()} {$label->getClassNames()}{/if}">{lang}{$label->label}{/lang}</span></li>
{/foreach}
</ul>
</li>
{/if}
<li>
<span class="icon icon16 fa-clock-o"></span>
{@$article->time|time}
</li>
{if $article->enableComments}
<li>
<span class="icon icon16 fa-comments"></span>
{lang}wcf.article.articleComments{/lang}
</li>
{/if}
{if MODULE_LIKE && $__wcf->getSession()->getPermission('user.like.canViewLike')}
<li class="wcfLikeCounter{if $article->cumulativeLikes > 0} likeCounterLiked{elseif $article->cumulativeLikes < 0}likeCounterDisliked{/if}">
{if $article->likes || $article->dislikes}
<span class="icon icon16 fa-thumbs-o-{if $article->cumulativeLikes < 0}down{else}up{/if} jsTooltip" title="{lang likes=$article->likes dislikes=$article->dislikes}wcf.like.tooltip{/lang}"></span>{if $article->cumulativeLikes > 0}+{elseif $article->cumulativeLikes == 0}±{/if}{#$article->cumulativeLikes}
{/if}
</li>
{/if}
{if ARTICLE_ENABLE_VISIT_TRACKING && $article->isNew()}<li><span class="badge label newMessageBadge">{lang}wcf.message.new{/lang}</span></li>{/if}
{if $article->isDeleted}<li><span class="badge label red">{lang}wcf.message.status.deleted{/lang}</span></li>{/if}
{event name='articleListMetaData'}
</ul>
</div>
<div class="containerContent articleListTeaser">
{@$article->getFormattedTeaser()}
</div>
</div>
</div>
{if $article->getTeaserImage() && $article->getTeaserImage()->hasThumbnail('tiny')}
</div>
{/if}
{event name='articleListEntry'}
</a>
</li>
{/foreach}
</ul>
Alles anzeigen
Und das CSS dazu:
@include screen-md-up {
.articleList {
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
}
.articleList > li {
width: 50%;
padding-left: 10px;
padding-right: 10px;
}
.articleList > li:not(:first-child) {
margin-top: 30px !important;
}
.articleList > li:nth-child(1),
.articleList > li:nth-child(2) {
margin-top: 0 !important;
}
.articleListImageWrapper .articleListHeroImage {
height: 300px;
background-position: 50% 50%;
background-size: cover;
}
.articleListContentWrapper {
position: relative;
}
.articleListContentWrapper .articleListTeaser {
display: none;
}
.articleListImageWrapperFooter {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0.9) 100%);
}
.articleListImageWrapperFooter,
.articleListImageWrapperFooter a,
.articleListImageWrapperFooter a:hover,
.articleListImageWrapperFooter .articleListMetaData,
.articleListImageWrapperFooter .containerHeadline > h3,
.articleList:hover .containerHeadline > h3 {
color: #fff;
}
.articleListImage {
display: none;
}
}
@include screen-sm-down {
.articleListHeroImage {
display: none;
}
}
Alles anzeigen
Wenn du:
width: 50%;
in:
width: calc(100%/3);
änderst sollten das drei Spalten sein.
Das auf dem Bild ist möglich, allerdings nur als Auftrag.
Nur mit CSS geht das nicht. Dazu muß das Template articleListItems geändert werden
Gefällt mir richtig gut.