Быстрый лёгкий надёжный форумный движок
Вы не вошли.
Страницы 1
Тема закрыта
Во многих форумах этот реализовано, для лучшего визуального отделения постов друг от друга. 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 всавьте своё значение цвета.
Можно увидеть примеры отдельно для roweven и отдельно для rowodd?
И еще напишите пошагово как делать. Типа открыть файл такой-то, сделать то-то.
Изменения вносятся для каждой темы отдельно, в файлы ***_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}
В результате получаешь:
Можно делать так чтобы цвета менялись только горизонтально, а не в шахматном порядке.
Чтобы первое сообщение от первого автора было белым.
Чтобы второе сообщение второго автора было серым?
У меня получилось как на скриншоте в шахматном порядке. Как сделать чтобы было не в шахматном порядке, как написал выше?
Можно делать так чтобы цвета менялись только горизонтально, а не в шахматном порядке.
Чтобы первое сообщение от первого автора было белым.
Чтобы второе сообщение второго автора было серым?
Конечно можно. Для этого выставляешь один цвет для классов с *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}
В результате:
.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
При таком подходе, как выше, придется добавлять визуальные разделители вроде бордеров, а то получается сплошное поле - нечитабельно. Лучше оставить стандартную расцветку, и либо менять только тело сообщения, либо брать для левого и для правого блоков цвета на несколько тонов темнее или светлее, от соответствующих оригинальных цветов.
Хорошо. Насколько я понял все вариации определяются всего двумя параметрами.
Первый вариант.
/* 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}
Ура, по моему сделал что хотел. Именно так почти.
/* 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)
во втором варианте реализуется дополнительно стиль для .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, розовый цвет сделал для примера, как был использован выше не мной темный цвет
hcs, Ваша идея в самый раз. Ценность этого топика, то есть темы очень важна.
Что фигово, так это что под classic и под oxygen цвета надо подбирать по разному.
Под classic вообще хорошо подошло.
Редактировался torg (2006-10-19 13:39:47)
под каждую тему естественно свои цвета.
вообще это решение претендует не на корреткировки существующих стилей, хотя это не возбраняется, а на внедрение в новые оригинальные стили. к примеру лично я на эту идею натолкнулся реализуя оксиген из версии punBB1.3 (он еще не представлен общественности, но те кто следят за развитием движка его давно уже видели) для punBB1.2, ну и естественно не смог не поделится находкой. кроме этого я обнаружил, что верстка форума достаточно гибкая для реализации еще некоторых интересных вещей, к примеру меню с меняющимся фоном, я уже писал в другой теме об этом, и боковые меню.
возможно я поделюсь красивым боковым меню, но не раньше чем устраню косяк в админке для своего стиля под кодовым названием Oxygen_Mod
Мда. Насчет бордеров я ошибся, поскольку бордер левого блока задействован для заливки одним цветом с блоком пространства, которое образуется под данными автора, если пост очень большой. Если же задествовать бордер правого блока, то он почемуто съезжает и получается каша. Таким образом сделать весь пост, включая данные автора, одним цветом и отделить данные от поста бордером - но получится.
Кстати, чтобы под данными автора не появлялся квадрат инородного цвета надор добавить этот стиль:
DIV.roweven DIV.postright,DIV.roweven DIV.postfootright {BORDER-LEFT-COLOR: #FCFCFC}
В код цвета надо вставить ваш цвет.
Главное скин classic не имеет этого глюка. А новый стиль oxygen имеет.
Недоработка, блин. Хотя classic тоже где-то не доработан. В общем лучше иметь что-то чем ничего. Punbb рулит.
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}
Я конечно не hcs, то эту строчку можно совать в любое место css файла.
А вообще очень полезная фича, в Novin интегрируется с первого раза и без каких-либо проблем. Спасибо hcs
Страницы 1
Тема закрыта