Re: ChaTemplate - CSS для Chatovod.ru

Прикольные шаблоны для чата

flud56.chatovod.ru
Чат Флудилка
nosh.chatovod.ru
Ночной чат

77

Re: ChaTemplate - CSS для Chatovod.ru

anastasiya.butakova06, спасибо.


http://ipic.su/img/img7/fs/Snimokekrana_2018-05-10_11-14-46.1525940245.png

Re: ChaTemplate - CSS для Chatovod.ru

MineiM пишет:

anastasiya.butakova06, спасибо.

Пожалуйста

flud56.chatovod.ru
Чат Флудилка
nosh.chatovod.ru
Ночной чат

79

Re: ChaTemplate - CSS для Chatovod.ru

Дополнение раздела FAQ

80 (2018-07-14 12:25:12 отредактировано MineiM)

Re: ChaTemplate - CSS для Chatovod.ru

http://megionenergoneft.ru/wp-content/uploads/2017/08/idea.png

Принимаем идеи на разработку дизайна для чатов!

Стол заказов открыт

Предложить идею

https://чего-хочет-тверь.рф/app/themes/holmax/img/guli.png

81 (2018-07-14 19:25:58 отредактировано MineiM)

Re: ChaTemplate - CSS для Chatovod.ru

Привет всем! Хочу сделать небольшой подарок для проекта пользователя belka, разрабатывающего ботов для чатовода и для всех пользователей, которые этими ботами пользуются!

http://ipic.su/img/img7/fs/123.1531596346.png

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

Спешим поделиться своим css решением этой проблемы!

http://ipic.su/img/img7/fs/123.1531595610.png

Кому это может пригодиться?

  • администраторам, у которых большая посещаемость гостей в чате

  • администраторам, с большим количеством одинаковых ботов-болванок в чате


Что изменится в боте?

  • вы сможете поставить уникальные аватарки для каждого бота

  • вы сможете "прикрепить" боту значок с подарком, который будет отображаться в списке пользователей, возле ника

  • при наведении на профиль бота, возле аватарки будет отображаться большой значок подарка

  • вы можете установить иконку пола для каждого бота, в соответствии с именем


Подробнее о том, как стилизовать своих ботов, читайте на новой страничке проекта ChaTemplate.

Мы заБОТимся о вас!

82 (2018-07-17 13:14:37 отредактировано MineiM)

Re: ChaTemplate - CSS для Chatovod.ru

http://ipic.su/img/img7/fs/Snimokekrana_2018-05-10_11-14-46.1525940245.png

Обновление раздела FAQ
  • Структура страницы раздела стала более удобной

  • Дополнены основные разделы:

    • Верхняя часть: заголовок (.chatHeader)

    • Тело чата: блок с приложениями (.chatTab)

    • Тело чата: блок с сообщениями (.chatMain)

    • Страница входа (.chatFull)

    • Общие вопросы

  • Для облегчения поиска и подбора цвета, для фона и текста, был добавлен генератор

Подробнее

83 (2018-07-23 17:57:48 отредактировано MineiM)

Re: ChaTemplate - CSS для Chatovod.ru

Запущено голосование с обращением за разработку мобильной версии. Подробности ВКонтакте

84 (2018-08-10 11:10:43 отредактировано MineiM)

Re: ChaTemplate - CSS для Chatovod.ru

http://ipic.su/img/img7/fs/example.1533899361.png

Обновление раздела FAQ

Уважаемые пользователи!
Теперь у вас есть возможность делиться с друзьями прямыми ссылками на раздел faq.

Что это значит?
Теперь вам и вашим друзьям не придется блуждать по странице в поисках решения. Специально для вас, мы добавили octothorpe возле каждого спойлера с ответом на вопрос, чтобы вы могли получать прямую ссылку на конкретный вопрос и делиться ею со своими друзьями.

Как это работает?
1. Перейдите на страницу faq и выберите нужный вам раздел
http://ipic.su/img/img7/fs/example.1533898670.png

2. Затем, найдите в списке интересующий вопрос и наведите на него курсор мыши. Слева от спойлера с вопросом появится маленький символ решетка(octothorpe).
http://ipic.su/img/img7/fs/example.1533898774.png

3. Щелкните по ней один раз ЛКМ
http://ipic.su/img/img7/fs/example.1533898990.png

4. И наконец, в адресной строке скопируйте получившуюся ссылку. Вот и все!
Теперь вы можете поделиться ссылкой в своем чате или просто отправить другу
http://ipic.su/img/img7/fs/example.1533899140.png

А еще, добавлено несколько новых решений для ваших чатов smile

Всем хороших выходных и приятного творчества с ChaTemplate

85 (Вчера 14:59:29 отредактировано MineiM)

Re: ChaTemplate - CSS для Chatovod.ru

Дарим шаблон "Подключайся, общайся"

http://ipic.su/img/img7/fs/example.1534430209.png

Всем привет! Торопитесь!

Только сегодня и навсегда мы дарим пользователям чатовода этот удивительно простой и красивый дизайн чата.
В нем доступно 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 или в нашу группу ВКонтакте.
Нашли ошибку в коде? Напишите здесь в теме или отправьте сообщение в наш чат

Всем удачи и приятного творчества!