Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Foto

[HTML] Stylished announcement box



View previous topic View next topic Go down Message [Page 1 of 1]

1
Offline

  Guest

avatar
Guest


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



- 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>


- CSS
Code:
[panda=css] .paNewsDate.date-and-time {
background:url(http://illiweb.com/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;
}
 


- Preview





© PunBB Design


If you have any questions related to this topic create a topic with the following title:
Stylished announcement box

Powered by PunBB
Currently 0 users have thanked Guest for this post:

2
Offline

  FrOsTyXi

avatar
V.I.P. Member
V.I.P. Member
Nice i like the look!

Powered by PunBB
Currently 0 users have thanked FrOsTyXi for this post:

View previous topic View next topic Back to top Message [Page 1 of 1]


Topic URL's

URL
BBcode
HTML

Permissions in this forum:
You cannot reply to topics in this forum