Next Tutorial

[halfcut]

I thought that could be the next one, you know how the ibskins stuff is done, basically wrapping your invision board with surrounding images with multi browser compatibility, instead of just playing with the category background etc, starting from photoshop, slicing and through to the finished process.

Although as I can't draw it may be tricky but I thought I'd use the skin I'm working on( http://www.virtual-forum.com ) starting with the board view, as an example and provide the images so you can do it yourself, don't have time to do this, probably until next week but it might prove interesting.

Feedback would be appreciated, as although its all coded up its still quite a daunting task, heh I'm contributing again.

Either that or a dhtml/java tute, anyway what do people want to know, I've got tons of useless information in me brain just gasping to get out :)

Shoo Adam's grumpy head :D

[Topgunn9]

Can't wait mate

LLOYD
IBFskinned Mod
SpinnaWeb

[halfcut]

well hopefully, maybe I could combine the two... ;)) ho hum I'll have a think, I'll turn everyone into skinning wizards yet....then no more questions on ibskins and no need for your support forum :lol: :lol: phew

As an additional thought, I'd also like to do a 'the html, CSS you need to know to skin tutorial'

I may may have mentioned elsewhere that Six and I are going to do a ground up tute, but I suspect this may not be finished until 2010.

html would be quite easy as you don't need to know that much, but I would like to pull people away from dreamweaver and into using text editors. Ah well I'll leave that up to what people want ;)

On a serious note support is always neccessary, way back when in the days of Z80 assembly language and the spectrum, you could code a seemingly huge routine, one mistake and it was basically buggered, you could spend hours pouring over it looking for the problem, then your mate'd turn up and within 30 seconds he'd/she'd spot the problem.

Same goes for html, I look at my code and its sort of in my head as I'm typing, you guys look at yours and exactly the same thing happens. If you swap then each of us suss it almost immediatly, just the mighty human brain playing up again :D thats my biggest tip for the short space of time available at the moment and it almost always works...seriously

[Fierce Deity]

Can't wait for your next tuturials, good luck with all that. :D

Edit: Now that I think about it, something alot of people have been dieing to know is how do you add more buttons to the posting area?

[Topgunn9]

Give me a buzz on AIM next time you're online. I am not exactly sure what you mean but adding extra buttons is easy if you know where to look ;) Something to remember is to use the Invision link not a full URL as that won't work on all boards. For example if you want to add another REPLY button like in Blue Chrome get the link from the templates where the normal REPLY button is ;) Under no circumstances open the forum and use the URL the button is pointint too in the source.

LLOYD
IBFskinned Mod
SpinnaWeb

[Fierce Deity]

No I mean like code buttons, like the http://, IMG, QUOTE. ect. I have a bunch of new code like glow and such and I would like to add buttons for them. I knew how for version 1.0.1. but it doesn't work anymore.

[kidd0]

Check out my support forums: http://forums.kidd0.com
I did the "wrapping"

Its pretty simple.

[halfcut]

nevertheless here it is.........

This is really mind numbingly simple but a useful technique anyway...

I'm not going to get into image creation as quite frankly I can't draw to save my life, I'm not going to go into how to slice your images as photoshop/imageready(whatever your preference) does it for you. I'll only cover the board view because once you've grasped that skinning the rest is a doddle ;).

One last negative thing to mention you won't end up with a nice skin at the end of this tutorial, that'd be too easy ;)

ok this is all we're going to make :

http://www.virtual-forum.com/images/tute1.jpg

Well not quite, I won't be touching the CSS as its assumed thats easy enough :) Create your images
Self explanatory - you can go as complex or as simple as you want, but for our purposes we'll be keeping it simple and using the minumum for a complete border which is 8(this is a lie btw you can get away with less with correct slicing).


2. top.gif : http://www.virtual-forum.com/images/top.gif
3. top_right.gif : http://www.virtual-forum.com/images/top_right.gif
4. left.gif : http://www.virtual-forum.com/images/left.gif
5. right.gif : http://www.virtual-forum.com/images/right.gif
6. bottom_left.gif : http://www.virtual-forum.com/images/bottom_left.gif
7. bottom.gif : http://www.virtual-forum.com/images/bottom.gif
8. bottom_right.gif : http://www.virtual-forum.com/images/bottom_right.gif

Told you I was keeping it simple :) On a serious note try to keep the curve radius down otherwise you're going to be slicing all day ;) Upload them to style_images/*/
Yeah I know, maybe I could of skipped that one :P Nesting your tables
Right time to get down to business, you need to create a layout that will allow you to surround the forum tables with a table that contains your images and keep them nice and neat at the same time. Its probably easier to set this up beforehand in your favourite editor.

You need to be looking for something like this(assuming you're using the above images)

<table width="80%" border="0" cellpadding="0" cellspacing="0" align='center'>
<tr>
Ü<td>
Ü <img src="{ibf.vars.img_url}/top-left.gif" width=18 height=14 alt=""></td>
Ü<td width="100%" background="{ibf.vars.img_url}/top.gif"></td>
Ü<td>
Ü <img src="{ibf.vars.img_url}/top_right.gif" width=21 height=14 alt=""></td>
</tr>
<tr>
Ü<td background="{ibf.vars.img_url}/left.gif"></td>
Ü<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
Ü<tr>
Ü Ü<td>
Ü Ü</td>
Ü</tr>
</table>
</td>
Ü<td background="{ibf.vars.img_url}/right.gif"></td>
</tr>
<tr>
Ü<td>
Ü <img src="{ibf.vars.img_url}/bottom_left.gif" width=18 height=35 alt=""></td>
Ü
Ü<td width="100%" background="{ibf.vars.img_url}/bottom.gif"></td>
Ü<td>
Ü <img src="{ibf.vars.img_url}/bottom_right.gif" width=21 height=35 alt=""></td>
Ü</tr>
</table>

Now you need to consider how invision board is set up.

Starting at the top :

<table width="80%" border="0" cellpadding="0" cellspacing="0" align='center'>

Well we probably want to set the width of the board in the macros so that line gets changed to <table width="<{tbl_width}>" border="0" cellpadding="0" cellspacing="0" align="center">



The next section we look at is the nested table <table width="100%" border="0" cellspacing="0" cellpadding="0">
Ü<tr>
Ü Ü<td>
Ü Ü</td>
Ü</tr>
</table> well we don't need any of that because the bit we want to wrap is already a table so we get rid of that completely.

So that leaves us with the code that we need, at this point it may be useful to split that little section into top and bottom, just paste each part into a seperate text file or something for handy copying and pasting into your templates.

We now have top : <table width="<{tbl_width}>" border="0" cellpadding="0" cellspacing="0" align='center'>
<tr>
Ü<td>
Ü <img src="{ibf.vars.img_url}/top-left.gif" width=18 height=14 alt=""></td>
Ü<td width="100%" background="{ibf.vars.img_url}/top.gif"></td>
Ü<td>
Ü <img src="{ibf.vars.img_url}/top_right.gif" width=21 height=14 alt=""></td>
</tr>
<tr>
Ü<td background="{ibf.vars.img_url}/left.gif"></td>
Ü<td>


and bottom </td>
Ü<td background="{ibf.vars.img_url}/right.gif"></td>
</tr>
<tr>
Ü<td>
Ü <img src="{ibf.vars.img_url}/bottom_left.gif" width=18 height=35 alt=""></td>
Ü
Ü<td width="100%" background="{ibf.vars.img_url}/bottom.gif"></td>
Ü<td>
Ü <img src="{ibf.vars.img_url}/bottom_right.gif" width=21 height=35 alt=""></td>
Ü</tr>
</table>


Now for the easy stuff, in 1.1 final the naming conventions for the templates were changed plus we get an almost top down view of them as they are displayed in the admin cp, makes life alot easier than 1.0.1.

As we are just dealing with the board view at the moment we probably just want to put our border round each occurence of a category and round the statistics at the bottom.

So armed with your top and bottom code got to admin cp>Skins & templates>manage html templates>select one>board index sections :

Board Index Page Top
Latest News Link
Start Category Table
+-- Board Index Forum Row
+-- Sub Forum Row
+-- End Category Row
End Category Table
Page Bottom Links - Moderating Team,etc
Quick Log In Box
Start Board Statistics Table
+-- Online Users Row
+-- Members Birthdays
+-- Forthcoming Calendar Events
+-- Board Stats: Posts, Topics
End Board Statistics Table

As we are limiting out activities to the areas mentioned above we're only interested in the following templates :

1. Start Category Table
2. +-- End Category Row
3. Start Board Statistics Table
4. End Board Statistics Table

1. Open Start Category Table for editing :

<table width="<{tbl_width}>" align="center" border="0" cellspacing="1" cellpadding="0" bgcolor="<{tbl_border}>">
Ü<tr>
Ü Ü<td>
Ü Ü Ü<table width="100%" border="0" cellspacing="0" cellpadding="3" class='maintitle'>
Ü Ü Ü Ü<tr>
Ü Ü Ü Ü Ü<td class="maintitle"><{CAT_IMG}></td>
Ü Ü Ü Ü Ü<td width="100%" class="maintitle"><a href="{ibf.vars.board_url}/index.{ibf.vars.php_ext}?s={ibf.session_id}&c={$Data['id']}">{$Data['name']}</a></td>
Ü Ü Ü Ü</tr>
Ü Ü Ü</table>
Ü Ü</td>
Ü</tr>
Ü<tr>
Ü Ü<td class='mainbg'>
Ü Ü Ü<table width="100%" border="0" cellspacing="1" cellpadding="4">
Ü Ü Ü Ü<tr>
Ü Ü Ü Ü Ü<td align="center" nowrap class='titlemedium'><img src="{ibf.vars.img_url}/spacer.gif" alt="" width="28" height="1"></td>
Ü Ü Ü Ü Ü<td width="59%" nowrap class='titlemedium'>{ibf.lang.cat_name}</td>
Ü Ü Ü Ü Ü<td align="center" width="7%" nowrap class='titlemedium'>{ibf.lang.topics}</td>
Ü Ü Ü Ü Ü<td align="center" width="7%" nowrap class='titlemedium'>{ibf.lang.replies}</td>
Ü Ü Ü Ü Ü<td width="27%" nowrap class='titlemedium'>{ibf.lang.last_post_info}</td>
Ü Ü Ü Ü</tr>

First things first, because were going to be enclosing the table in a table with a width equal to the value in the macro {tbl_width} change the first line to <table width="100%" align="center" border="0" cellspacing="1" cellpadding="0" bgcolor="<{tbl_border}>">
I also like to get rid of the cellspacing when using a frame like this quite simply you go through and change cellspacing="1" to cellspacing="0". The padding is fine as it is.

Now we fetch our code for top and paste it in right at the beginning, which gives us(not I've removed the cellspacing as above in this example and the line break is just to illustrate where our new code has gone)

<table width="<{tbl_width}>" border="0" cellpadding="0" cellspacing="0" align='center'>
<tr>
<td>
Ü<img src="{ibf.vars.img_url}/top-left.gif" width=18 height=14 alt=""></td>
<td width="100%" background="{ibf.vars.img_url}/top.gif"></td>
<td>
Ü<img src="{ibf.vars.img_url}/top_right.gif" width=21 height=14 alt=""></td>
</tr>
<tr>
<td background="{ibf.vars.img_url}/left.gif"></td>
<td>

<table width="100%" align="center" border="0" cellspacing="0" cellpadding="0" bgcolor="<{tbl_border}>">
Ü<tr>
Ü Ü<td>
Ü Ü Ü<table width="100%" border="0" cellspacing="0" cellpadding="3" class='maintitle'>
Ü Ü Ü Ü<tr>
Ü Ü Ü Ü Ü<td class="maintitle"><{CAT_IMG}></td>
Ü Ü Ü Ü Ü<td width="100%" class="maintitle"><a href="{ibf.vars.board_url}/index.{ibf.vars.php_ext}?s={ibf.session_id}&c={$Data['id']}">{$Data['name']}</a></td>
Ü Ü Ü Ü</tr>
Ü Ü Ü</table>
Ü Ü</td>
Ü</tr>
Ü<tr>
Ü Ü<td class='mainbg'>
Ü Ü Ü<table width="100%" border="0" cellspacing="0" cellpadding="4">
Ü Ü Ü Ü<tr>
Ü Ü Ü Ü Ü<td align="center" nowrap class='titlemedium'><img src="{ibf.vars.img_url}/spacer.gif" alt="" width="28" height="1"></td>
Ü Ü Ü Ü Ü<td width="59%" nowrap class='titlemedium'>{ibf.lang.cat_name}</td>
Ü Ü Ü Ü Ü<td align="center" width="7%" nowrap class='titlemedium'>{ibf.lang.topics}</td>
Ü Ü Ü Ü Ü<td align="center" width="7%" nowrap class='titlemedium'>{ibf.lang.replies}</td>
Ü Ü Ü Ü Ü<td width="27%" nowrap class='titlemedium'>{ibf.lang.last_post_info}</td>
Ü Ü Ü Ü</tr>

Try not to look at the board view at this point as it can be quite alarming :lol:

2. Open up +-- End Category Row :

<tr>
Ü Ü Ü Ü Ü<td class='mainfoot' colspan="5">Ü</td>
Ü Ü Ü Ü</tr>
Ü Ü Ü</table>
Ü Ü</td>
Ü</tr>
</table>
<br>

and copy your code for the bottom of your frame, we're going to paste this before the <br> as we don't want too many empty lines in our categories(you may also like to get rid of <tr>
Ü Ü Ü Ü Ü<td class='mainfoot' colspan="5">Ü</td>
Ü Ü Ü Ü</tr> depending on your layout)


so you end up with <tr>
Ü Ü Ü Ü Ü<td class='mainfoot' colspan="5">Ü</td>
Ü Ü Ü Ü</tr>
Ü Ü Ü</table>
Ü Ü</td>
Ü</tr>
</table>

</td>
<td background="{ibf.vars.img_url}/right.gif"></td>
</tr>
<tr>
<td>
Ü<img src="{ibf.vars.img_url}/bottom_left.gif" width=18 height=35 alt=""></td>

<td width="100%" background="{ibf.vars.img_url}/bottom.gif"></td>
<td>
Ü<img src="{ibf.vars.img_url}/bottom_right.gif" width=21 height=35 alt=""></td>
</tr>
</table>
<br>

and believe it or not thats the categories dealt with on to the stats.

3. Open Start Board Statistics Table :

<!-- Board Stats -->
<!--IBF.QUICK_LOG_IN-->
Ü Ü<br>
<table width="<{tbl_width}>" align="center" border="0" cellspacing="4" cellpadding="0">
Ü <tr>
Ü<td align='center'><a href='{ibf.script_url}&act=Stats&CODE=leaders'>{ibf.lang.sm_forum_leaders}</a> |
Ü Ü<a href='{ibf.script_url}&act=Search&CODE=getactive'>{ibf.lang.sm_todays_posts}</a> |
Ü Ü<a href='{ibf.script_url}&act=Stats'>{ibf.lang.sm_today_posters}</a> |
Ü Ü<a href='{ibf.script_url}&act=Members&max_results=10&sort_key=posts&sort_order=desc'>{ibf.lang.sm_all_posters}</a></td>
Ü </tr>
Ü</table>
Ü Ü<br>
Ü Ü<table cellpadding='2' width='<{tbl_width}>' align='center' class='solidborder'>
Ü Ü<tr>
Ü Ü <td>
Ü Ü
Ü Ü<table cellpadding='0' cellspacing='0' border='0' width='100%' bgcolor='<{tbl_border}>' align='center'>
Ü Ü Ü Ü<tr>
Ü Ü Ü Ü Ü<td>
Ü Ü Ü Ü Ü Ü<table cellpadding='4' cellspacing='1' border='0' width='100%'>
Ü Ü Ü Ü Ü Ü<tr>
Ü Ü Ü<td class='titlemedium' colspan='2'>{ibf.lang.board_stats}</td>
Ü Ü </tr>

Well we don't want to enclose The moderating team | Today's active topics | Today's top 10 posters | Overall top 10 posters so we want to add our top code after that snippet and we don't want that double border so the easiest thing to do is just replace <table cellpadding='2' width='<{tbl_width}>' align='center' class='solidborder'>
Ü Ü<tr>
Ü Ü <td>


with your top html, and get rid of the cellspacing if it was removed in the previous steps, so we paste in the top code and end up with <!-- Board Stats -->
<!--IBF.QUICK_LOG_IN-->
Ü Ü<br>
<table width="<{tbl_width}>" align="center" border="0" cellspacing="4" cellpadding="0">
Ü <tr>
Ü<td align='center'><a href='{ibf.script_url}&act=Stats&CODE=leaders'>{ibf.lang.sm_forum_leaders}</a> |
Ü Ü<a href='{ibf.script_url}&act=Search&CODE=getactive'>{ibf.lang.sm_todays_posts}</a> |
Ü Ü<a href='{ibf.script_url}&act=Stats'>{ibf.lang.sm_today_posters}</a> |
Ü Ü<a href='{ibf.script_url}&act=Members&max_results=10&sort_key=posts&sort_order=desc'>{ibf.lang.sm_all_posters}</a></td>
Ü </tr>
Ü</table>
Ü Ü<br>

Ü <table width="<{tbl_width}>" border="0" cellpadding="0" cellspacing="0" align='center'>
<tr>
<td>
Ü<img src="{ibf.vars.img_url}/top-left.gif" width=18 height=14 alt=""></td>
<td width="100%" background="{ibf.vars.img_url}/top.gif"></td>
<td>
Ü<img src="{ibf.vars.img_url}/top_right.gif" width=21 height=14 alt=""></td>
</tr>
<tr>
<td background="{ibf.vars.img_url}/left.gif"></td>
<td>
Ü Ü
Ü Ü<table cellpadding='0' cellspacing='0' border='0' width='100%' bgcolor='<{tbl_border}>' align='center'>
Ü Ü Ü Ü<tr>
Ü Ü Ü Ü Ü<td>
Ü Ü Ü Ü Ü Ü<table cellpadding='4' cellspacing='0' border='0' width='100%'>
Ü Ü Ü Ü Ü Ü<tr>
Ü Ü Ü<td class='titlemedium' colspan='2'>{ibf.lang.board_stats}</td>
Ü Ü </tr>

4. Finally we need to close this table with the code for the bottom of the frame, so open up End Board Statistics Table :

</table>
Ü</td>
Ü </tr>
Ü</table>
Ü
Ü</td>
Ü</tr>
Ü</table>
Ü Ü<!-- Board Stats -->

We don't need the final </td>
Ü</tr>
Ü</table> as we've got rid of the double border and the table we're using will be closed later on so replace it with your bottom code : </table>
Ü</td>
Ü </tr>
Ü</table>
Ü


</td>
<td background="{ibf.vars.img_url}/right.gif"></td>
</tr>
<tr>
<td>
Ü<img src="{ibf.vars.img_url}/bottom_left.gif" width=18 height=35 alt=""></td>

<td width="100%" background="{ibf.vars.img_url}/bottom.gif"></td>
<td>
Ü<img src="{ibf.vars.img_url}/bottom_right.gif" width=21 height=35 alt=""></td>
</tr>
</table>

Ü Ü<!-- Board Stats -->

and that is that ;)

All the other templates can be skinned similarly, you just have to locate your start and end points and paste in your code, changing the odd ="<{tbl_width}>" to ="100%" and removing the cellspacing if required.

[AjRap2]

Ok I have done all this but what I need now is to know how exactly to use thi for the othe parts of the board and not just the main view.