Для создания новых секций воспользуемся шаблоном Antares - названия и стили возьмем готовые - Bottom, Extension, Fixedside, Showcase, Slideshow, Top, Overlay, Старые и новые секции (*) разместим в нужном для нас порядке
overlay * fixedside * top * navigation header slideshow * intro features utility above testimonials expanded container mainbottom * bottom * footer copyright * offganvas section
Новые секции позволят нам добавить стили от коммерческих шаблонов от Rockettheme, которые мы видели, например, на шаблоне Antares (фиксированный слева или справа модуль социальных иконок)
ШАГ 1
При копировании воспользуемся 1 правилом переопределения: т.к. все секции с установочными данными (default) каждой секции находятся в папке [шаблон/bluprints/styles/****.yaml] , тогда установочные данные новых секций разместим по пути (custom/bluprints/styles/****.yaml)
Уже сразу после переноса (копирования) файлов ****.yaml на административной вкладке Styles шаблона Helium появятся новые поля.
ШАГ 2 (не терпит суеты)
Чтобы новые секции появились на вкладке Layout административной панели сделаем следующее. Согласно правилу переопределения - для папок, находящихся в шаблоне в корневом каталоге, и имеющим 0 уровень вложенности действует правило №1 - создадим путь для модернизации (custom/layout/default_2.yaml), внеся требуемые изменения в файл default.yaml
К сожалению, такой подход добавляет новую разметку (макет) только на вновь созданный шаблон , например Test, к уже имеющимся - Helium (По умолчанию) и Helium (Home - Particles), не меняя базовый шаблон Base Outline . Правда на нем будут присутствовать наши новые секции, но хотелось бы большего - чтобы изменился Base Outline. Поэтому чтобы наш макет появился на Base Outline, надо всего лишь нажать на кнопку Load в административной панели на вкладке Layout и выбрать новый макет, например Default 2. Система предупредит, что секция aside пропадет на макете Base Outline (её нет на новом макете). После чего надо сохраниться, нажав Save Layout
Разделим все коды нового файла defaul_2.yaml на разделы
1 раздел - layout (базовый)
layout:
/overlay/: { }
/fixedside/: { }
/top/: { }
/navigation/:{ }
/header/: { }
/slideshow/: { }
/intro/: { }
/features/: { }
/utility/: { }
/above/: { }
/showcase/: { }
/testimonials/: { }
/expanded/: { }
/container-main/: { }
-
-
'mainbar 80':
-
-
'sidebar 20':
-
/mainbottom/: { }
/bottom/: { }
/footer/: { }
/copyright/: { }
/offcanvas/: { }
2 раздел - structure (определяет название, наличие вкладок, стилей и анимацию по умолчанию)
Раздел устанавливает структуру макета. В этом разделе определяются структурные свойства нашего макета. Здесь располагаются дополнительные сведения, которые не могут быть определены в основной области макета - layout, где вы сначала размещаете свои разделы в соответствии с задуманным поядком и можете, кстати заранее установить, как позиции, так и сами частицы.
Структура позволяет изменить поведение раздела, используя структурные свойства, такие как изменение типа раздела на div, а не на его поведение по умолчанию: section.
Существует пять различных типов свойств: id, title, type, subtype и attributes. Идентификатор назначенного раздела определяет его теги.
Свойство title позволяет указать заголовок для секвенции (переименования). Например, вы можете установить секцию mainbotton следующим образом:
structure:
mainbottom:
title: super /*меняет название секции с mainbotton на super
type: section /* другие типы - block, container, grid, offcanvas, wrapper
subtupe: footer /* другие типы - article, aside, div, header, main, nav, section
attributes:
boxed: '0' /* заполняет по умолчанию поля секции layout - inherit from page setting
class: foo /* устанавливает по умолчанию поле css класс вкладки section - foo
exstra: -data-sr: over 1.3s /* заполняет по умолчанию поля Tag Attributes - анимация продолжительностью 1.3 секунды
block: id: block-9999 /* название блока уникальное, в шаблоне может использоваться многократно - содержание описывается в разделе content
class: g-bold /*заполняет по умолчанию поле css класс на вкладке block - g-bold
fixed: '1' /*очень важно - - включает в секции вкладку Block (отключение - '0' или отсутствие block)
exstra: /* при наличии параметра заполняет по умолчанию поле Tag Attributes вкладки Block
structure:
overlay:
type: section
attributes:
boxed: '0'
aside:
type: section
subtype: aside
attributes:
class: ''
block:
fixed: '1'
mainbar:
type: section
subtype: main
sidebar:
type: section
subtype: aside
attributes:
class: ''
block:
fixed: '1'
container-main:
attributes:
boxed: ''
3 раздел - content
Раздел позволяет разместить внутри секции поля по умолчанию. Пример создания - нижестоящий код
content:
date-1446:
title: 'My Date'
attributes:
css:
class: foo
date:
formats: 'l, d F'
block:
variations: box2обеспечивает отображение на вкладке частицы соответствующие классы и форматы
Другой вариант кода в файле default_home.yaml в макете шаблона home_particles (раздел Outlines административной панели) обеспечит заполнение предустановленными аттрибутами частицы simplecontent на вкладке Particle Defaults административной панели шаблона
content:
simplecontent-8476:
title: 'Simple Content'
attributes:
class: ''
title: 'WE ARE CITADEL'
items:
-
layout: header
created_date: ''
content_title: 'VIDEO SUPPORTED THEME'
author: ''
leading_content: 'Build a unique cinematic experience.'
main_content: ''
readmore_label: ''
readmore_link: ''
readmore_class: ''
readmore_target: _self
title: 'New item'
block:
class: fp-slideshow-simplecontent
Интерес для разработчика может предоставлять так называемое наследование аттрибутов секции (раздела), аттрибутов блока и частиц внутри секции (раздела).
Именно эта вкладка обеспечивает управление стилями - блокирует или разрешает использовать частицу, как модуль Joomla с соответствующими классами - title, box и т.п., что бывает очень полезно.
P.S.
Чтобы новые секции заработали нормально, небходимо перенести скопированные стили для секций от другого шаблона в папку custom/scss/... и провести процедуру активации стиля.
В новых скопированных с коммерческих шаблонов секциях , как правило, есть несколько вариантов вывода контента (default- , fp-, g-) , могут быть даже псевдоселекторы ( # ) со своими стилями - вам выбирать, что использовать.
Все коммерческие шаблоны идут с "индивидуальным" стилем - внимательно просматривайте файл _*****_style.scss и utilities.scss - иначе добиться схожести с исходником будет очень трудно.