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
[SKIN] Mmm... Purple; purple, but not too girly ;); By MrKevTheObvious
Topic Started: Jan 23 2010, 12:26 AM (147 Views)
Reid
Member Avatar
È una trappola!

This topic has been moved from our official support board.

Originally posted by: MrKevTheObvious
[SKIN
 
Mmm... Purple; purple, but not too girly ;)]Author: PhranK

Preview


This is my first skin from scratch. :w00t: :r
Well, pretty much.
The gradients are modified from the default ones. :/

I made it for somebody, but they had already made their own, so I figured I wouldn't let it go to waste.
I was doing it rather late at night, so if you find any parts I missed, or have any suggestions, feel free to post about it here.

There's a topic in the preview forum where you can download the gradient images and the custom cursor if you want that too.
Don't link directly to any of them, as I will probably move or rename them from time to time to prevent linking to them. :P
Just download them to your computer and then host them somewhere yourself.

Replace the part of the CSS marked in red with your new url for the cursor if you want to use it, otherwise you can just leave it as it is.

You can also use the clock code if you like it.
I didn't write it.
Just modified it slightly.


Skin code:

Paste this in the CSS:
(Admin CP>Skinning & Styles>Manage Style Sheets)

Quote:
 
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: #282342; margin:0px 10px 0px 10px;
background-color: #A097F0;
scrollbar-face-color: #8A68C7;
scrollbar-shadow-color: #4E4383;
scrollbar-darkshadow-color: #393368;
scrollbar-3dlight-color: #9F88D8;
scrollbar-highlight-color: #635992;
scrollbar-arrow-color: #37305A;
scrollbar-track-color: #877FCF;
cursor: url("your url"), default; }

TABLE, TR, TD { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; color: #37305A; }

a:link, a:visited, a:active { text-decoration: none; color: #62127B }

a:hover { text-decoration: none; color:#D1C8FF; cursor: url("your url"), default; }


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:#37305A ;background-color:#9E9EF2 ;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 #4A4567 ;background-color: #9E9EF2 }

#ucpmenu p { padding:2px 5px 6px 9px;margin:0px; }

#ucpcontent { background-color: #9B97F0; border:1px solid #4A4567 ;line-height:150%; width:auto }

#ucpcontent p { padding:10px;margin:0px; }



#ipsbanner { position:absolute;top:1px;right:5%; }
#logostrip { border:1px solid #4A4567; background-color: #9576DD; #padding:0px;margin:0px; text-align:center; background-image:url(http://i4.ifrm.com/663/81/pip/tile_sub.GIF); }

#submenu { border:1px solid #4A4567 ;background-color: #8B78DF; background-image:url(http://i4.ifrm.com/663/81/pip/tile_back.GIF); font-size:10px;margin:3px 0px 3px 0px;color:#3A4F6C ;font-weight:bold;}

#submenu a:link, #submenu a:visited, #submenu a:active { font-weight:bold;font-size:10px;text-decoration: none; color: #62127B; }
#submenu a:hover { text-decoration: none; color:#F2EBFF; }

#userlinks { border:1px solid #4A4567 ; margin-top:4px; background-color: #8B78DF; background-image:url(http://i4.ifrm.com/663/81/pip/tile_back.GIF) }



#navstrip { font-weight:bold;padding:6px 0px 6px 0px; }



.activeuserstrip { border:1px solid #4A4567; background-color:#8B78DF; background-image:url(http://i4.ifrm.com/663/81/pip/tile_back.GIF); padding:6px }



.pformstrip { background-color: #8B78DF; background-image:url(http://i4.ifrm.com/663/81/pip/tile_back.GIF); color:#37305A ;font-weight:bold;padding:7px;margin-top:1px }

.pformleft { background-color: #9B97F0; padding:6px; margin-top:1px; width:25%; border-top:1px solid #4A4567 ; border-right:1px solid #4A4567 ; }

.pformleftw { background-color: #9B97F0 ; padding:6px; margin-top:1px;width:40%; border-top:1px solid #4A4567 ; border-right:1px solid #4A4567 ; }

.pformright { background-color: #9E9EF2; padding:6px; margin-top:1px;border-top:1px solid #4A4567 ; }



.post1 { background-color: #A097F0 }

.post2 { background-color: #A097F0 }

.postlinksbar { background-color: #8B78DF; background-image:url(http://i4.ifrm.com/663/81/pip/tile_back.GIF); padding:7px; margin-top:1px; font-size:10px; }



.row1 { background-color: #9E9EF2 }

.row2 { background-color: #9E9EF2 }

.row3 { background-color: #9191E0 }

.row4 { background-color: #9E97EF }



.darkrow1 { background-color: #7C7CC0 ; color:#37305A ; }

.darkrow2 { background-color: #8B78DF; background-image:url(http://i4.ifrm.com/663/81/pip/tile_back.GIF); }

.darkrow3 { background-color: #9191E0 ; color:#37305A ; }



.hlight { background-color: #A097F0 }

.dlight { background-color: #A097F0 }



.titlemedium { font-weight:bold; color:#37305A ; padding:7px; margin:0px; background-color: #8B78DF; background-image:url(http://i4.ifrm.com/663/81/pip/tile_back.GIF) }

.titlemedium a:link, .titlemedium a:visited, .titlemedium a:active { text-decoration: underline; color: #62127B }



.maintitle { vertical-align:middle;font-weight:bold; color:#37305A ; letter-spacing:1px; padding:8px 0px 8px 5px; background-color: #9576DD; background-image:url(http://i4.ifrm.com/663/81/pip/tile_sub.GIF) }

.maintitle a:link, .maintitle a:visited, .maintitle a:active { text-decoration: none; color: #62127B }

.maintitle a:hover { text-decoration: none; color:#F2EBFF; }



.plainborder { background-color:#9898EA; border:1px solid #4A4567; }

.tableborder { background-color:#4A4567; padding:0px; margin:0px; width:100%; border: 1px solid #4A4567; }

.tablefill { border:1px solid #4A4567 ;background-color:#A097F0 ;padding:6px; }

.tablepad { background-color:#9E9EF2 ;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 { background-color: #9E9AF0; font-size:10px; color:#37305A }

.edit { font-size: 9px }



.signature { font-size: 10px; color: #37305A; line-height:150% }

.postdetails { font-size: 10px }

.postcolor { font-size: 12px; line-height: 160% }



.normalname { font-size: 12px; font-weight: bold; color: #37305A }

.normalname a:link, .normalname a:visited, .normalname a:active { font-size: 12px }

.unreg { font-size: 11px; font-weight: bold; color: #796cbc }



.searchlite { font-weight:bold; color:#F00; background-color:#FF0 }

#QUOTE { font-family: Verdana, Arial; font-size: 11px; color: #37305A ; background-color: #9e9ef2 ; border: 1px solid #4A4567; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px }

#CODE { font-family: Courier, Courier New, Verdana, Arial; font-size: 11px; color: #37305A ; background-color: #9e9ef2 ; border: 1px solid #4A4567 ; 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; background-color: #9e9ef2 }

.textinput { font-size: 11px; font-family: verdana, helvetica, sans-serif; color: #37305A; background-color: #A097F0 }

.forminput, .radiobutton, .checkbox { font-size: 11px; font-family: verdana, helvetica, sans-serif; vertical-align: middle; color: #37305A; background-color: #9E9EF2; }


.thin { padding:6px 0px 6px 0px;line-height:140%;margin:2px 0px 2px 0px;border-top:1px solid #37305A ;border-bottom:1px solid #37305A }



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


.copyright .row4 { border:1px solid #4A4567 !important; background-color: #9576DD; background-image:url(http://i4.ifrm.com/663/81/pip/tile_sub.GIF) }


/*
This notice and the following copyright code must remain unchanged as long as you use this skin, unless you modify it heavily, in which case you may request permission to remove it at: http://support.invisionfree.com/index.php?showuser=9683
You can, however, choose to not display the copyright on the page by simply removing the style tags from the copyright code and relocating the asterisk+slash at the end of this sentence to the end of the code instead. :)
*/


</style>
<font color="282342" size="0"><center>· Skin designed and © by <a href="http://support.invisionfree.com/index.php?showuser=9683">PhranK</a> 2004 ·</center></font><style type="text/css">




Clock Code:

Paste this part in the javascript box of the board wrappers:
(Admin CP>Skinning & Styles>Board Wrappers)

Code:
 
<script LANGUAGE="JavaScript">
//clock
<!-- Original: Craig Lumley -->
<!-- Web Site: http://www.ws4all.co.uk -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function MakeArrayday(size) {
this.length = size;
for(var i = 1; i <= size; i++) {
this[i] = "";
}
return this;
}
function MakeArraymonth(size) {
this.length = size;
for(var i = 1; i <= size; i++) {
this[i] = "";
}
return this;
}
function funClock() {
var runTime = new Date();
var hours = runTime.getHours();
var minutes = runTime.getMinutes();
var seconds = runTime.getSeconds();
var dn = "AM";
if (hours >= 12) {
dn = "PM";
hours = hours - 12;
}
if (hours == 0) {
hours = 12;
}
if (minutes <= 9) {
minutes = "0" + minutes;
}
if (seconds <= 9) {
seconds = "0" + seconds;
}
movingtime = "<b>"+ hours + ":" + minutes + ":" + seconds + " " + dn + "</b>";
if (document.layers) {
document.layers.clock.document.write(movingtime);
document.layers.clock.document.close();
}
else if (document.all) {
clock.innerHTML = movingtime;
} else {
var itm = document.getElementById('clock');
if (itm) itm.innerHTML = movingtime;
}
setTimeout("funClock()", 1000)
}
window.onload = funClock;
// End -->
</script>


Paste this part in the header & body box of the board wrappers, just after <% NAVIGATION %> if you want it where I have it:

Code:
 
<span id=clock style="position:relative; font-size: 16px; background-color: #9576DD; border: 1px solid #4A4567"></span><br><br>
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Skin Galleries · Next Topic »
Add Reply