(✿◠‿◠)Форум общения, советы дизайнерам(ง ͠° ͟ل͜ ͡°)ง

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Основная часть чата

Сообщений 1 страница 10 из 10

1

Тут будут собраны коды для оформления основной части чата где размещаются сообщения.

0

2

Выделение сообщения администратора:

Код:
.chatMessage strong { 
/* Выделенное сообщение Админа чата */
    background-color: #ffcc00;
    font-size: 14pt;
}

Выделенное персональное сообщение:

Код:
.chatMessage.chatMessageToMe { 
/* Фон персональных сообщений нику (при указании ника) */
     background-color: #a3f7d0;
}

Выделение сообщения пользователя с Vip статусом:

Код:
.chatMessage, > span {
     background-color: #99cc99;
}

Выделение сообщения для обычных пользователей:

Код:
.chatMessage > span { 
/* Выделенное сообщение пользователя (не VIP) */
    background-color: #99cc99;
    font-size: 14pt;
    border-radius: 10px;
}

0

3

Выделение ника пользователя в сообщениях пунктиром:

Код:
.user(id пользователя) {
   border-bottom: 2px dotted black; 
   font-size: small;    
}

Выделение ника пользователя точками и большим шрифтом:

Код:
.user(id пользователя) {
   border-bottom: 2px dotted violet;
   font-size: large; 
   font-family: Cooper Black;    
}

0

4

Код для увелечения (уменьшения) междустрочного растояния:

Код:
.chatMain .chatMessages, .chatMain .chatPrivateMessages {
    line-height: 2.2em;
}

0

5

Код иконки для отдельного пользователя перед ником в сообщениях:

Код:
.chatUserFrom.user(id пользователя)::before {
    width: 16px;
    height: 16px;
    background-image: url("ссылка на иконку 18 на 18");
    display: inline-block;
    content: "";
    vertical-align: middle;
    margin-right: 3px;
}

Код текста для отдельного пользователя перед ником в сообщениях:

Код:
.chatUserFrom.user(id пользователя)::before {
    content: "ВАША НАДПИСЬ";
    margin-right: 3px;
}

0

6

Код для смены курсора:

Код:
.chat {
    cursor: url("ссылка на курсор"), default;
}

Код курсора при наведение на ссылку или кнопку:

Код:
a, input[type="button"], input[type="submit"] {
   cursor: url(ссылка на курсор), default;
}

0

7

Код для смены иконок меню при нажатии на ник в окне сообщений:

Код:
/*Код смены иконки меню "Анкета"*/
.chatUserMenuInfo {
    background: url(ссылка на иконку 18 на 18);
}
/*Код смены иконки меню "Открыть приват"*/
.chatUserMenuPrivate {
    background: url(ссылка на иконку 18 на 18);
}
/*Код смены иконки меню "Фотографии"*/
.chatUserMenuItems li:hover a {
    background: url(ссылка на иконку 18 на 18);
}
/*Код смены иконки меню "Подарить"*/
.chatUserMenuGift {
    background: url(ссылка на иконку 18 на 18);
}
/*Код смены иконки меню "Игнор"*/
.chatUserMenuIgnore {
    background: url(ссылка на иконку 18 на 18);
}
/*Код смены иконки меню "Забанить"*/
.chatUserMenuBan {
    background: url(ссылка на иконку 18 на 18);
}

0

8

Код иконки ползунка для прокрутки страницы:

Код:
.vscrollable::-webkit-scrollbar {width:16px;} .vscrollable::-webkit-scrollbar-thumb { background: transparent url(ссылка на иконку 18 на 18) 0 100% no-repeat;} .vscrollable::-webkit-scrollbar-track, .vscrollable:hover::-webkit-scrollbar-thumb {background-color: transparent;} .chatMessages.vscrollable, .chatPrivateMessages.vscrollable {right:180px;}

0

9

Код ленты повторяющихся картинок справа чата возле окна ников и слева по краю обводки чата:

Код:
#chatChannel_main {
    background-image: url(ссылка на картинку (слева)), url(ссылка на картинку (справа));
    background-position: left, right;
    background-repeat: repeat-y;
}

0

10

Код времени перед сообщением:

Код:
.chatTime {
float: left;
}

Код изменения цвета и размера времени:

Код:
.chatTime {
     font-size: 12pt; 
     color: #a80000;} 

0



Рейтинг форумов | Создать форум бесплатно © 2007–2017 «QuadroSystems» LLC