Stitched look

by Mick in Tutorials on 02 Oct 2011


Let's get stitched! Endless possibilities.

Possibilities are endless with theses cool looking "stitch" banners. They're hot, they're awesome looking.
Very simple to use. Create PHP  or HTML blocks and use in any way you want. Copy and paste the code below and wolla. Change the colors as you wish to match your SMF forum style. No images, no nothing. Pure CSS.

Add the first bit to your forum CSS index file.
Open: /Themes/your theme/css/index.css

At the end of the code, add the following:

.stitched {
   padding: 5px 10px;
   margin: 10px;
   background: #c7c2c2;
   color: #fff;
   font-size: 21px;
   font-weight: bold;
   line-height: 1.3em;
   border: 2px dashed #fff;
   border-top-left-radius: 3px;
   -moz-border-radius-topleft: 3px;
   -webkit-border-top-left-radius: 3px;
   border-bottom-right-radius: 3px;
   -moz-border-radius-bottomright: 3px;
   -webkit-border-bottom-right-radius: 3px;
   border-top-right-radius: 3px;
   -moz-border-radius-topright: 3px;
   -webkit-border-top-right-radius: 3px;
   -moz-box-shadow: 0 0 0 4px #c7c2c2, 2px 1px 4px 4px rgba(10,10,0,.5);
   -webkit-box-shadow: 0 0 0 4px #c7c2c2, 2px 1px 4px 4px rgba(10,10,0,.5);
   box-shadow: 0 0 0 4px #c7c2c2, 2px 1px 6px 4px rgba(10,10,0,.5);
   text-shadow: -1px -1px #d3cdcd;
   font-weight: normal;
width: 400px;
}



...and wherever you plan to use the stitch. ie., blocks, pages.
<div class="stitched"> Anything goes here if you're cool.</div>
Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time.
    
0 Comments

Get more stuff like this

Subscribe to our mailing list and get interesting content and updates.