Дополнительные поля joomla их css-классы для показа

Дополнительные поля joomla стали доступны для любителей данного движка с выходом версии 3.7. Для создания которых приходилось устанавливать специальные расширения, или как их еще называют — строителей контента. Это всем известные компоненты К2, ZOO, Кобальт и прочие.

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

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

Чем хорош такой вариант оформления дополнительных полей joomla?

  • Во-первых, не нужно устанавливать дополнительных расширений и затем тратить время на их обновления и настройки.
  • Во-вторых, сайт при таком подходе, работает быстрее, поскольку добавляется минимум кода.
  • В-третьих, создавать и настраивать можно индивидуально, тогда как компоненты (CCK) приходилось «допиливать» под себя.

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

Как оформить дополнительные поля joomla с помощью css-классов для показа

Для примера я взял три текстовых поля с соответствующим названием и в настройках по умолчанию указал их значения. К стати, данные по умолчанию заполняются если информация не меняется, а остается постоянной. Делается это исключительно для удобства администраторов сайта.

Текстовое поле 1

В итоге у меня получилось три поля которые я изобразил на картинке.

Группа дополнительных полей joomla

На фронтальной стороне сайта, соответственно будет выглядеть примерно так как на скриншоте. Никакого оформления практически нет. Конечно такой вариант плохо вписывается в дизайн сайта.

Пользовательская часть сайта

Если взглянуть на исходный код дополнительных текстовых полей, то мы увидим название этих полей (field-label, field-value).

Код текстовых полей

Можно в таблице стилей шаблона сразу прописать стили к этим двум полям, а можно использовать вариант предусмотренный в настройках дополнительных полей joomla.

Именно о втором варианте мы и поговорим так как он более тесно связан с движком.

Для этого в настройках css-класс для показа необходимо придумать свой класс и добавить в соответствующее поле.

css-класс для показа полей joomla

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), прописать в настройках каждого дополнительного поля.

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

 Дополнительные поля joomla

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

Оформление дополнительных полей joomla видео урок

Если вы впервые сталкиваетесь с дополнительными полями joomla 3.7, рекомендую посмотреть видео «Практика использования дополнительных полей joomla»

 

 

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован.

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Подробнее в Уроки joomla
hom-image
Установка joomla на denwer пошаговая инструкция

Установка joomla на denwer происходит по такому же сценарию как и установка joomla на openserver, только с небольшой разницей установки...

Закрыть