Runescape Skin 3.0]Ok, here is how the rating system will go from now on: it's closeness to Runescape.
----------------
1.0: first attempt
1.1: Fixed a few link colors, and a few other slight problems
2.0: Revamped the skin with the same idea in mind.
2.1: Made the skin wider to look more like the real RS forums.
2.2: A white line made version 2.1 look bad. I removed it.
3.0: I used some techniques for skinning that I never thought of before. Also, I used some codes that I had pioneered. Many thanks to: ticlo, Stefan, trinigangsta and slayer766 for pioneering the codes :)
3.1 Removed some unused parts of the CSS.
-----------------
I am so very hesitant to release this. I know I still have some work on it, I just am not thinking too much upon it right now.
Name: Runescape Skin 3.0
Author: Jasen (me[Indoslavokia])
Skin Number: ??
Date Created: 01/02/08
Side Notes: this one I give all credits to the code makers. You guys helped me a bunch :)
Preview[NOTE: this thread uses other scripts to produce a more authentic RuneScape background and post.]Now then, this is the easy part: the skin.
- Code:
-
html { overflow-x: hidden; overflow-y: auto; }
form { display:inline; }
img { vertical-align:middle; border:0px }
BODY { font-family: Verdana, Tahoma; Arial; sans-serif; font-size: 11px; color: #ffffff; margin: 0px 130px 0px 130px; background-color:#000; background-image:url('http://i207.photobucket.com/albums/bb178/Jasens_Forum/rs_bg-2.jpg'); background-position: center center; }
TABLE, TR, TD { font-family: Verdana, Tahoma; Arial; sans-serif; font-size: 10px; color: #ffffff; }
a:link, a:visited, a:active { text-decoration: none; color: #66CD00; }
a:hover { color: #66CD00; text-decoration:underline }
fieldset.search { padding:6px; line-height:150% }
label { cursor:pointer; }
img.attach { border:2px outset #EEF2F7;padding:2px }
#ipbwrapper { text-align:left; width:95%; margin-left:auto;margin-right:auto }
#ipbwrapper img { vertical-align:middle; border: 0px }
#ipbwrapper .row2 { display:none }
.googleroot { padding:6px; line-height:130% }
.googlechild { padding:6px; margin-left:30px; line-height:130% }
.googlebottom, .googlebottom a:link, .googlebottom a:visited, .googlebottom a:active { font-size:11px; color: #3A4F6C; }
.googlish, .googlish a:link, .googlish a:visited, .googlish a:active { font-size:14px; font-weight:bold; color:#00D; }
.googlepagelinks { font-size:1.1em; letter-spacing:1px }
.googlesmall, .googlesmall a:link, .googlesmall a:active, .googlesmall a:visited { font-size:10px; color:#434951 }
li.helprow { padding:0px; margin:0px 0px 10px 0px }
ul#help { padding:0px 0px 0px 15px }
option.cat { font-weight:bold; }
option.sub { font-weight:bold;color:#555 }
.caldate { text-align:right;font-weight:bold;font-size:11px;color:#ffffff;background-color:#; background-image: url(http://i207.photobucket.com/albums/bb178/Jasens_Forum/2222.jpg);padding:4px;margin:0px }
.warngood { color:green }
.warnbad { color:red }
#padandcenter { margin-left:auto;margin-right:auto;text-align:center;padding:14px 0px 14px 0px }
#profilename { font-size:28px; font-weight:bold; }
#calendarname { font-size:22px; font-weight:bold; }
#photowrap { padding:6px; }
#phototitle { font-size:24px; border-bottom:1px solid black }
#photoimg { text-align:center; margin-top:15px }
#ucpmenu { line-height:150%;width:22%; border:1px solid #292421;background-color: #000000; background-image: url(http://) }
#ucpmenu p { padding:2px 5px 6px 9px;margin:0px; }
#ucpcontent { background-color: #000000; background-image: url(http://); border:1px solid #292421;line-height:150%; width:auto }
#ucpcontent p { padding:10px;margin:0px; }
#ipsbanner { position:absolute;top:1px;right:5%; }
#logostrip { background-image:url('http://i207.photobucket.com/albums/bb178/Jasens_Forum/rs_bg-2.jpg') }
#submenu { border:1px solid #292421;background-color: #; background-image: url(http://); font-size:10px;margin:3px 0px 3px 0px;color:#ffffff;font-weight:bold;}
#submenu a:link, #submenu a:visited, #submenu a:active { font-weight:bold;font-size:10px;text-decoration: none; color: #66cd00; }
#userlinks { border:1px solid #292421; background-color: #; background-image: url(http://i207.photobucket.com/albums/bb178/Jasens_Forum/2222.jpg) }
#navstrip { font-weight:bold;padding:6px 0px 6px 0px; }
.activeuserstrip { background-color:#; background-image: url(http://i207.photobucket.com/albums/bb178/Jasens_Forum/59667.jpg); padding:6px }
.pformstrip { background-color: #; background-image: url(http://i207.photobucket.com/albums/bb178/Jasens_Forum/2222.jpg); color:#;font-weight:bold;padding:7px;margin-top:1px }
.pformleft { background-color: #; background-image: url(http://i207.photobucket.com/albums/bb178/Jasens_Forum/2222.jpg); padding:6px; margin-top:1px;width:25%; border-top:1px solid #292421; border-right:1px solid #292421; }
.pformleftw { background-color: #; background-image: url(http://i207.photobucket.com/albums/bb178/Jasens_Forum/2222.jpg); padding:6px; margin-top:1px;width:40%; border-top:1px solid #292421; border-right:1px solid #292421; }
.pformright { background-color: #; background-image: url(http://i207.photobucket.com/albums/bb178/Jasens_Forum/2222.jpg); padding:6px; margin-top:1px;border-top:1px solid #292421; }
.post1 { background-color: #1b1610; background-image: url(http://) }
.post2 { background-color: #1b1610; background-image: url(http://) }
.postlinksbar { display:none }
.row1 { background-color: #1b1610; background-image: url(http://) }
.row2 { background-color: #; background-image: url(http://i207.photobucket.com/albums/bb178/Jasens_Forum/59667.jpg) }
.row3 { background-color: #; background-image: url(http://i207.photobucket.com/albums/bb178/Jasens_Forum/59667.jpg) }
.row4 { background-color: #; background-image: url(http://i207.photobucket.com/albums/bb178/Jasens_Forum/59667.jpg) }
.darkrow1 { background-color: #; background-image: url(http://i207.photobucket.com/albums/bb178/Jasens_Forum/2122.jpg); color:#ffffff; }
.darkrow2 { background-color: #; background-image: url(http://i207.photobucket.com/albums/bb178/Jasens_Forum/2222.jpg); color:#ffffff; }
.darkrow3 { display:none }
.hlight { background-color: #1b1610; background-image: url(http://) }
.dlight { background-color: #1b1610; background-image: url(http://) }
.titlemedium { font-weight:bold; color:#ffffff; padding:7px; margin:0px; background-color: #; background-image: url(http://i207.photobucket.com/albums/bb178/Jasens_Forum/59667.jpg) }
.titlemedium a:link, .titlemedium a:visited, .titlemedium a:active { text-decoration: underline; color: #ffffff }
.maintitle { vertical-align:middle;font-weight:bold; color:#ffffff; letter-spacing:1px; padding:8px 0px 8px 5px; background-color: #; background-image: url(http://i207.photobucket.com/albums/bb178/Jasens_Forum/2222.jpg) }
.maintitle a:link, .maintitle a:visited, .maintitle a:active { text-decoration: none; color: #ffffff }
.maintitle a:hover { text-decoration: none }
.plainborder { border:1px solid transparent;background-color:transparent }
.tableborder { border:1px solid #292421;background-color:#292421; padding:0px; margin:0px; width:100% }
.tablefill { border:1px solid #292421;background-color:#; background-image: url(http://i207.photobucket.com/albums/bb178/Jasens_Forum/2222.jpg);padding:6px; }
.tablepad { background-color:#; background-image: url(http://i207.photobucket.com/albums/bb178/Jasens_Forum/2222.jpg);padding:6px }
.tablebasic { width:100%; padding:0px 0px 0px 0px; margin:0px; border:0px }
.wrapmini { float:left;line-height:1.5em;width:25% }
.pagelinks { float:left;line-height:1.2em;width:35% }
.desc { font-size:10px; color:#ffffff }
.edit { font-size: 9px }
.signature { font-size: 10px; color: #339 }
.postdetails { font-size: 10px }
.postcolor { font-size: 12px; line-height: 160% }
.normalname { font-size: 12px; font-weight: bold; color: #003 }
.normalname a:link, .normalname a:visited, .normalname a:active { font-size: 12px }
.unreg { font-size: 11px; font-weight: bold; color: #900 }
.searchlite { font-weight:bold; color:#F00; background-color:#FF0 }
#QUOTE { font-family: Verdana, Arial; font-size: 11px; color: #ffffff; background-color: #; background-image: url(http://); border: 1px solid #292421; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px }
#CODE { font-family: Courier, Courier New, Verdana, Arial; font-size: 11px; color: #ffffff; background-color: #; background-image: url(http://); border: 1px solid #292421; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px }
.copyright { font-family: Verdana, Tahoma, Arial, Sans-Serif; font-size: 9px; line-height: 12px }
.codebuttons { font-size: 10px; font-family: verdana, helvetica, sans-serif; vertical-align: middle }
.forminput, .textinput, .radiobutton, .checkbox { font-size: 11px; font-family: verdana, helvetica, sans-serif; vertical-align: middle }
.thin { padding:6px 0px 6px 0px;line-height:140%;margin:2px 0px 2px 0px;border-top:1px solid #292421;border-bottom:1px solid #292421 }
.purple { color:purple;font-weight:bold }
.red { color:red;font-weight:bold }
.green { color:green;font-weight:bold }
.blue { color:blue;font-weight:bold }
.orange { color:#F90;font-weight:bold }
However, if you wish to have a more authentic look, this will require you to use the following scripts that I had pioneered. (All credits must remain unless otherwise spoken)
ALL CODES HERE ARE IN THE FOOTERS! Also, this will not work if you put any of these in the wrong order. The order they are in is how they MUST be in.First, remove that nasty post count.
- Code:
-
<script type='text/javascript'>
<!--
// remove post count by ticlo/Stefan
e = document.getElementsByTagName('SPAN')
for (n = 0; n < e.length; n++) {
if (e[n].className == 'postdetails') {
for (c = e[n].firstChild; c; c = c.nextSibling) {
if ((c.nodeName == '#text') && (c.nodeValue.indexOf('Posts:') != -1)) {
c.parentNode.removeChild(c.nextSibling); c.parentNode.removeChild(c); break;}
}}}
// -->
</script>
Next, remove the Important Topics and such:
- Code:
-
<script type='text/javascript'>
<!--
// Remove 'Important Topics' and 'Forum Topics' rows
// made by ticlo, http://ifsz.net/
if (document.location.href.indexOf('showforum=') != -1 || document.location.href.indexOf('act=SF') != -1 ) {
e = document.getElementsByTagName('TD')
for (n = 0; n < e.length; n++) {
if (e[n].className == 'darkrow1') {
if (e[n].innerHTML.indexOf('Important Topics') != -1) e[n].parentNode.style.display = 'none'
if (e[n].innerHTML.indexOf('Forum Topics') != -1){
e[n].parentNode.style.display = 'none'
rw = e[n].parentNode.sectionRowIndex
for (tbl = e[n].parentNode; tbl && tbl.nodeName != 'TABLE'; tbl = tbl.parentNode);
for (rw--; rw && tbl.rows[rw].cells[0].className == 'row4'; rw--) {
tbl.rows[rw].cells[3].className = 'row2'
tbl.rows[rw].cells[5].className = 'row2'
tbl.rows[rw].cells[6].className = 'row2'
}}}}}
// -->
</script>
And now member number:
- Code:
-
<script type='text/javascript'>
<!--
// remove member no by ticlo/Stefan
e = document.getElementsByTagName('SPAN')
for (n = 0; n < e.length; n++) {
if (e[n].className == 'postdetails') {
for (c = e[n].firstChild; c; c = c.nextSibling) {
if ((c.nodeName == '#text') && (c.nodeValue.indexOf('Member No.:') != -1)) {
c.parentNode.removeChild(c.nextSibling); c.parentNode.removeChild(c); break;}
}}}
// -->
</script>
The Join Date:
- Code:
-
<script type="text/javascript">
var jSpan = document.getElementsByTagName("span")
for(s=0;s<jSpan.length;s++){
if(jSpan[s].className.match("postdetails") && jSpan[s].innerHTML.match(/Joined: /i)){
jSpan[s].innerHTML = jSpan[s].innerHTML.replace(/Joined:\s.+<\w+>/i,'<br />')
}}
</script>
Now, here is where it starts to get a little tricky. Use the following to get the administrators and moderators their respective colors:
- Change the colors to what you have. (Blue=Administrator and Red=Moderators)
-
<script type='text/javascript'>
<!--
admincolor="#3e3605"
modcolor="#092109"
GET_SPAN=document.getElementsByTagName('SPAN');
for(a=0; a<GET_SPAN.length; a++){
n=GET_SPAN[a];
if(n.className=="postdetails" && n.innerHTML.match(/Group: Admin/i)){
n.parentNode.parentNode.parentNode.parentNode.className="admin";
document.write("<style type='text/css'>.admin .post2, .admin .post1 { background-color:" + admincolor + "} </style>");
}
if(n.className=="postdetails" && n.innerHTML.match(/Group: Forum Moderator/i)){
n.parentNode.parentNode.parentNode.parentNode.className="moderator";
document.write("<style type='text/css'>.moderator .post2, .moderator .post1 { background-color:" + modcolor + "} </style>");
}
}
//-->
</script>
Now to remove the user groups. Simply change where it says User Group to whatever group you wish to delete:
- Code:
-
<script>
//Delete A Group's Display By Trini_Gangsta
var z = document.getElementsByTagName("span")
for(x=0;x<z.length;x++){
if(z[x].className.match("postdetails") && z[x].innerHTML.match(/Group:/i)){
z[x].innerHTML = z[x].innerHTML.replace(/Group: USER GROUP+<\w+>/i,"")
}}
</script>
And lastly, the hiding threads part. When you go to hide threads, you must use what you put in place of Thread Hidden. in the topic title.
- Code:
-
<script>
var atitle = 'Thread Hidden.'
if(location.href.match("showforum=")){
b=document.getElementsByTagName('a')
for(a=0;a<b.length;a++){
if(b[a].innerHTML==atitle&&b[a].title.match('This topic')){
c=b[a].innerHTML;
b[a].innerHTML='';
b[a].parentNode.innerHTML=c+b[a].parentNode.innerHTML;
}}}
</script>
And now you should be done!