Pozitive Girl | Форум для девочек и девушек всех возрастов

Вы хотите отреагировать на этот пост ? Создайте аккаунт всего в несколько кликов или войдите на форум.

    Оригинальное оформление виджетов

    001101
    001101
    Звезда мирового масштаба


    Оригинальное оформление виджетов Empty Оригинальное оформление виджетов

    Сообщение автор 001101 Вс Июн 23, 2013 1:12 am


    за туториал спасибо Альберт Вескер с форума ТП


    Чтобы оформить виджеты необычным образом (сделать округлённым, с картинкой на фоне и т. д.) следуйте следующим инструкциям. Живой пример похожего использования кода у нас на главной странице, блок "Активно".

    Шаг 1.
    ПА - Модули - Виджеты форума - Создать персональный виджет.
    В окне создания виджета:
    Имя виджета : Виджет 1
    Использовать стандартный шаблон : Нет.
    Содержание виджета:
    Код:
    <div class="viget">Сюда добавляете содержимое виджета: текст, ссылки и т.п. Оформляете всё в HTML<div>
    Сохраняете, затем добавляете виджет в левую или правую колонку, ещё раз сохраняете.
    _______________________________________________

    Шаг 2.
    ПА - Оформление - Цвета - Каскадная таблица стилей CSS
    Добавляете:
    Код:
    .viget  {
        background: url('ссылка на картинку фона'); /*фоновое изображение виджета*/
       -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover; /*привязка фона к краям виджета*/
         background-color: #E6A9AD;  /*цвет фона*/
        -moz-border-radius: 14px;
        -webkit-border-radius: 15px;
        -moz-box-shadow: 5px 5px 15px 5px;
        -webkit-box-shadow: 5px 5px 15px 5px;
        border-radius: 15px; /*округление углов виджета*/
        font-size: 13px; /*размер шрифта в фиджете*/
        width: 100%; /*ширина виджета*/
       }
    Сохраняете.

    Моё примечание: При таком способе название виджета не будет отображаться, поэтому его лучше написать в самом содержании блока.

      Текущее время Вт Ноя 05, 2024 4:48 pm