FAQ по Chatovod — CSS

CSS — Общие настройки стилей

На страничке FAQ по Chatovod — CSS собраны ответы на часто задаваемые вопросы по настройке общих стилей для чатов, такие как смена фона, изменение углов, кнопок и многое другое. Если у вас останутся вопросы, Вы можете задать их внизу страницы в комментариях.

Как поставить фон/картинку на страницу входа?

.chatFull .transparent {
   background-color: #fff; /* цвет фона */
   background-image: url('ссылка на ваше изображение');
   background-position: 50% 50%; /* положение картинки по центру слева и сверху */
   background-size: cover; /* растянуть изображение на весь экран */
   opacity:1; /* видимость картинки, 0.5 - полупрозрачная */
}

Как поставить фон/картинку в окне привата?

.chatPrivateMessages {
   background-color: #fff; /* цвет фона */
   background-image: url('ссылка на ваше изображение');
   background-position: 50% 50%; /* положение картинки по центру слева и сверху */
   background-size: cover; /* растянуть изображение на весь экран */
   opacity:1; /* видимость картинки, 0.5 - полупрозрачная */
}

Как сделать круглые углы в чате ?

Для закругления кнопок, панелей чата и прочих мелочей, необходимо добавить border-radius

-webkit-border-radius: 3px; 
-moz-border-radius: 3px;
border-radius: 3px;

где 3px — это угол среза. Чем больше число, тем округлее будет угол. Для полного закругления можно воспользоваться правилом border-radius:50%;

Если вам нужно закруглить определенный угол, воспользуйтесь кодом:

border-top-left-radius:3px;
border-top-right-radius:3px;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;

Как растянуть фоновое изображение?

.chatMain {
   background-size: cover; /* растянуть изображение на весь экран */
}

Как сделать свой курсор в чате?

.chat,
.chatMain {cursor: url(ссылка на картинку курсора), auto;}

Как разместить список пользователей слева?

/* Список пользователей слева */
.chatMain .chatPeople {
    left: 0 !important;
}
.chatMain .chatMessages, .chatMain .chatPrivateMessages {
    right: 0 !important;
    left: 170px !important;
}
.chatTabs {
    left: 171px !important;
    right: 0 !important;
}

Как изменить кнопку вкл/выкл звук в чате?

Предлагаем вам интересное решение по замене кнопки sound — это стильная пульсирующая в состоянии «on» кнопка звука без надписи.

.chatFooter .chatFooterWrapper .chatPanel div.chatSoundPanel a { 
background: url("//madeas.ru/icon/online.png") 0 0 no-repeat; 
animation: pulse 2s infinite; 
border-radius: 50%; 
padding-left: 15px; 
padding-top: 5px; 
height: 10px; 
font-size:0; 
}  /* ChaTemplate */
.chatFooter .chatFooterWrapper .chatPanel div.chatSoundPanel a.muted { 
background: url("//madeas.ru/icon/offline.png") 0 0 no-repeat; 
animation: none; 
} 
@-webkit-keyframes pulse { 
0% { 
-webkit-box-shadow: 0 0 0 0 rgba(34,139,34, 0.4); 
} 
70% { 
-webkit-box-shadow: 0 0 0 10px rgba(0,0,0, 0); 
} 
100% { 
-webkit-box-shadow: 0 0 0 0 rgba(0,0,0, 0); 
} 
} 
@keyframes pulse { 
0% { 
-moz-box-shadow: 0 0 0 0 rgba(34,139,34, 0.4); 
box-shadow: 0 0 0 0 rgba(34,139,34, 0.4); 
}  /* ChaTemplate */
70% { 
-moz-box-shadow: 0 0 0 10px rgba(0,0,0, 0); 
box-shadow: 0 0 0 10px rgba(0,0,0, 0); 
} 
100% { 
-moz-box-shadow: 0 0 0 0 rgba(0,0,0, 0); 
box-shadow: 0 0 0 0 rgba(0,0,0, 0); 
} 
} 

Как сделать бегущий заголовок?

.chatTitle {
   white-space:nowrap;
   overflow:hidden;
   -webkit-animation: step 5s steps(50) infinite;
   animation: step 5s steps(50) infinite;
}
@keyframes step { 
   0% { width: 0;}
   100% {width:100%;}
} /* ChaTemplate */
@-webkit-keyframes step {
   0% { width: 0;}
   100% {width:100%;}
}

Как сделать увеличение картинки при наведении?

Представим, что вы хотите добавить логотип фирмы в свой чат, который увеличивался бы при наведении на него. Для этого мы можем использовать псевдоэлементы и css анимацию.

.chatTitle {
   padding-left:45px;
}

.chatTitle::before {
    position: absolute;
    width:45px;
    height:45px; 
    top:12px;
    left:12px;
    content:'';
    background: url(здесь ссылка на ваш логотип) 0 0 no-repeat;
    background-size:40px;
    transition:all 0.3s ease;
} /* ChaTemplate */

.chatHeader:hover .chatTitle::before {
    -webkit-transform: scale(1.5); /* эффект увеличения в разы */
    -ms-transform: scale(1.5);
    transform: scale(1.5);
}