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

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

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

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

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

как изменить фон виджета

Скриншот FireBug для FireFox

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

Привет. Меня зовут Виталик и я автор этого блога, а так же Магазина WordPress https://wp-r.ru/.


Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 12 комментариев
  1. Серега says:
    http://blogoto.ru

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

  2. Иван Бизюк says:
    http://blogstarter.ru

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

  3. Иван Бизюк says:
    http://blogstarter.ru

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

    • Евгений says:
      http://deagle-cs.ru

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

      • Евгений says:
        http://deagle-cs.ru

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

        • Виталий says:
          http://mojWP.ru/

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

  4. Ирина says:

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

  5. Данил says:
    http://danilfokin.ru/

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

    • Виталий says:
      http://mojWP.ru/

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

      .widget.widget_tag_cloud.clearfix {
          background: #fff !important;
      }
  6. Анатолий says:

    Добрый лень. Подскажите как сделать тень для виджета 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;

    • Виталий says:
      http://mojWP.ru/

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

      • Анатолий says:

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

Не держи в себе. Выскажись.

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2011-2017 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 22.49MB | MySQL:81 | 0,484sec
Премиальные плагины для CMS WordPress
Магазин WordPress WP-R.ru
Спасибо, не показывайте мне эту штуку больше!
Смотри мои обучающие видео на YouTube
Иван только что купил плагин ELT https://wp-r.ru/plaginy/elt.html