Hendrick2
06-27-2008, 04:10 PM
One more question, and hopefully I'll explain this one a bit better.
I built an Arcade awhile ago to be used on an InvisionFree forum, so the arcade is built to use an IPB 1.3 style sheet. Anyways, I decided that I want to also make it an extension to my new website, which basically is a wordpress blog. So, I'm trying to create a rough IPB 1.3 theme to match my wordpress Leopress blog theme.
Anyways, I'm running into a small issue here. Look at the screen shot below:
http://img.photobucket.com/albums/v288/Mike4824/css2.png
This is how it currently is. The whole top bar (behind where it says Arcade Stats) is one image... including the shadow. The shadow on either side of the white is a separate image. Also note that between the white td's, you can see the background image... I don't want this.
So, when I try to fix it, heres what happens:
http://img.photobucket.com/albums/v288/Mike4824/css3.png
Now, you can no longer see the background, but where the side shadow is now has a gray background.
I've tried almost everything I can think of (CSS isn't my strong point). Heres the CSS (This is basically a CSS from an InvisionFree skin I once used, which I'm slowly modifying. There is a lot of extra coding here which I plan to delete later, just not on to it yet.) The part that is in red is the text I added between the two images.
html { overflow-x: hidden; overflow-y: auto; }
form { display:inline; }
img { vertical-align:middle; border:0px }
BODY { font: 62.5% "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, Arial, sans-serif; color:#000; ;background:#000 url(leopress/img/bg.jpg) no-repeat center top; width:900px; margin:0 auto; background-attachment: fixed}
TABLE, TR, TD { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; background-color: #a5a5a5;}
a:link, a:visited, a:active { text-decoration: underline; color: #000 }
a:hover { color: #000000; text-decoration:none }
fieldset.search { padding:6px; line-height:150% }
label { cursor: pointer; }
img.attach { border:2px outset #EEF2F7;padding:2px }
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:#000000}
.caldate { text-align:right;font-weight:bold;font-size:11px;color:#000000;background-color:#ffffff;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 { margin-top:15px }
#ucpmenu { line-height:150%;width:22%; border:1px solid #000000;background-color: #ffffff}
#ucpmenu p { padding:2px 5px 6px 9px;margin:0px; }
#ucpcontent { background-color: #ffffff; 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: #ffffff;padding:0px;margin:0px; }
#submenu { border:1px solid #000000; background-image: url(http://forum.commx.info/style_images/Blastfromthepast/p1341368.jpg);background-color: #ffffff;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: #000000; }
#userlinks { border:1px solid #000000; background-image: url(http://forum.commx.info/style_images/Blastfromthepast/p1341368.jpg); background-color: #ffffff}
#navstrip { font-weight:bold;padding:6px 0px 6px 0px; }
.activeuserstrip { background-color:#ffffff; background-image: url(http://forum.commx.info/style_images/Blastfromthepast/p1341368.jpg); padding:6px }
.pformstrip { background-color: #ffffff; background-image: url(http://forum.commx.info/style_images/Blastfromthepast/p1341241.jpg); color:#000000;font-weight:bold;padding:7px;margin-top:1px }
.pformleft { background-color: #ffffff; padding:6px; margin-top:1px;width:25%; border-top:1px solid #000000; border-right:1px solid #000000; }
.pformleftw { background-color: #ffffff; padding:6px; margin-top:1px;width:40%; border-top:1px solid #000000; border-right:1px solid #000000; }
.pformright { background-color: #ffffff; padding:6px; margin-top:1px;border-top:1px solid #000000; }
.post1 { background-color: #ffffff}
.post2 { background-color: #ffffff}
.postlinksbar { background-color:#ffffff;padding:7px;margin-top:1px;font-size:10px; background-image: url(http://forum.commx.info/style_images/Blastfromthepast/p1341241.jpg) }
.row1 { background-color: #FFFFFF}
.row2 { background-color: #FFFFFF}
.row3 { background-color: #FFFFFF}
.row4 { background-color: #FFFFFF}
.row5 { background-image: url(leopress/img/transparent.png); }
.row6 { background-image: url(leopress/img/transparent2.png); }
.darkrow1 { background-color: #ffffff; color:#000000; }
.darkrow2 { background-color: #ffffff; background-image: url(http://forum.commx.info/style_images/Blastfromthepast/p1341368.jpg); color:#000000; }
.darkrow3 { background-color: #ffffff; color:#000000; }
.hlight { background-color: #ffffff}
.dlight { background-color: #ffffff}
.titlemedium { font-weight:bold; color:#000000; padding:7px; margin:0px; background-image: url(http://forum.commx.info/style_images/Blastfromthepast/p1341241.jpg) }
.titlemedium a:link, .titlemedium a:visited, .titlemedium a:active { text-decoration: underline; color: #000000}
.maintitle { font-weight:bold; color:#000000; letter-spacing:1px; padding:39px 0px 25px 55px; background-image: url(leopress/img/bg-top.png)}
.maintitle a:link, .maintitle a:visited, .maintitle a:active { text-decoration: none; color: #000000}
.maintitle a:hover { text-decoration: underline }
.plainborder { border:1px solid #a5a5a5;background-color:#000000}
.tableborder { border:0px solid #a5a5a5; padding:0px; margin:0px; width:100% }
.tablefill { border:1px solid #a5a5a5;background-color:#a5a5a5;padding:6px; }
.tablepad { background-color:#FFFFFF;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:#434951 }
.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 }
.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}
And heres the code: (I just viewed source, to hide all the useless PHP in here)
<!--Top Part-->
<div class="tableborder"><div class="maintitle" align="center">Arcade Stats</div><table border="0" cellpadding="5" cellspacing="1" width="100%"><tbody><tr>
<!-- End Top Start Left Shadow-->
<td class="row5" width="1%"></td>
<!--End Left Shadow Start Top Left-->
<td class="row3" valign="middle" width="25%"><b>Most Played Games</b>
<br>
<img src="Images/aski.gif" height="20" width="20"> <a href="highscore.php?id=1">Aski</a> (0)<br>
<img src="Images/asteroids.gif" height="20" width="20"> <a href="highscore.php?id=2">Asteroids</a> (0)<br>
<img src="Images/hunt.gif" height="20" width="20"> <a href="highscore.php?id=3">Animal Hunter</a> (0)<br>
<img src="Images/baseball.gif" height="20" width="20"> <a href="highscore.php?id=4">Baseball hit</a> (0)<br>
<img src="Images/portal_64427.gif" height="20" width="20"> <a href="highscore.php?id=5">Bloody Rage</a> (0)<br>
<br></td>
<!--End Top Left Start Middle-->
<td class="row3" valign="middle" width="48%"><b>Most High Score Players</b><br>
<!--End Top Middle Start Right-->
<td class="row3" valign="middle" width="25%"><b>Latest Games</b><br>
<img src="java/wordsearch/wordsearch.png" height="20" width="20"> <a href="highscore.php?id=112">Wordsearch</a><br>
<img src="java/maze/maze.png" height="20" width="20"> <a href="highscore.php?id=111">Maze</a><br>
<img src="java/checkers/checkers.bmp" height="20" width="20"> <a href="highscore.php?id=110">Checkers</a><br>
<img src="java/snake/snake.bmp" height="20" width="20"> <a href="highscore.php?id=109">Snake</a><br>
<img src="java/uno/uno54.gif" height="20" width="20"> <a href="highscore.php?id=108">Uno</a><br>
</td>
<!--End Top Right Start Right Shadow -->
<td class="row6" width="1%"></td></tr>
<!--End Right Shadow Start Bottom Middle -->
</tr>
</tbody>
</table>
</div>
<!--End Top-->
The comments should hopefully help you understand which is which.
The only idea I can think off, without a ton of modifications, would be to somehow override the background color for row's 5 and 6 (in CSS). However, it would still have to be transparent.
Thanks for the help.
I built an Arcade awhile ago to be used on an InvisionFree forum, so the arcade is built to use an IPB 1.3 style sheet. Anyways, I decided that I want to also make it an extension to my new website, which basically is a wordpress blog. So, I'm trying to create a rough IPB 1.3 theme to match my wordpress Leopress blog theme.
Anyways, I'm running into a small issue here. Look at the screen shot below:
http://img.photobucket.com/albums/v288/Mike4824/css2.png
This is how it currently is. The whole top bar (behind where it says Arcade Stats) is one image... including the shadow. The shadow on either side of the white is a separate image. Also note that between the white td's, you can see the background image... I don't want this.
So, when I try to fix it, heres what happens:
http://img.photobucket.com/albums/v288/Mike4824/css3.png
Now, you can no longer see the background, but where the side shadow is now has a gray background.
I've tried almost everything I can think of (CSS isn't my strong point). Heres the CSS (This is basically a CSS from an InvisionFree skin I once used, which I'm slowly modifying. There is a lot of extra coding here which I plan to delete later, just not on to it yet.) The part that is in red is the text I added between the two images.
html { overflow-x: hidden; overflow-y: auto; }
form { display:inline; }
img { vertical-align:middle; border:0px }
BODY { font: 62.5% "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, Arial, sans-serif; color:#000; ;background:#000 url(leopress/img/bg.jpg) no-repeat center top; width:900px; margin:0 auto; background-attachment: fixed}
TABLE, TR, TD { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; background-color: #a5a5a5;}
a:link, a:visited, a:active { text-decoration: underline; color: #000 }
a:hover { color: #000000; text-decoration:none }
fieldset.search { padding:6px; line-height:150% }
label { cursor: pointer; }
img.attach { border:2px outset #EEF2F7;padding:2px }
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:#000000}
.caldate { text-align:right;font-weight:bold;font-size:11px;color:#000000;background-color:#ffffff;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 { margin-top:15px }
#ucpmenu { line-height:150%;width:22%; border:1px solid #000000;background-color: #ffffff}
#ucpmenu p { padding:2px 5px 6px 9px;margin:0px; }
#ucpcontent { background-color: #ffffff; 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: #ffffff;padding:0px;margin:0px; }
#submenu { border:1px solid #000000; background-image: url(http://forum.commx.info/style_images/Blastfromthepast/p1341368.jpg);background-color: #ffffff;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: #000000; }
#userlinks { border:1px solid #000000; background-image: url(http://forum.commx.info/style_images/Blastfromthepast/p1341368.jpg); background-color: #ffffff}
#navstrip { font-weight:bold;padding:6px 0px 6px 0px; }
.activeuserstrip { background-color:#ffffff; background-image: url(http://forum.commx.info/style_images/Blastfromthepast/p1341368.jpg); padding:6px }
.pformstrip { background-color: #ffffff; background-image: url(http://forum.commx.info/style_images/Blastfromthepast/p1341241.jpg); color:#000000;font-weight:bold;padding:7px;margin-top:1px }
.pformleft { background-color: #ffffff; padding:6px; margin-top:1px;width:25%; border-top:1px solid #000000; border-right:1px solid #000000; }
.pformleftw { background-color: #ffffff; padding:6px; margin-top:1px;width:40%; border-top:1px solid #000000; border-right:1px solid #000000; }
.pformright { background-color: #ffffff; padding:6px; margin-top:1px;border-top:1px solid #000000; }
.post1 { background-color: #ffffff}
.post2 { background-color: #ffffff}
.postlinksbar { background-color:#ffffff;padding:7px;margin-top:1px;font-size:10px; background-image: url(http://forum.commx.info/style_images/Blastfromthepast/p1341241.jpg) }
.row1 { background-color: #FFFFFF}
.row2 { background-color: #FFFFFF}
.row3 { background-color: #FFFFFF}
.row4 { background-color: #FFFFFF}
.row5 { background-image: url(leopress/img/transparent.png); }
.row6 { background-image: url(leopress/img/transparent2.png); }
.darkrow1 { background-color: #ffffff; color:#000000; }
.darkrow2 { background-color: #ffffff; background-image: url(http://forum.commx.info/style_images/Blastfromthepast/p1341368.jpg); color:#000000; }
.darkrow3 { background-color: #ffffff; color:#000000; }
.hlight { background-color: #ffffff}
.dlight { background-color: #ffffff}
.titlemedium { font-weight:bold; color:#000000; padding:7px; margin:0px; background-image: url(http://forum.commx.info/style_images/Blastfromthepast/p1341241.jpg) }
.titlemedium a:link, .titlemedium a:visited, .titlemedium a:active { text-decoration: underline; color: #000000}
.maintitle { font-weight:bold; color:#000000; letter-spacing:1px; padding:39px 0px 25px 55px; background-image: url(leopress/img/bg-top.png)}
.maintitle a:link, .maintitle a:visited, .maintitle a:active { text-decoration: none; color: #000000}
.maintitle a:hover { text-decoration: underline }
.plainborder { border:1px solid #a5a5a5;background-color:#000000}
.tableborder { border:0px solid #a5a5a5; padding:0px; margin:0px; width:100% }
.tablefill { border:1px solid #a5a5a5;background-color:#a5a5a5;padding:6px; }
.tablepad { background-color:#FFFFFF;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:#434951 }
.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 }
.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}
And heres the code: (I just viewed source, to hide all the useless PHP in here)
<!--Top Part-->
<div class="tableborder"><div class="maintitle" align="center">Arcade Stats</div><table border="0" cellpadding="5" cellspacing="1" width="100%"><tbody><tr>
<!-- End Top Start Left Shadow-->
<td class="row5" width="1%"></td>
<!--End Left Shadow Start Top Left-->
<td class="row3" valign="middle" width="25%"><b>Most Played Games</b>
<br>
<img src="Images/aski.gif" height="20" width="20"> <a href="highscore.php?id=1">Aski</a> (0)<br>
<img src="Images/asteroids.gif" height="20" width="20"> <a href="highscore.php?id=2">Asteroids</a> (0)<br>
<img src="Images/hunt.gif" height="20" width="20"> <a href="highscore.php?id=3">Animal Hunter</a> (0)<br>
<img src="Images/baseball.gif" height="20" width="20"> <a href="highscore.php?id=4">Baseball hit</a> (0)<br>
<img src="Images/portal_64427.gif" height="20" width="20"> <a href="highscore.php?id=5">Bloody Rage</a> (0)<br>
<br></td>
<!--End Top Left Start Middle-->
<td class="row3" valign="middle" width="48%"><b>Most High Score Players</b><br>
<!--End Top Middle Start Right-->
<td class="row3" valign="middle" width="25%"><b>Latest Games</b><br>
<img src="java/wordsearch/wordsearch.png" height="20" width="20"> <a href="highscore.php?id=112">Wordsearch</a><br>
<img src="java/maze/maze.png" height="20" width="20"> <a href="highscore.php?id=111">Maze</a><br>
<img src="java/checkers/checkers.bmp" height="20" width="20"> <a href="highscore.php?id=110">Checkers</a><br>
<img src="java/snake/snake.bmp" height="20" width="20"> <a href="highscore.php?id=109">Snake</a><br>
<img src="java/uno/uno54.gif" height="20" width="20"> <a href="highscore.php?id=108">Uno</a><br>
</td>
<!--End Top Right Start Right Shadow -->
<td class="row6" width="1%"></td></tr>
<!--End Right Shadow Start Bottom Middle -->
</tr>
</tbody>
</table>
</div>
<!--End Top-->
The comments should hopefully help you understand which is which.
The only idea I can think off, without a ton of modifications, would be to somehow override the background color for row's 5 and 6 (in CSS). However, it would still have to be transparent.
Thanks for the help.