Forum Skin based on a Fansite Kit

[Cleitanious]

I have downloaded the fansite kit here : http://www.elderscrolls.com/download..._utilities.htm

How would I go about using those image files for my forum?

I have almost no knowledge of html though.

[MasterRecca08]

Admin Cp>Skins and Templates>Images ONly

[Cleitanious]

Those images dont incude backgrounds or borders though, which is the most important to me. Maybe if I use a different Style Sheet?

[Winnopeg]

Things like background images can be found in the style sheet, yes. However to modify them you'll need to be able to find your way around the code, not just replace the CSS with something totally unrelated.

[Cleitanious]

html { overflow-x: auto; scrollbar-face-color: #343434; scrollbar-arrow-color: #FFFFFF; scrollbar-base-color: #343434 }
form { display: inline }
img { vertical-align: middle; border: 0px }
BODY { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; color: #000; margin: 0px 10px 0px 10px; background-color: #343434; background-image: url(http://byblos.2.forumer.com/index.ph...e=post&id=1776) ): }
TABLE, TR, TD { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; color: #FFFFFF }
a:link, a:visited, a:active { text-decoration: underline; color: #FFFFFF }
a:hover { color: #FB8204; text-decoration: underline }
fieldset.search { padding: 6px; line-height: 150% }
label { cursor: pointer }
img.attach { border: 2px outset #000; 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: #000 }
.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: #000 }
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: #FFFFFF }
.caldate { text-align: right; font-weight: bold; font-size: 11px; color: #FFFFFF; background-color: #343434; 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 #000; background-color: #343434 }
#ucpmenu p { padding: 2px 5px 6px 9px; margin: 0px }
#ucpcontent { background-color: #343434; border: 1px solid #000; line-height: 150%; width: auto }
#ucpcontent p { padding: 10px; margin: 0px }
#ipsbanner { position: absolute; top: 1px; right: 5% }
#logostrip { border: 0px solid #000; background-color: padding; margin: 0px }
#submenu { border: 1px solid #000; background-image: url(style_images/<#IMG_DIR#>/gradient.jpg) }
:background-color: #343434;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: #FFFFFF }
#userlinks { border: 1px solid #000; background-color: #343434 }
#navstrip { font-weight: bold; padding: 6px 0px 6px 0px }
.activeuserstrip { background-color: #343434; padding: 6px }
.pformstrip { background-color: #343434; color: #FFFFFFF; font-weight: bold; padding: 7px; margin-top: 1px }
.pformleft { background-color: #343434; padding: 6px; margin-top: 1px; width: 25%; border-top: 1px solid #000; border-right: 1px solid #000 }
.pformleftw { background-color: #343434; padding: 6px; margin-top: 1px; width: 40%; border-top: 1px solid #000; border-right: 1px solid #000 }
.pformright { background-color: #343434; padding: 6px; margin-top: 1px; border-top: 1px solid #000 }
.post1 { background-color: #343434 }
.post2 { background-color: #343434 }
.postlinksbar { background-color: #343434; padding: 7px; margin-top: 1px; font-size: 10px }
.row1 { background-color: #343434 }
.row2 { background-color: #343434 }
.row3 { background-color: #343434 }
.row4 { background-color: #343434 }
.darkrow1 { background-color: #343434; color: #000 }
.darkrow2 { background-image: url(style_images/<#IMG_DIR#>/gradient.jpg) }
;background-color: #343434; color:#000; }
.darkrow3 { background-color: #343434; color: #000 }
.hlight { background-color: #343434 }
.dlight { background-color: #343434 }
.titlemedium { font-weight: bold; color: #FFF; padding: 7px; margin: 0px; background-color: #343434; ): }
.titlemedium a:link, .titlemedium a:visited, .titlemedium a:active { text-decoration: underline; color: #FFFFFF }
.maintitle { vertical-align: middle; font-weight: bold; color: #FFF; letter-spacing: 1px; padding: 8px 0px 8px 5px; background-color: #0C88E4; background-image: url(style_images/<#IMG_DIR#>/gradient.jpg) }
.maintitle a:link, .maintitle a:visited, .maintitle a:active { text-decoration: none; color: #FFF }
.maintitle a:hover { text-decoration: underline }
.plainborder { border: 1px solid #000; background-color: #343434 }
.tableborder { border: 1px solid #000; background-color: #000; padding: 0px; margin: 0px; width: 100% }
.tablefill { border: 1px solid #000; background-color: #343434; padding: 6px }
.tablepad { background-color: #343434; 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: #FFFFF }
.edit { font-size: 9px }
.signature { font-size: 10px; color: #FFFFFF }
.postdetails { font-size: 10px }
.postcolor { font-size: 12px; line-height: 160% }
.normalname { font-size: 12px; font-weight: bold; color: #FFFFF }
.normalname a:link, .normalname a:visited, .normalname a:active { font-size: 12px }
.unreg { font-size: 11px; font-weight: bold; color: #FFFFFFF }
.searchlite { font-weight: bold; color: #FFFFFF; background-color: #343434 }
#QUOTE { font-family: Verdana, Arial; font-size: 11px; color: #FFFFFF; background-color: #343434; 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: #FFFFFF; background-color: #343434; 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; color: #FFFFFF; background-color: #343434; font-family: verdana, helvetica, sans-serif; vertical-align: middle }
.forminput, .textinput, .radiobutton, .checkbox { font-size: 11px; color: #FFFFFF; background-color: #343434; border: 1px solid #000; 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 #000; border-bottom: 1px solid #000 }
.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: #000; font-weight: bold }

Alright, where should I add the URL?
The "Gradient"s are actually the image used for the Table headers also.