Post by ialex on Dec 29, 2007 17:38:18 GMT -8
This will create an input box in the profile of every user. When they modify their profile, they will be able to individually input a hex colour, which will be the colour of their display name.
Note: Their coloured name will only appear in their mini profile.
Preview: Click
Global Footer.
Cross Browser.
Open Source.
<script type="text/javascript">
<!--
/*Profile Selectable Username Colour - By iAlex - Open Source*/
if(document.modifyForm){
var iDisTr=document.modifyForm.name.parentNode.parentNode.parentNode;
var iColourTr=iDisTr.cloneNode(true);
iColourTr.childNodes[0].firstChild.innerHTML='Name Colour';
iColourTr.childNodes[2].firstChild.innerHTML='If you wish to have your name displayed in a different colour, insert the hex code here.';
iColourTr.childNodes[1].innerHTML='<input type="text" size="35" maxlength="6" id="iColourInp" />';
iDisTr.parentNode.insertBefore(iColourTr, iDisTr.nextSibling);
var iPersonal=document.modifyForm.personaltext;
var iColourInp=document.getElementById('iColourInp');
if(iPersonal.value.match(/\[C01:(.+?)\]/)){
iColourInp.value=RegExp.$1;
iPersonal.value=iPersonal.value.replace(/\[C01:(.+?)\]/g, '');
}
if(document.addEventListener){
document.modifyForm.addEventListener('submit', iSaveColour, false);
}
else{
document.modifyForm.attachEvent('onsubmit', iSaveColour);
}
}
function iSaveColour(){
var iColourInp=document.getElementById('iColourInp');
if(iColourInp.value!=""){
var iPersonal=document.modifyForm.personaltext;
iPersonal.value=iPersonal.value+'[C01:'+iColourInp.value+']';
}
}
if(location.href.match(/action=(display|viewprofile|(user)?recent|(calendar|pm)view|search2)/) || location.href.match(/index.cgi$/) && document.title.match(/Preview/) && document.postForm){
var iTd=document.getElementsByTagName('td');
var i=iTd.length;
while(--i){
if(iTd.item(i).width=="20%" && iTd.item(i).className.match(/windowbg(2)?/) && iTd.item(i).vAlign=="top" && iTd.item(i).innerHTML.match(/\[C01:(.+?)\]/)){
iTd.item(i).getElementsByTagName('b').item(0).firstChild.style.color=RegExp.$1;
iTd.item(i).innerHTML=iTd.item(i).innerHTML.replace(/\[C01:(.+?)\]/g, '');
}
}
}
//-->
</script>
Note: Their coloured name will only appear in their mini profile.
Preview: Click
Global Footer.
Cross Browser.
Open Source.
<script type="text/javascript">
<!--
/*Profile Selectable Username Colour - By iAlex - Open Source*/
if(document.modifyForm){
var iDisTr=document.modifyForm.name.parentNode.parentNode.parentNode;
var iColourTr=iDisTr.cloneNode(true);
iColourTr.childNodes[0].firstChild.innerHTML='Name Colour';
iColourTr.childNodes[2].firstChild.innerHTML='If you wish to have your name displayed in a different colour, insert the hex code here.';
iColourTr.childNodes[1].innerHTML='<input type="text" size="35" maxlength="6" id="iColourInp" />';
iDisTr.parentNode.insertBefore(iColourTr, iDisTr.nextSibling);
var iPersonal=document.modifyForm.personaltext;
var iColourInp=document.getElementById('iColourInp');
if(iPersonal.value.match(/\[C01:(.+?)\]/)){
iColourInp.value=RegExp.$1;
iPersonal.value=iPersonal.value.replace(/\[C01:(.+?)\]/g, '');
}
if(document.addEventListener){
document.modifyForm.addEventListener('submit', iSaveColour, false);
}
else{
document.modifyForm.attachEvent('onsubmit', iSaveColour);
}
}
function iSaveColour(){
var iColourInp=document.getElementById('iColourInp');
if(iColourInp.value!=""){
var iPersonal=document.modifyForm.personaltext;
iPersonal.value=iPersonal.value+'[C01:'+iColourInp.value+']';
}
}
if(location.href.match(/action=(display|viewprofile|(user)?recent|(calendar|pm)view|search2)/) || location.href.match(/index.cgi$/) && document.title.match(/Preview/) && document.postForm){
var iTd=document.getElementsByTagName('td');
var i=iTd.length;
while(--i){
if(iTd.item(i).width=="20%" && iTd.item(i).className.match(/windowbg(2)?/) && iTd.item(i).vAlign=="top" && iTd.item(i).innerHTML.match(/\[C01:(.+?)\]/)){
iTd.item(i).getElementsByTagName('b').item(0).firstChild.style.color=RegExp.$1;
iTd.item(i).innerHTML=iTd.item(i).innerHTML.replace(/\[C01:(.+?)\]/g, '');
}
}
}
//-->
</script>