1. Приветствую гостей и пользователей нашего форума! Первый раз вы у нас или же давно участвуете в жизни ресурса, хочу напомнить несколько моментов.

    1) Пользуемся поиском по форуму! Зачастую информация может находиться не по разделу!

    2) Раздел ИНФО-продуктов относительно новый, но имеем уже более 3000 высококлассных материалов (пользуемся сортировкой по прификсам).

    3) И самое важное, КАК КАЧАТЬ БЕЗ ОГРАНИЧЕНИЙ, вся информация находится по этой ссылке КУПИТЬ VIP

    4) Временная акция, получи +5 постов за вступление в нашу группу "Вконтакте" Более подробно ТУТ

    5) Веди активную жизнь на форуме и получай рубли на личный счёт!

    Скрыть объявление
  2. На нашем форуме Null-Prog действует серьёзное правило касательно размещения материалов!

    ДЛЯ РЕЛИЗЁРОВ: категорически запрещается выкладка материалов на файлообменники типа Deposit, letitbit и другие, требующие просмотров рекламы, обрезающие скорость и тд. Нарушителям, первые 2 раза предупреждения, далее БАН. Тему по этому поводу можно посмотреть ТУТ

    Скрыть объявление
  3. В тестовом режиме на нашем форуме открыт онлайн конструктор сайтов. Вы можете попробовать создать свой сайт у НАС, интуитивно понятный интерфейс, переведёт на 95%, быстрый экспорт проекта, от вас только перетаскивать элементы и вставить в них необходимый текст!

    Все вопросы ТУТ

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

  4. Скрыть объявление
  5. Уважаемые форумчане, открывается новый раздел форума, посвящённый ремонту и эксплуатации автомобилей. Просмотреть его можно ТУТ

    Так как раздел новый, информация будет пополнять каждый день. Если есть какие либо замечания по этому разделу, отписываемся в соответствующий раздел форума, либо в личку.

    Напоминаю, сообщения в разделе АВТО не учитываются, общение не ограничено.

    Скрыть объявление
  6. Объявляется набор Модераторов на различные раздел форума, свои заявки можно оставлять в ЭТОМ разделе, перед оставлением заявки рекомендуется ознакомиться с ПРАВИЛАМИ для модераторов.

Красивые префиксы тем с помощью CSS

Тема в разделе "Все версии XenForo", создана пользователем Sam Jack, 7 июн 2015.

  1. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.755
    Симпатии:
    4.750
    untitled(19).png
    Для начала конечно надо создать эти префиксы, здесь я не буду расписывать как это делать!

    Суть:
    Идём сначала в панель управления, далее в во внешний вид, далее ищем шаблон EXTRA.CSS, в нём в самом конце вписываем следующий код:
    Код:
    .greenprefix {
        display: inline-block;
        position:relative;
        padding: .7em;
        padding-left: 2em;
        margin: 0 .5em .5em 0;
        background: #8dc63f;
        color: rgba(255,255,255,.6) !important;
        text-decoration:none;
        font-weight: bold;
    }
    .greenprefix:hover {
        background:#B3CC73;
        color:white;
    }
    .greenprefix:before {
            content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index:1;
        background: -moz-radial-gradient(.6em .6em, circle, #FCFCFF .55em, rgba(255, 255, 255, 0) .6em) -.6em -.6em,
                    -moz-radial-gradient(1em 50%, circle, #FCFCFF .35em, rgba(255,255,255,0) .4em),
                    -moz-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em) !important;
        background: -o-radial-gradient(.6em .6em, circle, #FCFCFF .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
                    -o-radial-gradient(1em 50%, circle, #FCFCFF .35em, rgba(255,255,255,0) .4em),
                    -o-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em) !important;
        background: -ms-radial-gradient(.6em .6em, circle, #FCFCFF .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
                    -ms-radial-gradient(1em 50%, circle, #FCFCFF .35em, rgba(255,255,255,0) .4em),
                    -ms-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em) !important;
        background: -webkit-radial-gradient(.6em .6em, circle, #FCFCFF .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
                    -webkit-radial-gradient(1em 50%, circle, #FCFCFF .35em, rgba(255,255,255,0) .4em),
                    -webkit-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em) !important;
    }
    .greenprefix:after {
        content: '';
        position:absolute;
        top:.25em;
        right:.25em;
        bottom:.25em;
        left:.25em;
        border: 1px rgba(0,0,0,.3) dashed;
        outline: 1px rgba(255,255,255,.5) dashed;
    }
    .redprefix {
        display: inline-block;
        position:relative;
        padding: .7em;
        padding-left: 2em;
        margin: 0 .5em .5em 0;
        background: #b30;
        color: rgba(255,255,255,.6) !important;
        text-decoration:none;
        font-weight: bold;
    }
    .redprefix:hover {
        background:#B3CC73;
        color:white;
    }
    .redprefix:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index:1;
        background: -moz-radial-gradient(.6em .6em, circle, #FCFCFF .55em, rgba(255, 255, 255, 0) .6em) -.6em -.6em,
                    -moz-radial-gradient(1em 50%, circle, #FCFCFF .35em, rgba(255,255,255,0) .4em),
                    -moz-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em) !important;
        background: -o-radial-gradient(.6em .6em, circle, #FCFCFF .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
                    -o-radial-gradient(1em 50%, circle, #FCFCFF .35em, rgba(255,255,255,0) .4em),
                    -o-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em) !important;
        background: -ms-radial-gradient(.6em .6em, circle, #FCFCFF .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
                    -ms-radial-gradient(1em 50%, circle, #FCFCFF .35em, rgba(255,255,255,0) .4em),
                    -ms-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em) !important;
        background: -webkit-radial-gradient(.6em .6em, circle, #FCFCFF .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
                    -webkit-radial-gradient(1em 50%, circle, #FCFCFF .35em, rgba(255,255,255,0) .4em),
                    -webkit-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em) !important;
    }
    .redprefix:after {
        content: '';
        position:absolute;
        top:.25em;
        right:.25em;
        bottom:.25em;
        left:.25em;
        border: 1px rgba(0,0,0,.3) dashed;
        outline: 1px rgba(255,255,255,.5) dashed;
    }
    .brownprefix {
        display: inline-block;
        position:relative;
        padding: .7em;
        padding-left: 2em;
        margin: 0 .5em .5em 0;
        background: #564C41;
        color: rgba(255,255,255,.6) !important;
        text-decoration:none;
        font-weight: bold;
    }
    .brownprefix:hover {
        background: #B3CC73;
        color:white;
    }
    .brownprefix :before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index:1;
        background: -moz-radial-gradient(.6em .6em, circle, #FCFCFF .55em, rgba(255, 255, 255, 0) .6em) -.6em -.6em,
                    -moz-radial-gradient(1em 50%, circle, #FCFCFF .35em, rgba(255,255,255,0) .4em),
                    -moz-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em) !important;
        background: -o-radial-gradient(.6em .6em, circle, #FCFCFF .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
                    -o-radial-gradient(1em 50%, circle, #FCFCFF .35em, rgba(255,255,255,0) .4em),
                    -o-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em) !important;
        background: -ms-radial-gradient(.6em .6em, circle, #FCFCFF .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
                    -ms-radial-gradient(1em 50%, circle, #FCFCFF .35em, rgba(255,255,255,0) .4em),
                    -ms-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em) !important;
        background: -webkit-radial-gradient(.6em .6em, circle, #FCFCFF .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
                    -webkit-radial-gradient(1em 50%, circle, #FCFCFF .35em, rgba(255,255,255,0) .4em),
                    -webkit-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em) !important;
    }
    .brownprefix :after {
        content: '';
        position:absolute;
        top:.25em;
        right:.25em;
        bottom:.25em;
        left:.25em;
        border: 1px rgba(0,0,0,.3) dashed;
        outline: 1px rgba(255,255,255,.5) dashed;
    }
    .blueprefix {
        display: inline-block;
        position:relative;
        padding: .7em;
        padding-left: 2em;
        margin: 0 .5em .5em 0;
        background: #55758D;
        color: rgba(255,255,255,.6) !important;
        text-decoration:none;
        font-weight: bold;
    }
    .blueprefix:hover {
        background:#B3CC73;
        color:white;
    }
    .blueprefix:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index:1;
        background: -moz-radial-gradient(.6em .6em, circle, #FCFCFF .55em, rgba(255, 255, 255, 0) .6em) -.6em -.6em,
                    -moz-radial-gradient(1em 50%, circle, #FCFCFF .35em, rgba(255,255,255,0) .4em),
                    -moz-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em) !important;
        background: -o-radial-gradient(.6em .6em, circle, #FCFCFF .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
                    -o-radial-gradient(1em 50%, circle, #FCFCFF .35em, rgba(255,255,255,0) .4em),
                    -o-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em) !important;
        background: -ms-radial-gradient(.6em .6em, circle, #FCFCFF .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
                    -ms-radial-gradient(1em 50%, circle, #FCFCFF .35em, rgba(255,255,255,0) .4em),
                    -ms-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em) !important;
        background: -webkit-radial-gradient(.6em .6em, circle, #FCFCFF .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
                    -webkit-radial-gradient(1em 50%, circle, #FCFCFF .35em, rgba(255,255,255,0) .4em),
                    -webkit-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em) !important;
    }
    .blueprefix:after {
        content: '';
        position:absolute;
        top:.25em;
        right:.25em;
        bottom:.25em;
        left:.25em;
        border: 1px rgba(0,0,0,.3) dashed;
        outline: 1px rgba(255,255,255,.5) dashed;
    }
    Сохраняем.

    Далее идём в панель управления (Админ панель), Дерево узлов - И из левой панели выбираем "Префиксы тем" - Затем нажимаем на "Создать новый префикс тем" - Указываем нужный Вам заголовок - И выбираем в опциях "Стиль оформления" пункт "Другой, используя своё имя CSS-класса" - и вписываем нужный вам цвет:
    untitled(20).png
    blueprefix - это синий цвет
    brownprefix - это коричневый цвет
    redprefix - Это красный цвет
    greenprefix - это зелёный цвет

    Сохраняем всё это дело.
     
    Метки:

Поделиться этой страницей

iHax Community
Рейтинг@Mail.ru Яндекс.Метрика мониторинг сайтов
Форум программного обеспечения/
Загрузка...