16 февр. 2010 г.

Django-cms, WYMEditor: свои стили.

По умолчанию набор стилей ограничен. Вот я и решил добавить свой стиль “center”, центрующий контент. На скрине он “PARA: Center”. Смысл “PARA” я не понимаю, но оставляю как есть.

after

Все доступные настройки данного плагина хранятся в cms/plugins/text/settings.py.

Я добавил в свой settings.py проекта следующие строки:


WYM_CLASSES = ",\n".join([

    "{'name': 'date', 'title': 'PARA: Date', 'expr': 'p'}",

    "{'name': 'hidden-note', 'title': 'PARA: Hidden note', 'expr': 'p[@class!=\"important\"]'}",



    "{'name': 'center', 'title': 'PARA: Center', 'expr': 'p'}",

])



WYM_STYLES = ",\n".join([

    "{'name': '.hidden-note', 'css': 'color: #999; border: 2px solid #ccc;'}",

    "{'name': '.date', 'css': 'background-color: #ff9; border: 2px solid #ee9;'}",



    "{'name': '.center', 'css': 'border: 2px solid #ee9; text-align:center;'}",

])


Приведенные WYM_STYLES определяют то, как контент будет выглядеть в редакторе. Менеджеры контента любят, когда он меняется динамически и WYSWYG оправдывает свое название.

И прописал стиль в css:


.center { text-align: center; }


Естественно, все это можно было сделать иначе…




8 комментариев:

Hatter комментирует...

а что, если мне нужно переопределить стили для h1 - h6 и других верхних? как мне быть?

Ivan Markeev комментирует...

Да в общем также. Откройте cms plugins text settings, найдите нужную настройку и скопируйте к себе в настройки.

Hatter комментирует...

СПА-СИ-БО!!! :) сработало!!!

Hatter комментирует...

вот только в привью в cms стиль остаётся неизменным, из css админки django .

Ivan Markeev комментирует...

Стили превью можно переопределить через WYM_CLASSES.

Hatter комментирует...

прошу прощения, не очень понял, ведь в WYM_CLASSES не указываются стили...

приведите, пожалуйста, пример

Ivan Markeev комментирует...

В settings-файле, который в cms.plugins.text в настройках каждого элемента редактора есть пунктик

'css': 'wym_tools_чего-нибудь'

Такие стили должны хранятся в загружаемом из настройки WYM_STYLESHEET файле стилей.

Предлагаю Вам попробовать написать что-нибудь вроде:

WYM_STYLESHEET = MEDIA_URL + 'какой-нибудь-файл.цсс', в котором прописать нужные Вам стиль:

.wym_containers_h1 {
здесь нужные css свойства;
}

Алексей комментирует...

Спасибо!