Home
2014-09-01, 10:15
![[HTML] Stylished announcement box Alerte10](https://i.servimg.com/u/f66/15/86/37/09/alerte10.png) | Tutorial: Stylished announcement box |
One simple css manipulation to gain awesome look for your recent announcements. Really simple to understand and work with it.
--> Tutorials, tips and tricks <--
Stylished announcement box
Stylished announcement box
1º - HTML
Placement Put the following code in your templates, announcements, posts, widgets, or wherever you want to.
- Code:
[panda=html]<center>
<div class="paNewsTitle">
<span><span>Annonces</span></span>
</div>
<div class="paNewsBox" id="feed">
<ul class="paNewsList">
<li>
<span class="paNewsDate date-and-time"><span><span>07 Jan</span></span></span> <strong><a href="http://www.punbb.biz/t246-important-inactive-users-deletion">IMPORTANT: Be familiar with our policy regarding user deletion</a></strong><span class="paNewsContent"><strong><span><span></span></span></strong><span><span></span></span></span>
</li>
<li>
<span class="paNewsDate date-and-time"><span><span>26 Aug</span></span></span> <span class="paNewsContent"><strong><span><span></span></span></strong><strong><a href="http://www.punbb.biz/t618-link-affiliates-how-to-promote-your-forum">LINK AFFILIATES: Promote your forum on Punbb.biz</a></strong></span><span><span></span></span>
</li>
<li>
<span class="paNewsDate date-and-time"><span><span>30 Aug</span></span></span><span class="paNewsContent"><span><strong></strong><strong><a href="http://www.punbb.biz/f3-tutorials-tricks">NEW TUTORIALS: Check our Tutorials section for new tricks and tips</a></strong></span> </span>
</li>
</ul>
</div>
<center>
2º - CSS
- Code:
[panda=css] .paNewsDate.date-and-time {
background:url(http://2img.net/i/fa/subsilver/icon_miniposted.gif) no-repeat scroll 0 3px transparent;
float:right;
font-size:9px;
font-style:italic;
margin-left:21px;
padding-left:13px;
}
ul.paNewsList li {
background-color:rgba(0,165,205,0.04);
border-bottom:1px solid #fff;
border-radius:4px;
color:#555;
font-size:11px;
list-style-type:none;
text-align:justify;
padding:5px 10px;
}
.paNewsTitle {
-webkit-transform:rotate(-90deg);
color:#00a5cd;
float:left;
font-family:inherit;
font-size:15px;
letter-spacing:2px;
position:relative;
text-transform:uppercase;
top:43px;
transform:rotate(-90deg);
width:105px;
left: -3%;
}
#feed.paNewsBox {
-moz-border-bottom-colors:none;
-moz-border-left-colors:none;
-moz-border-right-colors:none;
-moz-border-top-colors:none;
background-color:#fafafa;
border-image:none;
border-radius:3px;
height:105px;
width:99%;
border-color:#00a5cd;
border-style:solid;
border-width:1px 1px 3px;
}
ul.paNewsList {
list-style:none outside none;
padding-left:25px;
margin:10px 10px 0 0;
}
3º - Preview
![[HTML] Stylished announcement box 9JRz1Ud](https://i.imgur.com/9JRz1Ud.png)
© PunBB Design
![[HTML] Stylished announcement box Act_bottom](https://www.forumeiros.com/i/img/act_bottom.png) | If you have any questions related to this topic create a topic with the following title: Stylished announcement box |
![[HTML] Stylished announcement box Left1011](https://i.servimg.com/u/f57/17/68/86/50/left1011.png){kind=small}
![[HTML] Stylished announcement box Middle10](https://i.servimg.com/u/f72/17/48/02/71/middle10.png){kind=small}
![[HTML] Stylished announcement box Right10](https://i.servimg.com/u/f72/17/48/02/71/right10.png){kind=small}
