We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
Modern; WOW
Topic Started: Feb 4 2007, 08:58 AM (1,095 Views)
stingray001
Member
[ * ]
Name: Modern
Author: stingray001
Skin Number: 3
Button set Number: 4
Date Created: 3 Feb 07
Side Notes: Yet another production of mine :) [ps.better this time]

Preview:

Posted Image

Posted Image

Posted Image

Posted Image



CSS of skin:

Code:
 

html { overflow-x: hidden; overflow-y: auto; }

form { display:inline; }
img  { vertical-align:middle; border:0px }
BODY { font-family: Arial, sans-serif; font-size: 11px; color: #393939; margin:0px 10px 0px 10px;background-color:#1e1e1e; background-image: url(http://i15.photobucket.com/albums/a371/stingray001/5ef1aefe.jpg); background-repeat:no-repeat; }
TABLE, TR, TD { font-family: Arial, sans-serif; font-size: 11px; color: #393939; }
a:link, a:visited, a:active { text-decoration: underline; color: #393939 }
a:hover { color: #4976b9; text-decoration:underline }

fieldset.search { padding:6px; line-height:150% }
label { cursor:pointer; }

img.attach { border:2px outset #EEF2F7;padding:2px }

.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:#777;background-color:#DFE6EF;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 #345487;background-color: #F5F9FD }
#ucpmenu p  { padding:2px 5px 6px 9px;margin:0px; }
#ucpcontent { background-color: #F5F9FD; border:1px solid #345487;line-height:150%; width:auto }
#ucpcontent p  { padding:10px;margin:0px; }

#ipsbanner { position:absolute;top:1px;right:5%; }
#logostrip { border:0px;background-color: #000;}
#submenu   { display:none}
#submenu a:link, #submenu  a:visited, #submenu a:active { display:none; }
#userlinks { border:1px solid #C2CFDF; background-color: #F0F5FA }

#navstrip  { background-image:url(http://i15.photobucket.com/albums/a371/stingray001/9a02be5d.jpg); background-repeat:no-repeat; color:#a4a4a4; font-weight:bold;padding:10px 0px 16px 15px; }
#navstrip a:link, #navstrip  a:visited, #navstrip a:active { text-decoration: none; color: #FFF; }

.activeuserstrip { background-color:#BCD0ED; padding:6px }

.pformstrip { background-color: #000; background-image:url(http://i15.photobucket.com/albums/a371/stingray001/b4d24b1f.jpg); color:#FFF;font-weight:bold;padding:7px;margin-top:1px }
.pformleft  { background-color: #F5F9FD; padding:6px; margin-top:1px;width:25%; border-top:1px solid #C2CFDF; border-right:1px solid #C2CFDF; }
.pformleftw { background-color: #F5F9FD; padding:6px; margin-top:1px;width:40%; border-top:1px solid #C2CFDF; border-right:1px solid #C2CFDF; }
.pformright { background-color: #F5F9FD; padding:6px; margin-top:1px;border-top:1px solid #C2CFDF; }

.post1 { background-color: #F5F9FD }
.post2 { background-color: #EEF2F7 }
.postlinksbar { background-color:#D1DCEB;padding:7px;margin-top:1px;font-size:10px; background-image: url(http://i6.ifrm.com/style_images/<#IMG_DIR#>/tile_sub.gif) }

.row1 { background-color: #F5F9FD }
.row2 { background-color: #FEFEFE;  background-image: url(http://i15.photobucket.com/albums/a371/stingray001/8e328784.jpg); background-repeat:no-repeat; }
.row3 { background-color: #EEF2F7 }
.row4 { background-color: #FEFEFE; background-image: url(http://i15.photobucket.com/albums/a371/stingray001/8e328784.jpg); background-repeat:x-repeat;color:#393939; }
.row4  a:link, .row4  a:visited, .row4  a:active  { text-decoration: none }

.darkrow1 { background-color: #C2CFDF; color:#4C77B6; }
.darkrow2 { display:none }
.darkrow3 { background-color: #D1DCEB; color:#3A4F6C; }

.hlight { background-color: #DFE6EF }
.dlight { background-color: #EEF2F7 }

.titlemedium { font-weight:bold; color:#FFF; padding:7px; margin:0px; background-image: url(http://i15.photobucket.com/albums/a371/stingray001/b4d24b1f.jpg); border:0px }
.titlemedium  a:link, .titlemedium  a:visited, .titlemedium  a:active  { text-decoration: underline; color: #3A4F6C }

.maintitle { vertical-align:middle;font-weight:bold; color:#FFF; letter-spacing:1px; padding:15px 0px 5px 65px; background-image: url(http://i15.photobucket.com/albums/a371/stingray001/092bb9be.jpg) }
.maintitle a:link, .maintitle  a:visited, .maintitle  a:active { text-decoration: none; color: #FFF }
.maintitle a:hover { text-decoration: none }

.plainborder { border:1px solid #ededed;background-color:#F5F9FD }
.tableborder { border:0px solid #ededed;background-color:#ededed; padding:0px; margin:0px; width:100% }
.tablefill   { border:1px solid #345487;background-color:#F5F9FD;padding:6px;  }
.tablepad    { background-color:#F5F9FD;padding:6px }
.tablebasic  { width:100%; padding:0px 0px 0px 0px; margin:0px; border:0px }

.wrapmini    { display:none }
.pagelinks   { float:left;line-height:1.2em;width:35% }

.desc { font-family: Arial, sans-serif; font-size:10px; color:#a4a4a4; }
.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: #465584; background-color: #FAFCFE; border: 1px solid #000; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px }
#CODE  { font-family: Courier, Courier New, Verdana, Arial;  font-size: 11px; color: #465584; background-color: #FAFCFE; border: 1px solid #000; 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 #FFF;border-bottom:1px solid #FFF }

.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 }


.gfooter
{
background: #FFF;
margin: 5px 0 5px 0;
padding: 0;
width: 100%;
}


#mainbar   { background-image:url(http://i15.photobucket.com/albums/a371/stingray001/d3602460.jpg); background-repeat:no-repeat; padding:11px 0px 8px 65px;font-weight:bold;font-size:11px;text-decoration: none; color: #39639f }
#mainbar a:link, #mainbar  a:visited, #mainbar a:active { font-weight:bold;font-size:11px;text-decoration: none; color: #000; word-spacing:30px;  }
#mainbar a:hover { font-weight:bold;font-size:11px;text-decoration: none; color: #39639f; word-spacing:30px; }

#specialbar   { background-image:url(http://i15.photobucket.com/albums/a371/stingray001/d3602460.jpg); background-repeat:no-repeat; padding:11px 0px 8px 65px;font-weight:bold;font-size:11px;text-decoration: none; color: #39639f }
#specialbar a:link, #specialbar  a:visited, #specialbar a:active { font-weight:bold;font-size:11px;text-decoration: none; color: #FFF;  }
#specialbar a:hover { font-weight:bold;font-size:11px;text-decoration: none; color: #39639f; }

#specialbar1   { background-image:url(http://i15.photobucket.com/albums/a371/stingray001/d3602460.jpg); background-repeat:no-repeat; padding:11px 0px 8px 65px;font-weight:bold;font-size:11px;text-decoration: none; color: #39639f }
#specialbar1 a:link, #specialbar1  a:visited, #specialbar1 a:active { font-weight:bold;font-size:11px;text-decoration: none; color: #000; }
#specialbar1 a:hover { font-weight:bold;font-size:11px;text-decoration: none; color: #39639f; }



Document Type:

Code:
 
<title>YOUR BOARD NAME HERE</title>


***** After doing this, please go to General Configuration > Board Name > Change to "Index"

Header & Body:
Quote:
 

<table border="0" cellspacing="0" cellpadding="0" align="center"><tr>
<td width="800" valign="top">
<br><br>
<div align="right"><div style="width:500px;padding:12px; font-size:10px;border-bottom:0px;background-image:url(http://i15.photobucket.com/albums/a371/stingray001/9a02be5d.jpg);" id="specialbar" align="center"><b>Modern Skin developed by <a href="http://forums.ifskinzone.net/index.php?showuser=144635">stingray001</a> of <a href="http://forums.ifskinzone.net/index.php">IF Skin Zone</a></b></div></div><br><br>
<% BOARD HEADER %>
<% NAVIGATION %>
<script type='text/javascript'>
/*
IPBv2 Style Guest Bar
Created by iFusion
*/

function swapBar(){
if(document.getElementById('userlinks').innerHTML.match(/logged in as/i) == null){
document.getElementById('userlinks').getElementsByTagName('TD')[1].style.display="none";
document.getElementById('userlinks').getElementsByTagName('TD')[0].style.textAlign="center";
with(document.getElementById('userlinks') ){
  style.backgroundColor="#f4e7ea";
  style.border = "1px solid #986265"
  getElementsByTagName('TD')[0].innerHTML = getElementsByTagName('TD')[0].innerHTML.replace(/welcome guest/i, "<b>Welcome Guest</b>");
}}}

if(document.getElementById('userlinks')){
swapBar();
}
</script>
<% BOARD %>
<% STATS %>








Footer

Code:
 

<script type='text/javascript'>
//Put legend, and search box together in a table

//By Sean
divs=document.getElementsByTagName('div')
c=0
s=''
t=Array()
for(x=0;x<divs.length;x++) {
if ((divs[x].className=='wrapmini'||c)&&c<3) {t[c]=divs[x];c++;}
}
if (t[0]) {
for (x=0;x<2;x++) s+='<td>'+t[x].innerHTML+'</td>'
s+="<td align='right'>"+t[2].innerHTML+"</td>"
t[0].className=''
t[0].innerHTML='<table style="border:1px solid #000000;width:100%;background-color:#e4eaf2"><tr>'+s+'</tr></td>'
for (x=1;x<3;x++) document.body.removeChild(t[x])
}
</script>


<script>
var x = document.getElementsByTagName('DIV');for(i=0;i<x.length;i++) {if(x[i].className == 'row4' && x[i].innerHTML.match('Hosted for free by')) {x[i].id = 'copyright';}}var copyright = document.getElementById('copyright');copyright.className = '';copyright.style.border = '0px';copyright.lastChild.style.display = 'none';copyright.innerHTML = '<table width="100%" class="gfooter" cellSpacing="0" cellPadding="6"><tr><td width="33%">&nbsp;</td><td width="33%" align="center"><b><a href="' + window.location.href.split('/index.php')[0] + '/ar/"><font color="#000"><font size="1">Lo-Fi Version</font></a></b></td><td align="right" width="33%"><font color="#000"><font size="1">Time is now: ' + new Date().toLocaleString() + '</font></td></tr></table><div class="row5" style="font-size:7.5pt;line-height:16px;padding:6px;cell-spacing:5px;align="center">' + copyright.innerHTML.replace('|', '<br />') + '</div>';var x = document.getElementsByTagName('DIV');for(i=0;i<x.length;i++) {if(x[i].innerHTML.match('Welcome back; your last visit was on')) {x[i].id = 'welcomeback';}}var welcomeback = document.getElementById('welcomeback');var loggedin = 1;var x = document.getElementsByTagName('DIV');for(i=0;i<x.length;i++) {if(x[i].className == 'maintitle' && x[i].innerHTML == 'Board Statistics') {x[i].style.display = 'none';x[i].parentNode.id = 'boardstats';}}var x = document.getElementsByTagName('A');for(i=0;i<x.length;i++) {if(x[i].innerHTML == 'Log In' && x[i].parentNode.parentNode.parentNode.parentNode.id == 'userlinks') {var loggedin = 0;}}var x = document.getElementsByTagName('INPUT');for(i=0;i<x.length;i++) {if(x[i].name == 'UserName') {if(document.getElementById('boardstats') != null){x[i].parentNode.style.display = 'none';}}}var rightside = '<form action="' + window.location.href.split('index.php')[0] + 'index.php?act=Login&CODE=01&CookieDate=1" method="post"><input type="text" class="forminput2" size="20" name="UserName" value="User Name" onfocus="if(this.value==\'User Name\'){this.value=\'\';}" /> <input type="password" class="forminput2" size="20" value="password" name="PassWord" onfocus="if(this.value==\'password\'){this.value=\'\';}" /> <img style="cursor:hand;" onclick="this.parentNode.submit();" src="http://i15.photobucket.com/albums/a371/stingray001/login-button.gif" /></form>';if(loggedin == 1) {var rightside = '<input type="text" class="forminput2" id="dk" onfocus="if(this.value.match(\'Enter words to search...\')){this.value=\'\';}" size="25" value="Enter words to search..." /> <img style="cursor:hand;" onclick="window.location=\'index.php?act=Search&f=&defaultkeywords=\'+document.getElementById(\'dk\').value;" src="http://i15.photobucket.com/albums/a371/stingray001/login-button.gif" />';}if(welcomeback != null){welcomeback.innerHTML = '<table id="userlinks" width="100%" cellPadding="10" cellSpacing="0"><tr><td width="40%" align="left">' + welcomeback.innerHTML + '</td><td align="right" valign="middle">' + rightside + '</td></tr></table><br>';}var x = document.getElementsByTagName('A');for(i=0;i<x.length;i++) {if(x[i].innerHTML == 'Delete cookies set by this board' && x[i].href.match('act=Login&CODE=06')) {var blinks = x[i].parentNode.innerHTML;x[i].parentNode.style.display = 'none';}if(x[i].innerHTML == 'The moderating team' && x[i].href.match('act=Stats&CODE=leaders')) {var statlinks = x[i].parentNode.innerHTML;x[i].parentNode.style.display = 'none';}}var boardstats = document.getElementById('boardstats');if(boardstats != null){boardstats.className = null;boardstats.innerHTML = '<div align="right"><div style="width:500px;padding:12px; font-size:10px;border-bottom:0px;background-image:url(http://i15.photobucket.com/albums/a371/stingray001/9a02be5d.jpg);" id="specialbar" align="center"><b><font color:#fff>' + blinks + '</font></b></div></div><br><br><div class="tableborder"><div class="maintitle">Board Statistics</div><div class="specialbar1" style ="border:0px; padding:10px; background-image:url(http://i15.photobucket.com/albums/a371/stingray001/d3602460.jpg);" align="right">' + statlinks + '</div>' + boardstats.innerHTML + '</div>';}if(window.location.href.match('showuser=') && document.title == 'Viewing Profile') {var profilename = document.getElementById('profilename').innerHTML;var navstrip = document.getElementById('navstrip');var x = document.getElementsByTagName('B');for(i=0;i<x.length;i++) {if(x[i].parentNode.className == 'row3') {var data2 = x[i].parentNode.parentNode.cells[1].innerHTML;if(x[i].innerHTML == 'Joined') {var joined = x[i].parentNode.parentNode.cells[1].firstChild.innerHTML;x[i].parentNode.parentNode.style.display = 'none';}if(x[i].innerHTML == 'Member Group') {x[i].parentNode.parentNode.parentNode.parentNode.parentNode.style.display = 'none';var membergroup = data2;}if(x[i].innerHTML == 'Member Title') {var membertitle = data2;}if(x[i].innerHTML == 'Avatar') {var avatar = data2;}if(x[i].innerHTML == 'Signature') {var signature = data2;}}}var signaturediv = '';if(signature != '') {signaturediv = '<br /><br /><div class="tableborder"><div class="maintitle">Signature</div><div class="row2" style="padding:6px;"><div class="signature">' + signature + '</div></div></div>';}navstrip.innerHTML = '<div id="navstrip">' + navstrip.innerHTML + '</div><br /><br /><div class="tableborder"><div class="maintitle">Viewing Profile: ' + profilename + '</div><div class="row2" style="padding:6px;"><div style="line-height:160%;"><span id="profilename">' + profilename + '</span><br /><br />' + avatar + '<br /><span class="desc">' + membertitle + '<br /><br />Member Group: ' + membergroup + '<br />Joined: ' + joined + '</span></div></div></div>' + signaturediv;navstrip.id = '';}
</script>




Images can be found at my post below this one
Offline Profile Quote Post Goto Top
 
stingray001
Member
[ * ]
http://www.freewebs.com/ddsz/images.htm
Offline Profile Quote Post Goto Top
 
OverTheBelow
Member Avatar
Member
[ *  *  *  *  *  * ]
Doesn't look worth that much coding..
Offline Profile Quote Post Goto Top
 
Seraphim.
Member Avatar
Possible Bot
[ *  *  *  *  * ]
It looks good in the previews but when you actually put it on a board it aligns itself a little the right throwing it off the white inner bg and into the image outside.
Offline Profile Quote Post Goto Top
 
7 in a row
Member Avatar
Member
[ *  *  *  * ]
Maybe you should make a test board instead of images.
Offline Profile Quote Post Goto Top
 
BlueMatter
Member Avatar
addictiveStyles - o.O
[ *  *  *  *  * ]
Sorry buddy, not really liking this skin. Nice try tho
Offline Profile Quote Post Goto Top
 
Doofosmitch (PM)
Member Avatar
I've heard it all before.
[ *  *  *  *  * ]
Don't like this either, seems very basic.

Nice try though, better than what i can do :)
Offline Profile Quote Post Goto Top
 
Beaumont
Member Avatar
Member
[ *  *  *  *  * ]
Its good. But next time make a test board. Easier for us to see it.
Offline Profile Quote Post Goto Top
 
Master_Joe
Member Avatar
Member
[ *  *  * ]
I don't really like it but thats good for a third skin though. :)
Offline Profile Quote Post Goto Top
 
Bibbity
Member Avatar
absofruitly
[ *  *  *  *  *  *  * ]
Your skin needs a working preview, please provide one within 24 hours.
Offline Profile Quote Post Goto Top
 
stingray001
Member
[ * ]
PREVIEW > http://z6.invisionfree.com/elegantskin
Offline Profile Quote Post Goto Top
 
Peter
Member Avatar
Care for a quiche?
[ *  *  *  *  *  * ]
Personally, while I don't think this is a bad skin, there are number of things which irritate me, though some may just be personal preference.
1. The maintitle text area is much too small, if anyone has a long category name then it will go over the edge and look silly.
2. You have a number of flat back areas across the skin: your copyright, the #navstrip, .titlemedium etc.
I can see that some of them have background images, but the contrast is so little that they look pretty much like solid blocks of colour. These areas make parts of the skin look dull and flat in contrast to the bright blue gradient on the maintitle.
3. Personally I really don't like the IPB style log in and stuff, it just isn't worth having as much code as you do just to have a few bits like IPB does.

Like I said: it's not a bad skin, but it could be improved. Keep trying :)
Offline Profile Quote Post Goto Top
 
|p4|Brass Monkey
Member Avatar
Member
[ *  *  *  *  * ]
pretty buttons!
Offline Profile Quote Post Goto Top
 
AstronomyXtreme
Member Avatar
Obsessed
[ *  *  *  *  * ]
The black is really annoying and the images are a little large...

Otherwise, it looks good.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Mixed · Next Topic »
Add Reply