Мануал [SVG] Красивые объявления с фоновым изображением. 2015-09-23

Нет прав для скачивания
Красивые объявления с фоновым изображением.
8.gif


Сейчас я расскажу, как сделать такую красоту, то есть несколько объявлений с фоновым изображением и красивым оформлением.

Уже неоднократно поступали вопросы, как сделать что-то подобное, поэтому решила не тянуть и выложить здесь мануал-подарок нашему форуму от

Пожалуйста, Войдите или Зарегистрируйтесь, что бы увидеть скрытый контент.

.

Нам потребуется 2 png изображения 600x140px одно с именем xft_fon, другое xft_fon_2, которые будут выступать в роли наших фоновых изображений для первого и второго объявления соответственно.

Теперь заходим
Код:
http://адрес_форума/admin.php?notices
И создаём 2 объявления.

Буду в примере использовать текст объявлений, используемых на XenforoTest.ru, а вы исправите текст, как вам нужно.

В поле "Сообщение" первого объявления добавляем этот код:

Код:
<div class="notice_xft">
<h3>Рады видеть Вас на XenforoTest!</h3>
<p>У нас Вы можете скачать:</p>
<ul>
<li><a class="Tooltip" title="Релизы" target="_blank"  href="/forums/relizy.11/">Релизы XenForo</a>;</li>
<li><a class="Tooltip" title="Плагины" target="_blank"  href="/resources/categories/poleznye-plaginy-dlja-xenforo.2/">Полезные плагины</a>;</li>
<li><a class="Tooltip" title="Стили" target="_blank"  href="/resources/categories/stili-dlja-xenforo.3/">Лучшие стили</a>;</li>
<li>Найти много всего интересного</li>
</ul>
<p>Перед регистрацией рекомендую ознакомиться</p>
<p>с<a class="Tooltip" title="Условия скачивания" target="_blank"  href="/pages/increase/"> Условиями скачивания определённых плагинов</a> и <a class="Tooltip" title="Правила форума" target="_blank" href="/pages/specification/">Правилами форума</a>.</p>
<h4>Присоединяйтесь! Учите и обучайтесь!</h4>
</div>
В поле "Сообщение" второго объявления добавляем этот код:
Код:
<div class="notice_xft_2">
<h3>Новая группа на нашем форуме!</h3>
<p>Создана новая группа тестеров-экспериментаторов $xenOptions.Tester!</p>
<p>Приглашаем всех желающих к участию</p>
<h4>Вступайте! Экспериментируйте и создавайте!</h4>
<h4><span>Новые плагины и модификации, стили и графику, в мире xenForo!</span></h4>
<a class="callToAction Tooltip" title="$xenOptions.Tester" target="_blank" href="/threads/sozdana-novaja-gruppa-xenoptions-tester.295/"><span>Перейти в тему обсуждения</span></a>
</div>
Далее открываем шаблон EXTRA.css и добавляем следующий код:
Код:
/* Первое объявление */
.Responsive .notice_2 .notice_xft {
    line-height: 1;
    background: url(img/xft_fon.png) no-repeat right;
    padding-left: 10px;
}
.Responsive .notice_2 .notice_xft h3 {
    color: rgb(0, 96, 153);
}
.Responsive .notice_2 .notice_xft h4 {
    color: rgb(136, 46, 46);
}
.Responsive .notice_2 .notice_xft ul {
    padding-left: 30px;
}
.Responsive .notice_2 .notice_xft p,
.Responsive .notice_2 .notice_xft li {
    font-size: 13px;
}
.Responsive .notice_2 .notice_xft h3,
.Responsive .notice_2 .notice_xft h4,
.Responsive .notice_2 .notice_xft p,
.Responsive .notice_2 .notice_xft ul {
    margin: 3px 0;
}

/* Второе объявление */
.Responsive .notice_3 .notice_xft_2 {
    line-height: 1;
    background: url(img/xft_fon_2.png) no-repeat right;
    padding-left: 10px;
}
.Responsive .notice_3 .notice_xft_2 h3 {
    color: rgb(0, 96, 153);
}
.Responsive .notice_3 .notice_xft_2 h4 {
    color: rgb(136, 46, 46);
}
.Responsive .notice_3 .notice_xft_2 p {
    font-size: 13px;
}
.Responsive .notice_3 .notice_xft_2 a {
    margin-top: 10px;
}
.Responsive .notice_3 .notice_xft_2 h3,
.Responsive .notice_3 .notice_xft_2 h4,
.Responsive .notice_3 .notice_xft_2 p {
    margin: 5px 0;
}
.Responsive .notice_3 .notice_xft_2 h4 span {
    font-size: 14px;
    font-style: italic;
}
/* Конец стилей объявлений */
Вот и всё. :) Изображения, используемые на этом форуме, на всякий случай загружаю в ресурс.

За этот замечательный подарок, на который все обращают внимание, огромное спасибо,

Пожалуйста, Войдите или Зарегистрируйтесь, что бы увидеть скрытый контент.

! Girl In_Love333
Автор
SOUL
Скачиваний
55
Первый выпуск
Обновление
Рейтинг
0,00 звезд Оценок: 0

Еще ресурсы от SOUL

Поделиться этим ресурсом