Отображение иконок профиля

Все ваши предложения по улучшению работы сервиса
Ответить
Аватара пользователя

Автор темы
LEOPARD
Сообщения: 18
Зарегистрирован: 01 май 2017, 05:17
Благодарил (а): 5 раз
Поблагодарили: 5 раз
Пол:
Контактная информация:

Отображение иконок профиля

Сообщение LEOPARD » 08 окт 2017, 14:29

Отображение иконок профиля

Описание:
Отображает иконки контактов пользователя в минипрофиле без ненужной всплывашки.
В отличии от ProfileContactIcon тут испольузется чистый CSS, что ускоряет отображение страницы и делает его совместимым с расширениями, добавляющими посты с минипрофилями динамически.

Лайфхак: Можно сделать себе такие иконки на любом форуме [3.1][3.2] при помощи дополнения браузера Stylish, скопировав содержимое style.css в создаваемый стиль для сайта.

Скриншоты:
До:
Изображение
После:
Изображение

Установка:
- В настройки стилей добавить код

Код: Выделить всё

/* Отображение иконок профиля */
.profile-contact > strong, .profile-contact .dropdown-trigger, .profile-contact .pointer {
	display: none;
}

.profile-contact .dropdown {
	display: block !important;
	margin: 0 !important;
	padding: 0;
	position: static;
}

.profile-contact .dropdown-contents {
	background: none;
	border: none;
	box-shadow: none;
}

.profile-contact .contact-icons > div {
	clear: none;
	float: left;
}

.profile-contact .contact-icons > div > a {
	margin: 6px 6px 0 0;
	padding: 3px;
	background-color: #ffffff;
	background-image: linear-gradient(#ffffff, #e9e9e9);
	border: 1px solid #c7c3bf;
	border-radius: 4px;
	box-shadow: 0 0 0 1px #ffffff inset;
}

.profile-contact .contact-icons > div > a:hover {
	background-color: #e9e9e9;
	background-image: linear-gradient(#e9e9e9, #ffffff);
	border-color: #0a8ed0;
}

.profile-contact .contact-icons > div > a > span.email-icon {
	background-position: -20px 0;
}
Первоисточник и автор сего творения - Sumanai

Ответить