Jump to content
  • Как изменить цвета и дизайн комментариев от ВКонтакте?

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

    Мой метод подойдет для любого способа вставки комментариев на сайт. Заключается он в добавлении специального 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. Понял что нужно добавить настройки в виджет вставки Комментариев от ВКонтакте

     

    User Feedback

    Recommended Comments

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

    Создать 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

    Share this comment


    Link to comment
    Share on other sites

    Create an account or sign in to comment

    You need to be a member in order to leave a comment

    Create an account

    Sign up for a new account in our community. It's easy!

    Register a new account

    Sign in

    Already have an account? Sign in here.

    Sign In Now
×