Перейти к содержимому
  • Как изменить цвета и дизайн комментариев от ВКонтакте?

    Евгений Зубов Евгений Зубов,

    В этом уроке я расскажу как изменить цвет комментариев от ВКонтакте.

    Мой метод подойдет для любого способа вставки комментариев на сайт. Заключается он в добавлении специального CSS кода который будет изменять внешний вид комментариев. Далее следуйте простой инструкции:

    1. Убедитесь что комментарии действительно работают на Вашем сайте.
    2. Откройте Muse и найдите страницу где установлены комментарии от ВКонтакте.
    3. Нажмите правой кнопкой мыши на страницу и в меню находите пункт Свойства страницы...
    4. В появившемся окне ищите кнопку Метаданные и жмите на нее
    5. Теперь, найдите поле HTML для <head> и в него вставьте две строчки кода:
      <style>
      место куда вставлять настройки
      </style>
    6. Теперь Ваша задача просто добавлять только те строчки кода которые отвечают за разные настройки дизайна. Вставлять строчки которые я сейчас опишу нужно  вместо фразы "место куда вставлять настройки". 

      1. Изменить цвет заголовка комментариев, вставьте код:
        Где 5B7FA6 это код цвета, его меняете на тот который нужен Вам.

        .wcomments_head {
          background: #5B7FA6 !important;
        }
        
      2. Изменить цвет фона за формой отправки:
        Где F7F7F7 это код цвета, его меняете на тот который нужен Вам. 

        #submit_post_box_wrap {
          background: #F7F7F7 !important;
        }
      3. Изменить цвет фона и шрифта для кнопки Отправить:
        Где 658ab0 это код цвета заднего фона кнопки, его меняете на тот который нужен Вам.
        Где FFF это код цвета текста на кнопке, его меняете на тот который нужен Вам.

        .button_blue button, .button_blue.button_disabled button:active, .button_blue.button_disabled button.active, .button_blue.button_disabled button:hover, .button_blue.button_disabled button.hover {
          background: #658ab0 !important;
          color: #FFF !important;
        }
    7. В итоге если применять весь код который я приводил Выше то будет это выглядеть вот так:
      <style>
      .wcomments_head {
        background: #5B7FA6 !important;
      }
      #submit_post_box_wrap {
        background: #F7F7F7 !important;
      }
      .button_blue button, .button_blue.button_disabled button:active, .button_blue.button_disabled button.active, .button_blue.button_disabled button:hover, .button_blue.button_disabled button.hover {
        background: #658ab0 !important;
        color: #FFF !important;
      }
      </style>

     

    Да, этот метод не идеальный. И настройки дизайна не полностью раскрыты. Но те кто зочет пойти дальше легко разбируться как это работает, а описывать каждый пиксель - бессмысленно.

    Вопросы по этому уроку задавайте в комментариях ниже.

    P.S. Понял что нужно добавить настройки в виджет вставки Комментариев от ВКонтакте

     

    Отзывы пользователей

    Рекомендуемые комментарии

    Еще есть второй способ

    Создать CSS файл  например my.css

    /* цвет заголовка комментариев */
    .wcomments_head {
      background: #5B7FA6 !important;
    }
    /* цвет фона за формой отправки */
    #submit_post_box_wrap {
      background: #F7F7F7 !important;
    }
    /* цвет фона и шрифта для кнопки Отправить */
    .button_blue button, .button_blue.button_disabled button:active, .button_blue.button_disabled button.active, .button_blue.button_disabled button:hover, .button_blue.button_disabled button.hover {
      background: #658ab0 !important;
      color: #FFF !important;
    }

    Перейти в меню "Файл -> Добавить файлы для передачи" и выбрать созданный вами файл

    В свойствах страницы в разделе "Метаданные"  пункт "HTML для <head>" вставляем

    <link rel="stylesheet" type="text/css" href="assets/my.css"/>

    my.css

    Поделиться комментарием


    Ссылка на комментарий
    Поделиться на других сайтах

    Оставлять сообщения могут только участники клуба

    Вступите в клуб или войдите под своим аккаунт, чтобы писать сообщения

    Вступить в клуб

    Зарегистрируйтесь для получения аккаунта. Это просто!

    Зарегистрировать аккаунт

    Войти

    Уже зарегистрированы? Войдите здесь.

    Войти сейчас
×