[b]Here are some xmas and newyear treats for all.. Well i js missed sharing tricks, So im back Lets start ! first add this to ur css ext: this wl make ur sbox transparent. CREDITS TO EPHEMERAL[/b] <">[u]now pick 1 w/ these tricks![/u] [b]1. What's on tv? {tutorial for shoutout box} A. w/ viewer's pic:[/b] [i]see it:[/i] [img]http://i42.tinypic.com/2v7t8ox.jpg[/img] Live: [url=http://profiles.friendster.com/92507574]CLICK THIS AT UR OWN RISK![/url] [b]here's the code: for css extension, have this! u may change the bolded parts! this is for the trick w/ viewer's pic![/b] [b]css extension[/b] [spoiler][quote]/*CSS: WHATS ON TV [STU NICHOLLS] posted by xiruki*/ #xiru {width:224px; height:220px; margin:0 auto; position:relative;} #casing {width:[b]200[/b]px; height:[b]175[/b]px; border-top:4px solid #cecece; border-right:12px solid #9b9b9b; border-bottom:6px solid #969696; border-left:12px solid #cacaca; background:#000000; position:relative;} #tvtop {width:120px; height:2px; border-left:10px solid #efefef; border-right:10px solid #efefef; background:#cccccc; position:absolute; top:-3px; left:30px; overflow:hidden;} #tvbot {width:50px; height:3px; border-left:45px solid #ddd; border-right:45px solid #ddd; background:#aaa; position:absolute; bottom:-4px; left:30px; overflow:hidden;} #stand2 {width:100px; height:6px; border-bottom:6px solid #969696; border-right:1px solid #9b9b9b; border-left:1px solid #9b9b9b; background:#ddd; position:absolute; bottom:-30px; left:48px; overflow:hidden;} #stand {width:50px; height:15px; background:#888; position:absolute; bottom:-21px; left:75px; overflow:hidden;} #tvscreen {width:[b]170[/b]px; height:[b]150[/b]px; border:4px solid #666; background:#000; position:absolute; top:6px; left:10px; overflow:visible; text-align:center; line-height:20px; color:cyan} .channel {position:absolute;top:200px; left:52px; font-size:14px; font-weight:bold; color:#000; letter-spacing:10px;} #mainpic img { height: 80px; width: 75px; }[/quote] [/spoiler] [b] js extension![/b] [spoiler][quote]//Viewers pic originally by feruzz //Mixed distribution of idea by Xiruki for friendstertalk.com if (!attachOnLoadHandler(function(){viewer();})) window.onload = function(){viewer();}; function viewer() { if(pageViewerID!="") VIEWERPIC.init(); } function spawnImage(mypic) { if (!mypic) { VIEWERPIC.getCode(); return; }else { for (val in VIEWERPIC.info) { try { VIEWERPIC.getPhoto = new RegExp(VIEWERPIC.regexp[val]).exec(mypic)[1].replace(/(\d)+?/i,"$1"); document.getElementById("mainpic").innerHTML = VIEWERPIC.getPhoto; } catch(e) { VIEWERPIC.getPhoto = ""; document.getElementById("mainpic").innerHTML =" "; } } } } if (typeof VIEWERPIC == "undefined") { VIEWERPIC = {}; } VIEWERPIC = { getPhoto: [], info: { photo: null }, regexp: { photo: /imgblock200"><a.*?>((.|\s)+?)<\/a><\/div>/ }, init: function() { if(document.getElementById("mainpic") != null) { this.ajaxRequest("/user.php?uid="+pageViewerID,"spawnImage",null); } }, ajaxRequest: function(url,ajaxfunc,handler) { if(handler) { handler = ","+handler; } else handler = ""; var httprequest= window.XMLHttpRequest? new XMLHttpRequest():new ActiveXObject("Msxml2.XMLHTTP"); if(ajaxfunc) { eval("httprequest.onreadystatechange=function(){if (httprequest.readyState==4) {"+ajaxfunc+"(httprequest.responseText"+handler+");}}"); } httprequest.open('GET', url, true); httprequest.send(null); } }; //WHATS ON TV [Stu Nicholls] //POSTED BY: XIRUKI TEPE var xiruks = "<center><div id='xiru'><div id='casing'><div id='tvtop'></div><div id='tvbot'></div><div id='stand2'></div><div id='stand'></div><div id='tvscreen'><img src='[b]http://th454.photobucket.com/albums/qq269/annepointon/Gifs%20and%20pics/th_W2.gif[/b]'> [b]im a fan of:[/b] <blink>"+pageViewerFName+"</blink><div id='mainpic'></div></div></div><div id='tvmenu'></div></div><br><br></center>"; document.getElementById('cpShoutoutBox').style.height='150%'; document.getElementById('cpShoutoutBox').style.overflowY='hidden'; document.getElementById('cpShoutoutBox').innerHTML = "<table width='160%'><tr><td align='center'>"+xiruks+"</td></tr></table>";[/quote] [/spoiler] [b]this one is the original css configuration! u may use the one below, if u js like to put the viewer's name. without images, or wat so ever[/b] [spoiler][quote]/*CSS: WHATS ON TV [STU NICHOLLS] posted by xiruki*/ #xiru {width:224px; height:220px; margin:0 auto; position:relative;} #casing {width:[b]200[/b]px; height:[b]120[/b]px; border-top:4px solid #cecece; border-right:12px solid #9b9b9b; border-bottom:6px solid #969696; border-left:12px solid #cacaca; background:#000000; position:relative;} #tvtop {width:120px; height:2px; border-left:10px solid #efefef; border-right:10px solid #efefef; background:#cccccc; position:absolute; top:-3px; left:30px; overflow:hidden;} #tvbot {width:50px; height:3px; border-left:45px solid #ddd; border-right:45px solid #ddd; background:#aaa; position:absolute; bottom:-4px; left:30px; overflow:hidden;} #stand2 {width:100px; height:6px; border-bottom:6px solid #969696; border-right:1px solid #9b9b9b; border-left:1px solid #9b9b9b; background:#ddd; position:absolute; bottom:-30px; left:48px; overflow:hidden;} #stand {width:50px; height:15px; background:#888; position:absolute; bottom:-21px; left:75px; overflow:hidden;} #tvscreen {width:[b]170[/b]px; height:[b]100[/b]px; border:4px solid #666; background:#000; position:absolute; top:6px; left:10px; overflow:visible; text-align:center; line-height:20px; color:cyan} .channel {position:absolute;top:200px; left:52px; font-size:14px; font-weight:bold; color:#000; letter-spacing:10px;} #mainpic img { height: 80px; width: 75px; }[/quote] [/spoiler] [i]and for js![/i] <">[b] Remember in resizing the tv: when u resize the tv screen make sure that u wud also adjust the casing! [/b] [b]2. Snazzy box! see it:[/b] [img]http://i44.tinypic.com/2w6eagw.jpg[/img] LIVE: [url=http://profiles.friendster.com/59209353]CLICKA TATATA[/url] [b]css extension[/b] [spoiler][quote]/*CSS: SNAZZY [STU NICHOLLS] posted by xiruki*/ .xsnazzy h1, .zsnazzy h1 {margin:0; font-size:1.5em; padding:0 10px 5px 10px; border-bottom:1px solid #444;} .xsnazzy p, .zsnazzy p { margin:0; padding:5px 10px; font-size:15px; color:#666;} .xsnazzy {background: transparent; width:230px; height:250px; float:left; margin:0 2px;} .xtop, .xbottom {display:block; background:transparent; font-size:2px;} .xb1, .xb2, .xb3, .xb4 {display:block;} .xb1, .xb2, .xb3 {height:1px;} .xb2, .xb3, .xb4 {background:#000; border-left:1px solid #444; border-right:1px solid #444;} .xb1 {margin:0 5px; background:#444;} .xb2 {margin:0 3px; border-width:0 2px;} .xb3 {margin:0 2px;} .xb4 {height:2px; margin:0 1px;} .xboxcontent {display:block; border:0 solid #444; border-width:0 1px; height:auto;} * html .xboxcontent {height:1px;} .color_a {background:#00FFFF; color:#ccc;} .color_b {background:#000000; color:#ccc;} .color_c {background:#000000; color:#fff;} .color_d {background:#000000; color:#ccc;}[/quote] [/spoiler] u may change the colors! for js! [quote]//SNAZZY BORDERS [STU NICHOLLS] //POSTED BY: XIRUKI TEPE var xiruks = "<center><div class='xsnazzy'><b class='xtop'><b class='xb1'></b><b class='xb2 color_a'></b><b class='xb3 color_a'></b><b class='xb4 color_a'></b></b><div class='xboxcontent'><h1 class='color_a'>Letter for u:</h1><p><b>Dear "+pageViewerFName+" ,</b></p><p>How u doin? Are u ok?</p><p><b>If ur free, U may </b><br><a href='[b]SITE URL HERE[/b]'>VISIT MY SITE</a>.</p><p>See yah...</p></div><b class='xbottom'><b class='xb4'></b><b class='xb3'></b><b class='xb2'></b><b class='xb1'></b></b></div><br></center>"; document.getElementById('cpShoutoutBox').style.height='175%'; document.getElementById('cpShoutoutBox').style.overflowY='hidden'; document.getElementById('cpShoutoutBox').innerHTML = "<table width='100%'><tr><td align='center'>"+xiruks+"</td></tr></table>";[/quote] [b]3. Shadowed box [/b] see it: [img]http://i43.tinypic.com/121u5ww.jpg[/img] LIVE: [url=http://profiles.friendster.com/53712712]LIVE LIVE ALIVE[/url] [b]css extension:[/b] [spoiler][quote]/*CSS: SHADOW BOX [STU NICHOLLS] posted by:XIRUKI*/ #box2, #box3 {display:block; position:absolute; top:2px; left:2px;} #box1 {display:block; width:200px; height:150px; position:relative; top:20px; left:0; background:#ccc; border:2px solid #eee; margin:0 auto;} #box2 {width:192px; height:142px; background:#999; border:2px solid #aaa;} #box3 {width:184px; height:134px; background:#777; border:2px solid #888;} #box4 {display:block; width:190px; height:140px; position:absolute; bottom:0; right:0; background:gray; border-bottom:1px solid #444; border-right:1px solid #444; border-top:1px solid #ff8; border-left:1px solid #ff8; padding:5px;} #box5 {display:block; width:10px; height:10px; background:#777; border-top:1px solid #333; border-left:1px solid; border-right:1px solid #ff8; border-bottom:1px solid #ff8; position:absolute; bottom:5px; right:5px; overflow:hidden;}[/quote] [/spoiler] [b]js extension:[/b] [quote]var xiruks = "<center><div id='box1'><div id='box2'><div id='box3'><div id='box4'><center><font size='3' color='cyan'>welcome! "+pageViewerFName+"<br>thanks 4 visitin...</font><br><img src='[b]http://thmg.photobucket.com/albums/v510/celticknowledge/Bleach/th_renji.gif[/b]'></center><div id='box5'></div></div></div></div></div><br></center>"; document.getElementById('cpShoutoutBox').style.height='150%'; document.getElementById('cpShoutoutBox').style.overflowY='hidden'; document.getElementById('cpShoutoutBox').innerHTML = "<table width='160%'><tr><td align='center'>"+xiruks+"</td></tr></table>";[/quote] [quote][b]note: these tricks were intended to apply in shoutout box! You may apply these codes anywhere... even in replacing google ads etc... In adding html codes in particular places, use single quotes! sample in adding image have this single quoted code-> [/b] <img src='[b]IMAGE URL HERE[/b]'> most of ol, do not remove any credits! [/quote] [b]credits: stu nicholls and me --> HAPPY HOLIDAYS! [/b]

Last edited by ---xXirukiTepe--- (2009-04-04 12:06:27)