How to surround your fixed width forum with left and right borders

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • G3MM4
    Senior Member
    • Apr 2004
    • 337
    • 3.7.x

    How to surround your fixed width forum with left and right borders

    This simple effect is quite popular in various professional styles. Not everyone knows how to do it, so this tutorial is for those who wish to learn how to acheive this effect (see screenshot).

    I can't take any credit for this technique because I learned this technique from a professional pre-made style. But I thought it was worth sharing.

    So far I have only got this to work for a fixed width style. I hope to figure out how to do this for a liquid style. So in my test style I am using the width 750 pixels (you, of course, can use any width in pixels, just replace 750 with your own width in pixels). This has only been tested on a clean unmodded style.

    ----------
    1. In the ACP, go to Styles & Templates > Style Manager and pick a style you wish to add this effect to (or create a new style if you need to). Then select the All Style Options from the drop down menu next to your style in the list.
    2. Now you need to set the width of your style if you haven't done so already. Find Main Table Width (pixels or percentage) and enter the width (just the number, do not add px or % after it because that will mess things up) in the text box.
    3. Next, you need to scroll all the way down to the Additional CSS Definitions section. Enter this code in the second text box:

      Code:
      .external_borders {
      border-left: #[COLOR="Red"]123456[/COLOR] [COLOR="Green"]1[/COLOR]px [COLOR="Orange"]solid[/COLOR];
      border-right: #[COLOR="Red"]123456[/COLOR] [COLOR="Green"]1[/COLOR]px [COLOR="Orange"]solid[/COLOR];
      margin-left: auto;
      margin-right: auto;
      width: [COLOR="Blue"]750[/COLOR]px;
      }
    4. Change the code in RED to your own colour. Change the code in BLUE to the width you set in the second step. Change the code in GREEN to the border width you wish to use. Change the code in ORANGE to the border style you wish to use.
    5. Now scroll all the way to the top of the page, and find the Header and Footer sections. You need to add some code to both the header and the footer as follows:
    6. In the Header text box, find this code and add the BLUE code below it.

      Code:
      <!-- logo -->
      <a name="top"></a>
      Code:
      [COLOR="Blue"]<div align="center" class="external_borders">[/COLOR]
    7. In the Footer text box, find this code and add the BLUE code above it.

      Code:
      <script type="text/javascript">
      Code:
      [COLOR="Blue"]</div>[/COLOR]
    8. One last thing to do before finishing. Find the Body section and in the Extra CSS Attributes text box, change this code from:

      Code:
      margin: 5px 10px 10px 10px;
      to this code:

      Code:
      margin: 0px;
    9. Now click on the Save CSS button to save your work. Test it, and if all is well, you're done! If not, then DOUBLE CHECK all the steps, make sure you have followed them to the letter, and make sure you haven't made any mistakes.


    ----------

    Good luck!
    Attached Files
    Last edited by G3MM4; Sat 16 Dec '06, 4:45am.
    Jeez... I can't believe my post count mostly consists of questions! :eek:

Related Topics

Collapse

Working...