Дополнительные поля joomla с собственным оформлением

Дополнительные поля 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).

Теперь в стилях установленного шаблона по умолчанию можно придумать любое оформление внешнего вида этих полей, которое только придет в голову.

Для примера давайте возьмем простенькие стили связанные с текстом. И так как вновь созданный класс принадлежит к основному, то и прописать его нужно соответственно.

.style-2 > .field-label {
    font-weight:bold;
    font-family:verdana;
    font-style: italic;
    color:#555;
    margin-right: 7px;  
}

В результате все стили которые мы прописали будут применены к текстовому полю №1. Чтобы все дополнительные поля joomla выглядели одинаково, необходимо, класс который мы придумали для первого поля (style-2), прописать в настройках каждого дополнительного поля.

И тогда все поля будут выглядеть одинаково.

В итоге мы получаем возможность однажды задать свой css-класс для показа и прописать для него нужные нам стили, затем просто добавлять придуманный класс для каждого дополнительного поля joomla.