Рамка вокруг форума на 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>

 Печать статьи     Добавить коментарий