Welcome Guest [Log In] [Register]
We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
Fixed Width Board
Topic Started: May 21 2004, 11:35 PM (21,460 Views)
Mercury
Member Avatar
Member
 *   *   *   *   *   *   *   *  
Having a fixed width allows your board to have a consistent look across monitors with different resolutions. This is desirable when certain images (such as your banner or category headers) look best at one specific width.

To have a fixed width, you will have to make the following modifications to your Board Wrapper and your Style Sheet:

  • Go to your Board Wrappers (in AdminCP under the Skinning and Styles section) and locate the Header and Body section
  • Look for the <% BOARD HEADER %> tag
  • Right above it, add the code in red below
Quote:
 
...
<div id='board'>
<% BOARD HEADER %>
...



  • Scroll down to the Footer section and include the following red code to the top of that box

Quote:
 
</div>


  • Click on the Edit Wrapper button to save the changes



  • Go to Manage Style Sheets (in the same section from the menu on the left of AdminCP)

  • Locate the word BODY within the text box (it may appear in all capital or lowercase lettering)

  • Add the following code in red between the curly braces (preferably right after the opening one — yours may not look exactly the same)

Quote:
 
BODY { text-align: center; color: #000; margin: 0px; padding: 0px; background-color: #FFF; }



  • Add the following code to your style sheet, changing the part in red to your desired width in pixels
    Please note that the minimum board width will be limited by the size of the Ads on your board (which at the time of this writing is 728 pixels wide). If you do not know what pixels are, please take a look at the topic on pixel sizes

Quote:
 
#board, #ipbwrapper { width: 728px; text-align: left; margin-left:auto; margin-right:auto; }

  • Click on the Edit CSS button to save the changes
Please take a look at the Documentation on changing the page margins if you wish to have a part of the background shown on either side of your board.
Edited by RyanF, May 19 2008, 05:56 AM.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Skinning Documentation · Next Topic »
Add Reply