Русское сообщество fluxbb

hcs

Гость

Чередование цвета сообщений

Во многих форумах этот реализовано, для лучшего визуального отделения постов друг от друга. PunBB не исключение и тоже реализует эту фичу, но в стандартных темах нет её поддержки. Между тем это делается 2-3 строками.

Чтобы  чередование  заработало надо добавить стиль для roweven или для rowodd, кому как нравится.
В моём примере реализуется стиль для roweven. Для rowodd будет отрабатываться дефолтный стиль.
Для левого блока (имя автора и проч):

.roweven DIV.postleft, .roweven DIV.postfootleft, .roweven DIV.blockpost LABEL {BACKGROUND-COLOR: #fCfCfC}

Для правого блока (само сообщение):

DIV.roweven DIV.box, .roweven DIV.postright, .roweven DIV.postfootright {BACKGROUND-COLOR: #fcfcfc}

В BACKGROUND-COLOR всавьте своё значение цвета.

torg

Гость

Re: Чередование цвета сообщений

Можно увидеть примеры отдельно для roweven и отдельно для rowodd?

torg

Гость

Re: Чередование цвета сообщений

И еще напишите пошагово как делать. Типа открыть файл такой-то, сделать то-то.

coordinator

Гость

Re: Чередование цвета сообщений

Изменения вносятся для каждой темы отдельно, в файлы ***_cs.css
Например в Oxygeg_cs.css находишь:

/****************************************************************/
/* 2. POST BACKGROUNDS AND TEXT */
/****************************************************************/

/* 2.1 This is the setup for posts. */

DIV.blockpost DIV.box, DIV.postright, DIV.postfootright {BACKGROUND-COLOR: #DEDFDF}
DIV.postright, DIV.postfootright {BORDER-LEFT-COLOR: #f1f1f1}
DIV.postleft, DIV.postfootleft, DIV.blockpost LABEL {BACKGROUND-COLOR: #F1F1F1}

/* 2.2 Background for post headers and text colour for post numbers in viewtopic */

DIV.blockpost H2 {BACKGROUND-COLOR: #006FC9}
DIV.blockpost H2 SPAN.conr {COLOR: #AABDCD}

/* 2.3 This is the line above the signature in posts. Colour and background should be the same */

.pun HR {BACKGROUND-COLOR: #333; COLOR: #333}

Добавляешь строки, которые привел hcs и получаешь:

/****************************************************************/
/* 2. POST BACKGROUNDS AND TEXT */
/****************************************************************/

/* 2.1 This is the setup for posts. */

DIV.blockpost DIV.box, DIV.postright, DIV.postfootright {BACKGROUND-COLOR: #DEDFDF}
DIV.postright, DIV.postfootright {BORDER-LEFT-COLOR: #f1f1f1}
DIV.postleft, DIV.postfootleft, DIV.blockpost LABEL {BACKGROUND-COLOR: #F1F1F1}

/* 2.2 Background for post headers and text colour for post numbers in viewtopic */

DIV.blockpost H2 {BACKGROUND-COLOR: #006FC9}
DIV.blockpost H2 SPAN.conr {COLOR: #AABDCD}

/* 2.3 This is the line above the signature in posts. Colour and background should be the same */

.pun HR {BACKGROUND-COLOR: #333; COLOR: #333}

/* 2.4 Different color for posts */

.roweven DIV.postleft, .roweven DIV.postfootleft, .roweven DIV.blockpost LABEL {BACKGROUND-COLOR: #DEDFDF}
DIV.roweven DIV.box, .roweven DIV.postright, .roweven DIV.postfootright {BACKGROUND-COLOR: #fcfcfc}

В результате получаешь:

torg

Гость

Re: Чередование цвета сообщений

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

torg

Гость

Re: Чередование цвета сообщений

У меня получилось как на скриншоте в шахматном порядке. Как сделать чтобы было не в шахматном порядке, как написал выше?

coordinator

Гость

Re: Чередование цвета сообщений

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

Конечно можно. Для этого выставляешь один цвет для классов с *left и *right
И добавляешь стиль для rowodd

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

/****************************************************************/
/* 2. POST BACKGROUNDS AND TEXT */
/****************************************************************/

/* 2.1 This is the setup for posts. */

DIV.blockpost DIV.box, DIV.postright, DIV.postfootright {BACKGROUND-COLOR: #DEDFDF}
DIV.postright, DIV.postfootright {BORDER-LEFT-COLOR: #f1f1f1}
DIV.postleft, DIV.postfootleft, DIV.blockpost LABEL {BACKGROUND-COLOR: #F1F1F1}

/* 2.2 Background for post headers and text colour for post numbers in viewtopic */

DIV.blockpost H2 {BACKGROUND-COLOR: #006FC9}
DIV.blockpost H2 SPAN.conr {COLOR: #AABDCD}

/* 2.3 This is the line above the signature in posts. Colour and background should be the same */

.pun HR {BACKGROUND-COLOR: #333; COLOR: #333}

/* 2.4 Different color for posts */

.roweven DIV.postleft, .roweven DIV.postfootleft, .roweven DIV.blockpost LABEL {BACKGROUND-COLOR: #fcfcfc}
DIV.roweven DIV.box, .roweven DIV.postright, .roweven DIV.postfootright {BACKGROUND-COLOR: #fcfcfc}

.rowodd DIV.postleft, .rowodd DIV.postfootleft, .rowodd DIV.blockpost LABEL {BACKGROUND-COLOR: #666666}
DIV.rowodd DIV.box, .rowodd DIV.postright, .rowodd DIV.postfootright {BACKGROUND-COLOR: #666666}

В результате:

torg

Гость

Re: Чередование цвета сообщений

.roweven DIV.postleft, .roweven DIV.postfootleft, .roweven DIV.blockpost LABEL {BACKGROUND-COLOR: #99CCCC}
DIV.roweven DIV.box, .roweven DIV.postright, .roweven DIV.postfootright {BACKGROUND-COLOR: #99CCCC}

Такая фигня получилась.
http://forum.torg.su/viewtopic.php?id=114

hcs

Гость

Re: Чередование цвета сообщений

При таком подходе, как выше, придется добавлять визуальные разделители вроде бордеров, а то получается сплошное поле - нечитабельно. Лучше оставить стандартную расцветку, и либо менять только тело сообщения, либо брать для левого и для правого блоков цвета на несколько тонов темнее или светлее, от соответствующих оригинальных цветов.

torg

Гость

Re: Чередование цвета сообщений

Хорошо. Насколько я понял все вариации определяются всего двумя параметрами.

Первый вариант.

/* 2.4 Different color for posts */

.roweven DIV.postleft, .roweven DIV.postfootleft, .roweven DIV.blockpost LABEL {BACKGROUND-COLOR: #DEDFDF}
DIV.roweven DIV.box, .roweven DIV.postright, .roweven DIV.postfootright {BACKGROUND-COLOR: #fcfcfc}

Второй вариант.

/* 2.4 Different color for posts */

.roweven DIV.postleft, .roweven DIV.postfootleft, .roweven DIV.blockpost LABEL {BACKGROUND-COLOR: #fcfcfc}
DIV.roweven DIV.box, .roweven DIV.postright, .roweven DIV.postfootright {BACKGROUND-COLOR: #fcfcfc}

.rowodd DIV.postleft, .rowodd DIV.postfootleft, .rowodd DIV.blockpost LABEL {BACKGROUND-COLOR: #666666}
DIV.rowodd DIV.box, .rowodd DIV.postright, .rowodd DIV.postfootright {BACKGROUND-COLOR: #666666}

torg

Гость

Re: Чередование цвета сообщений

Ура, по моему сделал что хотел. Именно так почти.

/* 2.4 Different color for posts */

Здесь слева где ник фон белый:
.roweven DIV.postleft, .roweven DIV.postfootleft, .roweven DIV.blockpost LABEL {BACKGROUND-COLOR: #FFFFFF}

Здесь справа где сообщения фон серый:
DIV.roweven DIV.box, .roweven DIV.postright, .roweven DIV.postfootright {BACKGROUND-COLOR: #eeeeee}

Здесь слева где ник фон светло-розовый примерно:
.rowodd DIV.postleft, .rowodd DIV.postfootleft, .rowodd DIV.blockpost LABEL {BACKGROUND-COLOR: #FFCCCC}

Здесь слева где фон темно-розовый примерно:
DIV.rowodd DIV.box, .rowodd DIV.postright, .rowodd DIV.postfootright {BACKGROUND-COLOR: #FF9999}

http://forum.torg.su/viewtopic.php?id=48
Скриншот делать не умею. Кто может сделайте вместо меня, чтобы другие видели.

====
На одном скине глюк замечал. И щас этот же глюк всплыл у меня на classic и на oxygen.
http://forum.torg.su/viewtopic.php?pid=587
Слева ниже ника
E-mail  Web-сайт - тут светло-розовый как и надо
--
!!!Вот тут цвета нарушены почему то. Серый цвет.!!!
--
Online - тут светло-розовый как и надо

Редактировался torg (2006-10-19 12:30:33)

hcs

Гость

Re: Чередование цвета сообщений

во втором варианте реализуется дополнительно стиль для .rowodd
в принципе это не обязательно, поскольку в пункте 2.1 Oxygeg_cs.css определяется основной стиль.
полагаю что всех устраивает стандартный цвет, который определен в этом разделе.
поэтому для расцветки предлагаю использовать раскраску для .roweven, т.е. "Первый вариант".
Цвета в нем надо подобрать на несколько тонов отличные от тех, что указаны в 2.1.
к примеру для оксигена можно так:

/* 2.4 Different color for posts */

DIV.roweven DIV.box, .roweven DIV.postright, .roweven DIV.postfootright {BACKGROUND-COLOR: #efefef}
.roweven DIV.postleft, .roweven DIV.postfootleft, .roweven DIV.blockpost LABEL {BACKGROUND-COLOR: #f6f7f7}

hcs

Гость

Re: Чередование цвета сообщений

Опоздал с ответом.
Хочу заметить, что на мой скромный взгляд этот розовый цвет ужасен, кроме того он не вписывается в оксиген.
Но дело ваше

torg

Гость

Re: Чередование цвета сообщений

hcs, розовый цвет сделал для примера, как был использован выше не мной темный цвет

torg

Гость

Re: Чередование цвета сообщений

hcs, Ваша идея в самый раз. Ценность этого топика, то есть темы очень важна.

torg

Гость

Re: Чередование цвета сообщений

Что фигово, так это что под classic и под oxygen цвета надо подбирать по разному.
Под classic вообще хорошо подошло.

Редактировался torg (2006-10-19 13:39:47)

hcs

Гость

Re: Чередование цвета сообщений

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

hcs

Гость

Re: Чередование цвета сообщений

Мда. Насчет бордеров я ошибся, поскольку бордер левого блока задействован для заливки одним цветом с блоком пространства, которое образуется под данными автора, если пост очень большой. Если же задествовать бордер правого блока, то он почемуто съезжает и получается каша. Таким образом сделать весь пост, включая данные автора, одним цветом и отделить данные от поста бордером - но получится.
Кстати, чтобы под данными автора не появлялся квадрат инородного цвета надор добавить этот стиль:

DIV.roweven DIV.postright,DIV.roweven  DIV.postfootright {BORDER-LEFT-COLOR: #FCFCFC}

В код цвета надо вставить ваш цвет.

torg

Гость

Re: Чередование цвета сообщений

Главное скин classic не имеет этого глюка. А новый стиль oxygen имеет.
Недоработка, блин. Хотя classic тоже где-то не доработан. В общем лучше иметь что-то чем ничего. Punbb рулит.

torg

Гость

Re: Чередование цвета сообщений

hcs

весь пост, включая данные автора, одним цветом и отделить данные от поста бордером - но получится.
Кстати, чтобы под данными автора не появлялся квадрат инородного цвета надор добавить этот стиль

То есть его писать в самый низ:
DIV.roweven DIV.postright,DIV.roweven  DIV.postfootright {BORDER-LEFT-COLOR: #FCFCFC}

Чтобы было так:
/* 2.4 Different color for posts */

.roweven DIV.postleft, .roweven DIV.postfootleft, .roweven DIV.blockpost LABEL {BACKGROUND-COLOR: #f6f7f7}
DIV.roweven DIV.box, .roweven DIV.postright, .roweven DIV.postfootright {BACKGROUND-COLOR: #efefef}

DIV.roweven DIV.postright,DIV.roweven  DIV.postfootright {BORDER-LEFT-COLOR: #FCFCFC}

Slavik

Гость

Re: Чередование цвета сообщений

Я конечно не hcs, то эту строчку можно совать в любое место css файла.

А вообще очень полезная фича, в Novin интегрируется с первого раза и без каких-либо проблем. Спасибо hcs