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/>

---

[JonatanRaven]

I'm no CSS-wiz, but this page is a good help:
http://www.csstutorial.net/

---

[Korrd]

Instead of "Viva los Corsairs", it should read "Viva los Corsarios", as the former is spanglish and the later is the right Spanish.

---

Server Status | Server Rules | Players Online | Player Rankings | Freelancer Account Manager

(If you find any mistake in my English, please let me know via a PM)
(Really, I speak terrible English, so please, tell me if I make mistakes. I'd like to improve it a bit )

[Unit-sk855]

Korrd, dont go outside crete.. your eyes will bleed:D

Not that my german butchering outside of New berlin is anything short of blinding.

Ich bin ein Berliner... mmmmm strawberry...


Unfortunatly i never got my own Invision free board to look anything spiffy outside of some color editing, and banners....

Wish i could help though..

---

*Wilson shows off his ham sandwich* - Armory.003
*mark placed on Unit-sk855's forehead* - Head hitting the desk as of reading the above