Code Blocks

My text goes here

  • Three Codeblocks
  • Tested with Firefox and Chrome (Shadow effect works with Firefox only.)

Dark Tablet

Get the dark tablet image here.

/*  codeblock wikidot variation by: Whane The Whip */
.code {
     -moz-box-shadow: 10px -5px 15px #ddd;
     background-color:#f0f0f0;
     background: url(http://onx.wdfiles.com/local--files/lab%3Acodeblocks/codeback-dark.gif) repeat-y left top;
     color: #fff;
     border:0px;
     font-family:monospace;
     line-height: 20px;
     font-size:12px;
     margin:0.4em 0 0.4em 15px;
     min-height:65px;
     overflow:none;
     padding: 0 1em 0 40px;
     padding-top: 7px; /* Nesting For Firefox Bug */
     width:87%;
}

Yellow Tablet

Get the yellow tablet image here. For the blue tablet you will want to use a darker text color like color:#000000.

codeback-yellow.gif

Blue Tablet

Get the blue tablet image here. For the blue tablet you will want to use a darker text color like color:#000000.

codeback-blue.gif

Using this code you should be able to build an endless number of additional codeblocks, just swap out the background image and change the color of the text as needed. Oh, and if you want a scrollbar for handling larger chunks of code, just change overflow:none; to overflow:auto;. To remove the shadow effect in Firefox delete the -moz-box-shadow: 10px -5px 15px #ddd; line.