i need some help understanding templates

[Neo_Angelo]

Yeah, i'm no advance skinner as of yet but i've made a really nice skin but i would like to add template edits to add images underneith things like the Whats going on box and forums....my dilemma is, i do not understand how to fully use templates, anyways what i'd ike to know is a simple tutorial i can understand that will help me make sence of how to add template changes so i can add images in certain areas of the forums....all the tutorials i've looked through don't have what i'm looking for and to me i can't seem to get my head around.

anyways heres what i want to do....i want to use template edits to add this image to my forums in certain area's:



now on skins usually theres a code you use called Repeat X-left....now i know my image is WAY to big so i'll cut it down to about 30 pixels wide, so using the repaet code would extend the image all the way across the page untill it reaches the other end of the forums....correct?

what i need to know is what codes i can use now i've uploaded it to my server in which templates and where. i would really appreciate it if someone could give me an example code i could work from since i'm not very good at this...i'm a n00b to coding.

basically i want the end product to look like this:



could someone please point me in the right direction as i'm lost as to how to do it.

much appreciated and thanks in advance guys!

[SmashinYoungMan]

In the forumhome vBshout template, try adding this just before the </tbody> tag.

<tr>		
<td width="100%" height="50" style="background: url($stylevar[imgdir_misc]/yourimage.gif) repeat-x top left;">
&nbsp;
</td>
</tr>

Upload the image to the misc image directory, and rename the "yourimage.gif" to whatever the name of your image is. I made the height attribute "50" because that's the height of your image. Adjust it to whatever you need, depending on your image's final size.

Hope this does the trick for you!

[Neo_Angelo]

thank you very much i shall try this out when i get home, so this can be used for all the template i wish to add an image to?

many regards
Neo

[Princeton]

<a href="https://vborg.vbsupport.ru/showthread.php?t=124576" target="_blank">Skinning: Understanding A Template-Based System</a>

[Neo_Angelo]

i did look at that tutorial but i was confused and it didn't tell me what i needed to know. thanks for trying, Smashinyoungman has answered my question and i understand now. thank you for your help ^_^

EDIT: upon trying that code it did work BUT only added one third of the image once....

EDIT: don't worry i figured it out, if i put 100% it wouldn't work but if i put 932 then it works.

thanks guys.

[SmashinYoungMan]

My bad...I neglected to add the colspan attribute to that bit of code. It needs a column span of 2. Here is the updated code:

<tr>		
<td width="100%" height="50" colspan="2" style="background: url($stylevar[imgdir_misc]/yourimage.gif) repeat-x top left;">
&nbsp;
</td>
</tr>

To answer your other question, this bit of code will work in most templates where you want to place the image. It will generally be placed below the final </tr> tag, just above the closing </table> or </tbody> tags. The colspan attribute will also need to be tweaked or removed, depending on the template (or managed using an <if> statement to deal with optional columns such as the moderator column).

There are other ways to do it, of course. You may opt to put the image code in its own table, or in a div. Setup a test theme and play around with the code I've given you, or try different approaches if you like. Best of luck!

[Neo_Angelo]

thank you very much, your guidance is very helpful and i'll do what you said about experimenting, the way you've explained this is easy to understand and i've learnt from it. thanks alot my good friend. much appreciated!

-Neo