1. Рады видеть Вас на XenforoTest!

    У нас Вы можете скачать:

    Перед регистрацией рекомендую ознакомиться

    с Условиями скачивания определённых плагинов и Правилами форума.

    Присоединяйтесь! Учите и обучайтесь!

    Скрыть объявление

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

Красивые объявления с фоновым изображением.

  1. SOUL
    8.gif

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

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

    Нам потребуется 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;
    }
    /* Конец стилей объявлений */
    Вот и всё. :) Изображения, используемые на этом форуме, на всякий случай загружаю в ресурс.

    За этот замечательный подарок, на который все обращают внимание, огромное спасибо, Skaiman'у! Girl In_Love333
    Виталий, baglaev, xsacha и 3 другим нравится это.
Rambler's Top100 Яндекс.Метрика INTERKASSA
XenforoTest.ru