Modifying A Pre-Made Skin (2 Issues)

Board Software: Invisionfree
Problem With: 1) Section widths and 2) table formats

Problem: I have two things I want to do here so I've broken it into the two parts.

My skin is Fading. I'd like to make a few tweaks, if they are possible.

1) Is there a way to make the post width the same as the main page width? I could be phrasing this wrong but basically if I'm within a thread, the sidebar is narrower and the "content" is wider compared to viewing the index or subforum pages. I'd like for the sidebar not to change, if possible.

2) Is there a way to prevent tables within posts from automatically being formatted? If I put a table within a post, it gets the rounded edges and a dark background, even if my post code doesn't specify that.

I'd be happy to play with these sections myself to get the look I want, but as usual, my knowledge of CSS is waaay not up to par. I don't even know what parts of the code control for these things!

Evidence:

Issue #1

vs


(In the second image you can see how the sidebar is narrower and the "content" side is wider.)

Issue #2


Three different tables here to show the issue. This should show up as text only without the darker color as a background.


Extra note: I use Chrome as my browser.

The assistance forum here is guest friendly and you are welcome to post in it if you want to test anything regarding post issues. (The post shown above isn't visible to anyone but me.)

The CSS (note: this isn't altered from Lint Roller's original CSS. All modifications I've done so far have been strictly within the "Board Wrappers >> Header & Body" section)

Code: Select

html { overflow-x: hidden; overflow-y: auto; }
form { display:inline; }
img  { vertical-align:middle; border:0px }

.smallnavi { font-weight:bold; text-transform:uppercase; padding:0px; font-size:8; color:#000; text-align:center; width:945px; }
.smallnavi a:link, .smallnavi a:active, .smallnavi a:visited { border:1px solid #000; font-weight:bold; text-transform:uppercase; background-color:#B49C74; padding:0px; font-size:9; color:#000; text-align:center; padding:3px 5px 3px 5px;}
.smallnavi a:hover {background-color:#BDA782; color:#333; padding:3px 5px 3px 5px;}
.sidebar {background:url(http://i47.tinypic.com/119vzpy.jpg); padding-top:10px; padding-bottom:10px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius:  15px; }
.credits {background-color:#BDA782; padding:0px; font-weight:bold; color:#333; text-transform:uppercase; font-size:9px; text-align:center; }.forumbg2{width:985px; background-color:#333; background: -moz-linear-gradient(left top 315deg, transparent, #333);
background: -webkit-gradient(linear, left top, right bottom, from(transparent), to(#333)); }
.forumbg {width:950px; background:url(http://i.imgur.com/AHxpf.jpg); border:1px solid #333; -moz-box-shadow: 3px  3px 3px #111;2-webkit-box-shadow: 3px 3px 3px #111;3box-shadow: 3px 3px 3px #111;}BODY { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; color: #000; margin:0px 10px 0px 10px; background-repeat:no-repeat; background-position:top-left; background-color:#4d3b28; }
TABLE, TR, TD { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 10px; color: #000; background-repeat:no-repeat; }
a:link, a:visited, a:active { text-decoration: none; color: #333; text-transform:uppercase; font-size:9px; font-weight:bold; }
a:hover { color: #000; text-decoration:none }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:#777;background-color:#DFE6EF;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:100%;width:22%; background:url(http://i47.tinypic.com/119vzpy.jpg); padding-top:0px; padding-bottom:10px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius:  15px;}
#ucpmenu p  { padding:0px 0px 0px 0px;margin:0px; }
#ucpcontent { background:url(http://i47.tinypic.com/119vzpy.jpg); padding-top:0px; padding-bottom:10px; line-height:100%; width:auto; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius:  15px; }
#ucpcontent p  { padding:0px;margin:0px; }#ipsbanner { position:absolute;top:1px;right:5%; }
#logostrip { display:none; }
#submenu   { display:none;}
#submenu a:link, #submenu  a:visited, #submenu a:active { font-weight:bold;font-size:10px;text-decoration: none; color: #3A4F6C; }
#userlinks { font-weight:bold; color:#555; text-transform:uppercase; font-size:9px; }
#navstrip  { font-weight:bold;padding:6px 0px 6px 0px; }.activeuserstrip { padding-top:10px; }
.pformstrip { background-color:#BDA782; padding:0px; font-weight:bold; color:#333; text-transform:uppercase; font-size:8px; text-align:center; }
.pformleft  { background-color: #B49C74; padding:6px; margin-top:1px;width:25%; border-top:1px solid #777; border-right:1px solid #777; }
.pformleftw { background-color: #B49C74; padding:6px; margin-top:1px;width:40%; border-top:1px solid #777; border-right:1px solid #777; }
.pformright { background-color: #B49C74; padding:6px; margin-top:1px;border-top:1px solid #777; }.post1 { background-color:#CABB97;}
.post2 { background-color:#CABB97;}
.postlinksbar {text-align:center;}
.row1 { background-color: #B49C74; border:1px solid #BDA782; }
.row2 { background-color: #B49C74; border:1px solid #BDA782;  }
.row3 { background-color: #B49C74; border:1px solid #BDA782;  }
.row4 { background-color: #B49C74; border:1px solid #BDA782; padding:0px; }.darkrow1 {  }
.darkrow2 { background:transparent; padding:0px; }
.darkrow3 {background-color: #B49C74; border:1px solid #BDA782; padding:0px; }
.hlight { background-color: #B49C74 }
.dlight { background-color: #B49C74 }.titlemedium { background-color:#BDA782; padding:0px; font-weight:bold; color:#333; text-transform:uppercase; font-size:8px; text-align:center; }
.titlemedium  a:link, .titlemedium  a:visited, .titlemedium  a:active  { text-decoration: none; color: #E4D7B4 }
.maintitle { vertical-align:middle;font-weight:bold; color:#333; letter-spacing:-2px; padding:0px; font-size:20px; height:20px; font-style:italic; text-transform:uppercase; text-align:center; text-shadow: #000 1px 1px 2px;}
.maintitle a:link, .maintitle  a:visited, .maintitle  a:active { vertical-align:middle;font-weight:bold; color:#333; letter-spacing:-2px; padding-bottom:12px; font-size:20px; height:20px; font-style:italic; text-transform:uppercase; text-align:center; text-shadow: #000 1px 1px 2px; }
.maintitle a:hover { text-decoration: none; color:#000; }.plainborder { border:1px solid #BDA782;background-color:#777 }
.tableborder { padding:0px; margin:0px; width:100%; padding-bottom:10px; }
.tableborder table {background:url(http://i47.tinypic.com/119vzpy.jpg); padding-top:20px; padding-bottom:10px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius:  15px;}
.tableborder .row4 b a:link, .tableborder .row4 b a:active, .tableborder .row4 b a:visited, .tableborder .row4 b a:hover  { letter-spacing:0px; font-size:12px; font-style:italic; }
.tablefill   {border:1px solid #777; background-color:#CABB97; font-size:10px; color:#333; padding:6px 5px 6px 5px; text-align:justify; }
.tablepad    { border:1px solid #777; background-color:#CABB97; font-size:10px; color:#333;  padding:6px 5px 6px 5px; text-align:justify;}
.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 {border:1px solid #555; background-color:#CABB97; font-size:10px; color:#333; display:block; padding:6px 5px 6px 5px; text-align:justify; }
.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 { border:1px solid #777; background-color:#B49C74; font-size:11px; color:#000; padding:0px; font-family:arial; padding:5px; border:1px solid #BDA782; }
#CODE  { border:1px solid #777; background-color:#B49C74; font-size:11px; color:#000; padding:0px; font-family:arial; padding:5px; border:1px solid #BDA782; }
div.row4 {background:none; border:none !important; }
.copyright { font-family: Verdana, Tahoma, Arial, Sans-Serif; font-size: 9px; line-height: 12px }.codebuttons  {border:1px solid #777; background-color:#CABB97; font-size:11px; color:#333; font-family:arial; padding-left:5px; padding-right:5px; }
.forminput, .textinput, .radiobutton, .checkbox  { border:1px solid #777; background-color:#CABB97; font-size:11px; color:#333; padding:0px; font-family:arial; }
.thin { border:1px solid #555; background-color:#CABB97; font-size:10px; color:#333; display:block; padding:6px 5px 6px 5px; text-align:justify; }.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 }

Curious, but before, when you fixed the sidebar to be smaller because it would push the post off the page, what did you modify?

I just make the cbox narrower for that. The cbox fit fine on the main page, but because the sidebar was narrower on the post page, I needed to make the cbox thinner there. I didn't actually change any other parts of the code.

I wanted to let you know I was still looking, but I checked out the original fading skin that Lint made and it does the same thing so I'm going to guess it has something to do with the table widths for the posts/forums, and honestly, I'm not sure I'm to coding skills to solve that for you yet. You might PM Lint or post on the original skin, because it look like either that was her intention or she made a % / width error somewhere and didn't catch it.

I may end up doing a new skin, but in the meantime, does anyone know WHICH width sections control these features?

Try setting:

Code: Select

.desc {border:1px solid #555; background-color:#CABB97; font-size:10px; color:#333; display:block; padding:6px 5px 6px 5px; text-align:justify; } 

- to have whatever width you need? I'm not positive if it will work but it might. ->

Code: Select

.desc {width:200px; border:1px solid #555; background-color:#CABB97; font-size:10px; color:#333; display:block; padding:6px 5px 6px 5px; text-align:justify; } 

I'll look for the second problem too.

I think I found where the problem is coming up for the second issue, but it depends on if you are using a code in your tables that sets the borders or not. I'm guessing not? But I can't test it on your site because I believe you don't have dohtml enabled in the particular forum that you opened for the public (and if there is a way to do a proper table without dohtml then I am a complete doof who has no idea....) Your tables could be naturally inheriting its borders from though and if so then hopefully a quick:

Code: Select

border="#"

where you replace the # to whatever pixel width you want added to the table so the code will look like (<table border="2"><tr> etc etc....) would override the code, but again, I'm one of those coders who does it by trial and error and I could be completely wrong..... I'm sorry I can't be so sure.

Either way, I think this is where the inherited problem is coming in:

Code: Select

.tableborder table {background:url(http://i47.tinypic.com/119vzpy.jpg); padding-top:20px; padding-bottom:10px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius:  15px;}