Дополнительные поля joomla стали доступны для любителей данного движка с выходом версии 3.7. Для создания которых приходилось устанавливать специальные расширения, или как их еще называют — строителей контента. Это всем известные компоненты К2, ZOO, Кобальт и прочие.
Конечно изначально внешний вид этих полей подстраивается под стили установленного шаблона по умолчанию, а точнее сказать, не имеют никаких стилей и по этой причине разработчики оставили право оформить внешний вид дополнительных полей joomla, непосредственно администраторам joomla-сайтов.
Для этого, в настройках дополнительных полей, предусмотрена возможность устанавливать свои css-классы для показа и затем в таблице стилей шаблона оформлять по своему усмотрению. Точно так же было придумано и с модулями.
Чем хорош такой вариант оформления дополнительных полей joomla?
Во-первых, не нужно устанавливать дополнительных расширений и затем тратить время на их обновления и настройки.
Во-вторых, сайт при таком подходе, работает быстрее, поскольку добавляется минимум кода.
В-третьих, создавать и настраивать можно индивидуально, тогда как компоненты (CCK) приходилось «допиливать» под себя.
Согласитесь, что нельзя создать то, что понравится всем, обязательно будут противоречия. Поэтому, на мой взгляд вариант с дополнительными css-классами, предпочтительней. Каждый администратор joomla-сайта оформит дополнительные поля joomla для материала изначально так, как хочет и не придется ничего переделывать.
Как оформить дополнительные поля joomla с помощью css-классов для показа
Для примера я взял три текстовых поля с соответствующим названием и в настройках по умолчанию указал их значения. К стати, данные по умолчанию заполняются если информация не меняется, а остается постоянной. Делается это исключительно для удобства администраторов сайта.
В итоге у меня получилось три поля которые я изобразил на картинке.
На фронтальной стороне сайта, соответственно будет выглядеть примерно так как на скриншоте. Никакого оформления практически нет. Конечно такой вариант плохо вписывается в дизайн сайта.
Если взглянуть на исходный код дополнительных текстовых полей, то мы увидим название этих полей (field-label, field-value).
Можно в таблице стилей шаблона сразу прописать стили к этим двум полям, а можно использовать вариант предусмотренный в настройках дополнительных полей joomla.
Именно о втором варианте мы и поговорим так как он более тесно связан с движком.
Для этого в настройках css-класс для показа необходимо придумать свой класс и добавить в соответствующее поле.
Css-класс для показа (style-2), который мы добавляем в это поле, привязывается к основному классу имеющийся по умолчанию (field-entry).
Теперь в стилях установленного шаблона по умолчанию можно придумать любое оформление внешнего вида этих полей, которое только придет в голову.
Для примера давайте возьмем простенькие стили связанные с текстом. И так как вновь созданный класс принадлежит к основному, то и прописать его нужно соответственно.
В результате все стили которые мы прописали будут применены к текстовому полю №1. Чтобы все дополнительные поля joomla выглядели одинаково, необходимо, класс который мы придумали для первого поля (style-2), прописать в настройках каждого дополнительного поля.
И тогда все поля будут выглядеть одинаково.
В итоге мы получаем возможность однажды задать свой css-класс для показа и прописать для него нужные нам стили, затем просто добавлять придуманный класс для каждого дополнительного поля joomla.