Темы

Настройте внешний вид и ощущение Elgg.

Тема — это тип плагина, который переопределяет аспекты отображения Elgg.

Это руководство предполагает, что вы знакомы с:

Содержание

Принципы и лучшие практики темизации
Создайте ваш плагин
Настройте CSS
Инструменты
Настройка главной страницы

Принципы и лучшие практики темизации 

Без сторонних фреймворков CSS: Elgg не использует фреймворк CSS, потому что такие фреймворки привязывают пользователей к определённой разметке HTML, что в конечном итоге значительно усложняет совместную работу плагинов над внешним видом. То, что является is-primary в одной теме, может быть чем-то другим в другой. Отсутствие фреймворка позволяет плагинам изменять внешний вид с помощью чистого CSS, не переопределяя представления и не добавляя специфичные для фреймворка селекторы к элементам разметки HTML.

/* BAD */
<div class="box has-shadow is-inline">
        This is bad, because if the plugin wants to change the styling, it will have to either write really specific css
        clearing all the attached styles, or replace the view entirely just to modify the markup
</div>

/* GOOD */
<div class="box-role">
        This is good, because a plugin can just simply add .box-role rule
</div>
<style>
        .box-role {
         padding: 1rem;
         display: inline-block;
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
</style>

8-точечная сеточная система: Elgg использует 8-точечную сеточную систему <https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632>, поэтому размер элементов, их отступы, поля и т.д. выполняются с шагом и долями 8px. Поскольку наш размер шрифта по умолчанию — 16px, мы используем доли rem, поэтому 0.5rem = 8px. 8-точечная сеточная система значительно упрощает разработчикам совместную работу над стилизацией элементов: нам больше не нужно думать, должен ли отступ быть 5px или 6px.

/* BAD */
.menu > li {
        margin: 2px 2px 2px 0;
}

.menu > li > a {
        padding: 3px 5px;
}

/* GOOD */
.menu > li > a {
        padding: 0.25rem 0.5rem;
}

Сначала мобильные: Мы пишем мобильно-ориентированный CSS. Мы используем две контрольные точки: 50rem и 80rem (800px и 1280px при 16px/rem).

/* BAD: mobile defined in media blocks, different display types */

.menu > li {
        display: inline-block;
}
@media screen and (max-width: 820px) {
        .menu > li {
                display: block;
                width: 100%;
        }
}

/* GOOD: mobile by default. Media blocks style larger viewports. */

.menu {
        display: flex;
        flex-direction: column;
}
@media screen and (min-width: 50rem) {
        .menu {
                flex-direction: row;
        }
}

На основе Flexbox: Flexbox обеспечивает простоту в укладке элементов в сетки. Flexbox используется для всего, от меню до элементов макета.

/* BAD */
.heading:after {
        visibility: hidden;
        height: 0;
        clear: both;
        content: " ";
}
.heading > h2 {
        float: left;
}
.heading > .controls {
        float: right;
}

/* GOOD */
.heading {
        display: flex;
        justify-content: flex-end;
}
.heading > h2 {
        order: 1;
        margin-right: auto;
}
.heading > .controls {
        order: 2;
}

Простые цветовые переходы: Мы поддерживаем 4 набора цветов для текста, фона и границы: soft, mild, strong и highlight. При переходе в состояние наведения или активного мы переходим на уровень выше, например, от soft к mild, или используем highlight. При переходе в неактивное или отключённое состояние мы переходим на уровень ниже.
Увеличить область клика: При работе с вложенными якорями мы увеличиваем область клика якоря, а не родителя

/* BAD */
.menu > li {
        margin: 5px;
        padding: 5px 10px;
}

/* GOOD */
.menu > li {
        margin: 0.5rem;
}
.menu > li > a {
        padding: 0.5rem 1rem;
}

Без z-index 999999: z-index увеличиваются с шагом 1.
Оборачивать соседние элементы HTML: Мы убеждаемся, что в родителе нет осиротевших строк и что соседние элементы обернуты таким образом, чтобы на них можно было нацелиться с помощью CSS.

/* BAD */
<label>
        Orphan
        <span>Sibling</span>
</label>

/* GOOD */
<label>
        <span>Sibling</span>
        <span>Sibling</span>
</label>

/* BAD */
<div>
        <h3>Title</h3>
        <p>Subtitle</p>
        <div class="right">This goes to the right</div>
</div>

/* GOOD */
<div>
        <div class="left">
         <h3>Title</h3>
         <p>Subtitle</p>
        </div>
        <div class="right">This goes to the right</div>
</div>

Создайте ваш плагин 

Создайте ваш плагин, как описано в руководстве для разработчиков.

Создайте новую директорию под mod/
Создайте новый elgg-plugin.php
Создайте файл composer.json, описывающий вашу тему.

Настройте CSS 

CSS разделён на несколько файлов в зависимости от того, какие аспекты сайта вы темизируете. Это позволяет вам решать их по одному, давая вам возможность добиться реального прогресса, не перегружаясь.

Вот список существующих представлений CSS:

elements/buttons.css: Предоставляет способ стилизации всех различных типов кнопок, которые будет использовать ваш сайт. Есть 5 типов кнопок, которые плагины будут ожидать доступными: action, cancel, delete, submit и special.

elements/chrome.css: Этот файл содержит некоторые различные классы внешнего вида и ощущений.

elements/components.css: Этот файл содержит множество “объектов CSS”, которые используются на всем сайте: медиа-блок, список, галерея, таблица, блок владельца, системные сообщения, река, теги, фото и комментарии.

elements/forms.css: Этот файл определяет, как будут выглядеть ваши формы и элементы ввода.

elements/icons.css: Содержит стили для иконок и аватаров, используемых на вашем сайте.

elements/layout.css: Определяет, как будет выглядеть макет вашей страницы: боковые панели, обёртка страницы, основное тело, заголовок, футер и т.д.

elements/modules.css: Много контента в Elgg отображается в блоках с заголовком и телом контента. Мы называем их модулями. Есть несколько видов: info, aside, featured, dropdown, popup, widget. Стили виджетов также включены в этот файл, поскольку они являются подмножеством модулей.

elements/navigation.css: Этот файл определяет, как будут выглядеть все ваши меню.

elements/typography.css: Этот файл определяет, как будет выглядеть контент и заголовки вашего сайта.

rtl.css: Пользовательские правила для пользователей, просматривающих ваш сайт на языке справа налево.

admin.css: Полностью отдельная тема для области администрирования (обычно не переопределяется).

elgg.css: Компилирует все файлы core elements/* в один файл (НЕ ПЕРЕОПРЕДЕЛЯТЬ).

elements/reset.css: Содержит сбрасывающую таблицу стилей, которая принуждает элементы иметь одинаковые значения по умолчанию

Глобальные переменные CSS доступны в PHP и в CSS. Плагины должны, где это возможно, использовать глобальные переменные CSS и расширять тему ядра своими переменными плагина, чтобы их можно было просто изменять другими плагинами.

Чтобы добавить или изменить переменные, используйте секцию theme в elgg-plugin.php. Обратите внимание, что вам может потребоваться очистить кэш, чтобы увидеть ваши изменения в действии.

Список переменных ядра по умолчанию см. в engine/theme.php.

Тёмный режим 

Тема поддерживает различные цветовые схемы. В переменных CSS это разделено ключом в конфигурации theme. Цветовая схема dark поддерживается как тёмный режим для сайта. Если администратор сайта включает выбор пользователя для тёмного режима, пользователь может решить, включён ли тёмный режим (или другая доступная цветовая схема) (или автоопределён) в его личных настройках.

Расширение представления 

Есть два способа изменения представлений:

Первый способ — добавить дополнительный контент в существующее представление через секцию views_extensions в определении elgg-plugin.php.

Например, следующая конфигурация добавит mytheme/css в основной файл CSS Elgg:

<?php
        return [
                'view_extensions' => [
                        'elgg.css' => [
                                'mytheme/css' => [],
                        ],
                ],
        ];

Перегрузка представления 

Плагины могут иметь иерархию представлений, любой файл, существующий здесь, заменит любые файлы в существующей иерархии представлений ядра… например, если мой плагин имеет файл:

/mod/myplugin/views/default/elements/typography.css

он заменит:

/views/default/elements/typography.css

Но только когда плагин активен.

Это даёт вам полный контроль над тем, как выглядит и ведёт себя Elgg. Это даёт вам возможность либо слегка изменить, либо полностью заменить существующие представления.

Иконки 

Начиная с Elgg 2.0 иконки Elgg по умолчанию поступают из библиотеки FontAwesome. Вы можете использовать любую из этих иконок, вызывая:

elgg_view_icon('icon-name');

icon-name может быть любой из икон FontAwesome без префикса fa-.

По умолчанию вы получите вариант иконок в стиле solid. Добавление к имени иконки постфикса -solid, -regular или -light позволяет нацелиться на определённый стиль. Обратите внимание: вариант в стиле light доступен только как лицензированная иконка FontAwesome Pro.

Инструменты 

Мы предоставили вам несколько инструментов для разработки, которые помогут вам в создании тем: включите плагин “Разработчики” и перейдите на страницу “Предварительный просмотр темы”, чтобы начать отслеживать прогресс создания вашей темы.

Настройка главной страницы 

Основная индексная страница Elgg обслуживается через представление ресурса.

Следовательно, вы можете переопределить его, предоставив свой собственный файл ресурса в your_plugin/views/default/resources/index.php.