Skip to content

Instantly share code, notes, and snippets.

@CarstenHager
Created April 1, 2020 05:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CarstenHager/0972a9bd93436bcae16201e3028e9880 to your computer and use it in GitHub Desktop.
Save CarstenHager/0972a9bd93436bcae16201e3028e9880 to your computer and use it in GitHub Desktop.
TYPO3 News Template Kalender
// blog list
.bloglist-small {
padding-bottom: 10px;
margin-bottom: 10px;
h5 {
margin-bottom: 5px;
}
.txt {
padding-left: 80px;
}
.read {
display: block;
margin-bottom: 5px;
}
.info {
display: block;
margin: 0;
font-size: 11px;
color: #aaa;
}
img {
position: absolute;
}
.date-box {
background: #eee;
width: 60px;
position: absolute;
text-align: center;
color: var(--primary);
.day {
display: block;
font-size: 32px;
font-weight: 500;
}
.month {
font-size: 12px;
display: block;
letter-spacing: 5px;
padding-left: 5px;
background: #fff;
color: #222;
}
.wochentag {
font-size: 12px;
display: block;
letter-spacing: 1px;
padding-left: 5px;
background: #fff;
color: #fff;
background: #373a3c;
}
}
p.time {
display: block;
letter-spacing: 1px;
background: #fff;
margin-bottom: 0;
}
}
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
xmlns:n="http://typo3.org/ns/GeorgRinger/News/ViewHelpers"
data-namespace-typo3-fluid="true">
<li class="bloglist-small list-inline-item mr-4 mb-3">
<n:excludeDisplayedNews newsItem="{newsItem}"/>
<div class="date-box">
<span class="wochentag"><f:format.date format="%A">{newsItem.datetime}</f:format.date></span>
<span class="day"><f:format.date format="d">{newsItem.datetime}</f:format.date></span>
<span class="month text-uppercase"><f:format.date format="%b">{newsItem.datetime}</f:format.date></span>
</div>
<div class="txt">
<h5>{newsItem.title}</h5>
<span class="news-list-category mr-2">
<i class="fas fa-folder-open mr-1"></i>
<!-- categories -->
<span class="news-list-category">
<f:for as="category" each="{newsItem.categories}">
<f:if condition="{category.shortcut}">
<f:then>
<f:link.typolink parameter="{category.shortcut}">
{category.title}
</f:link.typolink>
</f:then>
<f:else>
{category.title}
</f:else>
</f:if>
</f:for>
</span>
</span>
<p class="time"><f:format.date format="%H:%M">{newsItem.datetime}</f:format.date> Uhr</p>
</div>
</li>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment