BBCODES

[Dj Dance 185]

Помогите разобраться с стилями редактора (BBCODES). Уже замучился экспериментировать, ничего не получается :(

Начну как бы с причины! Сделал краткие новости таким образом, чтобы первая картинка в содержимом новости автоматически уменьшается до нужного размера и выводилась слева от текста новости. И тут же, соответственно, если в новости нет картинки, просто выводится текст новости. Если вы спросите меня зачем это надо, сразу отвечу, для придания упорядоченного вида новостям.

В shortstory.tpl сделал так:

<div class="news"><span class="artcls">{short-story}</span></div>

В style.css сделал так:

.news { здесь стили для новости ... }

.artcls img { display: none; display: expression(this.previousSibling==null?'block':'none'); }

.artcls img:first-child {display: block !important; float: left; width: 150px; height: auto; margin-right: 10px; }

В целом, то что хотел, то и получил. Но как говорится, не тут то было. После применения данных стилей все кнопки редактора (BBCODES) при быстром редактировании исказились, к примеру: кнопки стали 150 пикселей в ширину... и так далее... И тут я начал ковырять стили редактора. В engine.css получилось так:

.bbcodes { background-color: #ffffff; border: 1px solid #e0e0e0; color: #ffffff; font-size: 11px; font-family: tahoma; width: 120px; height: 20px; background-image: url(../images/dlet_bttn_bbcodes.gif); background-repeat: repeat-x; font-weight: bold; }

.editor textarea { color: #555555; font-size: 11px; font-family: tahoma; background-image: url(../images/dlet_field_o.gif); background-repeat: repeat-x; background-color: #ffffff; }

.bbcodes_poll { background-color: #ffffff; border: 1px solid #e0e0e0; color: #ffffff; font-size: 11px; font-family: tahoma; width: 120px; height: 20px; background-image: url(../images/dlet_bttn_bbcodes.gif); background-repeat: repeat-x; font-weight: bold; }

.editor_button { float: left; cursor: pointer; padding-left: 2px; padding-right: 2px; }

.editor_buttoncl { float: left; cursor: pointer; padding-left: 1px; padding-right: 1px; border-left: 1px solid #bbbbbb; border-right: 1px solid #bbbbbb; }

.editbclose { float: right; cursor: pointer; }

.editor_button select { font-family: tahoma; font-size: 11px; }

.editor_button img {display: inline !important; width: auto !important; height: 25px !important; margin: 0; }

.editbclose img { display: inline !important; width: auto !important; height: 25px !important; margin: 0; padding: 0; }

.editor_button_brk img { display: inline !important; width: auto !important; height: 25px !important; margin: 0; padding: 0; }

Собственно, было изменено/добавлено:

.editor_button img {display: inline !important; width: auto !important; height: 25px !important; margin: 0; }

.editbclose img { display: inline !important; width: auto !important; height: 25px !important; margin: 0; padding: 0; }

.editor_button_brk img { display: inline !important; width: auto !important; height: 25px !important; margin: 0; padding: 0; }

Кстати, вопрос: для .editor_button_brk img прописал display: none и поле выбора шрифта ушло влево (смотрите скрин 2), как восстановить элемент??

Вычитал то, что изменить значение параметра и сделать его вновь видимым можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учетом вновь добавленного элемента. Этого я совсем не понял, какие еще скрипты, может кто знает??

Скрин 1 (нормальное отображение редактора):

Скрин 2 (то что получилось):

Основной вопрос: как сделать то, что получилось на скрине 2, таким же как на скрине 1 ???

Следующий вопрос: для .editor_button_brk img прописал display: none и поле выбора шрифта ушло влево (смотрите скрин 2), как восстановить элемент???

Дополнительный вопрос: может у кого есть еще варианты как сделал краткие новости таким образом, чтобы первая картинка в содержимом новости автоматически уменьшается до нужного размера и выводилась слева от текста новости???

Вроде как всё описал, помогите люди добрые

Изменено 3 февраля 2010 пользователем Dj Dance

[inokentik 45]

Вариант есть: использовать допполя

[Dj Dance 185]

Вариант есть: использовать допполя

Наверное буду делать доп. полями

Остался последний вопрос. В engine.css есть класс .editor_button_brk img, я умудрился удалить его отображение стилем display: none. Как сделать его вновь видимым?????

С справочника:

display: none - временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. Изменить значение параметра и сделать его вновь видимым можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происхоит переформатирование данных на странице с учетом вновь добавленного элемента.

Объектная модель

[window.]document.getElementById("elementID").style.display

Как обратиться к свойствам через объектную модель я вообще не понял Как это делается???

[Dj Dance 185]

Разобрался :lol: Вопрос снят