PDA

View Full Version : IPB Code Fixes


Robert_J_Ellis
08-05-2005, 03:27 AM
Ok, well; I laboured for days getting IPB to behave properly, doing research etc; gathering ideas.

Well, here's what I have, and it fixes everything.

So; the first thing to understand about IPB; is that it sets internet explorer and others in compliant mode. What this means is that there's new rules to follow, and you have to be very selective about what you use and what you do'nt.

Accessibility will always be a factor with a bb, so try and keep realistic goals. Subdreamer by nature does a few things innately that affect IPB when it skins your forum. Adds a style which sets every table cell to 0 pixels -yuck-
Adds the "line-height" property to tables, table rows, and table cells. Changes the IPB Wrapper somewhat.
Now with subdreamer designs, until we get compliant browsers our forumskins will most likely have to consist of tables so that we do'nt end up making more trouble for ourselves than they are worth. Someday, right ?

A table driven design consists of a few factors; table cell values,
css or inline styles,
images
Funky text formatting
spacer images ( yes, I know )
Table cell values
Well, keep your table cell values consistent for one. For instance many still believe that internet explorer ( 6 for example ) automatically aligns objects to the left. Well this just is'nt so in compliant mode. Things will be justified to the center. Rather easy to combat this; with an inline style try :
text-align : left
This for example can place the menu in the right spot, and your logo etc.


There are a few css values in IPB that make sense, but from a design sense are somewhat alarming. In this instance - though firefox does not support this; IPB attempts to justify images to the center. Sort of like the valign tag; try this outt ( in this example I send an image to the right, and then to the bottom )

<td>
<img src="./././your_image.gif" width="15" height="8" style="text-align:right; vertical-align:bottom" />
</td>


That solves your problem. Make sure to keep in mind that this reflects all images, but you do'nt neccessarily need to assign this value to stuff by a rule of thumb if it does not need to be positioned.

Next, we will also find that in compliant mode that our images produce a text-line. This only means that it creates a baseline so that an image aligns correctly with text. Your worst nightmare if you're using a spacer image.

lets say this is an image : []
Here's what IE does in compliant mode:
[]
_

see that line below it ? that's the bottom of your cell. To prevent this; use this code:

<img src="./././spacer.gif" width="3" height="5" style="display:block" />


Yes. Display:block ensures that it does not create a baseline and that the marriage between your table cells and your images lasts; Not using this this code just makes for a long distance-relationship.

Though I've documented this before; subdreamer also makes all table cells have an innate padding value of 0 pixels. I'm sorry but this just wo'nt do. Easy enough to make sure that your table cells have no padding by add your own inline style versus screwing up the look of your board.

<td width="100%" height="5" style="padding:0px">


Another thing to consider is the html header tags such as:

<h1></h1>


You know, at one time I thought there was a need for seperate files for ipb, but maybe that was a little rash. I guess with the stuff I found, it's easy nuff to get things iree.

Make sure that you control things in a css file. Ah, you say; But then I have to write stuff in a style on the forumskin too &#33; >.<. Well, this is just not true.

Do&#39;nt fear Do&#39;nt Fear &#33; I have come up with a way for you to hardcode css files within your subdreamer skins. To such an extent that you can also control your forumskin and your site in the same files. I shall be releasing a blank template for you and you and you to use. I&#39;d wish that there be a small credit out to me, and I&#39;d be pleased if somehow this became an integral part of subdreamer. I mean I like the product, but better is better.

For instance; with these yummy files you can release skins that have : multiple header images
multiple category colours along with the ability to control the dropdown menus too&#33;
Add form / button effects without messing with your forum.
A whole lot more control over things.
It&#39;s a lot less hard when you can simply write stuff up in a few files to control everything, dontcha think ?

Anyways, I need a little break; and then I&#39;ll write more.

:lol: - Robert

Robert_J_Ellis
08-14-2005, 03:55 PM
You know; it&#39;s always after that you find a better way :). I&#39;m almost certain that subdreamer will treat padding very soon correctly in IPB ( without the need for clunky inline styles.)

The code I thought up for IPB to achieve this is :

div div table tr td, .divpad *{
* padding &#58; 5px;
}

div div table tr th *{
* padding &#58; 5px;
}


Have&#39;nt tested it in netscape, but it looks good :)

Robert_J_Ellis
08-15-2005, 07:47 AM
Originally posted by Robert_J_Ellis@Aug 14 2005, 11:55 AM
You know; it&#39;s always after that you find a better way :). I&#39;m almost certain that subdreamer will treat padding very soon correctly in IPB ( without the need for clunky inline styles.)

The code I thought up for IPB to achieve this is :

div div table tr td, .divpad *{
* padding &#58; 5px;
}

div div table tr th *{
* padding &#58; 5px;
}


Have&#39;nt tested it in netscape, but it looks good :)
624


I have improved the call to the first div by adding the id "ipbwrapper". This ensures that only the ipb forum is affected by the default padding of 5 pixels.


div#ipbwrapper div table tr td, .divpad *{
* padding &#58; 5px;
}

div#ipbwrapper div table tr th *{
* padding &#58; 5px;
}

Kaori
08-15-2005, 09:24 PM
Ok, I just bought an IPB licence and when I skined my forum all looked ugly >.< Worst than I expected. Could you please tell me where am I suposed to do this changes? In the forumskin.php?

Thanks

abcohen
08-16-2005, 12:05 AM
Originally posted by Kaori@Aug 15 2005, 05:24 PM
Ok, I just bought an IPB licence and when I skined my forum all looked ugly* >.<* Worst than I expected.* Could you please tell me where am I suposed to do this changes?* In the forumskin.php?

Thanks
673

yup make changes to your forumskin

Robert_J_Ellis
08-16-2005, 01:32 AM
Originally posted by abcohen@Aug 15 2005, 08:05 PM
yup make changes to your forumskin
679


Here&#39;s what you do kaori :
in invision power board admin cp;

go to skins and templates > skin manager,
and then select " edit root skin stylesheet (advanced mode) "

now, you will see the css there.

find ( manually ):

td,
.divpad{ /* gives all tables faux cellpadding of 5px */
padding&#58; 5px;
}


replace with:

div#ipbwrapper div table tr td, .divpad *{
*padding &#58; 5px;
}


then find ( way down ):

table th,
.borderwrap table th,
.subtitle,
.subtitlediv,
.postlinksbar{
background&#58; transparent url&#40;style_images/&#60;#IMG_DIR#&#62;/tile_sub.gif&#41;;
border-bottom&#58; 1px solid #5176B5;
color&#58; #3A4F6C;
font-size&#58; 10px;
font-weight&#58; bold;
letter-spacing&#58; 1px;
margin&#58; 0;
padding&#58; 5px;
}

And replace with :

div#ipbwrapper div table tr th,
.borderwrap table th,
.subtitle,
.subtitlediv,
.postlinksbar{
background&#58; transparent url&#40;style_images/&#60;#IMG_DIR#&#62;/tile_sub.gif&#41;;
border-bottom&#58; 1px solid #5176B5;
color&#58; #3A4F6C;
font-size&#58; 10px;
font-weight&#58; bold;
letter-spacing&#58; 1px;
margin&#58; 0;
padding&#58; 5px;
}


Save css. Now to the second step.

go to skins and templates > skin manager,
and then select " edit root skin board header and footer wrapper"

go to the very bottom and find :

&#60;style type=&#34;text/css&#34;&#62;td, .divpad{padding&#58; 0px;}&#60;/style&#62;


And delete it :) You&#39;re all set. This&#39;ll be built into subdreamer soon I&#39;m sure.

Kaori
08-16-2005, 04:48 AM
Thank you abcohen and Robert. It looks good now, I only need to worry about matching the colors to my site, but I&#39;ll leave that for tomorrow. :)

Robert, your last post should be made into a Tutorial. Pretty easy to follow, thanks for the instructions.

Robert_J_Ellis
08-16-2005, 06:44 AM
Originally posted by Kaori@Aug 16 2005, 12:48 AM
Thank you abcohen and Robert.* It looks good now, I only need to worry about matching the colors to my site, but I&#39;ll leave that for tomorrow.* :)

Robert, your last post should be made into a Tutorial.* Pretty easy to follow, thanks for the instructions.
686


Never a problem, but it&#39;s my hope that this will be integrated into Subdreamer ASAP by the staff so that people like yourself and I do not have to add these modifications to get our forumskin (and forums) looking right.

I promise to make a tutorial which covers " how to make a skin for all forums - the right way" however.

Glad it worked out for you :)
- Robert

Robert_J_Ellis
08-19-2005, 03:41 AM
Originally posted by Robert_J_Ellis@Aug 16 2005, 02:44 AM
Never a problem, but it&#39;s my hope that this will be integrated into Subdreamer ASAP by the staff so that people like yourself and I do not have to add these modifications to get our forumskin (and forums) looking right.

I promise to make a tutorial which covers " how to make a skin for all forums - the right way" however.

Glad it worked out for you :)
- Robert
687


Each time I skin my forum I have to do this; so I&#39;ll write a file for this and share :).

DarK_AssassiN
07-13-2006, 03:09 AM
I know up digging up an old topic here, but I need some help. Subdreamer seemed to automatically fix the image part, but the padding was wrong so I took your code and added it where I thought it went (couldn&#39;t find what you said to look for). That worked.

Now, where does the align-text fix go?

Robert_J_Ellis
07-13-2006, 04:07 AM
text-align fix ? could you please ellaborate ?

DarK_AssassiN
07-13-2006, 05:07 AM
Table cell values
Well, keep your table cell values consistent for one. For instance many still believe that internet explorer ( 6 for example ) automatically aligns objects to the left. Well this just is&#39;nt so in compliant mode. Things will be justified to the center. Rather easy to combat this; with an inline style try :
CODE
text-align : left

This for example can place the menu in the right spot, and your logo etc.[/b]

All my text is justified (centered) in IE.

Robert_J_Ellis
07-13-2006, 05:42 AM
which skin do you use ?

Robert_J_Ellis
07-13-2006, 05:19 PM
just for the record, the new version of IPB calls for something different, perhaps the Subdreamer team will get to it when they can.

Here are new instructions for patching the IPB issues.

find in: look and feel -> IPB Default Skin -> Edit Stylesheet ( CSS Adavanced Mode )


.ipbtable div#ipbwrapper div table tr td,
.divpad{ /* gives all tables faux cellpadding of 5px */
****padding&#58; 5px;
}


replace with:


.ipbtable td, div#ipbwrapper div table tr td,
.divpad{ /* gives all tables faux cellpadding of 5px */
****padding&#58; 5px;
}


after 2.1 they gave tables their own class so that it would not interfere with other portals, cms&#39;s and so on.

I also reccomend finding:


#ipbwrapper{
****margin&#58; 20px auto 20px auto; /* centers the box, no matter the overall width, also applies a 20px gap at the top and bottom of the board */
****text-align&#58; left; /* re_aligns text to left second part of two part MSIE centering workaround */
****/* EDIT THIS TO CHANGE THE WIDTH OF THE BOARD -&#62; 750px is a common fixed resolution size */
****width&#58; 98%;
}


replace with:


#ipbwrapper{
****margin&#58; 0px 0px 0px 0px; /* centers the box, no matter the overall width, also applies a 20px gap at the top and bottom of the board */
****text-align&#58; left; /* re_aligns text to left second part of two part MSIE centering workaround */
****/* EDIT THIS TO CHANGE THE WIDTH OF THE BOARD -&#62; 750px is a common fixed resolution size */
****width&#58; 100%;
}


should take care of things for you.

kernel
07-17-2006, 12:39 PM
Hm both find&replace looks the same&#33; ? :)

kernel
12-07-2006, 07:56 PM
I'm missing something here... before crash empty comments or something.. here was solution, now there is not any..