Ever since this website came about back in Oct 2009, it has gone through many changes
(hopefully improvements lol)

As I continue to learn I will continue to share with with all of you members ^,^

If you have your own PunBB website, or plan on making one, here's some basic CSS & JAVASCRIPT to give that default codebox a makeover...

Code:

G101's Codebox for PunBB theme

Simply add the code below to your
Cascading Style Sheet.


CSS

Code:


/*--- CSS for G101's CODEBOX--------*/

/*--- codebox title---*/

.codebox dt {
        display: block;
        padding: 3px;
        background-image: url('');
        background-repeat: no-repeat;
        background-position: top right;
        text-transform: lowercase;
        }

dl.codebox dt:hover{
text-transform: uppercase;
}

/*--- codebox frame---*/

.codebox {
   border:2px dotted #8fd4ff;
        background:#000000 url() left top repeat-y;
        font: 0.9em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
        color:#bfe6ff;
        font-family:monospace;
        font-size:12px;
        margin : 0px;
        padding: 1px 10px 1px 10px;
}

.codebox:hover {
        display: block;
   border: 2px dotted #00FF00;
        background:#000000 url() no-repeat top center;
        font: 0.9em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
        color:#00FF00;
        font-family:monospace;
        font-size:12px;
        margin : 0px;
        padding: 1px 10px 1px 10px;
}

/*--- codebox text---*/

 dl.codebox code {
        background:#404040;
        font: 0.9em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
        color:#8fd4ff;
        margin-top:0px;
        padding-left:0px;
    }

dl.codebox code:hover {
        font: 0.9em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
        color:#00FF00;
    }

/*--- codebox background---*/

.codebox dd {
background:#000000 url(address_to_uploaded_image) left top repeat-y;
        padding: 5px;
        white-space: pre;
        overflow: auto;

        }


*replace

Code:

address_to_uploaded_image

in the CSS with an address to the image you will use.

For the [Select] feature,
host the JAVASCRIPT code below
(for Forumotion>ACP>Modules>JCM)

jQuery

Code:

function selectCode(a)
{
  // Get ID of code block
  var e = a.parentNode.parentNode.getElementsByTagName('CODE')[0];
 
  // Not IE
  if (window.getSelection)
  {
      var s = window.getSelection();
      // Safari
      if (s.setBaseAndExtent)
      {
        s.setBaseAndExtent(e, 0, e, e.innerText.length - 1);
      }
      // Firefox and Opera
      else
      {
        // workaround for bug # 42885
        if (window.opera && e.innerHTML.substring(e.innerHTML.length - 4) == '<BR>')
        {
            e.innerHTML = e.innerHTML + ' ';
        }
 
        var r = document.createRange();
        r.selectNodeContents(e);
        s.removeAllRanges();
        s.addRange(r);
      }
  }
  // Some older browsers
  else if (document.getSelection)
  {
      var s = document.getSelection();
      var r = document.createRange();
      r.selectNodeContents(e);
      s.removeAllRanges();
      s.addRange(r);
  }
  // IE
  else if (document.selection)
  {
      var r = document.body.createTextRange();
      r.moveToElementText(e);
      r.select();
  }
}
if(text){}else{ var text = 'Select All';}
jQuery(document).ready(function(){
  jQuery("dl.codebox dt").not("dl.spoiler > dt").html('CODE: <a href="#" onclick="selectCode(this);return false;" title="Select all the content" class="code-a"> [Select]</a>');
});

and that's how the codebox got it's sexy back :~P

free to use > credit if you like >
if used, change the colors, fonts, etc...
so we both look original :X

future versions?

Would like to add:

-Copy to ClipBoard
-Expand/Contract
-Download to .txt
-add/remove line numbers