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
Magic Grays
Topic Started: Feb 23 2006, 07:22 AM (366 Views)
Shadow Mist
Unregistered

Name of Skin: Magic Grays
Creater: Shadow Mist
Skin Number: 2
Date/Time: Feburary 23,2006 {6:20 AM}
Notes: It is a gray skin.I just would like to know,How do you add images to the skin?

Preview

Code:
Code:
 
html { overflow-x: hidden; overflow-y: auto; }
form { display:inline; }
#ipbwrapper { text-align:left; width:95%; margin-left:auto;margin-right:auto }
#ipbwrapper img { vertical-align:middle; border: 0px }
img { vertical-align:middle; border:0px }
BODY { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; color: #000000; margin:0px 30px 0px 30px;background-color:#a9a9a9; }
TABLE, TR, TD { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; color: #2f4f4f; }
a:link, a:visited, a:active { text-decoration: underline; color: #2f4f4f; }
a:hover { color: #696969; 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:#000000;background-color:#708090;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 #000000;background-color: #808080 }
#ucpmenu p { padding:2px 5px 6px 9px;margin:0px; }
#ucpcontent { background-color: #808080; border:1px solid #000000;line-height:150%; width:auto }
#ucpcontent p { padding:10px;margin:0px; }
#ipsbanner { position:absolute;top:1px;right:5%; }
#logostrip {border:1px solid #000000;background-color:#a9a9a9;padding:0px;margin:0px;}
/* Skin Created using the AIO-lite CSS Generator at http://Link Blocked/main.php */
#submenu { border:1px solid #000000;background-color: #a9a9a9;font-size:10px;margin:3px 0px 3px 0px;color:#000000;font-weight:bold;}
#submenu a:link, #submenu a:visited, #submenu a:active { font-weight:bold;font-size:10px;text-decoration: none; color: #2f4f4f }
#userlinks { border:1px solid #000000; background-color: #a9a9a9 }
#navstrip { font-weight:bold;padding:6px 0px 6px 0px; }
.activeuserstrip { background-color:#708090; padding:6px }
.pformstrip { background-color: #708090; color:#000000;font-weight:bold;padding:7px;margin-top:1px }
.pformleft { background-color: #808080; padding:6px; margin-top:1px;width:25%;border-top:1px solid #000000; border-right:1px solid #000000; }
.pformleftw { background-color: #808080; padding:6px; margin-top:1px;width:40%;border-top:1px solid #000000; border-right:1px solid #000000; }
.pformright { background-color: #808080; padding:6px; margin-top:1px;border-top:1px solid #000000; }
.post1 { background-color: #c0c0c0 }
.post2 { background-color: #c0c0c0 }
.postlinksbar { background-color:#708090;padding:7px;margin-top:1px;font-size:10px; }
.row1 { background-color: #808080 }
.row2 { background-color: #808080 }
.row3 { background-color: #808080 }
.row4 { background-color: #808080 }
.darkrow1 { background-color: #778899; color:#d3d3d3; }
.darkrow2 { background-color: #778899; color:#d3d3d3; }
.darkrow3 { background-color: #778899; color:#d3d3d3; }
.hlight { background-color: #c0c0c0 }
.dlight { background-color: #c0c0c0 }
.titlemedium { font-weight:bold; color:#000000; padding:7px; margin:0px; background-color: #708090 }
.titlemedium a:link, .titlemedium a:visited, .titlemedium a:active { text-decoration: underline; color: #2f4f4f }
.maintitle { vertical-align:middle;font-weight:bold; color:#000000; letter-spacing:1px; padding:8px 0px 8px 5px; background-color: #708090; background-image: url(http://i37.photobucket.com/albums/e81/bensgfx/bg.png); }
.maintitle a:link, .maintitle a:visited, .maintitle a:active { text-decoration: none; color: #2f4f4f }
.maintitle a:hover { color: #696969; text-decoration: underline }
.plainborder { border:1px solid transparent;background-color:transparent }
.tableborder { border:1px solid #000000;background-color:#000000; padding:0px; margin:0px;width:100% }
.tablefill { border:1px solid #000000;background-color:#808080;padding:6px;  }
.tablepad { background-color:#a9a9a9;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:#000000 }
.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:#c0c0c0;background-color: #000000; border: 1px solid #000000; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px }
#CODE { font-family: Courier, Courier New, Verdana, Arial, font-size: 11px; color: #c0c0c0; background-color: #000000; border: 1px solid #000000; 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 #000000;border-bottom:1px solid #000000 }
.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 }
Quote Post Goto Top
 
Nicola
Member Avatar
Zatharawrus
[ *  *  *  *  *  *  *  *  *  * ]
To add images to your skin, find the class you want to add the image to.

For instance, the main category header is called the .maintitle.

Quote:
 
.maintitle { vertical-align:middle;font-weight:bold; color:#000000; letter-spacing:1px; padding:8px 0px 8px 5px; background-color: #708090; background-image: url( URL OF THE IMAGE); }


Add the bolded code to the class, to put an image in :)
Offline Profile Quote Post Goto Top
 
Shadow Mist
Unregistered

ok....SKIN updated
Quote Post Goto Top
 
Levity
Member Avatar
Member
[ *  *  *  *  *  *  * ]
Its not bad, ok for a second skin. A few things you can work on. Firstly to edit your default Invision Free copyright border use this code. You can place it anywhere in the CSS.

Quote:
 
div.row4 { background-color: #BACKGROUND COLOR HEX HERE; border: 1px solid #BORDER HEX COLOR HERE!important }


To center your board and change the width, read this documentation found here.

You could also try adding gradients to your skin, the main area's for gradients are the Title Medium, pformstrip, mainititle and maybe submenu and darkrow2. You might want to also edit the padding on those area. Just try some stuff out.

I'm sorry if this is too difficult or simple for you. Pm me if you need any help.

Offline Profile Quote Post Goto Top
 
Peter
Member Avatar
Care for a quiche?
[ *  *  *  *  *  * ]
not too bad, though i'd add images to your .titlemedium and .darkrow2 to try and make it look a bit more interesting.
Offline Profile Quote Post Goto Top
 
PrinceVegeta
Member Avatar
Member
[ *  *  *  * ]
um this is ok but i would have had a lighter gray good luck 6.5/10
Offline Profile Quote Post Goto Top
 
sakarisheart
Member
[ * ]
not bad for a second skin..... I like the colors.
Offline Profile Quote Post Goto Top
 
Shadow Mist
Unregistered

eh...I'll do better(WAY BETTER) on my 3rd skin.I already made it.And added a background to it.I hope it gets a WOW Rating
Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Mixed · Next Topic »
Add Reply