Invisionfree Forum CSS

[Carlos_Benitez]

So... a few months back, I created a site for the Benitez family clan.

I found a skin, after much searching, that seemed to work. I then made a banner for it, and selected a background pic, and through trial and error, managed to integrate them into the style sheets.







The long and short of it is that some numpty (mentioning no names) who had gained Admin powers afew months before decided to replace the skin with something rather awful. He didn't make a copy of the old skin.

So, I'm trying my best (with the limited skills I have) to reconstruct the forum as it was.
So far, I've managed to add the background pic and banner, and managed to add background title pics with partial success (missing in some places, appearing in some places where they shouldn't be). Id also like to add a simple border to the forum, change the colour of some of the text, and some panel areas. The left-hand section on all posts (containing avatar, poster name, just like this forum) has also enlarged un-necesarily causing afew asthetic problems I cant work out how to fix.

The best I can do with CSS is trial-and-error, which may work when adding an image or two, but is useless for intricate things such as text colours and alignments.

If anyone can help, I'd be very grateful.

Here's the website.

And heres the CSS Board Wrapper;

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

form { display:inline; }
img { vertical-align:middle; border:0px }
BODY { font-family: Trebuchet MS, helvetica, Tahoma, Arial, sans-serif; font-size: 10px; color: #2E2D2D; margin:-5px 10px 0px 10px; background-image: url(http://i15.tinypic.com/8bsjuag.jpg); }
TABLE, TR, TD { font-family: Trebuchet MS, helvetica, Tahoma, Arial, sans-serif; font-size: 10px; color: #818181; }

a:link, a:visited, a:active { text-decoration: none; color: #818181 }
a:hover { color: #186417; text-decoration:none }

fieldset.search { padding:6px; line-height:150%; border: 1px solid #818181; }
label { cursor:pointer; }

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

.googleroot { padding:6px; line-height:130% }
.googleparent { padding:6px; margin-left:30px; line-height:130%; color:#270082 }
.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 }

.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 #3D3D3D; color: #818181 }
#photoimg { text-align:center; margin-top:15px }

#ucpmenu { line-height:150%;width:22%; border:1px solid #2E2D2D;background-color: #353535 }
#ucpmenu p { padding:2px 5px 6px 9px;margin:0px; }
#ucpcontent { background-color: #353535; border:1px solid #2E2D2D;line-height:150%; width:auto; }
#ucpcontent p { padding:10px;margin:0px; }
#ucpcontent .pformstrip, #ucpmenu .pformstrip { border-top: 1px solid #2E2D2D; border-bottom: 1px solid #2E2D2D; border-left:0px!important; border-right: 0px!important; }
#ucpcontent .maintitle { border:0px; }
#ucpmenu .maintitle { border:0px; padding-left: 15px; }
#ucpcontent .wrapmini { margin:12px!important}
#ucpcontent div.titlemedium { border-top: 1px solid #2E2D2D; border-left: 1px solid #2E2D2D; border-right: 1px solid #2E2D2D; background-color: #3F3F3F; background-image: url(http://i17.tinypic.com/6ow6eya.jpg); }
#ucpcontent .tableborder { border:0px; }
#ucpcontent .titlemedium { background-color: #383838; color:#6E872F; background-image: url(http://209.85.12.231/10904/63/upload/p1661303.gif); background-repeat: repeat-x; padding: 2px!important; }
div#ucpcontent div.titlemedium {background-image: url(http://209.85.12.231/10904/63/upload/p1661303.gif); background-repeat: repeat-x; border: 0px; }


#ipsbanner { position:absolute;top:1px;right:5%; }
#logostrip, #submenu { display: none; }

.customsubmenu { font-size:10px; margin-left: auto; margin-right: auto; color:#818181; font-weight:normal; background: #302F2F url(http://209.85.12.231/10904/63/upload/p1661338.gif) top repeat-x; height: 39px; margin-top: -4px; }
.customsubmenu a:link, .customsubmenu a:visited, .customsubmenu a:active { font-weight:normal;font-size:10px;text-decoration: none; color: #818181; }
.customsubmenu a:hover { color: #186417; text-decoration:none }
#submenu img { display: none; }

.customsubmenu .left { background: no-repeat top left url(http://209.85.12.231/10904/63/upload/p1661329.gif); height: 39px; padding: 0px; }
.customsubmenu .right { background: no-repeat top right url(http://209.85.12.231/10904/63/upload/p1661328.gif); height: 39px; padding: 0px; text-align: center; }

#userlinks td { padding: 8px 6px; }
#userlinks { background: repeat-x top url(http://209.85.12.231/10904/63/upload/p1661318.gif); margin-top: -5px; height: 39px; }
#userlinks .left { background: no-repeat top right url(http://209.85.12.231/10904/63/upload/p1661314.gif); width: 38px; height: 39px; padding: 0px; }
#userlinks .right { background: no-repeat top left url(http://209.85.12.231/10904/63/upload/p1661322.gif); width:38px; padding: 0px; }
#userlinks a { font-weight:normal!important; }

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

div.pformstrip { border: 1px solid #2E2D2D!important; }
.pformstrip { background-color: #383838; color:#6E872F;font-weight:normal;padding:2px;margin-top:1px; background-image: url(http://209.85.12.231/10904/63/upload/p1661303.gif); background-repeat: repeat-x; }
.pformleft { background-color: #353535; padding:6px; margin-top:1px;width:25%; border-top: 1px solid #3D3D3D; border-right: 1px solid #3D3D3D; }
.pformleftw { background-color: #353535; padding:6px; margin-top:1px;width:40%; border-top: 1px solid #3D3D3D; border-right: 1px solid #3D3D3D; }
.pformright { background-color: #353535; padding:6px; margin-top:1px;border-top: 1px solid #3D3D3D;}

.post1, .post2, .hlight, .dlight { background-color: #353535; border-top: 1px solid #3D3D3D; border-right: 1px solid #3D3D3D }

.post1 table, .post2 table { background-image: url(http://209.85.12.231/10904/63/upload/p1661303.gif); background-repeat: repeat-x; background-color:#383838 ; border: 1px solid #2E2D2D; color: #899E1D!important; }

.postlinksbar { background-color:#353535;padding:2px; padding-right: 5px; margin-top:1px;font-size:10px; background-image: url(http://209.85.12.231/10904/63/upload/p16...rder-right: 1px solid #2E2D2D; border-left: 1px solid #2E2D2D; }

.postlinksbar a { font-weight: normal; }

.activeuserstrip { background-color:#3B3B3B;padding:2px;font-size:10px; background-image: url(http://209.85.12.231/10904/63/upload/p1661303.gif); border-top: 1px solid #2E2D2D; border-right: 1px solid #2E2D2D; border-left: 1px solid #2E2D2D; margin-top: -1px; }

.row1 { background-color: #353535; border-top: 1px solid #3D3D3D; border-right: 1px solid #3D3D3D}
.row2 { background-color: #353535; border-top: 1px solid #3D3D3D; border-right: 1px solid #3D3D3D; }
.row3 { background-color: #353535; border-top: 1px solid #3D3D3D; border-right: 1px solid #3D3D3D }
.row4 { background-color: #302F2F; background: #353535; border-top: 1px solid #3D3D3D; border-right: 1px solid #3D3D3D; }
.codebuttons:hover { color: #899E1D; }

.row5 { background-image: url(http://209.85.48.12/11626/37/upload/p3045633.gif); }

div.row4 { background-image: url(http://209.85.12.231/10904/63/upload/p1661269.gif); background-repeat: repeat-x; border: 1px solid #2E2D2D!important; }
*html body div.row4 { background-position: bottom; }
div div div.row4 { background-image:none!important; border-right: 1px solid #3F3F3F!important; border-left: 1px solid #3F3F3F!important; background-color: #302F2F!important; padding: 2px; border-top:0px!important}
td.row4 div.row4 { background-image:none!important; border:0px!important; background: transparent!important; }
div div.row4 {background-color: #302F2F; }

.darkrow1 { background-image: url(http://209.85.12.231/10904/63/upload/p1661303.gif); background-repeat: repeat-x; background-color: #383838; padding: 2px; }

.darkrow2 { background-color: #303030; color:#6E872F; background-image: url(http://209.85.12.231/10904/63/upload/p1661262.gif); padding: 0px; border-bottom: 1px solid #4D5831; background-repeat: repeat-x; }
div.darkrow2 { background-image: url(http://209.85.12.231/10904/63/upload/p1676912.gif); border-right: 1px solid #2E2D2D; border-left: 1px solid #2E2D2D; padding:1px!important; }

.darkrow3 { background-color: #303030; color:#6E872F; background-image: url(http://209.85.12.231/10904/63/upload/p1661303.gif); background-repeat: repeat-x; padding-bottom: 2px; padding-top: 2px; padding-right: 5px; padding-left: 5px; }

.titlemedium { font-weight:normal; color:#186417; padding:2px; margin:0px; background-color: #3F3F3F; background-image: url(http://209.85.12.231/10904/63/upload/p1661303.gif); color: #186417;}
.titlemedium a:link, .titlemedium a:visited, .titlemedium a:active { text-decoration: none; color: #186417 }

*html body .maintitle { background-position: bottom; }
.maintitle { background-color: #343434; vertical-align:middle;font-weight:normal; font-align: center ; color:#186417; letter-spacing:0px; padding:6px 0px 6px 25px; background-image: url(http://i17.tinypic.com/6ow6eya.jpg); border: 1px solid #2E2D2D; border-bottom: 0px!important; }
.maintitle a:link, .maintitle a:visited, .maintitle a:active { text-decoration: none; color: #C0C0C0; }
.maintitle a:hover { text-decoration: none; color: #C0C0C0; }

table.tableborder .pformstrip { border-top:1px solid #2E2D2D; border-bottom:1px solid #2E2D2D; padding: 2px; padding-left: 5px; }
div.tablepad td { background:transparent!important; border:0px!important; }
td.plainborder .maintitle { border: 0px; }
.plainborder { background: transparent; border: 0px }
.plainborder table { border:0px solid #2E2D2D;background-color:#2E2D2D }
table.tableborder { border:1px solid #2E2D2D;}
.tableborder { border:1px solid #3F3F3F;background-color:#2E2D2D; padding:0px; margin:0px; width:100%; }
.tablefill { border:1px solid #2E2D2D;background-color:#383838;padding:6px; background-image: url(http://i17.tinypic.com/6ow6eya.jpg); background-repeat: repeat-x; }
.tablepad { background-color:#3B3B3B; padding:6px;}
.tablebasic { width:100%; padding:0px 0px 0px 0px; margin:0px; border:0px }

div.darkrow1 { background-color: #343434; }
.tableborder .row4 { background-image:none!important; }
div.tableborder div.row2 { border: 1px solid #2E2D2D; background-image: url(http://i17.tinypic.com/6ow6eya.jpg); background-repeat: repeat-x; background-color: #383838; }


.wrapmini {float: left;line-height: 1.5em;width: 25%;background: url(http://i17.tinypic.com/6ow6eya.jpg) top repeat-x; background-color: #383838!important; border: 1px solid #2E2D2D;margin-right: 5px;padding: 5px;}

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

.desc { font-size:10px; color:#808080 }
.edit { font-size: 9px }

.signature { font-size: 10px; color: #818181 }
.postdetails { font-size: 10px; }
.postdetails a { text-decoration: none!important; }

.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, #CODE { font-family: Trebuchet MS, helvetica, Tahoma, Arial, sans-serif; font-size: 11px; color: #818181; background-color: #3B3B3B; border: 1px solid #2E2D2D; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px; background-image: url(http://209.85.12.231/10904/63/upload/p1661356.gif); background-repeat: repeat-x; }

.copyright { font-family: Trebuchet MS, helvetica, Tahoma, Arial, sans-serif; font-size: 10px; line-height: 12px; }

.codebuttons { font-size: 10px; font-family: Trebuchet MS, helvetica, Tahoma, Arial, sans-serif; vertical-align: middle; color: #818181; background-color:#383838; background-image: url(http://209.85.12.231/10904/63/upload/p1661303.gif); background-repeat: repeat-x; border: 1px solid #2E2D2D; padding: 0px; margin-top:1px; }

div#ucpcontent input, textarea, .forminput, .textinput, .radiobutton, .checkbox { font-size: 10px; font-family: Trebuchet MS, helvetica, Tahoma, Arial, sans-serif; color: #818181; vertical-align: middle; background-color:#383838; background-image: url(http://209.85.12.231/10904/63/upload/p1661303.gif); background-repeat: repeat-x; border: 1px solid #2E2D2D; padding: 0px!important; padding-left: 2px!important; }
input.row1 { color: #818181;background-color:transparent!important; }

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

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

/* Portal */
#ipbwrapper { width: 750px; margin-right: auto; margin-left: auto; background: #302F2F url(http://209.85.12.231/10904/63/upload/p1661326.gif) bottom no-repeat!important; margin-bottom: 5px; }
#ipbwrapper #logostrip { display:block; }
#ipbwrapper #submenu { display:table; background: #302F2F url(http://209.85.12.231/10904/63/upload/p1661365.gif) top no-repeat; height: 42px; padding-right: 280px; }
*html body #ipbwrapper #submenu { display: inline; text-align:center!important; }
#ipbwrapper div.row4 { margin-top: -4px; border-right: 1px solid #3F3F3F!important; border-left: 1px solid #3F3F3F!important; ; }
#ipbwrapper .tableborder { background: #302F2F; border: 1px solid #3F3F3F!important; margin-bottom: 4px; border-top: 0px solid #3F3F3F!important; border-bottom: 0px!important; margin-top: -3px;}
#ipbwrapper div.tableborder { border-bottom: 1px solid #3F3F3F!important; border-top: 0px solid #3F3F3F!important; }
#ipbwrapper .row4 { background: #302F2F; border:0px!important; }
#ipbwrapper .tablepad { border-bottom: 1px solid #2E2D2D!important; }
#ipbwrapper .row2 img, #ipbwrapper .maintitle img { display: none; }
#ipbwrapper .row2 { background-color: #303030; color:#6E872F; background-image: url(http://209.85.12.231/10904/63/upload/p1661298.gif); border: 1px solid #2E2D2D; background-repeat: repeat-x; padding:2px!important; border-bottom: 1px solid #3F3F3F!important; }
#ipbwrapper .row2 a { color: #6E872F; }
#ipbwrapper div.row2 { border-top: 0px!important; }
#unrip { skin: display:ripped; background-image: url(http://forums.ifskinzone.net); report: thisisarip; }
#ipbwrapper div.desc { border: 1px solid #2E2D2D; border-top: 0px solid #454444!important; background-color: #353535; }
#ipbwrapper .post1, #ipbwrapper .post2 { border-right: 1px solid #2E2D2D; border-left: 1px solid #2E2D2D; border-top: 0px!important}
#ipbwrapper .maintitle { background-image: url(http://209.85.12.231/10904/63/upload/p1661294.gif); background-color: #343434; vertical-align:middle;font-weight:normal; color:#6E872F; letter-spacing:0px; padding:6px 0px 6px 5px; }
#ipbwrapper .maintitle a { color:#6E872F; text-decoration: none; }
table.tableborder .maintitle {background-image: url(http://209.85.12.231/10904/63/upload/p1661279.gif); background-color: #343434; vertical-align:middle;font-weight:normal; color:#6E872F; letter-spacing:0px; padding:6px 0px 6px 0px; border:0px!important; }
*html body #ipbwrapper #submenu td { text-align:center; align:center;}

/* Search */
div.tableborder div.tablepad { background-color: #383838!important; border-top: 1px solid #2E2D2D!important; border-right: 1px solid #2E2D2D!important; border-left: 1px solid #2E2D2D!important; border-bottom:0px!important; background-image: url(http://209.85.12.231/10904/63/upload/p1661303.gif); background-repeat: repeat-x; }
div.tableborder div.tablepad table { background: transparent!important; }
div.tableborder div.tablepad table font { font-family: helvetica,Tahoma, Arial, sans-serif; font-size: 11px; color: #818181; }
div.tableborder div.tablepad input {font-size: 10px; font-family: Trebuchet MS, helvetica, Tahoma, Arial, sans-serif; vertical-align: middle; color: #818181; background-color: #383838; border: 1px solid #2E2D2D; background-image: url(http://209.85.12.231/10904/63/upload/p1661303.gif); background-repeat: repeat-x; margin: 1px; }



/* Board Message */
.tablefill .pformstrip { border-right: 0px!important; border-left: 0px!important; }
.tablefill .pformright, .tablefill .pformleft { border:0px; background: #383838 }
.tablefill .tableborder {background: #383838; border-right: 1px solid #2E2D2D; border-left:1px solid #2E2D2D; border-top: 1px solid #2E2D2D; }
.tablefill .titlemedium { padding-left: 7px; }

/* Caldate */
div.maintitle div { text-align: left; color: #6E872F; }
div.maintitle { text-align: left; color: #6E872F; }
*html body div.maintitle div { width: 99%; }
form div.tableborder td.row1 .caldate {border:0px!important; color: #6E872F; }
form div.tableborder td.row1 { border:0px!important; border-top: 1px solid #3D3D3D!important; border-right: 1px solid #3D3D3D!important;}
.caldate { text-align:right;font-weight:bold;font-size:11px;color:#818181; background-color:#353535; padding-right: 3px; }

.leo { float:right; text-transform: lowercase; }

Heres the board wrapper body:

<body><table width=750" border="0" align="center" cellpadding="4" cellspacing="0" bgcolor="#343434" >
<tr>
<td rowspan="2" class="borderleft]</td>
<td bgcolor="#343434]
<div style="padding: 3px 0px 0px 0px;>
<div class="banner" width="100%]
<img src="http://i8.tinypic.com/7x8ntk8.jpg]

</td>
<td rowspan="2" class="borderright]</td>
</tr>
<tr>
<td>
<div class="customsubmenu]<div class="repeat]<div class="left]<div class="right]
<br/>
<a href='http://z11.invisionfree.com/crete/index.php'> Portal</a> | <a href='http://z11.invisionfree.com/crete/index.php?act=Help'> Help </a> | <a href='http://z11.invisionfree.com/crete/index.php?act=Search&f='> Search</a> | <a href='http://z11.invisionfree.com/crete/index.php?act=Members'> Members</a> | <a href='http://z11.invisionfree.com/crete/index.php?act=calendar'> Calendar</a>


<% BOARD HEADER %>


<script type='text/javascript'><!--
// 3-part Userlinks
z = document.getElementById('userlinks')
z.rows[0].insertCell(0).className="left"
z.rows[0].insertCell(3).className="right"
z.rows[0].cells[0].innerHTML=" "
z.rows[0].cells[3].innerHTML=" "
z.cellSpacing = "0"
// --></script>
<% NAVIGATION %>
<% BOARD %>
<% STATS %>
<br/>

---