работа с чатом

Начнём с простого в разделе "дизайн", в окошке с КСС включаем птичку "Включить собственные правила CSS" и ставим вот этот код ".user0 { color: #405580; }"
ТиКтака: код цвета
Akimatory: Это код цвета ника гостей, ".user0" означает что пользователь с IDом "0" будет иметь цвет ника #405580, эти таблицы можно найти в интернете или фотошопе, суть шеснадцатиричной системы цвета такова:
Akimatory: #RRGGBB тоесть первые две цифры это градация красного цвета, вторая - зелёного, третья синего,
Akimatory: чем выше значиние тем ярче градация цвета, после 9 идут буквы A B C D E и F, F это самый яркий цвет.
ТиКтака: минутку я ткрою аьбом ископрую все то что ты мне посылаешь
ТиКтака: альбом
ТиКтака: и вообще минутку прости
20:52Akimatory: нам, допустим нужен красный цвет для гостя, ставим, ну например, #CD0000 это ярко алый цвет, если же добавить #CD2525 цвет станет мягче, такие пастэльные тона, как в Otlandе например.
Akimatory: ТиКтака, да не чего там уже вроде чайник нагрелся пойду чаю быстренько налью, я почему начинаю из долека и с цвета, чтобы постепенно всё с лёгкого к сложному, а там дальше ты и сама уже начнёшь понимать что к чему)
И так, если же мы сместим #CD0000 так #00CD00 будет ярко зелёный цвет.
как все эти коды CSS выглядить должны я тоже расскажу. .user0 - это оператор, (назовём его так, самого термина я не знаю, знаю что он контролирует цвет определённого пользователя), этот оператор стоит в начале кода, без пробелов спереди. { - за ним идёт эта скобка
Akimatory: .user0 { - вот так
color: #405580; эта часть кода идёт на другой строке с 5ю пробелами спереди (там по желанию но так удобнее когда он с отступом)на следующей строке } без пробела спереди стоит такая скобка, после неё трижды нажать Enter (чтоб код разделялся), дальше пойдёт уже другой код.
".user" это пользователь, а "0" это ID пользователя, так как у ВСЕХ без исклчения гостей ID всегда "0" то любой гость будет иметь ник того цвета что установишь.
ТиКтака: понятно
Akimatory: ТиКтака, если будет ".user2863331" то цвет п
/* Текст в чате */ - эта часть, именно так написаная, через /* описание кода */ тоесть опорный материал, что этот код делает, чтоб долго не думать "где там этот код для шрифта? "
chatMain .chatMessages, .chatMain .chatPrivateMessages - вот это вот всё, операторы, в каждом чате, форуме и т.д. они свои, по большей части. Тоесть на форуме эта штука так просто, без правки не заработает в отличии от того же HTML, тот заработает на любом утюге, главное просто скопировать.
.chatMain основные окна чата (их текст) .chatMessages - текст сообщений, всех, .chatMain - повтор оператора, возможно случайно указали .chatPrivateMessages - текст приватных сообщений
Этот код в целом охватывает всё текстовое что пишется конкретно в чат. Тоесть непосредственно сообщения, исключая ники пользователей.
font-family: serif; - эта часть отвечает за шрифт.
Arial, Verdana, Tahoma, Serif, Jura, Centaur Gothic, Book Antiqua и так далее
21:52Akimatory: Эти шрифты все можно посмотреть в блокноте обычном или в MS Word,Он так и называется "Семейство шрифта или шрифтов" font family
Akimatory: У нас здесь, на ТМЭ стоит serif
font-weight: bold; - эта часть кода делает шрифт жирным, значение "bold".
Akimatory: font-size: 24px; - размер шрифта, в пикселях.
text-shadow: 1px 1px 0px #000000; - тень текста, если поставить #FFFFFF текст будет светится белым, (если фон позволяет, чёрный например, как у нас.)
В чате 3 чел.Значения "1px 1px 0px" регулируют следующее: смещение вниз, смещение вправо, интенсивность. При значении "0px 0px 8px" смещения не будет, но будет очень большая, мягкая тень, во все стороны сразу.Есть ещё похожий кусок кода "box-shadow"Всё точно также как и в "text-shadow" но он, не везде применим, применяется ко всяким картинкам и прочим графическим объектам.
Системный сообщения.hatSystemMessage { color: #343480!important; font-size: 24px; font-style: italic; font-family: serif!important; font-weight: bold; }это сообщения вроде тех что чат выдаёт "Нас покидает такой-то-такой-то", "К нам присоединяется ...."ну и то что пишет через "/me" от третьего лица
chatSystemMessage - это как обычно оператор, конкретно этих сообщений.color: #343480!important; - цвет этих самых сообщений. Обрати внимание на "!important" - это указывает, по-моему, на важность атрибута "color", что цвет он должен менять принудительно, независимо от других установок. Точно не уверен, но скорее всего так.
font-size: 24px; - здесь сново размер как и в предыдущем коде. font-style: italic; - вот новый атрибут "style", он указывает на стиль шрифта. "italic" - наклонный, "strong" или "bold" - жирный, "strike" - зачёркнутый. а вот как подчёркнутый забыл... кажется "underline".
Akimatory: font-family: serif!important; - здесь всё как в предыдущем коде, только через "!important" - принудительно. font-weight: bold; - тоже что и в предыдущем коде.


A

/* Шапка чата */
.chatHeader {
background-image:url( http://x-lines.ru/letters/i/cyrillicfancy/0389/a53135/30/0/4nppbrgou9ejmwr54nspbgso1y.png );
background-position: center, 0px;
background-repeat:no-repeat;
background-color: #;
font-size: 0pt;
border-radius:5px;
box-shadow: 0 0 1px #777, 0 0 2px #777, 0 0 3px #777, 0 0 4px #777, 0 0 5px #777, 0 0 6px #777, 0 0 7px #777, 0 0 20px #777 inset;


}
/* Основной блок смайлов */
.chatPopupMenuDiv2, .smilesBox, .chatPeople ul.chatPeopleList li.hover {
background-image: url();
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 5px 0px 0px 10px;
border: 1px solid #;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 7px #ffe799;;
}

.smilesBox {
width:90%;
}
/* рисунок в правой части чата */
#.chatPeople.vscrollable {
background-image: url("https://img3.fonwall.ru/o/vk/artist-artwork-digital-art-space-vpgw.jpeg?route=thumb&h=350");
background-size: 100% 35%;
background-position: 20% 100%;
background-repeat: no-repeat;
}

/*ВЫДЕЛЕНИЕ НИКОВ СПРАВА ПОСЕТИТЕЛЕЙ*/
.chatPeople ul.chatPeopleList li {
background-image: url("");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
font-weight: bold;
padding: 6px 5px 6px 5px;
border: 1px solid #2E972E;
border-radius: 10px;
box-shadow: inset rgba(0,0,0,0.2) 0 3px 8px, inset rgba(252,255,255,0.3) 0 3px 8px, rgba(0,0,0,0.5) 0 3px 8px 3px;
}

.chatPeople ul.chatPeopleList li.hover {
background-image: transparent;
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
border: 0px solid #E48003;
border-radius: 10px;
box-shadow: inset rgba(0,0,0,0.6) 0 -3px 8px, inset rgba(252,255,255,0.7) 0 3px 8px, rgba(0,0,0,0.8) 0 3px 8px -3px;
}

.chatMain {
border-radius: 25px;
}

.chatHeader .chatTitle {
display: none;
}
/* Ники в чате */
div.chatMessage span.chatUserFrom {
font-family: Palatino Linotype;
font-size: 18px;
font-weight: bold;
font-style: none;
text-shadow: 1px 1px 2px #000000;
padding: 0px 10px 0px 0px;
}

/* Рисунок входа в чат */
.chatFull .transparent {
background-image: url("https://top-fon.com/uploads/posts/2023-01/1674701051_top-fon-com-p-nezhnii-fon-dlya-prezentatsii-skachat-besp-56.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
z-index: -7;
}