Найти на сайте

Расширенные свойства модулей в module.tpl

+23
2.59K
  2. Блоги
  3. Расширенные свойства модулей в module.tpl

Добавляем гибкости в определении стилей для отображения содержимого модулей…


Можно, либо заменить(полностью) содержимое файла modules.tpl, либо создать новый файл, например: modules_extended.tpl и менять файл шаблона в настройках нужных модулей…

Собственно листинг:
  1.  
  2. {strip}
  3. <div class="{$mod.css_prefix}module" id="module_id_{$mod.module_id}" name="{$mod.title}" role="{$mod.content|strip_tags:false}">
  4.     {if $cfglink}                      
  5.         <div class="fast_cfg_link">    
  6.             <a href="javascript:moduleConfig({$mod.module_id})" title="Настроить модуль">
  7.                 <img src="/templates/_default_/images/icons/settings.png"/>
  8.             </a>                       
  9.         </div>
  10.     {/if}
  11.     {if $mod.showtitle neq 0}
  12.         <div class="{$mod.css_prefix}moduletitle">
  13.             <h2 class="{$mod.css_prefix}moduleheader">{$mod.title}</h2>
  14.         </div>
  15.     {/if}
  16.  
  17.     <div class="{$mod.css_prefix}modulebody" id="body_module_id_{$mod.module_id}" name="{$mod.title}" role="{$mod.content|strip_tags:false}">
  18.     {$mod.body}
  19.     <div class="clrfix"></div>
  20.     </div>
  21. </div>
  22. {/strip}
  23.  
Особенности:
Основная задача — применение уникальных стилистических определений для некоторых модулей, путем добавления идентификатора id="module_id_{$mod.module_id}" к “обволакивающему” диву для того, чтобы можно было задавать уникальные свойства конкретным элементам верстки.
(например: #module_id_63 h2 {color:#FFF;} — будет задавать цвет текста заголовка только для модуля с Id = 63, дальше применять можно аналогично к любым элементам модуля).

1) Иконка настроек модуля видна независимо от “включенности” заголовка в настройках модуля.
(нужно поменять свойства css для класса в styles.css для правильного отображения)
у меня переопределено так:
  1.  
  2. div.fast_cfg_link {
  3.     display: inline;
  4.     float: right;
  5.     margin-top: -6px;
  6.     padding: 4px;
  7.     position: relative;
  8. }
  9.  
2) Заголовку модуля присвоен тег <h2> и классы.

3) “Телу” модуля так же задан идентификатор id="body_module_id_{$mod.module_id}" для тех же целей.

остальные атрибуты удобны при настройке и отладке собственных шаблонов (просто снабжают информацией)

Удачи! Если что-то непонятно — спрашивайте…
Результат в Firebug для Firefox
Иллюстрация

желтым подсвечены идентификаторы полезная инфо зеленым и голубым
Предварительный просмотр в стандартном редакторе с ББ-кодами для версии 1.9
Модули «Новое в блогах», «Популярные блоги». Вывод содержимого постов…
базовыйшаблон
0
reload reload 13 лет назад #
Интересно... а как узнать id модуля?
+2
• Mike • • Mike • 13 лет назад #
в любом инструментарии для броузеров который показывает разметку html с подсветкой, типа Firebug для Firefox
0
reload reload 13 лет назад #
А можешь скрин скинуть (для наглядного понимания что нужно искать), а то чото найти не могу( правда пользуюсь хромом, всякие дивы, гриды, и стили вижу; а вот id модуля найти не могу(
Извиняюсь за глупые просьбы, но...
+1
• Mike • • Mike • 13 лет назад #
так пока файл не поменяешь их и нет, поменяй (сохранив предварительно оригинальный module.tpl) и всё увидишь…
0
Blit Blit 13 лет назад #
Ксати Firebug есть для всех популярных браузеров, для меня лично в google chrome
+1
• Mike • • Mike • 13 лет назад #
ну или в админке, на вкладке модулей > второй столбик это и есть Id …
0
reload reload 13 лет назад #
Во! так мне понятней) спасибо!
+1
Search Search 13 лет назад #
• Mike • , Спасибо огромное! мечта верстальщика)
+2
• Mike • • Mike • 13 лет назад #
да не за что, для облегчения и удобства вёрстки и задумано…)
0
lezginka.ru lezginka.ru 13 лет назад #
Mike, чуть не в тему, но по адресу :)
поисковики не любят когда текст, точнее теги h1-h6, strong обернуты в код. На сайте была тема , ноя не могу ее найти, лучше ранжируется в поиске чистый htm код
Вопрос: какой код поменять в , чтобы компоненты "каталог статей" и "форум", поисковик видел без "лишнего" кода
+1
• Mike • • Mike • 13 лет назад #
лучше всего их целиком переписать из табличной вёрстки в “дивную”, а <strong><h1-h6>...</h1-h6></stong>? это просто пример “неправильной” верстки, (если я правильно понял) поисковики тут не причём…
0
lezginka.ru lezginka.ru 13 лет назад #
судить вам, но статья на интанте уже опубликованная, через пару месяцев скопировал на статичный htm, в итоге статичный выше ранжировался. Возможно дело не в этом, но заметил, что "чистые" htm выше ранжирует. Как понимаю поисковики считают что под код "прячут" <strong><h1-h6>...</h1-h6></stong> для манипуляций, а когда "чистый" когда это подозрение снимает. Думаю сео спецы согласятся с этим.
+1
• Mike • • Mike • 13 лет назад #
пример с обертыванием заголовков стронгами это грубая семантическая ошибка разметки, такую верстку и броузеры не любят, и поисковики, ну и профессиональные верстальщики (если они профессиональные)… )
0
lezginka.ru lezginka.ru 13 лет назад #
чтобы этого избежать, хотя бы для "каталога статей" что требуется ?
+1
• Mike • • Mike • 13 лет назад #
в “дефолтном” шаблоне кроме табличной разметки нет лишних или неправильных элементов, а от самой табличной верстки довольно сложно избавиться без полной переписки стилевых определений в файлах css и введения новых классов и свойств для замещающих <div>-ов
0
artlab artlab 13 лет назад #
Это правильное решение,если отталкиваться от того,что идентификатор не должен повторяться дважды по правилу.
Возможно я не глубоко вник в данную статью,но я поступил следующим образом:
набросал несколько разных шаблонов отображения модулей,к примеру module_grey.tpl ,module_red.tpl и т.д и просто выбираю нужный мне шаблон в выпадающем списке в настройках модуля.
Не могли бы Вы растолковать мне,в чём разница,и есть ли ошибки, в выбранном мной варианте.
+1
• Mike • • Mike • 13 лет назад #
различие может проявится, только, если вы захотите использовать назначенный темплэйт нескольким модулям, это схоже с существующим решением при добавлении префикса к классу модуля. В этом случае вы теряете базовое наследование самого класса .module, что заставляет полностью и заново описывать его свойства в таблице стилей. То же самое произойдет, если в своем варианте темплэйта вы не укажите новые идентификаторы или классификаторы. Тогда к внутренней структуре и содержимому вложенных темплэйтов самих модулей будет довольно сложно обратиться без возникновения конфликтов с существующими (ранее заданными). Моя схема просто экономит усилия и сокращает количество повторов в описании элементов, не дублирует однотипных темплэйтов, ну и, практически, не затрагивает существующий дизайн. Дает же гибкость при возникновении необходимости обратится к любому элементу во внутренней разметке модулей.
Плюс обладает большим приоритетом в каскаде. (id > class)
0
artlab artlab 13 лет назад #
Спасибо большое

Еще от автора

Предварительный просмотр в BB редакторе для 1.10.4

Предварительный просмотр в BB редакторе для 1.10.4

В продолжение темы— Предварительный просмотр в стандартном редакторе с ББ-кодами для версии 1.
31
Расширенная постраничная навигация вер. 1.10.3+

Расширенная постраничная навигация вер. 1.10.3+

Плагин расширенной постраничной навигации для версий выше 1.10.3
28
Замена модальных диалогов на инлайн панели для версии 1.10.3

Замена модальных диалогов на инлайн панели для версии 1.10.3

Заменяет модальные окна при отправке сообщений и написании записей на стену + статус пользователя. Добавлены две функции в /core/js/common.
28

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.