Тема: Alert Box (Оформление предупреждений)
Показать сообщение отдельно
Старый 29.04.2009, 13:07 Вверх   #1
Коварный тип
 
Аватар для Serberg
Serberg вне форума
Доп. информация
Хорошо Alert Box (Оформление предупреждений)
Alert Box (Оформление предупреждений)


  • Скачиваем вложение и заливаем в папку /images/misc/
  • Идем в Админку -> Дополнительные BB коды -> Добавить BB коды:

Бокс информации:
Нажми для просмотра
Заголовок: Information
Название BB кода: Information
Замена:

Код:
<style>
.information-box
{
	color: #000;
	border: 1px solid #000;
	-moz-border-radius: 5px;
	background-color: #FCF8C7;
	padding: 6px;
	text-align:left;
}

.warning-box img,
.information-box img
{
	float:left;
	margin-top: 10px;
	margin-right: 5px;
	vertical-align:middle;
	border: 0px;
}

.warning-box h2,
.warning-box p,
.information-box h2,
.information-box p
{
	padding: 0px;
	margin:  0px;
	margin-left: 60px;
}

.warning-box h2,
.information-box h2
{
	padding-bottom: 4px;
	font-size: 14px;
	border-bottom: 1px solid #000;
}

.warning-box h1,
.information-box h1
{
	padding: 0px;
	margin:  0px;
	margin-left: 60px;
	font-size: 12px;
        font-weight:normal;
}

.warning-box h6,
.information-box h6
{

	margin:  20px;
	padding: 0px;
	margin-left: 60px;
	font-size: 12px;
        font-weight:normal;
}

.warning-box
{
	background-color: #FFCCCC;
}

.warning-box ul
{
	margin-left: 30px;
}
.codemain {
	BORDER-RIGHT: #000 1px dotted; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px dotted; PADDING-LEFT: 2px; BACKGROUND: #fafcfe; PADDING-BOTTOM: 2px; MARGIN: 0px auto; BORDER-LEFT: #000 1px dotted; COLOR: #465584; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px dotted; FONT-FAMILY: Courier, Courier New, Verdana, Arial
</style>


<div class='information-box'>
 <img src='./images/misc/information.gif' alt='information' />
 <h2><strong>Информация</strong></h2>
<h1><font color="#000000">{param}</font></h1>
<br><br>
</div>
Пример: [info]Так будет выглядеть информация с использованием этого BB кода[/info]
Описание: Используется для выделения полезной и важной информации.
Изображение кнопки: ./images/misc/bbc_info.gif


Бокс Уведомление
Нажми для просмотра
Заголовок: Notice
Название BB кода: Notice
Замена:

Код:
<style>
.information-box
{
	color: #000;
	border: 1px solid #000;
	-moz-border-radius: 5px;
	background-color: #FCF8C7;
	padding: 6px;
	text-align:left;
}

.warning-box img,
.information-box img
{
	float:left;
	margin-top: 10px;
	margin-right: 5px;
	vertical-align:middle;
	border: 0px;
}

.warning-box h2,
.warning-box p,
.information-box h2,
.information-box p
{
	padding: 0px;
	margin:  0px;
	margin-left: 60px;
}

.warning-box h2,
.information-box h2
{
	padding-bottom: 4px;
	font-size: 14px;
	border-bottom: 1px solid #000;
}

.warning-box h1,
.information-box h1
{
	padding: 0px;
	margin:  0px;
	margin-left: 60px;
	font-size: 12px;
        font-weight:normal;
}

.warning-box h6,
.information-box h6
{

	margin:  20px;
	padding: 0px;
	margin-left: 60px;
	font-size: 12px;
        font-weight:normal;
}

.warning-box
{
	background-color: #FFCCCC;
}

.warning-box ul
{
	margin-left: 30px;
}
.codemain {
	BORDER-RIGHT: #000 1px dotted; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px dotted; PADDING-LEFT: 2px; BACKGROUND: #fafcfe; PADDING-BOTTOM: 2px; MARGIN: 0px auto; BORDER-LEFT: #000 1px dotted; COLOR: #465584; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px dotted; FONT-FAMILY: Courier, Courier New, Verdana, Arial
</style>


<div class='information-box'>
 <img src='./images/misc/notice.gif' alt='information' />
 <h2><strong>Уведомление</strong></h2>
<h1><font color="#000000">{param}</font></h1>
<br><br>
</div>
Пример: [notice]Так будет выглядеть уведомление[/notice]
Описание: Используется для важных уведомлений.
Изображение кнопки: ./images/misc/bbc_notice.gif


Бокс Предупреждение
Нажми для просмотра
Заголовок: Warning
Название BB кода: Warning
Замена:
Код:
<style>
.warning-box,
.information-box
{
	color: #000;
	border: 1px solid #000;
	-moz-border-radius: 5px;
	background-color: #FCF8C7;
	padding: 6px;
	text-align:left;
}

.warning-box img,
.information-box img
{
	float:left;
	margin-top: 10px;
	margin-right: 5px;
	vertical-align:middle;
	border: 0px;
}

.warning-box h2,
.warning-box p,
.information-box h2,
.information-box p
{
	padding: 0px;
	margin:  0px;
	margin-left: 60px;
}

.warning-box h2,
.information-box h2
{
	padding-bottom: 4px;
	font-size: 14px;
	border-bottom: 1px solid #000;
}

.warning-box h1,
.information-box h1
{
	padding: 0px;
	margin:  0px;
	margin-left: 60px;
	font-size: 12px;
        font-weight:normal;
}

.warning-box h6,
.information-box h6
{

	margin:  20px;
	padding: 0px;
	margin-left: 60px;
	font-size: 12px;
        font-weight:normal;
}

.warning-box
{
	background-color: #FFCCCC;
}

.warning-box ul
{
	margin-left: 30px;
}
</style>


<div class='warning-box'>
<img src='./images/misc/warning.gif' alt='warning' />
<h2><strong>Предупреждение</strong></h2>
<h1><font color="#000000">{param}</font></h1>
<br><br>
</div>
Пример: [notice]Так будет выглядеть предупреждающее сообщение[/notice]
Описание: Используется для предупреждений.
Изображение кнопки: ./images/misc/bbc_warning.gif


Бокс Внимание
Нажми для просмотра
Заголовок: Attention
Название BB кода: Attention
Замена:
Код:
<style>
.information-box
{
	color: #000;
	border: 1px solid #000;
	-moz-border-radius: 5px;
	background-color: #FCF8C7;
	padding: 6px;
	text-align:left;
}

.warning-box img,
.information-box img
{
	float:left;
	margin-top: 10px;
	margin-right: 5px;
	vertical-align:middle;
	border: 0px;
}

.warning-box h2,
.warning-box p,
.information-box h2,
.information-box p
{
	padding: 0px;
	margin:  0px;
	margin-left: 60px;
}

.warning-box h2,
.information-box h2
{
	padding-bottom: 4px;
	font-size: 14px;
	border-bottom: 1px solid #000;
}

.warning-box h1,
.information-box h1
{
	padding: 0px;
	margin:  0px;
	margin-left: 60px;
	font-size: 12px;
        font-weight:normal;
}

.warning-box h6,
.information-box h6
{

	margin:  20px;
	padding: 0px;
	margin-left: 60px;
	font-size: 12px;
        font-weight:normal;
}

.warning-box
{
	background-color: #FFCCCC;
}

.warning-box ul
{
	margin-left: 30px;
}
.codemain {
	BORDER-RIGHT: #000 1px dotted; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px dotted; PADDING-LEFT: 2px; BACKGROUND: #fafcfe; PADDING-BOTTOM: 2px; MARGIN: 0px auto; BORDER-LEFT: #000 1px dotted; COLOR: #465584; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px dotted; FONT-FAMILY: Courier, Courier New, Verdana, Arial
</style>


<div class='information-box'>
 <img src='./images/misc/attention.gif' alt='information' />
 <h2><strong>Внимание</strong></h2>
<h1><font color="#000000">{param}</font></h1>
<br><br>
</div>
Пример: [notice]Внимание! Внимание![/notice]
Описание: Используется для различных объявлений и т.п..
Изображение кнопки: ./images/misc/bbc_attention.gif


Бокс Help
Нажми для просмотра
Заголовок: Help
Название BB кода: Help
Замена:
Код:
<style>
.help-box,
.information-box
{
	color: #000;
	border: 1px solid #000;
	-moz-border-radius: 5px;
	background-color: #d5eeb6;
	padding: 6px;
	text-align:left;
}

.help-box img,
.information-box img
{
	float:left;
	margin-top: 10px;
	margin-right: 5px;
	vertical-align:middle;
	border: 0px;
}

.help-box h2,
.help-box p,
.information-box h2,
.information-box p
{
	padding: 0px;
	margin:  0px;
	margin-left: 60px;
}

.help-box h2,
.information-box h2
{
	padding-bottom: 4px;
	font-size: 14px;
	border-bottom: 1px solid #000;
}

.help-box h1,
.information-box h1
{
	padding: 0px;
	margin:  0px;
	margin-left: 60px;
	font-size: 12px;
        font-weight:normal;
}

.help-box h6,
.information-box h6
{

	margin:  20px;
	padding: 0px;
	margin-left: 60px;
	font-size: 12px;
        font-weight:normal;
}

.help-box
{
	background-color: #d5eeb6;
}

.help-box ul
{
	margin-left: 30px;
}
</style>


<div class='help-box'>
<img src='./images/misc/help.gif' alt='warning' />
<h2><strong>Help</strong></h2>
<h1><font color="#000000">{param}</font></h1>
<br><br>
</div>
Пример: [notice]Помогите пожалуйста![/notice]
Описание: Используется для сообщений о помощи
Изображение кнопки: ./images/misc/bbc_help.gif




Пример работы одного из боксов:

information

Внимание


Вот пример работы бокса Внимание!






ps
Для добавления иконки использования кодов нужно открыть соответствующий шаблон куда к примеру хотите ставить и среди прочих иконок воткнуть код:

Код:
<td><div class="imagebutton" id="{$editorid}_cmd_wrap0_attention"><img src="$stylevar[imgdir_editor]/bbc_attention.gif" width="21" height="20" alt="Сделать текст важным" /></div></td>
Этот код относиться к ББкоду Бокс Внимание. Я думаю там разберетесь по примеру как оно вставляется.
Вложения
Тип файла: rar Alert box.rar (29.4 Кб, 128 просмотров)
Последний раз редактировалось Serberg; 09.02.2010 в 11:17..
  Ответить с цитированием
11 пользователя(ей) сказали cпасибо:
 
Время генерации страницы 0.22543 секунды с 10 запросами