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

+23
2.14K

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


Можно, либо заменить(полностью) содержимое файла 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
Иллюстрация

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

Еще от автора

Предварительный просмотр в BB редакторе для 1.10.4
В продолжение темы— Предварительный просмотр в стандартном редакторе с ББ-кодами для версии 1.
Расширенная постраничная навигация вер. 1.10.3+
Плагин расширенной постраничной навигации для версий выше 1.10.3
Замена модальных диалогов на инлайн панели для версии 1.10.3
Заменяет модальные окна при отправке сообщений и написании записей на стену + статус пользователя. Добавлены две функции в /core/js/common.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.