Ваш промокод mojWPAds на плагин рекламы для WordPress >>

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

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

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

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

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

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

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

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

Привет.

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


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

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

Мои Контакты. Я в 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: 11.57MB | MySQL:114 | 0,262sec
Лучшие плагины для сайта WordPress
Магазин WordPress WP-R.ru
Я понял, не показывай больше.
Смотри мои обучающие видео на YouTube
Сайт использует cookie
Друг, не уходи!