Stitched look

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>

PixelfyStudio Team
Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded PixelfyStudio in 2009 to which he is dedicated full time. |


Brand spankin' new free SMF themes every month.