Custom layout coding questions. Example Attached

[sicSRT8]

I have some things i am trying to get clarified for my VB...

I made an example of what im trying to get done.

1. I am trying to make it so that the login box appears in top right over the image background header. I get this to work after replicating the code in the example but not sure if I have to change Javascript or if im placing my code in the wrong place. Will i need to edit and php files to make this happen?

I want to be able to login and still have my screen name and user cp, and posts links appear in this box once logged in.

2. I am trying to also replicate the table box with rounded corner images and bars. however again im not excatly sure where the code is supposed to be to appear for all tables. There is an image for each corner and an image for the bar going across. I can figure out how to place the corner images th bars are the easy part.

3. the girl image is actually a splice image and apears for each table. Obviously this is my example as Im piecing aspects of other forums together to get what i what with my design.
Im not new to coding but the whole vb editing and such is somewhat new but have done many updates and the like.

I can see the code on the example forums and tried figuring out where its placed but see foggy on how exactly and where its placed knowing that php with throw you off in view source.

Any help on these would be much appreciated and already have images I just dont know where to put code specifically in template css to make these things happen.

[napy8gen]

You can take out the login code from navbar template and place it in your desired place in your html layout.
style manager> style name> edit template>navbar & breadcrumb templates> navbar>

the category is using category spacing hack which you must first implement in 2 location in forumhome templates.Follow the mods here:
https://vborg.vbsupport.ru/showthread.php?t=204013

[sicSRT8]

In the attached image I am trying to get what I think is referred to as fluid design. From the posts I was reading thru it seems to be located in the Posbit Legacy area. When I look at a site that I am using as an example i can see this code for the area I am describing.

<table style="background: transparent url(/forums/images/topc2.gif) repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" border="0" cellpadding="0" cellspacing="0" width="100%">
  <tbody><tr>
    <td align="left" valign="top" width="73" height="19"><img src="/forums/images/misc/topc.gif" alt="" border="0" width="73" height="19"></td>
	
     <td align="right" valign="top" height="19"><img title=" " src="/images/catr.gif" alt=" " border="0" width="14" height="19"></td>
  </tr>
</tbody></table>
<table class="tcat" border="0" cellpadding="0" cellspacing="0" width="100%">
  <tbody><tr>
    <td align="left" valign="top" width="92" height="32"><img src="/images/catleft.gif" alt="" border="0" width="73" height="32"></td>
    <td class="tcat" align="left" valign="middle" width="100%">

That covers the category rounded edges and center stretch image. When I look at posbit I am not exactly sure where I should or how to edit this to work for all categories properly. Can you point me in the right direction or help me with it? To be more clear its the 3 images that make up the cheerleader bar area.

[sicSRT8]

anyone?

[reas0n]

sorry i dont have an answer for you but im also having an issue in this area where do i put that code you posted?

[sicSRT8]

You need to do the spacing mod first scroll up to Napy's post do those first then you enter the code in the templates section. I am posting a full guide on how once i get it figured out. I am having some gapping issues but once i resolve ill post the guide for everyone since there really isnt a full explanation to it.

[reas0n]

i know your gunna post a guide but in which templates section do i post that code?

[sicSRT8]

What your asking for is here: Style Manager/edit templates/forum display templates/forumhome_forumbit_level1_nopost

Thats where I am editing mine. However it doesn't replace category topic image bar but just pushes it down. (Unless im coding this wrong)

Here is an example of what I am trying to recreate is http://www.chefclub.net I have the spacing down and working on the login area but cant for the life of me get the rounded look to my categories. I have the same number of images and trying to duplicate code to work for me but still having no luck.

Surely someone knows how to do this on this site. Where ever you are please help...

[reas0n]

i got a code working on my forum only problem is, is the code i "borrowed" has html elements in it so i cant get MY forum stuff(category titles, last post, etc. etc.) to show up it only shows what i borrowed from the other page... which is making me kinda mad


this is the code i used if you want to take a look at it maybe you can figure out whats going on so the right scripts can be called up i put this in the FORUMHOME template

<!-- main -->
<!-- Categoty Top -->
<table border="0" cellpadding="0" cellspacing="0"  width="100%"  align="center">
  <tr>
    <td width="21" height="31" align="left" valign="top" style="background-image: url(images/IStv/cat/top_bg.png)"><img border="0" src="images/IStv/cat/top_left.png" width="21" height="31" alt="" /></td>
    <td  height="31" width="60%" align="left" valign="bottom" style="background-image: url(images/IStv/cat/top_bg.png)"><div class="category_title"><a href="forumdisplay.php?f=1"><b>Main Category</b></a>    </div></td>
    <td width="19" align="left" valign="middle"><img src="images/IStv/cat/top_end.png" alt="" width="19" height="31" border="0" /></td>
    <td  align="right" valign="top" style="background-image: url(images/IStv/cat/top_center.png)"><a style="float:right; padding-top: 9px;" href="#top" onclick="return toggle_collapse('forumbit_1')"><img id="collapseimg_forumbit_1" src="images/IStv/cat/collapse_tcat.gif" alt="" border="0" /></a></td>
    <td width="14" height="31" align="right" valign="top"><img border="0" src="images/IStv/cat/top_right.png" width="14" height="31" alt="" /></td>
  </tr>
</table>
<!-- /Categoty Top -->


<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">


<tbody id="collapseobj_forumbit_1" style="">
<tr align="center">
      <td class="thead">&nbsp;</td>
      <td class="thead" width="100%" align="left">Forum</td>
      <td class="thead">&nbsp;&nbsp;&nbsp;Threads&nbsp;&nbsp;&nbsp;</td>
      <td class="thead">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Posts&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
          </tr>
<tr align="center">
    <td class="alt2"><img src="images/IStv/statusicon/forum_old.gif" alt="" border="0" id="forum_statusicon_2" /></td>
    <td class="alt1Active" align="left" id="f2">
        <div>
        
<a style="float:right; padding-top: 9px;" href="#top" onclick="return toggle_collapse('forumbit_2')"><img id="collapseimg_forumbit_2" src="images/aria/buttons/collapse_lastpost.gif" alt="" border="0" /></a><a style="float:right; padding-top: 9px;" href="showthread.php?p=2139#post2139"><img  src="images/IStv/statusicon/lastpost_home.gif" alt="Go to last post" border="0" /></a>
            <a href="forumdisplay.php?f=2"><strong>Main Forum</strong></a>
            <span class="smallfont">(4 Viewing)</span>
        </div>
        <div class="smallfont">Main Forum Description</div>
        
        
         <div><div class="lastpost_spacer"></div>
<table width="100%"  border="0" cellpadding="4" cellspacing="0"  id="collapseobj_forumbit_2" class="lastpost_border" style=";">
     <tr>
    <td class="lastpost_inner_border"><div class="smallfont" align="left">
    <div style="float:right"> Today - 06:46 PM</div>
<div style="float:left; vertical-align: middle;"><img class="inlineimg" src="images/icons/icon1.gif" alt="" border="0" /> &nbsp;</div>




    
</div></td>
  </tr>
</table></div>
    </td>
<td class="alt1" width="80">1,906</td>
<td class="alt2" width="80">2,044</td>
</tr>




</tbody>
</table>



<!-- Bottom -->
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="12" align="left" valign="top"><img src="images/IStv/cat/blc.png" width="12" height="13" alt="" border="0" /></td>
        <td  width="100%" style="background-image:url(images/IStv/cat/bottom.png)"><img src="images/IStv/cat/clear.gif" width="100%" height="13" alt="" border="0" /></td>
        <td width="12" align="right" valign="top"><img src="images/IStv/cat/brc.png" width="12" height="13" alt="" border="0" /></td>
      </tr>
    </table>
 
  <!-- Bottom -->

<!-- /main -->

the stuff in red is what was inherited from the borrowed code

HERE is what it looks like on my page im assuming theres strings that should be calling in those parameters and not html or text

[sicSRT8]

Here is what I am using to get the Forum info to show up. In the .css addition it contains the <PHP> trigger. So when you use the html code in the template forumhome/... it pulls from the css and the trigger. I am wondering if I should just house the info in the html... You are further along than me so when i get home later this evening Im going to re look at it.

.Your_Name_Top
{
background: #FFFFFF url(/path/to/pic.gif) repeat-x top left;
color: #000000;
font: bold 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}

.Your_Name_Bot
{
background: #FFFFFF url(/path/to/pic.gif) repeat-x top left;
color: #000000;
font: bold 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}

Next:

ACP > Styles and Templates > Style Manager > then click the "<<>>" and scroll down to "Forum Home Templates" > Forumhome_forumbit_level1_nopost.

(Edit the below code to reflect the class name you created and the image names, height, and width.)

At the top of forumhome_forumbit_level1_nopost add:

<code>
<!--Top Table Code-->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="" valign="top" width="" ><img src="/images/leftimage.gif" alt="" width="" height="" /> </td>
<td align="center" class="Your_Name_Top"><a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a>
<td width="" valign="top"><img src="/images/rightimage.gif" alt="" width="" height="" /></td>
</tr>
</table>
<!--/End Top Table Code-->
<code>

Still in forumhome_forumbit_level1_nopost find:

<div style="padding: 0px 0px 0px 0px;"></div> <----Located on the bottom.

Add Lower Table above the <div style:

<!--Lower Table -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="" height=""><img src="/images/leftbotimage.gif" alt="" width="" height="" /></td>
<td align="center" class="Your_Name_Bot">Text can go here or nothing at all.</td>
<td width="" height=""><img src="/images/rightbotimage.gif" alt="" width="" height="" /></td>
</tr>
</table>
<!--/End Lower Tables -->