Создание рамки вокруг форума без использования табличной верстки
Все версии 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>
