LOGIN
SEARCH
PROFILE
keys: ↑ ↓
LOGOUT
INDEX
MEMBERS
keys: ↑ ↓
HOME
PORTAL
PLAY ALONG
PLAY with WORDS
PLAY with GRAPHICS
PLAY with SOUNDS
PLAY with CODES
PLAY with PROJECTS
keys: ← →
Guest Access
Register:
Members:



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

Administrator
Administrator
#1 default G101's codebox
Loading

G@MeF@Ce

G@MeF@Ce
Administrator
Administrator
Administrator
profile
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



Administrator
Show Signature
Administrator
https://www.dropbox.com/sh/i47rig99qhrvn8s/4m5HvsM2fD http://g4m3f4c3.deviantart.com https://www.facebook.com//pages/Gameface101/332331300127008 https://twitter.com//mr_gameface101 https://soundcloud.com/schurr https://www.youtube.com/user/MrGameface101?feature=watch
EVENTALIST
EVENTALIST
#2 default Re: G101's codebox
Loading

mr_wiggles

mr_wiggles
EVENTALIST
 EVENTALIST
EVENTALIST
profile
Lookin good so far im sure you'll figure out those other features.
EVENTALIST
Show Signature
EVENTALIST
Administrator
Administrator
#3 default Re: G101's codebox
Loading

G@MeF@Ce

G@MeF@Ce
Administrator
Administrator
Administrator
profile
^wiggles - you mentioned a Matrix look, I'll try to find one for your rank and for the code box that doesn't look too busy/noisy.

ran into a few CSS issues with the code box and the spoiler... they tend to overwrite eachother so I will have to use !important for certain lines.

re-added the round corners for firefox/chrome
will update the code in the original post later

*those additional features would be nice to have,
will definitely take some trickery.

Administrator
Show Signature
Administrator
https://www.dropbox.com/sh/i47rig99qhrvn8s/4m5HvsM2fD http://g4m3f4c3.deviantart.com https://www.facebook.com//pages/Gameface101/332331300127008 https://twitter.com//mr_gameface101 https://soundcloud.com/schurr https://www.youtube.com/user/MrGameface101?feature=watch

Sponsored content

profile

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

 

Chatbox system disabled
Personal messaging disabled