Re: ChaTemplate - CSS для Chatovod.ru
Прикольные шаблоны для чата
Техническая поддержка сервиса chatovod.ru - чат для вашего сайта
Вы не вошли. Пожалуйста, войдите или зарегистрируйтесь.
Форум поддержки Chatovod → Общение хозяев чатов → ChaTemplate - CSS для Chatovod.ru
Прикольные шаблоны для чата
anastasiya.butakova06, спасибо.
anastasiya.butakova06, спасибо.
Пожалуйста
Дополнение раздела FAQ
Привет всем! Хочу сделать небольшой подарок для проекта пользователя belka, разрабатывающего ботов для чатовода и для всех пользователей, которые этими ботами пользуются!
Мы знаем, что многие из вас очень любят и используют ботов в своем чате. Многие администраторы прибегают к использованию ботов, чтобы увеличить визуальное количество пользователей, тем самым повысить приток новых, реальных посетителей в свой чат. Другие используют ботов для автопостинга новостей, как это сделано в чате нашего проекта и некоторых других. Однако, все боты выглядят одинаково и это смотрится не очень красиво, согласитесь.
администраторам, у которых большая посещаемость гостей в чате
администраторам, с большим количеством одинаковых ботов-болванок в чате
Что изменится в боте?
вы сможете поставить уникальные аватарки для каждого бота
вы сможете "прикрепить" боту значок с подарком, который будет отображаться в списке пользователей, возле ника
при наведении на профиль бота, возле аватарки будет отображаться большой значок подарка
вы можете установить иконку пола для каждого бота, в соответствии с именем
Подробнее о том, как стилизовать своих ботов, читайте на новой страничке проекта ChaTemplate.
Структура страницы раздела стала более удобной
Дополнены основные разделы:
Верхняя часть: заголовок (.chatHeader)
Тело чата: блок с приложениями (.chatTab)
Тело чата: блок с сообщениями (.chatMain)
Страница входа (.chatFull)
Общие вопросы
Для облегчения поиска и подбора цвета, для фона и текста, был добавлен генератор
Запущено голосование с обращением за разработку мобильной версии. Подробности ВКонтакте
Уважаемые пользователи!
Теперь у вас есть возможность делиться с друзьями прямыми ссылками на раздел faq.
Что это значит?
Теперь вам и вашим друзьям не придется блуждать по странице в поисках решения. Специально для вас, мы добавили octothorpe возле каждого спойлера с ответом на вопрос, чтобы вы могли получать прямую ссылку на конкретный вопрос и делиться ею со своими друзьями.
Как это работает?
1. Перейдите на страницу faq и выберите нужный вам раздел
2. Затем, найдите в списке интересующий вопрос и наведите на него курсор мыши. Слева от спойлера с вопросом появится маленький символ решетка(octothorpe).
3. Щелкните по ней один раз ЛКМ
4. И наконец, в адресной строке скопируйте получившуюся ссылку. Вот и все!
Теперь вы можете поделиться ссылкой в своем чате или просто отправить другу
А еще, добавлено несколько новых решений для ваших чатов
Всем хороших выходных и приятного творчества с ChaTemplate
Всем привет! Торопитесь!
Только сегодня и навсегда мы дарим пользователям чатовода этот удивительно простой и красивый дизайн чата.
В нем доступно 99% классических ручных настроек. Все зависит от вас! Скопируйте код ниже - установите в настройки css своего чата - меняйте цвета, добавляйте стили и картинки. Делайте с ним все что захотите!
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,600,700,800);
@import url(https://cdn.linearicons.com/free/1.0.0/icon-font.min.css);
* {
box-sizing: border-box;
padding: 0;
margin: 0
}
body {
font-size: 62.5% !important;
font-weight: 400;
-webkit-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility
}
a {
text-decoration: none !important
}
.chat {
border: 0;
font-family: Montserrat
}
#scrollBottomBox,
.chat,
.chatFooter .chatFooterWrapper .chatPanel .chatSendLinksPanel,
.chatFooter .chatFooterWrapper .chatPanel div.chatSoundPanel a,
.chatHeader .chatTopLine,
.chatMain .chatMessages,
.chatMain .chatPrivateMessages,
.chatPeople .chatPeopleTitle,
.chatPopupMenuDiv2 .chatPopupMenuContent,
.chatTabs ul,
.chatTabs>ul>li>a,
.chatTime,
.chatUserMenuItems,
.dialog-buttons button,
.dialog-prompt input,
.smilesBox p,
.smoke,
input[type=button],
input[type=submit],
input[type=text],
select {
font-size: 1rem
}
.smilesBox::-webkit-scrollbar,
.vscrollable::-webkit-scrollbar {
width: 8px;
height: 8px
}
.smilesBox::-webkit-scrollbar-track,
.vscrollable::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, .08)
}
.smilesBox::-webkit-scrollbar-thumb,
.vscrollable::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .3)
}
.smilesBox::-webkit-scrollbar-thumb:hover,
.vscrollable::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, .6)
}
.smilesBox::-webkit-scrollbar-thumb,
.smilesBox::-webkit-scrollbar-track {
margin: 3px
}
#scrollBottomBox {
right: 30px;
left: auto !important;
width: 30px;
height: 30px;
padding: 0;
background-color: rgba(0, 0, 0, .3);
border-color: rgba(59, 57, 61, .1);
font-size: 0 !important;
z-index: 10;
}
#scrollBottomBox::before {
position: relative;
vertical-align: top;
animation: bouncing .5s cubic-bezier(.1, .25, .1, 1) 0s infinite alternate both;
font-family: Linearicons-Free;
content: '\e874';
font-size: 16px !important;
color: #fff;
background: 0 0
}
#scrollBottomBox:hover::before {
-webkit-animation-play-state: paused;
animation-play-state: paused
}
@-webkit-keyframes bouncing {
0% {
bottom: 0;
box-shadow: 0 0 5px rgba(0, 0, 0, .5)
}
100% {
bottom: 25px;
box-shadow: 0 30px 30px rgba(0, 0, 0, .1)
}
}
@keyframes bouncing {
0% {
bottom: 0;
box-shadow: 0 0 5px rgba(0, 0, 0, .5)
}
100% {
bottom: 25px;
box-shadow: 0 30px 30px rgba(0, 0, 0, .1)
}
}
#account-info a,
#join-chat-button,
#join-chat-button2,
#sign-in-label a,
.center-wrapper .content form,
.center-wrapper .content:after,
.chatHeader .chatTopLine,
.chatInputText,
.chatMessage,
.chatPeople ul.chatPeopleList li .chatUserMenu .chatUserMenuItems ul li,
.chatPopupMenuDiv2,
.chatSendButton,
.chatSendLinksPanel,
.chatSendLinksPanel>a,
.chatSoundPanel,
.chatSoundPanel>a,
.chatTopLineWrapper ul li ul,
.chatTopLineWrapper>ul>li>a,
.content form #captcha-input,
.content form #nick,
.dialog-buttons button,
.justify a,
.smilesBox a,
.smilesBox::-webkit-scrollbar-thumb,
.smilesBox::-webkit-scrollbar-track,
.vscrollable::-webkit-scrollbar-thumb,
.vscrollable::-webkit-scrollbar-track,
input[type=submit],
select {
-webkit-border-radius: .25rem;
-moz-border-radius: .25rem;
border-radius: .25rem
}
input[type=button]:focus,
input[type=submit]:focus,
input[type=text]:focus,
select:focus {
outline: 0
}
.chatPopupMenuDiv1,
.chatSendLinksPanel>a>span,
.chatSoundPanel>a>span,
.chatTopLineWrapper>ul>li:nth-child(3)>a>img,
.downarrowclass,
.menu_profile_title,
.msi {
display: none !important
}
.chatFooter,
.chatHeader {
border: 0
}
.chatPopupMenuDiv1 {
background: 0 0;
border: 0
}
.chatEventDiv,
.chatPopupMenuDiv2,
.chatTopLineWrapper ul li ul,
.dialog.smoke {
border-color: rgba(255, 255, 255, .08);
box-shadow: rgba(0, 0, 0, .05) 3px 3px 20px
}
.chatPopupMenuDiv2 {
padding: 6px
}
.chatEventDiv,
.chatPopupMenuDiv2 {
top: auto !important;
right: auto !important;
bottom: 82px !important;
left: 3px !important;
width: 325px !important;
min-height: 200px
}
.smilesBox {
width: 315px !important
}
input[type=text] {
padding-left: 7px;
min-height: 1.75em
}
input[type=button],
input[type=submit] {
cursor: pointer
}
input[type=button],
input[type=submit],
select {
padding: .25em .75em !important;
background-color: #fff;
border: 1px solid #ccc;
line-height: 2em;
font-weight: 300 !important
}
.chatSendExitPanel select {
padding: 0 !important;
position: relative;
bottom: 4px
}
.chatInputText {
border-color: #eee
}
.chatHeader .chatTopLine {
top: 7px;
background: 0 0;
border: 0
}
.chatTopLineWrapper ul li ul {
min-width: 230px
}
.chatTopLineWrapper ul li ul li a {
width: 230px
}
.chatTopLineWrapper>ul>li>a>img {
display: none
}
.chatTopLineWrapper>ul>li:nth-child(1)>a::before {
content: '\e82a'
}
.chatTopLineWrapper>ul>li:nth-child(2)>a::before {
content: '\e83f'
}
.chatTopLineWrapper>ul>li:nth-child(3)>a::before {
content: '\e871'
}
.chatMain {
top: 0;
bottom: 0
}
.chatMain .chatMessages,
.chatMain .chatPeople,
.chatMain .chatPrivateMessages {
top: 80px;
bottom: 80px
}
.chatMain .chatMessages,
.chatMain .chatPrivateMessages {
right: 5px;
margin: 5px 0
}
.chatMessage {
margin-right: 170px
}
.chatTabs {
top: 46px;
width: 100%
}
.chatMain .chatPeople {
right: 15px;
border-left: 0
}
.chatFooter {
height: 80px
}
.chatFooter .chatFooterWrapper {
top: 15px
}
.chatFooter .chatFooterWrapper .chatPanel .chatSendExitPanel {
top: 34px
}
select {
padding: 0
}
.chatFooter .chatFooterWrapper .chatPanel .chatSendButtonPanel .chatSendButton {
width: auto;
height: auto
}
.chatFooter .chatFooterWrapper .chatPanel .chatSendButtonPanel {
top: 10px
}
.chatFooter .chatFooterWrapper .chatPanel .chatSendTextPanel {
right: 244px
}
.chatFooter .chatFooterWrapper .chatPanel div.chatSoundPanel {
right: 40px
}
.chatFooter .chatFooterWrapper .chatPanel div.chatSoundPanel a {
width: 60px;
height: 18px;
overflow: hidden
}
.chatLinkSmiles::before {
content: '\e854'
}
.chatLinkImage::before {
content: '\e824'
}
.chatLinkProfile::before {
content: '\e82a'
}
.chatLinkGold::before {
content: '\e80e'
}
.chatLinkVip::before {
content: '\e814'
}
.chatLinkModerate::before {
content: '\e810'
}
.chatLinkMore::before {
content: '\e82b'
}
.chatSendLinksPanel>a:hover {
background-color: rgba(255, 255, 255, .7)
}
.chatSendLinksPanel>a:last-child {
margin-right: 0 !important
}
.chatSendLinksPanel {
top: auto !important;
bottom: 40px !important
}
.chatSendLinksPanel>a,
.chatTopLineWrapper>ul>li>a {
background-image: none !important;
padding: 5px !important;
margin-right: 5px !important;
height: 30px !important;
width: 30px;
line-height: 20px;
text-align: center;
font-size: 0 !important;
background: linear-gradient(rgba(255, 255, 255, .2) 0, rgba(59, 57, 61, .09) 100%);
border-color: rgba(255, 255, 255, .08);
box-shadow: inset rgba(255, 255, 255, .1) 0 1px 0, rgba(0, 0, 0, .3) 0 1px 3px
}
.chatSendLinksPanel>a::before,
.chatTopLineWrapper>ul>li>a::before {
display: inline-block;
font-family: Linearicons-Free;
font-size: 16px !important;
color: inherit;
width: 16px;
height: 16px
}
.content form {
position: absolute;
top: 50%;
left: 50%;
width: 250px;
height: auto;
margin-left: -135px;
margin-top: -150px;
padding: 30px;
background: #fff;
box-shadow: rgba(0, 0, 0, .15) 3px 3px 20px
}
#captcha-input,
#nick {
background-color: #fafafa;
color: #424242;
height: 3em;
padding-left: .25em;
-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff
}
#captcha-input:focus,
#nick:focus {
background-color: #fff;
border-color: #e8c291;
outline: 0
}
#account-info a,
#sign-in-label a {
display: inherit;
width: 100%;
padding: .75em 0;
font-weight: 400;
line-height: 1em;
text-align: center;
text-decoration: none;
border: 1px solid #ccc;
color: #424242;
-webkit-border-radius: .25em;
-moz-border-radius: .25em;
border-radius: .25em;
-webkit-transition: .3s all linear;
-moz-transition: .3s all linear;
transition: .3s all linear
}
#account-info a {
margin-top: .5em
}
Посмотреть как выглядит и работает чат в действии вы можете здесь.
Внимание! Ссылка на демонстрацию чата действует всего-то несколько лет.
Остались вопросы? Загляните в раздел FAQ проекта ChaTemplate или в нашу группу ВКонтакте.
Нашли ошибку в коде? Напишите здесь в теме или отправьте сообщение в наш чат
Уважаемые гости и участники Чатовода и проекта ChaTemplate!
В этой теме у вас есть возможность задать вопрос по css вашего чата. Здесь вам всегда помогут советом и делом!
Если вы делаете шаблон чата и вам нужна помощь или дружеский совет по его созданию, улучшению кода и/или внешнего вида, пишите в теме под этим постом.
Оставляйте здесь ссылку на свой чат и интересующим вас вопросом, а мы обязательно к вам заглянем и поможем настроить внешний вид и код вашего чата.
Добавлено:
вы можете установить иконку пола для каждого бота, в соответствии с именем
вы можете добавить VIP иконку для любого бота или всем сразу
Уважаемые пользователи!
К сожалению, сегодня произошел сбой и мы были вынуждены удалить базу, хранящую смайлики для чатов, а также, многие другие изображения и ресурсы. Во всем остальном, работа продолжается в штатном режиме.
Мы очень сожалеем об этих нарушениях и приносим вам свои извинения за доставленные неудобства.
Георгиевская ленточка является одним из наиболее узнаваемых символов российской боевой славы. Эта лента черно-оранжевого цвета стала также одним из главных атрибутов Дня Победы в Великой Отечественной войне – одного из наиболее уважаемых праздников в нашей стране.
Добавив код c лентой в css своего чата, вы получите красивую Георгиевскую ленточку. Это будет один из ваших поступков, в котором вы проявите уважение к наступающему Великому празднику и его памяти!
Форма входа №04 — содержит небольшой набор CSS свойств, для оформления формы входа в вашем чате. Она имеет достаточно простой и приятный внешний вид. Вместо изношенных, стандартных ссылок «Войти в аккаунт», «Отмена» и других, form-04 создает простые, но, в тоже время, стильные кнопки, поля для ввода логина и пароля.
Новый вид формы входа в чат
Простые и изящные кнопки во всем чате
Новый внешний вид полей ввода текста
Легко настроить под основной стиль чата
Гибкие настройки позволят вам изменять цвет фон, текста и даже радиус углов кнопок всего в семи строчках. Вам нужно лишь поменять в них значение на нужное и ваша форма готова!
По умолчанию цветовая гамма в классическом зеленом стиле Chatovod.
Обновление шаблона Quiet night v1.0.3
Исправлена проблема с кнопками входа
Изменен внешний вид формы входа
Изменены отступы в некоторых блоках
Изменен и структурирован код шаблона
Медали возле ников ваших пользователей — это небольшой набор css свойств, добавляющий медальку возле иконки участника чата в общем списке пользователей. Мы подобрали для вас девять вариантов медалей, разных форм и размеров. Они отлично подойдут для любого дизайна чата.
День Победы – один из самых светлых и важных праздников в России. Память о людях и героях, которые внесли вклад в победу в Великой Отечественной войне, навсегда останутся в наших сердцах. Праздничное оформление своего чата – один из многих способов выразить ветеранам свое уважение и благодарность.
В целях создания праздничной атмосферы в преддверии праздника мы предлагаем вам оформить свой чат. Мы собрали для вас очень интересный материал, имеющий отношение к этому великому празднику.
Встречайте!
А так же, обновленная форма №4 с более гибкими настройками.
Необычные формы входа с приятной анимацией сделают ваш чат более изящным и приятным для общения. Меняйте цвета кнопок и полей ввода текста, редактируйте фон, корректируйте радиус углов, создавайте эффекты при наведении и многое другое всего в нескольких строчек!
Подписывайтесь и следите за обновлениями в любое время в любимой соцсети.
Form-07 — содержит небольшой набор CSS свойств, для оформления формы входа в вашем чате. Она имеет достаточно простой и приятный внешний вид. Вы с легкостью можете добавить собственное фоновое изображение на страничку входа, изменить радиус углов, заменить цвета кнопок и многое другое, просто заменив значения в трех-четырех строчках кода.
Вместо изношенных, стандартных ссылок «Войти в аккаунт», «Отмена» и других, данная форма создает простые, но, в тоже время, стильные кнопки, поля для ввода логина и пароля.
Помимо самой формы, код стилизует остальные кнопки в чате и поля ввода текста, а также добавляет эффекты при наведении на них.
Работа раздела "Смайлы для чата" восстановлена.
Обзор смайлов - https://chatemplate.chatovod.ru/
Подключение к чату - https://madeas.ru/chatemplate/смайлы/
Только с 18 по 20 мая (вкл), дарим купон на 100% скидку при выборе любой формы входа
Форма входа №08 — содержит небольшой набор CSS свойств, для оформления формы входа в вашем чате. Она имеет достаточно простой и приятный внешний вид. Вместо изношенных, стандартных ссылок «Войти в аккаунт», «Отмена» и других, form-08 создает простые, но, в тоже время, стильные кнопки, поля для ввода логина и пароля.
ПРЕИМУЩЕСТВА «FORM-08» ПЕРЕД КЛАССИЧЕСКИМ ДИЗАЙНОМ
Новый вид формы входа в чат
Простые и изящные кнопки во всем чате
Новый внешний вид полей ввода текста
Легко настроить под стиль вашего чата
Дарим код экрана приветствия для вашего чата. Он легко настраивается и будет красиво смотреться в любом чате!
Просто скопируйте код, замените содержимое нескольких строк и ваш чат готов! Настройки ниже, под кодом.
:root {
--fweight: 500;
--color: #fff;
--toptext: 'Hello, world!';
--bottomtext: 'Join our mailing to get weekly updates on our exclusive deals.';
--gradient: linear-gradient(
135deg,
#b6e245 0%,
#2ca32c 70% );
}
.chat {
border: 0;
}
*, ::before, ::after {
box-sizing: border-box;
}
a {
text-decoration: none;
}
body:not(.has-nick) .chatTopLine,
body:not(.has-nick) .chatPeople,
body:not(.has-nick) .chatMain {
display: none;
}
body:not(.has-nick) .chatHeader {
padding: 2em 1em;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border: 0;
background-color: var(--color);
background-image: var(--gradient);
}
body:not(.has-nick) .chatHeaderWrapper {
overflow: auto;
}
body:not(.has-nick) .chatTitle {
position: relative;
float: none;
margin: auto;
padding: 1em 0;
display: flex;
justify-content: center;
text-shadow: none;
font-size: 6vw;
color: var(--color);
}
body:not(.has-nick) .chatTitle::before,
body:not(.has-nick) .chatTitle::after {
position: absolute;
font-size: 2vw;
font-weight: var(--fweight);
}
body:not(.has-nick) .chatTitle::before {
content: var(--toptext);
top: 0;
font-size: 2vw;
}
body:not(.has-nick) .chatTitle::after {
content: var(--bottomtext);
bottom: 0;
}
body:not(.has-nick) .chatSetupNickname {
z-index: 99;
top: auto;
bottom: 2em;
left: 0;
width: 100%;
text-align: center;
}
body:not(.has-nick) #join-chat-button,
body:not(.has-nick) #join-chat-button2 {
margin: auto;
padding: 1em 2em;
display: block;
text-transform: uppercase;
font-weight: var(--fweight);
cursor: pointer;
border: 0;
border-radius: 2em;
background-color: var(--color);
box-shadow: 0 4px 15px rgba(0, 0, 0, .2);
transition: all 200ms linear;
}
body:not(.has-nick) #join-chat-button2 {
width: 100%;
}
body:not(.has-nick) #join-chat-button:hover,
body:not(.has-nick) #join-chat-button2:hover {
transform: translateY(2px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
body:not(.has-nick) #join-chat-button:focus,
body:not(.has-nick) #join-chat-button2:focus {
outline: none;
}
.chatFull .transparent {
opacity: 1;
background-image: var(--gradient);
}
.content {
color: var(--color);
}
#join-buttons {
display: flex;
flex-direction: column;
align-items: center;
}
#join-buttons a,
#account-info a {
font-size: 13px;
color: var(--color);
opacity: .5;
}
#join-buttons a {
padding-bottom: 15px;
}
#join-buttons a {
padding-top: 15px;
}
#account-info,
#sign-in-label {
text-align: center;
font-size: 16px;
}
#email {
display: block;
font-size: 18px;
line-height: 1.7;
}
#existing-nick-label,
#new-nick-label {
padding-left: 1.75em;
}
#captcha-block {
text-align: center;
}
#nick,
#captcha-input {
padding-left: 1.5em;
min-height: 3em;
font-size: 14px;
border: 0;
border-radius: 2em;
background-color: var(--color);
}
В верхней части кода найдите такие строки:
:root {
--fweight: 500;
--color: #fff;
--toptext: 'Hello, world!';
--bottomtext: 'Join our mailing to get weekly updates on our exclusive deals.';
--gradient: linear-gradient(
135deg,
#b6e245 0%,
#2ca32c 70% );
}
где,
500 - жирность шрифта текста и кнопок на экране приветствия
toptext - в кавычках расположен текст над заголовком вашего чата (удалите текст в кавычках, если хотите убрать надпись)
bottomtext - в кавычках расположен текст под заголовком (удалите текст в кавычках, если хотите убрать надпись)
color- цвет текста и фон кнопок на экране приветствия
gradient - фон страницы приветствия. Замените значения #b6e245 и #2ca32c на нужный вам
Остальные части кода редактировать не рекомендуется!
Форум поддержки Chatovod → Общение хозяев чатов → ChaTemplate - CSS для Chatovod.ru
Форум работает на PunBB, при поддержке Informer Technologies, Inc