vForums Support > Programming & Coding :: Database of Codes/Hacks/Mods :: > Border Around Forum
Border Around Forum - Posted By Ross (admin) on 8th May 08 at 8:00pm
This will place a set of border images around the forum to give it a framed look. You will need to edit in the image URLs for the head, middle and base images, the heights of the head and base images and the width of the forum.

Global Header:
Code: HTML
Select All
 
  1. <style type="text/css">
  2. <!--
  3. /* Place a border around the forum */
  4.  
  5. #forum_border {
  6.     width: 700px;
  7.     margin: auto;
  8.     text-align: center;
  9. }
  10.  
  11. #forum_border_head {
  12.     height: 50px;
  13.     width: 100%;
  14.     background-image: url('http://your-site.com/image-url.ext');
  15.     background-repeat: no-repeat;
  16. }
  17.  
  18. #forum_border_middle {
  19.     text-align: left;
  20.     padding-top: 10px;
  21.     background-image: url('http://your-site.com/image-url.ext');
  22.     background-repeat: repeat-y;
  23. }
  24.  
  25. #forum_border_base {
  26.     height: 50px;
  27.     width: 100%;
  28.     background-image: url('http://your-site.com/image-url.ext');
  29.     background-repeat: no-repeat;
  30. }
  31.  
  32. //-->
  33. </style>
  34. <div id="forum_border">
  35.     <div id="forum_border_head"></div>
  36.     <div id="forum_border_middle">
 



Global Footer:
Code: HTML
Select All
 
  1. </div>
  2.     <div id="forum_border_base"></div>
  3. </div>
 
Re: Border Around Forum - Posted By Nick (nickb) on 15th Jun 08 at 12:48am
it dont work!?

http://freunion.vforums.co.uk

Go to the skin chooser, and click on V3 Skin.

its shows up all wrong {Sad} .

Darkmage

Edit:

I had to take it out as it was messing everything up.

Can someone show me how to do this. please.

Do you put the image urls in like this.

Code:
Select All
 
  1. <style type="text/css">
  2. <!--
  3. /* Place a border around the forum */
  4.  
  5. #forum_border {
  6. width: 700px;
  7. margin: auto;
  8. text-align: center;
  9. }
  10.  
  11. #forum_border_head {
  12. height: 50px;
  13. width: 100%;
  14. background-image: url('http://i185.photobucket.com/albums/x20/magedesigns/top2.jpg');
  15. background-repeat: no-repeat;
  16. }
  17.  
  18. #forum_border_middle {
  19. text-align: left;
  20. padding-top: 10px;
  21. background-image: url('http://i185.photobucket.com/albums/x20/magedesigns/base-1.jpg');
  22. background-repeat: repeat-y;
  23. }
  24.  
  25. #forum_border_base {
  26. height: 50px;
  27. width: 100%;
  28. background-image: url('http://i185.photobucket.com/albums/x20/magedesigns/bottom2.jpg');
  29. background-repeat: no-repeat;
  30. }
  31.  
  32. //-->
  33. </style>
  34. <div id="forum_border">
  35. <div id="forum_border_head"></div>
  36. <div id="forum_border_middle">
 


EDIT:

This is what happens, and forget about the banner that it looks like it is over lapping my main banner, it does that for some reason when I take a capture at a full page.

http://i185.photobucket.com/albums/x20/magedesigns/FFVII-ForbiddenReunionV3-Home_12135.png

EDIT: and it seems to center EVERYTHING too.
Re: Border Around Forum - Posted By Ross (admin) on 15th Jun 08 at 10:35pm
I can't comment on the image you posted as it's too small to show anything enough detail. Perhaps try one with a single category rather than the whole main page?

Anyway, trying the code you posted there on a test board works as it should. I can only presume some other code on that board is conflicting with it.
Re: Border Around Forum - Posted By Nick (nickb) on 16th Jun 08 at 3:24am
I know, T_T I noticed how small it was. I will get another picture.

The top part is ok, but the sides do not show up and the bottom is off. and I put it in V3 skin's Global Header, I do not put it in all Skins global Header. Just "V3 Skin".


EDIT:

Well I found out it was this code:

Code:
Select All
 
  1. <center>
  2. <table class="border" width="700" cellpadding="3" cellspacing="1" height="95">
  3. <tr>
  4. <td class="window2" width="30%">
  5. <center>
  6. <b>Staff Members</b>
  7. <br> 
  8. <br>
  9. <u><font color=white>Founder</color></u>
  10. <BR>
  11. <a
  12. href=
  13. "http://freunion.vforums.co.uk/action/view_profile">Sephiroth<BR>a.k.a Darkmage</a>
  14. <br>
  15. <br> 
  16.  
  17. <u><font color=Gray>Administrators</color></u>
  18.  
  19. <br> 
  20.  
  21. <a href="http://freunion.vforums.co.uk/action/view_profile/user/reydaitso/">reydaitso</a>
  22. <BR>
  23. <a href="http://freunion.vforums.co.uk/action/view_profile/user/user_name/"> </a>
  24.  
  25. <br> 
  26. <br> 
  27.  
  28. <u><font color=Green>Global Moderators</color></u>
  29. <BR>
  30. <a href="http://freunion.vforums.co.uk/action/view_profile/user/tifa/">Tifa/Aeris</a>
  31. <BR>
  32. <a href="http://freunion.vforums.co.uk/action/view_profile/user/user_name/demonfang">Duorzum</a>
  33. <BR>
  34. <a href="http://freunion.vforums.co.uk/action/view_profile/user/user_name/"> </a>
  35. <br> 
  36. <br> 
  37. <u><font color=Blue>Moderators</color></u>
  38. <BR>
  39. <a href="http://freunion.vforums.co.uk/action/view_profile/user/daleeria/">Fay</a>
  40. <BR>
  41. <a href="http://freunion.vforums.co.uk/action/view_profile/user/user_name/"> </a>
  42. <BR>
  43. <a href="http://freunion.vforums.co.uk/action/view_profile/user/user_name/"> </a>
  44. <BR>
  45. <a href="http://freunion.vforums.co.uk/action/view_profile/user/user_name/"> </a>
  46. <BR>
  47. <a href="http://freunion.vforums.co.uk/action/view_profile/user/user_name/"> </a>
  48. <BR>
  49. <a href="http://freunion.vforums.co.uk/action/view_profile/user/user_name/"> </a>
  50. </DIV>
  51. </center>
  52. </td><br>
  53.  
  54. <td class="window2" width="40%" rowspan="2"><center><b>Updates</b></center>
  55. <center><b>Forum best Viewed in 1024x768</b></center>
  56. <br>
  57. <div style="overflow: auto; width:100%; height: 150px; bgcolor: transparent; border: 0;">
  58. <br>
  59. <CENTER>
  60.  
  61.  
  62. <hr>
  63. <br>
  64. <b>June 14, 2008</b> ~Darkmage~ Version 3 has now been released. I have set everyones skin to the V3 Skin, if you want your old skin back, simply go to the bottom of the forum and use the skin chooser, or you can also do it by going to your Profile, and changing it that way. The V3 skin is not complete, I have 1 more thing to add to it, but the code I am trying to use is confusing.
  65. <hr>
  66. <br>
  67. <b>May 16, 2008</b> ~Darkmage~ The Pm system is now fixed. Sorry for and inconvenience. 
  68. <hr>
  69. <br>
  70. <b>May 15, 2008</b> ~Darkmage~ We are experiencing some difficulties with the PM system, I apologize for the inconvenience. 
  71. <hr>
  72. <br>
  73. <b>April 15, 2008</b> ~Darkmage~ Well Most of you should be able to log in now. If you can't please  say so in the Cbox, and I will see what I can do to get you logged in. Because all members that have problems I will make it my problem too.
  74. <hr>
  75. <br>
  76. <b>April 5, 2008</b> ~Darkmage~ I know many of you are having trouble logging in, and even staying logged in, when exiting out of your browser. I am trying to get it fixed as soon as possible. Thank you for your patience.
  77. <hr>
  78. <br>
  79. <b>March 17, 2008</b> ~Darkmage~ I made a new skin called "Plain Advent". As you can see I changed the layout, hope you like it.
  80. <HR>
  81. <BR>
  82. <b>February 21, 2008</b> ~Darkmage~ We have added a new board called Lucrecia's Cave, and we also have the dis aligned text fixed now. I have also Organized the characters list, so it would be allot easier to understand.
  83. <hr>
  84. <br>
  85. <b>February 18, 2008 Monday</b> ~Darkmage~ We are having some minor problems with the text size, this is a new system, and of course there will be bugs at times, so just bare with us, as we try to get it fixed.
  86. <hr>
  87. <BR>
  88. <b>February 13, 2008 Wednesday</b> ~Darkmage~ This is the VForums Version of our original forum. I am testing this forum to see how this forum does.
  89.  
  90.  
  91. <HR>
  92. <br>
  93. </center>
  94. </div> 
  95.  
  96. <td class="window2" width="40%" rowspan="2">
  97. <div style="overflow: auto; width: 100%; height: 150px; bgcolor: transparent; border: 0;">
  98. <center><b><font size=2>Staff Legend</b></center>
  99. <center>
  100. <table border="2" cellpadding="2" cellspacing="1" bgcolor=black >
  101. <tr>
  102. <td>
  103. <b>Staff</b>
  104. </td>
  105. <td>
  106. <b>Color</b>
  107. </td>
  108. </tr>
  109. <tr>
  110. <td>
  111. Founder/Admin
  112. </td>
  113. <td>
  114. <font color=white>White</color>
  115. </td>
  116. </tr>
  117. <tr>
  118. <td>
  119. Admin
  120. </td>
  121. <td>
  122. <font color=Gray>Gray</color>
  123. </td>
  124. </tr>
  125. <tr>
  126. <td>
  127. Global Moderator
  128. </td>
  129. <td>
  130. <font color=Green>Green</color>
  131. </td>
  132. </tr>
  133. <tr>
  134. <td>
  135. Moderator
  136. </td>
  137. <td>
  138. <font color=Blue>Blue</color>
  139. </td>
  140. </tr>
  141. </table>
  142. </center>
  143. </div> 
  144. </td>
  145. </tr>
  146. </table>
  147. </div> 
  148. </td>
  149. </tr>
  150. </table></center>
 


What would be causing it. and here is a test forum I have:
http://freuniontest.vforums.co.uk/

Re: Border Around Forum - Posted By Michael (wrighty) on 16th Jun 08 at 10:09am
Should be fixed now? {Smile}

Recopy your top table code - you had 2 </div> that stopped it working. Recopy from your forum! {Smile}
Re: Border Around Forum - Posted By Nick (nickb) on 16th Jun 08 at 7:10pm
OK cool thank you, and one other thing is that I though this code would put something like 1 category has top bottom head/base and a grad side, then the other category had a separate head/base/grad side.

Like Wr Creations.
Re: Border Around Forum - Posted By Michael (wrighty) on 16th Jun 08 at 8:04pm
No. That can be done through the admin panel. 'Modify Images'
Re: Border Around Forum - Posted By Nick (nickb) on 16th Jun 08 at 8:27pm
ohhh, ok thank you I will try that.

When I do it, it says that the images are deleted? and its not.
http://i185.photobucket.com/albums/x20/magedesigns/bottom2.jpg

and it just says base not sides nor head.
Re: Border Around Forum - Posted By [.tR] ookie1 (ookie1) on 19th Jun 08 at 6:34am
Is there a way to put links in the bottom image?
Re: Border Around Forum - Posted By Nick (nickb) on 19th Jun 08 at 7:43am
Posted By [.tR] ookie1 on 19th Jun 08 at 6:34am
 
Is there a way to put links in the bottom image?


Are you talking to me? If so what do you mean?
Re: Border Around Forum - Posted By Michael (wrighty) on 19th Jun 08 at 8:17am
Posted By [.tR] ookie1 on 19th Jun 08 at 6:34am
 
Is there a way to put links in the bottom image?


<div id="forum_border_base"></div>

Add them in between the > and < {Smile}

eg:
<div id="forum_border_base">A LINK HERERRERE! {Cheesy} </div>
Re: Border Around Forum - Posted By [.tR] ookie1 (ookie1) on 19th Jun 08 at 8:19am
Thanks
Re: Border Around Forum - Posted By RuhRoe (mezorro) on 20th Apr 09 at 9:38pm
Is there a way to make this go all the way up to the top of the screen instead of stopping at the top image? If you need me to make an image of what I'm talking about just tell me {Smile}
Re: Border Around Forum - Posted By Nick (nickb) on 21st Apr 09 at 5:00pm
Try this:

Code:
Select All
 
  1. <style type="text/css"> 
  2. <!-- 
  3. /* Place a border around the forum */ 
  4.  
  5. body, #forum_border { 
  6. margin: auto; 
  7. text-align: right; 
  8. } 
  9.  
  10. #forum_border_head { 
  11. height: 79px; 
  12. width: 100%; 
  13. background-image: url('______'); 
  14. background-repeat: repeat; 
  15. background-position: center; 
  16. margin: auto; 
  17. } 
  18.  
  19. #forum_border_middle { 
  20. text-align: left; 
  21. padding-top: 0px; 
  22. background-image: url('______'); 
  23. background-repeat: repeat-y; 
  24. background-position: center; 
  25. } 
  26.  
  27. #forum_border_base { 
  28. height: 50px; 
  29. width: 100%; 
  30. background-image: url('______'); 
  31. background-repeat: no-repeat; 
  32. } 
  33.  
  34.  
  35. //--> 
  36. </style> 
  37. <div id="forum_border"> 
  38. <div id="forum_border_head"></div> 
  39. <div id="forum_border_middle"> 
  40. <div id="forum_border_menu_holder"></div> 
  41. <script type="text/javascript"> 
  42. get('table','tag')[1].cellSpacing = '0'; 
  43. for(b=0; b<=3; b++) { 
  44. get('br', TAG)[b].style.display = "none"; 
  45. } 
  46. get('forum_border_menu_holder', ID).appendChild(get('welcome_table', ID)); 
  47. if(vf_username != "guest") { 
  48. get('forum_border_menu_holder', ID).appendChild(get('user_table', ID).previousSibling); 
  49. get('forum_border_menu_holder', ID).appendChild(get('user_table', ID)); 
  50. } 
  51.  
  52.  
  53.  
  54. </script> 
  55.  
  56.  
 


(Now I know I posted this last night. o_O I even edited it because I noticed a slight error in the code..)
Re: Border Around Forum - Posted By RuhRoe (mezorro) on 21st Apr 09 at 9:46pm
Thanks darkmage {Smile}
Re: Border Around Forum - Posted By Nick (nickb) on 21st Apr 09 at 9:53pm
No problem. {Smile}
Re: Border Around Forum - Posted By Vanquish (scott1707) on 7th Aug 10 at 2:59pm
How would you get the forum border to remove the head section and use the banner/welcome table as the head image instead.
So you have:-

Banner
Border (with boards in center at a smaller width from banner and border)
Info Center
Border footer
Re: Border Around Forum - Posted By dog199200 (dog199200) on 7th Aug 10 at 6:02pm
You mean like i was working on here: http://digimondynamics.vforums.us/ ? its hard to say for sure since I haven't remade all the graphics yet but i think the idea is about the same as what your looking for.
Re: Border Around Forum - Posted By Michael (wrighty) on 7th Aug 10 at 7:24pm
Scotty, do you have the images?

If so, this can be done through the templating system & footers. {Smile}