Вернуть лучшее из темы «Свежая»
Многим нравилась тема «Свежая» от Артёма Поликарпова, но с версии 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') ?>
Готово!
Каеф, спасибо
Пожалуйста 😉