Создание рамки вокруг форума без использования табличной верстки

Все версии Invision Power Board

Рамка вокруг форума на css и div

Простейший вариант, только на css

Получите двойной контур. Внутри при желании можно задать особый цвет фона, отличный от цвета фона body.

схематическое изображение.

Ваш скин > редактирование css (расширенный режим)

Найти
#ipbwrapper{
margin: 20px auto 20px auto; /* centers the box, no matter the overall width, also applies a 20px gap at the top and bottom of the board */
text-align: left; /* re_aligns text to left second part of two part MSIE centering workaround */
/* EDIT THIS TO CHANGE THE WIDTH OF THE BOARD -> 960px is a common fixed resolution size */
width: 98%;
}
Заменить на

#ipbwrapper{
margin: 20px* auto 20px* auto; /* centers the box, no matter the overall width, also applies a 20px gap at the top and bottom of the board */
text-align: left; /* re_aligns text to left second part of two part MSIE centering workaround */
/* EDIT THIS TO CHANGE THE WIDTH OF THE BOARD -> 960px is a common fixed resolution size */
width: 98%; border:3px double #желаемый цвет; background: #желаемый цвет; padding:5px; }
* при необходимости можно уменьшить значение margin, например с 20 до 10.

Верстка рамки на div с добавлением новых классов css и использованием графики

Получите рамку с округлыми уголками или уголками любой желаемой формы.

схематическое изображение.

• Создаем 4 уголка для рамки    с названиями top_left .png; top_right.png; bottom_left.png; bottom_right.png. Не забываем положить их в папку графики скина. Картинки, соданные для примера, расчитаны на белый фон body, а внутренний фон будет голубым.
• Ваш скин > редактирование css (расширенный режим)

  Найти
  #ipbwrapper{
margin: 20px auto 20px auto; /* centers the box, no matter the overall width, also applies a 20px gap at the top and bottom of the board */
text-align: left; /* re_aligns text to left second part of two part MSIE centering workaround */
/* EDIT THIS TO CHANGE THE WIDTH OF THE BOARD -> 960px is a common fixed resolution size */
width: 98%;
}
  Заменить на

  #ipbwrapper{
margin: 20px auto 20px auto;

  width: 98%;

  background: #e6f0ff;
  }

  div.top-left{

  background-image: url(style_images/<#IMG_DIR#>/top_left.png);

  background-repeat: no-repeat;

  background-position: top left;

  height: 13px;

  }

  div.top-right{

  background-image: url(style_images/<#IMG_DIR#>/top_right.png);

  background-repeat: no-repeat;

  background-position: top right;

  height: 13px;

  }

  div.bottom-left{

  background-image: url(style_images/<#IMG_DIR#>/bottom_left.png);

  background-repeat: no-repeat;

  background-position: bottom left;

  height: 13px;

  }

  div.bottom-right{

  background-image: url(style_images/<#IMG_DIR#>/bottom_right.png);

  background-repeat: no-repeat;

  background-position: bottom right;

  height: 13px;

  }
  #ipbwrapper1{
  margin: 0px auto 0px auto;

  width: 98%;

  padding:5px;

  }

  Не забудьте выставить свое значение высоты картинок, если оно отлично от 13px.

• Ваш скин > общий шаблон форума (Editing the Board Header and Footer Wrapper)

  Найти

  <div id="ipbwrapper">

  Ниже добавить

  <div class="top-left"><div class="top-right"></div></div>

  В самом низу найти

  </div>
  Выше добавить

  </div>
<div class="bottom-left"><div class="bottom-right"></div></div>