mojwp.ru
Назад

Как сделать индивидуальный стиль для любого виджета

Вопрос: Как изменить цвет фона отдельного виджета, чтобы выделить его визуально от других?

Ответ: Каждый виджет в сайдбаре имеет индивидуальный идентификатор (id), параметры стилей для которого мы можем задать в файле стилей шаблона (style.css, css.css и пр.). Вам остается определить данный id и прописать правильно параметры.

Для работы советую использовать бесплатное дополнение для браузера FireFox под названием FireBug. Если же вы используете Google Chrome, то нажмите просто клавишу F12 в браузере. В Opera выберите «Проинспектировать элемент».

Далее остается визуально определить необходимый нам виджет и его id.

как изменить фон виджета
Скриншот FireBug для FireFox

Для наглядной демонстрации я подготовил небольшое видео на примере, где мы определяем id виджета и задаем ему необходимые параметры стилей. Смотрите в высоком разрешении.

Комментарии:
  • Серега
    Опубликовано: 30.05.2014 Ответить на сообщение

    Спасибо. Вроде все понятно, буду в коде ковыряться…

  • Иван Бизюк
    Опубликовано: 20.02.2015 Ответить на сообщение

    Добрый день, а как быть если, для виджетов ID не прописаны. У меня для всех виджетов один и тот же класс

  • Иван Бизюк
    Опубликовано: 20.02.2015 Ответить на сообщение

    все разобрался…

    • Евгений
      Опубликовано: 06.07.2015 Ответить на сообщение

      У меня не прописан айди, только класс, помогите=)

      • Евгений
        Опубликовано: 06.07.2015 Ответить на сообщение

        Понял, но не понял что значит id=»%1$s» разберите кто нибудь по полочкам. Пожалуйста.

        • Виталий
          Опубликовано: 07.07.2015 Ответить на сообщение

          Погуглите обучающие курсы/книги по натяжке на WordPress. В комментариях писать статью не дело)

  • Ирина
    Опубликовано: 12.03.2015 Ответить на сообщение

    Спасибо огромное за информацию. Мне очень помогло.

  • Данил
    Опубликовано: 15.05.2015 Ответить на сообщение

    Можете посмотреть, пожалуйста, мой виджет Метки (на странице записи в правой колонке). Я уже прошелся по этому CSS с ног до головы. И классы, и дивы перепробовал, но не получается никак( Я хочу изменить фон самого виджета. При чем, фон меток получается изменить, а вот фон виджета никак….

    • Виталий
      Опубликовано: 16.05.2015 Ответить на сообщение

      Если правильно понял, то:

  • Анатолий
    Опубликовано: 29.04.2016 Ответить на сообщение

    Добрый лень. Подскажите как сделать тень для виджета vk.
    Вот код виджета:

    VK.Widgets.Group(«vk_groups», { mode: 1, width: «250», height: «100», color1: ‘FF1493’, color2: ‘FFFFFF’, color3: ‘FF1493’ }, 45841818);

    Вот код для тени: box-shadow: 0.1em 0.2em 0.2em #000000, 0.1em 0.2em 0.2em #000000;

    • Виталий
      Опубликовано: 29.04.2016 Ответить на сообщение

      Добрый.
      Так в чем проблема? Вы же знаете параметр css. Применяйте его для блока.

      • Анатолий
        Опубликовано: 29.04.2016 Ответить на сообщение

        почему то не получается.

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.