Как в плагине wpDiscuz изменить цвет кнопок и подсказок

Итак все началось с того, что нужно было сменить интерфейс системы комментариев WordPress с Disqus на что-то другое. После продолжительного поиска и анализа разных систем остановимся на wpDiscuz (eng/рус). Множество настроек и т.д и т.п. Но в отличии от Disqus, который подстраивал свои интерфейс под цвета сайта, wpDiscuz так не умеет. Однако плагин дает возможность вставить пользовательский CSS, чем и возпользуемся

На скрине выделены элементы, которые нужно покрасить под цвета сайта

Залогиненый пользователь

#wpdcom .wpd-auth .wpd-login a {
color: #ff6f61;
}
#wpdcom .wpd-auth .wpd-login a:hover {
color: #ff6f61 ;
}

Кнопки редактора

Нужный цвет получаем при наведении мышки (событие hover). Кнопки spoiler, source code, upload file подкрашиваются отдельно

#wpdcom .ql-toolbar button:hover .ql-stroke{
color: #ff6f61; 
stroke: #ff6f61;
}
#wpdcom .ql-toolbar button:hover .ql-fill{
color: #ff6f61; 
fill: #ff6f61;
}
#wpdcom .ql-toolbar button.ql-active .ql-stroke{
color: #ff6f61; 
stroke: #ff6f61;
}
#wpdcom .ql-toolbar button.ql-active .ql-fill{
color: #ff6f61; 
fill: #ff6f61;
}
#wpdcom .ql-toolbar button.ql-sourcecode:hover{
color: #ff6f61;
}
#wpdcom .ql-toolbar button.ql-spoiler:hover{
color: #ff6f61;
}
#wpdcom .ql-toolbar .wmu-upload-wrap .wmu-add i:hover{
color: #ff6f61;
}

Подсказка с уголком

Одна для нескольких элементов. Фон

[wpd-tooltip]::before {
border-color: #474442 transparent transparent transparent;
}
[wpd-tooltip]::after {
background: #474442;
}

Подсказка с социальными кнопками

Цвет кнопок и фон подсказки

#wpdcom .wpd-comment-header .wpd-comment-share .wpd-tooltip-content i:hover{ 
color: #a39983;
}
.wpd-tooltip .wpd-tooltip-content {
background: #474442;
}
.wpd-tooltip .wpd-tooltip-content::after {
background: #474442;
}

Секция «Ответить на»

#wpdcom .wpd-comment .wpd-reply-to a {
color: #ff6f61;
}
#wpdcom .wpd-comment .wpd-reply-to a:hover {
color: #ff6f61;
}

И немного бонуса

/* --- цвет круга с рейтингом поста, событие hover */
#wpd-post-rating .wpd-rating-wrap .wpd-rating-value:hover {
background-color: #6f6750; 
}

/* --- убрать тень у окна комментариев (круг) */
#wpd-bubble-wrapper>div {
box-shadow: none !important;
}

/* --- цвет лайка 'палец вверх' */
.wpd-comment-footer .wpd-vote-up svg:hover {
fill: #ff6f61 !important;
}
#wpdcom .wpd-up {
color: #ff6f61 !important;
}
#wpdcom .wpd-up svg {
fill: #ff6f61 !important;
}
#wpdcom.wpd-layout-3 .wpd-comment .wpd-comment-footer .wpd-vote-up.wpd-up {
border: 1px solid #ff6f61 !important;
}

/* --- цвет ссылки в комментарии */
#wpdcom .wpd-comment-text a {
color: #ff6f61 ;
}
#wpdcom .wpd-comment-text a:hover {
color: #ff6f61 ;
}

Отлично, теперь все устраивает

P. S.

Вот никак не думал, что буду писать на веб-мастерскую тему

Александр Черных

• Системный администратор с 2000 года
• Участник Хабр Q&A и cyberforum
• Кейсы