251

Re: Редактирование CSS-стилей чата бесплатно

вопрос.
возможно ли на фон чата наложение двух картинок?
нужен и фон, и небольшая картинка в правом нижнем углу. одним файлом   с совмещенными картинками в фотошопе на мелких экранах выглядит довольно убого(

252

Re: Редактирование CSS-стилей чата бесплатно

YoG пишет:

вопрос.
возможно ли на фон чата наложение двух картинок?
нужен и фон, и небольшая картинка в правом нижнем углу. одним файлом   с совмещенными картинками в фотошопе на мелких экранах выглядит довольно убого(

В зависимости от того, какой именно угол ты имеешь ввиду.
Если я тебя правильно понял, то держи:
.chatPeople.vscrollable {
background-image:url(ссылка на картинку);
background-position: bottom;
background-repeat:no-repeat;
}

Re: Редактирование CSS-стилей чата бесплатно

Небольшое дополнение:
фоновая картинка размещается так, как показано на рисунке:
http://www.imageup.ru/img216/2625965/nastr-fona-chata.gif
а уже потом применяется указанный выше код CSS.

254

Re: Редактирование CSS-стилей чата бесплатно

спасибо огромное, работает. а то на мбильных такое уг было

255

Re: Редактирование CSS-стилей чата бесплатно

Подскажите, как можно увеличить по высоте раскрывающееся окно смайлов.

256

Re: Редактирование CSS-стилей чата бесплатно

Столкнулся с такой проблемой, стоит фоновая картинка, из за неё сообщения видно плохо, сделал обводку, таким кодом
Но, вылезла проблема, если цвет шрифта у пользователя стандартный, то он не обводится
так же нет подсветки ника при обращении, точнее его замазывает

image.prntscr.com/image/4dda11ab6744438e82340af2232a5637.png

.chatMessage > span {
font-family: ;
text-shadow: 
        -0   -2px 0   #F5F4EF,
         0   -2px 0   #F5F4EF,
        -0    2px 0   #F5F4EF,
         0    2px 0   #F5F4EF,
        -2px -0   0   #F5F4EF,
         2px -0   0   #F5F4EF,
        -2px  0   0   #F5F4EF,
         2px  0   0   #F5F4EF,
        -1px -2px 0   #F5F4EF,
         1px -2px 0   #F5F4EF,
        -1px  2px 0   #F5F4EF,
         1px  2px 0   #F5F4EF,
        -2px -1px 0   #F5F4EF,
         2px -1px 0   #F5F4EF,
        -2px  1px 0   #F5F4EF,
         2px  1px 0   #F5F4EF,
        -2px -2px 0   #F5F4EF,
         2px -2px 0   #F5F4EF,
        -2px  2px 0   #F5F4EF,
         2px  2px 0   #F5F4EF,
        -2px -2px 0   #F5F4EF,
         2px -2px 0   #F5F4EF,
        -2px  2px 0   #F5F4EF,
         2px  2px 0   #F5F4EF;
}  

257

Re: Редактирование CSS-стилей чата бесплатно

Можно ли сделать приветственное сообщение, которое будет видно только при входе в чат, каждому пользователю? включая ссылки и т.д ?

258 (2017-01-06 17:13:16 отредактировано inva-levan)

Re: Редактирование CSS-стилей чата бесплатно

Подскажите пожалуйста как добавить скрипт от http://catcut.net/7Xp5 в это окно?
Опишите готовый скрипт чтоб мне не париться.

Пример скрипт окна:
/*Объявление чата в шапке чата*/
.chatHeader:before {
content: "Вместо этого текста должен быть скрипт картинки, кнопки и т.д. Почему то не работает.";

font-size: 13px;
color: #ff0000;
font-weight: bold;
display: inline-block;
margin: 0 0 1em; /* Отступы */
    white-space: pre-wrap;


display: block;
background: transparent url("http://sds-dance.ru/ff/5/linii_vertikalnyy_blesk_fon_yarkiy_1600x1200.jpg") no-repeat scroll 0 0;
background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 5px;
    box-shadow: 0 0 0 1px #60B88D, 0 0 0 2px #ff0000, 0 0 0 4px #BFE3D1;
   width: 267px;
    height: 200px;
    line-height: 18px;
    opacity: 0;
padding: 10px 10px;
     position: absolute;
    right: 240px;
    top: -500px;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
  }

.chatHeader:hover:before {
display: block;
background: linear-gradient(#0BB3CF,#D7DFED, #F5FCFD, #0BB3CF)
  width: 267px;
    height: 200px;
    border-radius: 10px;
   box-shadow: 0 0 0 1px #60B88D, 0 0 0 2px #90CDAF, 0 0 0 4px #BFE3D1;   
right: 250px;
top: 200%;
    opacity: 1;
   
  }

259

Re: Редактирование CSS-стилей чата бесплатно

Ссылка не открывается, реклама какая-то только.

http://chatovod.ru - чат для вашего сайта

260

Re: Редактирование CSS-стилей чата бесплатно

подскажите пожалуйста, возможно ли изменить цвет слова *Отправить*

261

Re: Редактирование CSS-стилей чата бесплатно

YoG пишет:

подскажите пожалуйста, возможно ли изменить цвет слова *Отправить*

Например так:

.chatFooter .chatFooterWrapper .chatPanel .chatSendButtonPanel .chatSendButton {
    background-color: #aa0000;
}
http://chatovod.ru - чат для вашего сайта

262

Re: Редактирование CSS-стилей чата бесплатно

Admin пишет:
YoG пишет:

подскажите пожалуйста, возможно ли изменить цвет слова *Отправить*

Например так:

.chatFooter .chatFooterWrapper .chatPanel .chatSendButtonPanel .chatSendButton {
    background-color: #aa0000;
}

нее, это меняет фон  кнопки, а текст как был черным, так и остался(

263

Re: Редактирование CSS-стилей чата бесплатно

Для текста надо добавить color:#ffffff; после строки background...

http://chatovod.ru - чат для вашего сайта

264

Re: Редактирование CSS-стилей чата бесплатно

а как сделать несколько действий сразу?
ну тоесть к примеру
.chatMessage, > span {
     background-color: #99cc99;
}
(
и ещё чтото зделать

265

Re: Редактирование CSS-стилей чата бесплатно

проблема решена

266

Re: Редактирование CSS-стилей чата бесплатно

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

267 (2017-01-13 07:50:30 отредактировано Денис)

Re: Редактирование CSS-стилей чата бесплатно

Как изменить сам текст (другие слова), а так же цвет и размер кнопки ВОЙТИ В ЧАТ?

268 (2017-01-13 19:30:31 отредактировано Liana)

Re: Редактирование CSS-стилей чата бесплатно

Денис пишет:

Как изменить сам текст (другие слова), а так же цвет и размер кнопки ВОЙТИ В ЧАТ?


Меня тоже интересует этот вопрос - Замена текста на кнопке "Войти в чат" на свой.
Есть такое решение? или не предусмотрено?
Если длинный текст, то и саму кнопку нужно растягивать по горизонтали.

269 (2017-01-15 16:44:57 отредактировано Admin)

Re: Редактирование CSS-стилей чата бесплатно

Тест изменить нельзя.
Несколько свойств поменять можно:

#join-chat-button {
    background-color: #aa0000;
color:#ffffff;
width: 200px;
}
http://chatovod.ru - чат для вашего сайта

270 (2017-01-15 09:01:07 отредактировано Денис)

Re: Редактирование CSS-стилей чата бесплатно

Это ответ видимо про кнопку ОТПРАВИТЬ Send , а вопрос был про кнопку ВОЙТИ, и видимо надо заменить слово на Join или как?

Думаю это можно найти в справочнике CSS или через просмотр кода элемента в браузере правой кнопкой.

271

Re: Редактирование CSS-стилей чата бесплатно

id кнопки "Войти" join-chat-button, соответственно стили ей задаются через #join-chat-button {}
заменить надпись в целом возможно, но очень нелегко т.к. придется создавать псевдоэлемент и позиционировать поверх имеющейся надписи. Я так заменял иконки модераторов-администраторов, пока им не добавили класс

272

Re: Редактирование CSS-стилей чата бесплатно

creatordemigod пишет:

id кнопки "Войти" join-chat-button, соответственно стили ей задаются через #join-chat-button {}
заменить надпись в целом возможно, но очень нелегко т.к. придется создавать псевдоэлемент и позиционировать поверх имеющейся надписи. Я так заменял иконки модераторов-администраторов, пока им не добавили класс

Напишите код пожалуйста.

273

Re: Редактирование CSS-стилей чата бесплатно

#join-chat-button {
    padding-right: 37px;
}

.chatFooterWrapper:after {
    content: "Надпись на кнопке";
    color: #333;
    background: #fff;
    position: absolute;
    left: 16px;
    top: 23px;
}

Вариант с псевдоэлементом. Первый минус - не очень удобно подгонять размеры, второй - псевдоэлемент заслоняет кнопку, и на нее сложнее нажать.

Вот если б запилили возможность подключать java скрипты к чату... хотя их надо контролировать, иначе легко смогут нагадить.

274

Re: Редактирование CSS-стилей чата бесплатно

Спасибо. Жаль что поле псевдоэлемента не кликабельно.

275

Re: Редактирование CSS-стилей чата бесплатно

Еще есть вариант с подсовыванием фонового изображения в кнопку. Таким образом вы сможете заменить текст на кнопке:

#join-chat-button {
    color: rgba(0,0,0,0);
    background: url(ссылка на озображение) no-repeat center;
}