TinyPortal
Development => Block Codes => Topic started by: Kernal on August 19, 2026, 05:14:33 PM
<center>
<div class="trf-news-wrap">
<div class="trf-news-header">
FORUM NEWS
</div>
<div class="trf-news-fader">
<div class="trf-news-item">
Forum upgraded and optimised for SMF 2.1.7.
</div>
<div class="trf-news-item">
Blurr Blurr Blurr On & On Enjoy add your info here to be displayed.
</div>
<div class="trf-news-item">
Enter your info here to be displayed on the block.
</div>
<div class="trf-news-item">
New members are always welcome to join the discussion.
</div>
</div>
</div>
<style>
.trf-news-wrap{
width:100%;
margin:0;
border:1px solid #8ca3a3;
background:#f7f7f7;
overflow:hidden;
box-sizing:border-box;
font-family:Arial,Helvetica,sans-serif;
}
/* Kernal theme bar */
.trf-news-header{
padding:8px 12px;
font-size:18px;
font-weight:bold;
color:#fff;
text-shadow:1px 1px 1px rgba(0,0,0,.4);
background:
linear-gradient(
to bottom,
#4f8d8d 0%,
#3b7474 50%,
#2c5f5f 100%
);
border-bottom:1px solid #d8d8d8;
}
.trf-news-fader{
position:relative;
height:48px;
background:#ffffff;
overflow:hidden;
}
.trf-news-item{
position:absolute;
width:100%;
left:0;
top:0;
padding:14px 10px;
text-align:center;
color:#333;
opacity:0;
animation:trfFadeNews 16s infinite;
}
.trf-news-item:nth-child(1){
animation-delay:0s;
}
.trf-news-item:nth-child(2){
animation-delay:4s;
}
.trf-news-item:nth-child(3){
animation-delay:8s;
}
.trf-news-item:nth-child(4){
animation-delay:12s;
}
@keyframes trfFadeNews{
0%{
opacity:0;
}
5%{
opacity:1;
}
20%{
opacity:1;
}
25%{
opacity:0;
}
100%{
opacity:0;
}
}
@media (max-width:600px){
.trf-news-fader{
height:60px;
}
.trf-news-item{
font-size:14px;
line-height:1.4;
padding:10px;
}
}
<center/>