Вернуть лучшее из темы «Свежая»

Многим нравилась тема «Свежая» от Артёма Поликарпова, но с версии 2.5 она не работает на Эгее. Так как не удалось найти упоминаний о её адаптациях, решил собрать в одном месте что-то, что вернёт в Эгею самые интересные решения из «Свежей».

Сноски на полях

В архивах Александры Травкиной (она уже переехала с Эгеи) нашёл пост как сделать сноски в Эгее. Внешне они почти такие же, как были в теме Артёма.

Перепечатываю из архивной записи Александры Травкиной со своими дополнениями и комментариями:

Способ первый

@media screen and (min-width: 1050px) {
    .e2-text .aside {
        position: relative;
        text-align: left;
        max-width: 200px;
        margin-left: 4%;
        margin-top: .15em;
        float: right;
        clear: right;
    }
}
.e2-text .aside {
    line-height: 16px;
    font-size: 14px;
    opacity: .8;
}

Как использовать? Начиная с Эгеи 2.7 в редакторе можно сделать вот так:

.aside Текст сноски на полях.

И текст будет обернут классом .aside. Можно обернуть напрямую html-тэгом:

<p class="aside">Текст сноски на полях.</p>

Добавив .aside после первого абзаца текста сноска будет отображаться справа от следующего абзаца.

Способ второй

@media screen and (min-width: 1050px) {
    .e2-text [main] {
        float: left;
        clear: left;
    }
    .e2-text [main]+[aside] {
        position: relative;
		border-left: 1px var(--thinRuleColor) solid;
		padding: 0 0 0 10px;
        max-width: 200px;
        margin-left: 4%;
        margin-top: .15em;
        float: right;
        clear: right;
    }
    .e2-text [main]+[aside]+* {
        clear: left;
    }
}
.e2-text [aside] {
    line-height: 16px;
    font-size: 14px;
    opacity: .8;
	border-left: 1px var(--thinRuleColor) solid;
	padding: 0 0 0 10px;

Как использовать? В редакторе заметки пишем:

<p main>Основной абзац текста.</p>
<p aside>Текст сноски на полях.</p>

Сноска будет отображаться справа от основного абзаца текста. Ниже пример:

Основной абзац текста.

Текст сноски на полях.

Отличия
Первый способ даёт сноску без линии слева от сноски. И не отобразит добавленную в сноску картинку.
Но там достаточно написать перед новым абзацем .aside и сноска готова.

Во втором способе нужно обернуть в тэги два абзаца — саму сноску и текст, напротив которого будет сноска. Для добавления картинки в сноску её тоже нужно добавить через тэг с указанием пути до картинки

<img src="/pictures/imgname.file">

Для корректного отображения заметки, лучше не делать обёрнутые абзацы последними.
Кроме того, если у вас была «Свежая» и остались заметки со сносками, то сноски в них заработают без изменений.

Как добавить
Для того, чтобы добавить свои стили к шаблону (лучше тоже своему, пусть это и будет просто копия базового), в папке styles шаблона создайте файл style.css и вставьте в него приведённый выше код.
Затем скопируйте main.tmpl.php из:

../system/theme/templates

И вставьте в:

../themes/name_your_thene/templates

Отредактируйте main.tmpl.php добавив в конце файла после основных стилей строчку:

<?php_CSS ('style') ?>

Готово!

Поделиться
Отправить
2020   Эгея
1 комментарий
Определенно не дед 2020

Каеф, спасибо

mnweb 2020

Пожалуйста 😉

Популярное