Tree lines like Phorum 3 module!
Posted by Brian Moon
|
Re: Tree lines like Phorum 3 module! March 14, 2007 10:35AM |
Hi, I have been reading the messages re: this Tree Threading, after installing the MOD, it took me a couple of hours to fix the issue of gaps showing, but its all sorted, & looks cool.
What I would like to know, the images used for the tree, is there any chance of having a slightly larger version of these, as they show up as real small. I've tried making larger images, but it screws up the whole page. Even if some1 could let me know how to fix the alignment sizes, with larger images, would be helpful.
Also, quite some time back, "D-rex" metioned about using alternating colours in his forum, that is what I would like to do for my Forum, he mentioned he fixed it, but I haven't been able to find any information on how he did that. I've been playing with the settings in some of the *.tpl files, in the Templates folder, to see if I can set it myself, but all I have been able to do is edit the thread colours, not the individual posted message colours. I would be grateful if some help could with this, or even a clue as to which file (there are lots of them).
I am fairly new to PHP & Forum/Phorum Design, so any help is grately appreciated.
---
Snake,
Fangs that bite!
Alternating Background in Thread & Message Views
Tree lines like Phorum 3 (by BrianLMoon) --- My working update
Edited 2 time(s). Last edit at 03/16/2007 01:49AM by Snake.
What I would like to know, the images used for the tree, is there any chance of having a slightly larger version of these, as they show up as real small. I've tried making larger images, but it screws up the whole page. Even if some1 could let me know how to fix the alignment sizes, with larger images, would be helpful.
Also, quite some time back, "D-rex" metioned about using alternating colours in his forum, that is what I would like to do for my Forum, he mentioned he fixed it, but I haven't been able to find any information on how he did that. I've been playing with the settings in some of the *.tpl files, in the Templates folder, to see if I can set it myself, but all I have been able to do is edit the thread colours, not the individual posted message colours. I would be grateful if some help could with this, or even a clue as to which file (there are lots of them).
I am fairly new to PHP & Forum/Phorum Design, so any help is grately appreciated.
---
Snake,
Fangs that bite!
Alternating Background in Thread & Message Views
Tree lines like Phorum 3 (by BrianLMoon) --- My working update
Edited 2 time(s). Last edit at 03/16/2007 01:49AM by Snake.
|
Re: Tree lines like Phorum 3 module! March 26, 2007 05:04PM |
I was looking at the lafcpug phorum, and under IE7, as a general user, I see gaps in the vertical lines.. I've experienced this type of thing on many sites I've developed that have to have lines spanning columns. Different browsers do different things when given the same instruction and it's terribly annoying...
here's how I've solved it...
instead of using normal images within the tabledata, you have to make the lines the table background image... the browser will extend this properly based on the proper instruction.
so, for example...
THIS:
the only difference is that we're specifying a background image which is the vertical bar, so it will extend past the gaps should the browser decide to stick some space in their (often it will render a font slightly larger than you planned, and that's where you get a pixel or 2 gap.
to save bandwidth, and hastle, it would make more sense to use CSS to solve this problem and have a class you use for the td which has the background image/background repeat in it.
for alternating rows, the TR should have a class which specifies the row color, which should cascade down to the td's so you can add a subclass to the td's
so, I've attached a couple pics.. one that shows your site with the spaces as I see them in IE7, and another with some quickie mods with IMHO, better use of CSS.
in this case, treecontinue1, sets the background of i1.gif (this is i.gif with an additional 5 pixels on the lefthand side, to adjust for the left padding).
to deal with the corners, you'd need to make additional background images and associated css styles which dont 'repeat-y' but are just a few pixels in lengths to fill in any potential top gap.
there should be treecontinue2, which has 2 vertical bars, etc...
so, you just specify the right class for the td depending on what's going on in that frame, then simply use one transparent gif to push the + and corners and end pieces into the right position.
I'm not currently using this mod, although I'd like to, I just dont have time to get all this done at the moment, otherwise, I'd have just modified and posted an updated version, but I think this should be enough for someone to move forward.
Files included:
Pic with spaces.
pic with spaces fixed on the left vertical bar.
new i1.gif with the vertical bar scooted over 5 pixels
(NOTE: i1.gif is only a pixel or 2 tall, since the browser will repeat the image, there's no need to have the file any larger than necessary.--ideally for bandwidth savings, it should be exactly 1 pixel tall.--it also doesn't need any of the transparent pixels on the right so this could be trimmed even more)
here's how I've solved it...
instead of using normal images within the tabledata, you have to make the lines the table background image... the browser will extend this properly based on the proper instruction.
so, for example...
THIS:
<td class="PhorumTableRowAlt"0px"> <img src="mods/treeview/images/t.gif" width="12" height="21" border="0" /> <img src="mods/treeview/images/c.gif" width="9" height="21" border="0" > <a href="[www.lafcpug.org]; Re: Shake Basics</a> <span class="PhorumNewFlag"></span> </td>should be:
<td class="PhorumTableRowAlt"0px" background="mods/treeview/images/i.gif" style="background-repeat:repeat-y"> <img src="mods/treeview/images/t.gif" width="12" height="21" border="0" /> <img src="mods/treeview/images/c.gif" width="9" height="21" border="0" > <a href="[www.lafcpug.org]; Re: Shake Basics</a> <span class="PhorumNewFlag"></span> </td>
the only difference is that we're specifying a background image which is the vertical bar, so it will extend past the gaps should the browser decide to stick some space in their (often it will render a font slightly larger than you planned, and that's where you get a pixel or 2 gap.
to save bandwidth, and hastle, it would make more sense to use CSS to solve this problem and have a class you use for the td which has the background image/background repeat in it.
for alternating rows, the TR should have a class which specifies the row color, which should cascade down to the td's so you can add a subclass to the td's
so, I've attached a couple pics.. one that shows your site with the spaces as I see them in IE7, and another with some quickie mods with IMHO, better use of CSS.
.treecontinue1 {
background-image:url(Phorum Shake 4_1_files/i1.gif);
background-repeat:repeat-y;
PADDING-RIGHT: 0px; PADDING-LEFT: 5px;
}
<TR class=PhorumTableRowAlt>
<TD class="treecontinue1"><IMG height=21
src="Phorum%20%20Shake%204_1_files/transpixel.gif" width=12 border=0 /><IMG
height=21 src="Phorum%20%20Shake%204_1_files/l.gif" width=12
border=0 /><IMG height=21 src="Phorum%20%20Shake%204_1_files/m.gif"
width=9 border=0 /> <A
href="[www.lafcpug.org]:
Compression in fileout nodes</A> <SPAN
class=PhorumNewFlag></SPAN> </TD>
note, the class phorumtablerowalt, was moved up to the TR, so you dont need it in each column...this is a waste of bandwidth. now we can use additional classes in the TD.
in this case, treecontinue1, sets the background of i1.gif (this is i.gif with an additional 5 pixels on the lefthand side, to adjust for the left padding).
to deal with the corners, you'd need to make additional background images and associated css styles which dont 'repeat-y' but are just a few pixels in lengths to fill in any potential top gap.
there should be treecontinue2, which has 2 vertical bars, etc...
so, you just specify the right class for the td depending on what's going on in that frame, then simply use one transparent gif to push the + and corners and end pieces into the right position.
I'm not currently using this mod, although I'd like to, I just dont have time to get all this done at the moment, otherwise, I'd have just modified and posted an updated version, but I think this should be enough for someone to move forward.
Files included:
Pic with spaces.
pic with spaces fixed on the left vertical bar.
new i1.gif with the vertical bar scooted over 5 pixels
(NOTE: i1.gif is only a pixel or 2 tall, since the browser will repeat the image, there's no need to have the file any larger than necessary.--ideally for bandwidth savings, it should be exactly 1 pixel tall.--it also doesn't need any of the transparent pixels on the right so this could be trimmed even more)
Sorry, only registered users may post in this forum.