For Floris or Jake

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • MRGTB
    Senior Member
    • May 2005
    • 5454

    For Floris or Jake

    I have used your guide here Jake to add a Right Side Column:
    How do I add a left column to my forums? NOTE: There is a lot of tweaking involved in modifying your layout like this. This code is just an example, minus the tweaking. I recommend you post on www.vbulletintemplates.com for help with the tweaking aspect of editing your layout. edit - changed to cellpadding="0",


    But I need two answers to 2 questions to get it how I want it to look, Which is best explained in the image I've attached below. Please take a look at it.

    1: I want to make the white space bewteen the righ blocks and the space on the right side of the forum the same space were it shows the white background.

    2: I want the blocks on the left side line up flush with the header so it looks much neater.

    Here is my code from header and footer:

    Header:
    Code:
    [COLOR=red]<!-- /logo -->[/COLOR]
    <table width="$stylevar[outertablewidth]" border="0" cellpadding="0" cellspacing="0" align="center">
     <tr>
     <td width="250" valign="top" class="page" style="padding: $stylevar[cellpadding]px;">
     
    <!-- Left Side One Start -->
    <table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
    <tr>
    <td class="tcat"><a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_left_side_one')">
            <img id="collapseimg_forumhome_left_side_one" src="$stylevar[imgdir_button]/collapse_tcat$vbcollapse[collapseimg_forumhome_left_side_one].gif" alt="" border="0" /></a>
    <!-- Title Start -->
    Left Side One
    <!-- Title End -->
    </td>
    </tr>
    <tbody id="collapseobj_forumhome_left_side_one" style="$vbcollapse[collapseobj_forumhome_left_side_one]">
    <tr>
    <td class="alt1">
    <!-- Text Start -->
    Custom Left Side Panel One
    Custom Left Side Panel One
    Custom Left Side Panel One
    <!-- Text End -->
    </td>
    </tr>
    </table>
    <!-- Left Side One End -->
     
     </td>
     <td valign="top">
    [COLOR=red]<!-- content table -->[/COLOR]
    [COLOR=black][/COLOR]


    Footer:

    Code:
    [COLOR=red]<!-- /content area table -->[/COLOR]
     </td>
     </tr>
    </table>
    [COLOR=red]<form action="$vboptions[forumhome].php" method="get">[/COLOR]
    Last edited by MRGTB; Wed 8 Feb '06, 1:54pm.
  • MRGTB
    Senior Member
    • May 2005
    • 5454

    #2
    I've just spotted another problem using this HOW TO DO.

    If your left blocks go futher down the page than the forum content expanding it further. You finish up with a Grey area like this image shows on the forum or anyother page in the middle.

    Image attached
    Last edited by MRGTB; Wed 8 Feb '06, 2:17pm.

    Comment

    • MRGTB
      Senior Member
      • May 2005
      • 5454

      #3
      I've solved the background colour problem and the hight problem. Just need help with the left margin width on the tables I used. now, thats all.

      Comment

      • Jose Amaral Rego
        Senior Member
        • Feb 2005
        • 11058
        • 1.1.x

        #4
        Post the solution to alignment / flush? other have ask about this for a long time . I gave up on trying within 3 months after I purchase vBulletin. The spacing between many forum and those newly create tables should be in your StyleVars.

        Comment

        • MRGTB
          Senior Member
          • May 2005
          • 5454

          #5
          Here is what I did to make my first top block align correctly with the header at the top.

          I added the red code to my first block: It can be removed in all the other blocks below the top one.

          Code:
          <!-- Custom Code 1 Start -->
          <table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" [COLOR=red]style="margin-top:10px[/COLOR]" align="center">
          <tr>
          <td class="tcat"><a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('custom_code_1')">
                  <img id="collapseimg_custom_code_1" src="$stylevar[imgdir_button]/collapse_tcat$vbcollapse[collapseimg_custom_code_1].gif" alt="" border="0" /></a>
          <!-- Title Start -->
          [B]CUSTOM TITLE[/B]
          <!-- Title End -->
          </td>
          </tr>
          <tbody id="collapseobj_custom_code_1" style="$vbcollapse[collapseobj_custom_code_1]">
          <tr>
          <td class="alt1">
          <!-- Text Start -->
          [B]CUSTOM TEXT[/B]
          <!-- Text End -->
          </td>
          </tr>
          </table>
          <!-- Custom Code 1 End -->
          Last edited by MRGTB; Thu 9 Feb '06, 9:36am.

          Comment

          • MRGTB
            Senior Member
            • May 2005
            • 5454

            #6
            And to fix the background colour when your left blocks go to far down on certain pages I added this to the code in red that you add in the header for adding right blocks

            Code:
            <table width="$stylevar[outertablewidth]" [COLOR=red]body bgcolor="white"[/COLOR] cellpadding="0" cellspacing="0" align="center">
             <tr>
            <td>
             <td width="200" valign="top" class="page" style="padding: $stylevar[cellpadding]px;">

            Comment

            • MRGTB
              Senior Member
              • May 2005
              • 5454

              #7
              But I still have not figured out what I need to add to make the left white page background give me a gap the same width as the right side

              Comment

              • Jose Amaral Rego
                Senior Member
                • Feb 2005
                • 11058
                • 1.1.x

                #8
                Just did a visual on your site? I did not have trouble having proper spacing, but I will test what I did in DEMO forum here and see if I can produce the the correction for that you are having trouble with.

                Spider #3 is going to have The Lizard Man. and might see the creation of Rino & Scropian.

                Comment

                • Jose Amaral Rego
                  Senior Member
                  • Feb 2005
                  • 11058
                  • 1.1.x

                  #9
                  *EDIT* It seems to work properly in Fire Fox as a bonus.

                  I was playing with it and found two ways so far.
                  You can add to <td> or play with cellspacing="0"
                  The image below is using extra info within <td> tags, you can adjust pixel(px) padding to your liking. I hope this works on your end.




                  Code:
                  <!-- /logo -->
                  <table width="$stylevar[outertablewidth]" border="0" [COLOR="Red"]class="page"[/COLOR] cellpadding="0" [COLOR="red"]cellspacing="0"[/COLOR] align="center">
                   <tr>
                   <td [COLOR="Red"]style="padding:6px 0px 0px 0px"[/COLOR] width="250" valign="top" class="page" style="padding: $stylevar[cellpadding]px;">
                   
                  <!-- Left Side One Start -->
                  <table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
                  <tr>
                  <td class="tcat"><a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_left_side_one')">
                          <img id="collapseimg_forumhome_left_side_one" src="$stylevar[imgdir_button]/collapse_tcat$vbcollapse[collapseimg_forumhome_left_side_one].gif" alt="" border="0" /></a>
                  <!-- Title Start -->
                  Left Side One
                  <!-- Title End -->
                  </td>
                  </tr>
                  <tbody id="collapseobj_forumhome_left_side_one" style="$vbcollapse[collapseobj_forumhome_left_side_one]">
                  <tr>
                  <td class="alt1">
                  <!-- Text Start -->
                  Custom Left Side Panel One
                  Custom Left Side Panel One
                  Custom Left Side Panel One
                  <!-- Text End -->
                  </td>
                  </tr>
                  </table>
                  <!-- Left Side One End -->
                   
                   </td>
                   <td valign="top">
                  <!-- content table -->
                  For temporary preview login



                  Username : Demo9d47
                  Password : 079fc882
                  Last edited by Jose Amaral Rego; Fri 24 Aug '07, 9:27pm.

                  Comment

                  • MRGTB
                    Senior Member
                    • May 2005
                    • 5454

                    #10
                    thanks, I'll try that in the code and then test it to see what effect is has

                    Comment

                    • Jose Amaral Rego
                      Senior Member
                      • Feb 2005
                      • 11058
                      • 1.1.x

                      #11
                      Jake Bunce should add this to his 'How Do I Add Right-Left Column' now or after everything works. I been trying to figure it out a year ago when I first had vbulletin and nobody seem to get the right coding for top align? I knew about the sides and all, but top always though me off.

                      Comment

                      • MRGTB
                        Senior Member
                        • May 2005
                        • 5454

                        #12
                        I'm not to sure if you understand what I want to do. If you look at my site. You'll see on the far right of my forum there is quite a large gap were the forum width ends and the white page background shows.

                        But if you look on the left side were the blocks start, there is only a very narrow margin between the white background and were the blocks start.

                        What I want to get is the same size margin on the left as the right were the white background shows before the left blocks start.

                        Basicly the same size margin on the left, as on the right

                        Comment

                        • MRGTB
                          Senior Member
                          • May 2005
                          • 5454

                          #13
                          Here are two images to show what I mean by margin

                          Comment

                          • Jose Amaral Rego
                            Senior Member
                            • Feb 2005
                            • 11058
                            • 1.1.x

                            #14
                            That is what the red style="padding:6px 0px 0px 0px" code is for, you need to play with changing the increment as I do not know what you set your StyleVars padding at.

                            1. top spacing px
                            2. Right spacing px
                            3. Bottom spacing px
                            4. Left spacing px


                            Goto Demo site and see what I have done!

                            Comment

                            • MRGTB
                              Senior Member
                              • May 2005
                              • 5454

                              #15
                              so why is the first number set to "6" in your code, should that not be "0" seeing as I only want to ajust the left spacing

                              Comment

                              widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                              Working...