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
  • Pages:
  • 1
Whedite; white/light gray/red
Topic Started: Sep 26 2005, 02:32 AM (1,558 Views)
SyKo
Member Avatar
aka godman123
[ *  *  *  *  *  *  * ]
Name: Whedite
Author: godman123
Skin Number: 20
Date Created: Over the last few weeks
Side Notes: Thanks PWND! for the Advanced Image Borders tutorial you posted in IF Documentation. It's way better than SyringeX's =P. This was originally going to be yellow/red, but yellow is impossible to skin I swear o.o"


Preview of the skin

Board Wrappers > Header and Body
Quote:
 
<body bgcolor="#FFFFFF" style="margin: 0px;">

<table width="810px" align="center" cellspacing="0" cellpadding="0"><tr>

<td class="borderleft" height="100%" valign="top">
<img src="http://img239.imageshack.us/img239/1599/borderleftside2sq.gif"  /></td>

<td valign="top">
<% BOARD HEADER %>
<% NAVIGATION %>
<% BOARD %>
<br />
<div class="godman" style="text-align:center;">Skin created by godman123 of the <a href="http://forums.ifskinzone.net" target="_blank">IF Skin Zone.</a></div>


Board Wrappers > Footer
Quote:
 
</td>
<td class="borderright" height="100%" valign="bottom"><img src="http://img107.imageshack.us/img107/7551/borderrightside6vj.gif" /></td>


CSS of skin:
Quote:
 
HTML { overflow-x: hidden; overflow-y: auto; }

FORM { display: inline; }

IMG  { vertical-align: middle; border: 0px; }

BODY { background-image: url(); font-family: Verdana, sans-serif; font-size: 10px; color: #787878; margin: 0px; background-color: #FDFDFD; }

TABLE, TR, TD { font-family: Verdana, sans-serif; font-size: 10px; color: #787878; }

a:link, a:visited, a:active { text-decoration: none; color: #787878; }
a:hover { color: #F81010; text-decoration: underline; }

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

label { cursor: pointer; }

img.attach { border: 1px solid #C6C6C6; padding: 2px; }

li.helprow { padding: 0px; margin: 0px 0px 10px 0px; }

ul#help    { padding: 0px 0px 0px 15px; }

.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: #535353; }
.googlish, .googlish a:link, .googlish a:visited, .googlish a:active { font-size: 14px; font-weight: bold; color: #686868; }
.googlepagelinks { font-size: 1.1em; letter-spacing: 1px; }
.googlesmall, .googlesmall a:link, .googlesmall a:active, .googlesmall a:visited { font-size: 10px; color: #4A4A4A; }

option.cat { font-weight: bold; }
option.sub { font-weight: bold; color: #D6D6D6; }
.caldate  { border-bottom:1px solid #C6C6C6; background-image:url(http://img260.imageshack.us/img260/3940/titlemedium8rh.gif); text-align: right; font-weight: bold; font-size: 10px; color: #787878; background-color: #ECECEC; padding: 3px; 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 #C6C6C6; }
#photoimg  { text-align: center; margin-top: 15px; }

#ucpmenu    { line-height: 150%; width: 22%; border: 1px solid #C6C6C6; background-color: #F5F5F5; }
#ucpmenu p  { padding: 2px 5px 6px 9px; margin: 0px; }
#ucpcontent { background-color: #F5F5F5; border: 1px solid #C6C6C6; line-height: 150%; width: auto; }
#ucpcontent p  { padding: 10px; margin: 0px; }

#ipsbanner { position: absolute; top: 1px; right: 5%; }

#logostrip { border: 1px solid #C6C6C6; background-color: #EFEFEF; background-image: url(); padding: 0px; margin-bottom: 5px; margin-top: 5px; }
#logostrip a:link, #logostrip a:visited, #logostrip a:active { color: #D6D6D6; }
#logostrip a:hover { color: #D6D6D6; }

#submenu  { margin-top: 5px; border-bottom: 1px solid #E6E6E6; border-right: 1px solid #E6E6E6; border-top: 1px solid #C6C6C6; border-left: 1px solid #C6C6C6; background-color: #F5F5F5; font-size: 10px; margin: 0px 0px 3px 0px; color: #F81010; font-weight: bold; background-image: url(); }

#submenu img { display: none; }

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

#submenu a:hover { font-weight: bold; text-decoration: underline; }

#userlinks { background-color: #F6F6F6; border-left: 5px solid #C6C6C6; border-top: 1px solid #C6C6C6; border-right: 5px solid #C6C6C6; border-bottom: 1px solid #C6C6C6; }

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

.activeuserstrip { border-left: 1px solid #C6C6C6; background-color: #F5F5F5; padding: 3px; }

.pformstrip { font-weight: bold; color: #EB0000; padding: 3px; margin: 0px; background-image: url(http://img260.imageshack.us/img260/3940/titlemedium8rh.gif); }
.pformleft  { background-color: #F5F5F5; padding: 6px; margin-top: 1px; width: 25%; border-top: 1px solid #C6C6C6; border-right: 1px solid #C6C6C6; }
.pformleftw { background-color: #F5F5F5; padding: 6px; margin-top: 1px; width: 40%; border-top: 1px solid #C6C6C6; border-right: 1px solid #C6C6C6; }
.pformright { background-color: #F5F5F5; padding: 6px; margin-top: 1px; border-top: 1px solid #C6C6C6; }

.post1 { border-top: 1px solid #FFF; background-color: #F5F5F5; }
.post2 { border-top: 1px solid #FFF; background-color: #F5F5F5; }
.postlinksbar { font-weight: bold; color: #EB0000; padding: 3px; margin: 0px; background-image: url(http://img260.imageshack.us/img260/3940/titlemedium8rh.gif); }
.postlinksbar a:link, .postlinksbar a:visited, .postlinksbar a:active { text-decoration: none; color: #EB0000; }

.row1 { border-top:1px solid #FFF; background-color: #FBFBFB; }
.row2 { border-top:1px solid #FBFBFB; background-color: #F6F6F6; }
.row3 { border-top:1px solid #FFF; background-color: #FBFBFB; }
.row4 { border-top:1px solid #FFF; background-color: #FBFBFB; }
div.row4 { border: 1px solid #C6C6C6!important; background-color: #F5F5F5!important; }

.darkrow1 { background-image: url(); background-color: #FDFDFD; color: #787878; }
.darkrow2 { background-image: url(http://img260.imageshack.us/img260/3940/titlemedium8rh.gif); background-color: #F5F5F5; color: #787878; }
.darkrow3 { background-image: url(http://img260.imageshack.us/img260/3940/titlemedium8rh.gif); background-color: #FBFBFB; color: #787878; }

.hlight { background-color: #F5F5F5; }
.dlight { background-color: #F5F5F5; color: #C6C6C6; }

.titlemedium { font-weight: bold; color: #EB0000; padding: 3px; margin: 0px; background-image: url(http://img260.imageshack.us/img260/3940/titlemedium8rh.gif); }
.titlemedium  a:link, .titlemedium  a:visited, .titlemedium  a:active  { text-decoration: none; color: #EB0000; }

.maintitle { font-size: 9px; font-weight: bold; background-color: ; color: #F3F3F3; padding: 9px 0px 9px 25px; background-image: url(http://img286.imageshack.us/img286/7931/maintitle7wl.gif); }
.maintitle a:link, .maintitle  a:visited, .maintitle  a:active { text-decoration: none; color: #F3F3F3; }
.maintitle a:hover { text-decoration: none; }

.plainborder { border: 1px solid #C6C6C6; background-color: #EEEEEE; }
.tableborder { border: 1px solid #C6C6C6; background-color: #DADADA; padding: 0px; margin: 0px; width: 99%; }
.tablefill  { border: 1px solid #C6C6C6; background-color: #EEEEEE; padding: 6px;  }
.tablepad    { background-color: #EEEEEE; 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: 9px; color: #888888; }
.edit { font-size: 9px; }

.signature  { font-size: 9px; color: #787878; }
.postdetails { padding-left: 2px; padding-right: 2px; font-size: 9px; }
.postcolor  { font-size: 10px; line-height: 160%; }


.normalname { font-size: 14px; font-weight: bold; color: inherit; }
.normalname a:link, .normalname a:visited, .normalname a:active { font-size: 10px; }
.unreg { font-size: 10px; font-weight: bold; color: inherit; }

.searchlite { font-weight: bold; color: #D6D6D6; background-color: #EEEEEE; }

#QUOTE { font-family: Verdana, sans-serif; font-size: 10px; color: #F81010; background-color: #F6F6F6; border-left: 5px solid #C6C6C6; border-top: 1px solid #C6C6C6; border-right: 5px solid #C6C6C6; border-bottom: 1px solid #C6C6C6; }
#QUOTE a:link, #QUOTE a:visited, #QUOTE a:active { color: #888888; text-decoration: underline; }
#CODE  { font-family: Courier New;  font-size: 10px; color: #D6D6D6; background-color: #F5F5F5; border: 1px solid #C6C6C6; padding: 2px; }

.copyright { font-family: Verdana, sans-serif; font-size: 9px; line-height: 12px; }

TEXTAREA, INPUT { background-repeat: no-repeat; background-image:url(http://img282.imageshack.us/img282/4650/titlemedium8do.gif); background-position: top; color: #F81010; border: 1px solid #C6C6C6; background-color: #FCFCFC; margin: 1px; }

.codebuttons  { font-size: 9px; font-family: verdana, helvetica, sans-serif; vertical-align: middle; }
.forminput, .textinput, .radiobutton, .checkbox  { color: #F81010; border: 1px solid #C6C6C6; background-color: #F5F5F5;  font-size: 9px; font-family: Verdana, sans-serif; vertical-align: middle; }

.thin { background-color: #F6F6F6; border-left: 5px solid #C6C6C6; border-top: 1px solid #C6C6C6; border-right: 5px solid #C6C6C6; border-bottom: 1px solid #C6C6C6; padding: 3px 0px 3px 5px; line-height: 140%; margin: 2px 0px 2px 0px; }

.godman { background-color: #F6F6F6; border-left: 5px solid #C6C6C6; border-top: 1px solid #C6C6C6; border-right: 5px solid #C6C6C6; border-bottom: 1px solid #C6C6C6; padding: 3px 0px 3px 5px; line-height: 140%; margin: 2px 0px 2px 0px; }
.godman a:link, .godman a:visited, .godman a:active { font-weight: bold; text-decoration: underline; }

.borderleft { background-image: url(http://img239.imageshack.us/img239/1599/borderleftside2sq.gif); background-repeat: repeat-y; padding: 0px; background-position: right; }
.borderright { background-image: url(http://img107.imageshack.us/img107/7551/borderrightside6vj.gif); background-repeat: repeat-y; padding: 0px; background-position: left;  }

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


</style>
<script language='javascript'>
if ( location.search.indexOf('act=calendar')!=-1) {
document.write("<style>.maintitle { text-align: left; padding: 9px 350px 9px 0px; }}</style>")}
</script>
<style type="text/css">

</style>
<script language='javascript'>
if ( location.search.indexOf('act=Search&f=')!=-1) {
document.write("<style>.maintitle { text-align: left; padding: 9px 0px 9px 35px; }}</style>")}
</script>
<style type="text/css">
Offline Profile Quote Post Goto Top
 
PWND!
What once was.
[ *  *  *  *  *  * ]
Well, as much as I appreciate my code being used, you don't need to add in an extra image there.. but whatever ;)

And as for the skin, it's very nice. And that's ingnoring the fact that it's your first. <_<

Couple of things could be done to improve it though, and number 1 is to add a hover to your #submenu. The code to do so looks like this, just put it somewhere in your CSS:
Quote:
 
#submenu  { margin-top: 5px; border-bottom: 1px solid #E6E6E6; border-right: 1px solid #E6E6E6; border-top: 1px solid #C6C6C6; border-left: 1px solid #C6C6C6; background-color: #F5F5F5; font-size: 10px; margin: 0px 0px 3px 0px; color: #F81010; font-weight: bold; background-image: url(); }

#submenu img { display: none; }

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

#submenu a:hover { font-weightA: bold; color: #000000; }


So, just take the 'a:hover' out of the other bit, and add it to a new line, with a different color.

Another thing is on your Search page, the text isn't actually on the .maintitle, which can be fixed by useing the same sort of JavScript for the Search page as you did with the Calendar. Otherwise, I think the hover color is a bit too bright, but a nice skin overall. :D
Offline Profile Quote Post Goto Top
 
SyKo
Member Avatar
aka godman123
[ *  *  *  *  *  *  * ]
PWND!
Sep 25 2005, 11:41 PM
Well, as much as I appreciate my code being used, you don't need to add in an extra image there.. but whatever ;)

And as for the skin, it's very nice. And that's ingnoring the fact that it's your first. <_<

Couple of things could be done to improve it though, and number 1 is to add a hover to your #submenu. The code to do so looks like this, just put it somewhere in your CSS:
Quote:
 
#submenu  { margin-top: 5px; border-bottom: 1px solid #E6E6E6; border-right: 1px solid #E6E6E6; border-top: 1px solid #C6C6C6; border-left: 1px solid #C6C6C6; background-color: #F5F5F5; font-size: 10px; margin: 0px 0px 3px 0px; color: #F81010; font-weight: bold; background-image: url(); }

#submenu img { display: none; }

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

#submenu a:hover { font-weightA: bold; color: #000000; }


So, just take the 'a:hover' out of the other bit, and add it to a new line, with a different color.

Another thing is on your Search page, the text isn't actually on the .maintitle, which can be fixed by useing the same sort of JavScript for the Search page as you did with the Calendar. Otherwise, I think the hover color is a bit too bright, but a nice skin overall. :D

Thanks, I'll do those changes now.

And this isn't my first skin, just my first with your awesome code :arr:
Offline Profile Quote Post Goto Top
 
rho
Downtrodden and hurt....
[ *  *  *  * ]
That's a pretty good skin. You have a good maintitle there, but you've used the same grads for both titlemedium as pformstrip. Also, your .caldate could use a gradient now that your skin is advanced. That's a nice step with most of the borders - 4 around the sides and 1 on the top and bottom. Your Quote and Code windows are also in the same fashion, though they alllook pretty good. The border images for the table you've used are also pretty good - somewhat like the borders that SZ had on it's previous skin, except they had it on top and bottom too. that's a pretty good skin on the overall - I think this might just be a {WOW!}, although, don't count on it ! ^_^
Offline Profile Quote Post Goto Top
 
PWND!
What once was.
[ *  *  *  *  *  * ]
:lol: Just in the PM you said first, and I ddin't read the rest of it ;)
Offline Profile Quote Post Goto Top
 
SyKo
Member Avatar
aka godman123
[ *  *  *  *  *  *  * ]
rho
Sep 25 2005, 11:44 PM
That's a pretty good skin. You have a good maintitle there, but you've used the same grads for both titlemedium as pformstrip. Also, your .caldate could use a gradient now that your skin is advanced. That's a nice step with most of the borders - 4 around the sides and 1 on the top and bottom. Your Quote and Code windows are also in the same fashion, though they alllook pretty good. The border images for the table you've used are also pretty good - somewhat like the borders that SZ had on it's previous skin, except they had it on top and bottom too. that's a pretty good skin on the overall - I think this might just be a {WOW!}, although, don't count on it ! ^_^

Thanks for all the compliments ^.^

Yeah, I used the same image for titlemedium and pformstrip. I always do that, I just think it's necessary. PS - It's 5px, but nice guess =P

And as for the WOW....I usually don't count on it =P
Offline Profile Quote Post Goto Top
 
..:;:..
Member Avatar
^-^*
[ *  *  *  *  *  * ]
Looks pretty good but i don't like the MT that much.
Offline Profile Quote Post Goto Top
 
SyKo
Member Avatar
aka godman123
[ *  *  *  *  *  *  * ]
Pink Piranha
Sep 26 2005, 01:58 AM
Looks pretty good but i don't like the MT that much.

What don't you like about it? I like to know these things so I don't mess up in the future >_>;;
Offline Profile Quote Post Goto Top
 
Nephos
Member Avatar
The walls abandon shape
[ *  *  *  *  *  *  * ]
Nice skin, although IMO it could be improved a lot.

The maintitle looks very flat - some bevel on the bg area would enhance it greatly, and the red areas would look good with some better glass effects. The colour scheme isn't too original. I'm not very fond of the hover effects, but you've done a great job of removing the defaults, and the textinput areas are great.

Keep working on it - enhance your maintitle skills and you'll have a great skin.
Offline Profile Quote Post Goto Top
 
SyKo
Member Avatar
aka godman123
[ *  *  *  *  *  *  * ]
Da Vinci
Sep 26 2005, 10:01 AM
Nice skin, although IMO it could be improved a lot.

The maintitle looks very flat - some bevel on the bg area would enhance it greatly, and the red areas would look good with some better glass effects. The colour scheme isn't too original. I'm not very fond of the hover effects, but you've done a great job of removing the defaults, and the textinput areas are great.

Keep working on it - enhance your maintitle skills and you'll have a great skin.

Gah, you and your elite Photoshop skills :ermm:


I guess I'll work to enhance everything when I get home today.
Offline Profile Quote Post Goto Top
 
Levity
Member Avatar
Member
[ *  *  *  *  *  *  * ]
Not bad skin. One thing i don't like about the skin is the really strong red colour in the Maintitle, and it also looks a bit flat. Overall nice light and basic skin. Good job :)
Offline Profile Quote Post Goto Top
 
Nephos
Member Avatar
The walls abandon shape
[ *  *  *  *  *  *  * ]
godman123
Sep 26 2005, 06:03 PM
Da Vinci
Sep 26 2005, 10:01 AM
Nice skin, although IMO it could be improved a lot.

The maintitle looks very flat - some bevel on the bg area would enhance it greatly, and the red areas would look good with some better glass effects.  The colour scheme isn't too original.  I'm not very fond of the hover effects, but you've done a great job of removing the defaults, and the textinput areas are great.

Keep working on it - enhance your maintitle skills and you'll have a great skin.

Gah, you and your elite Photoshop skills :ermm:


I guess I'll work to enhance everything when I get home today.

:P

Work on it and it'll come naturally eventually.
Offline Profile Quote Post Goto Top
 
Clapton
Member Avatar
Also known as Feare, Aoine, Slowhand
[ *  *  *  *  *  *  *  * ]
Da Vinci
Sep 26 2005, 04:26 PM
godman123
Sep 26 2005, 06:03 PM
Da Vinci
Sep 26 2005, 10:01 AM
Nice skin, although IMO it could be improved a lot.

The maintitle looks very flat - some bevel on the bg area would enhance it greatly, and the red areas would look good with some better glass effects.  The colour scheme isn't too original.  I'm not very fond of the hover effects, but you've done a great job of removing the defaults, and the textinput areas are great.

Keep working on it - enhance your maintitle skills and you'll have a great skin.

Gah, you and your elite Photoshop skills :ermm:


I guess I'll work to enhance everything when I get home today.

:P

Work on it and it'll come naturally eventually.

You use PSP liar :@

Nice work ^_^
Offline Profile Quote Post Goto Top
 
SyKo
Member Avatar
aka godman123
[ *  *  *  *  *  *  * ]
Thanks guys ^_^
Offline Profile Quote Post Goto Top
 
tiptopolive
Member Avatar
oh my, he's so gangsta
[ *  *  *  *  *  *  * ]
1. probably could use a grad in the caldate
2. The Submenu link color and hover color should be switched, I don't like the effect.
3. Font-weight:normal on the titlemedium
4. Absolutely amazing other wise :wub:
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · Light · Next Topic »
Add Reply
  • Pages:
  • 1