Изменение внешнего вида Tana с помощью css
добавленные собственных стилей, изменение кода
Возиться в css, я начал со времён Roam research. Я мало смыслил в настройке, находил готовый код и менял его, пытаясь понять, что он делает. Выделял типы заметок, подкрашивал узлы, менял шрифты. Obsidian я прихорашивал долго. Поначалу он так ужасно выглядел, что приходилось править до мелочей, даже прописывать отступы в списках. А потом вышла новая версия, и я взял уже готовую тему.
Думал с Таной будет иначе. Она выглядела приятно, и мне казалось, что менять в ней нечего. Но если есть возможность что-то изменить, то почему бы этим не воспользоваться. К тому же это прекрасный способ прокрастинировать.
Задача стояла не добавить украшательств, а улучшить восприятие.
Но я хочу написать не про чистое украшательство, а про оформление, которое не просто делает приятнее внешность, а добавляет удобства в восприятии.
Работа с css
Для изменения внешнего вида Tana использую расширение Stylus с браузером Arc. Есть вариант проще — Tana Enhancer. В этом расширении уже есть готовые твики, а собственный код добавляешь в конце. Неудобно, когда кода много, сбивается всё в кучу. Мне поэтому больше нравится Stylus. В нем код раскладываешь по секциям, каждый со своим именем. Есть автозавершение набора, просмотр цветов.
Для Safari есть расширение Userscripts, в него можно добавлять как скрипты, так и css.
Оформление узлов с помощью иконок
Использование Эмодзи
Для того чтобы сразу видеть к какому типу заметки относится узел, я помечал их эмодзи.
Проще добавить эмодзи в тег. Можно даже использовать одни эмодзи без текста. Даже проблем с выставлением такого тега не возникнет. Настроите горячие клавиши для присваивания. Такая функция встроена в Tana. Для этого вызовите панель команд с помощью ⌘k и выберите add tag. Напишите какой тег установить и нажмите ⇧⌘k. Выберите своё сочетание клавиш.
Для удаления назначенных клавиш, зайдите в настройки.
Гораздо лучше смотрится, если подставлять эмодзи в начало или конец узла, а сам текстовой тег сделать прозрачным. У узлов с тегом Дневник, эмодзи дневника выставляется перед текстом и ты сразу видишь к какому типу заметки относится данный узел. Мимолетные заметки у меня помечались значком фасоли, это были семена, атомарные — ростком, синтезированные — веткой.
Для эмодзи использовал код:
:has(span[data-tag="атомарная заметка"]):not(.expandedNodeContent) > span[data-role="editable"]:before {
content: " ";
}
span[data-tag="атомарная заметка"] {
opacity: 0.2;
}
span:hover[data-tag="атомарная заметка"] {
opacity: 1;
}Тег можно и вовсе скрыть, но я оставил лёгкую видимость, чтобы можно было его удалить или перенастроить. При наведении он становится полностью видимым.
Если надо вынести в закреплённое Library или Schema, и хочется их тоже пометить эмодзи, то можно также использовать код, и присвоить им теги. В таком случае тег можно скрыть полностью.
span[data-tag='dashboard'] {
display: none;
}Нестандартные эмодзи
Если не устраивают стандартные эмодзи, добавьте альтернативные. Для этого установите шрифт Toss. Скачать TossFaceFontMac.ttf.
Чтобы их использовать, добавьте код:
@font-face {
font-family: 'TossFaceFontWeb'; src: url('https://static.toss.im/tossface-font/TossFaceFontWeb.otf') format('truetype'); font-weight: 500;
}
html {
- fontStackNormal: "Inter", "TossFaceFontWeb", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important; - fontStackNormalVariable: "Inter Var","TossFaceFontWeb", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important; - fontStackMonospace: ui-monospace, "TossFaceFontWeb", "Cascadia Mono", "Segoe UI Mono", "Ubuntu Mono", "Roboto Mono", Menlo, Monaco, Consolas, monospace !important;
}Использование символов юникода
Если и эти эмодзи не устраивают, то возьмите символы юникода. Вместо самой иконки, используйте код символа.
content “\275E”Когда-то я искал коды на сайтах, а потом узнал, что их можно просматривать там же где и эмодзи, через «Показать эмодзи и символы», или вызвав сочетанием ⌃⌘space.
Для того чтобы вывести символы юникода: выберете в левом верхнем углу панели «Настроить список» и установите «Таблицы кодов: Unicode».
Использование сторонних иконок
Если и юникод не устраивает, то используйте сторонние иконки. Для вставки вот такой код:
:has(span[data-tag="atom-note"]):not(.expandedNodeContent) > span[data-role="editable"]:before {
content: '';
display: inline-block;
margin-top: -10px;
height: 20px; /* высота иконки */
width: 20px; /* ширина иконки */
position: relative;
top:4px;
margin-right: 4px;
background: #F8E6AE url('https://cdn-icons-png.flaticon.com/128/1355/1355764.png') no-repeat 0px 0px; /* ссылка на иконку */
background-size:cover;
}Изменение внешнего вида текста
Для изменения текста узлов, цвета, фона, шрифта, используется такой код:
.listContentItem:has(span[data-tag="текст"]) span[data-role="editable"] {
background-color: #f2bd1d9c !important;
color: #000; /* цвет текста */
background-color: #f2bd1d9c; /* фон */
font-family: "Tahoma"; /* шрифт */
}Нижний код изменяет текст с тегом «главное». Подкрашивает его желтым фоном с закруглением краев, словно он выделен хайлайтером.
.listContentItem:has(span[data-tag="главное"]) span[data-role="editable"] {
background-color: #f2bd1d9c !important;
border-radius: 5px;
padding: 0 2px 0 2px;
}Изменение отображения референсов
Мне не нравилось, как выглядели inline reference, и я упростил внешний вид. Мне в данном случае приятней минимализм.
Css для изменения:
.contentSide .expandedInlineRefs {
background-color: #a7a7a700;
border-top: 1px solid #776d5c80; border-radius: 0px;
}
.ReferenceSection-module_referenceSection__-j615 ul li.ReferenceSection-module_isMention__7KJFQ>div{
background-color: #a7a7a700; border-color: #b8a98573;
}Превращаем узлы в абзацы
Если много текста и хочется, чтобы всё выглядело без буллитов как в документе или статье, то используйте код:
/* Hide the bullets when zoomed into a node that has the #longform tag */
div[data-is-panel-header="true"]:has(span[data-tag="longform"]) + div .bullet {
display: none;
}
/* Format the text for a zoomed in node that has the #longform tag */
div[data-is-panel-header="true"]:has(span[data-tag="longform"]) + div div[data-depth="2"] {
/* font-face: 'fontnamegoeshere'; */ /* uncomment this line and replace fontnamegoes here with any font installed on your device */
text-indent: 2rem; /* first line indent*/
margin-bottom: 1rem; /* amount of space between paragraphs */
font-size: 1.3rem;
line-height: 1.5em; /* the space between lines of text */
text-align: justify;
}К верхнему узлу добавляете тег #longform, фокусируетесь на нём, нажатием на буллит, и все дочерние узлы выводятся как абзацы.
Взято из Slack в Tana Community.
Что еще можно сделать
Когда-то в Roam research и Logseq я помечал активный узел. В Tana это тоже можно сделать. Есть набор готовых сниппетов, с помощью которых можно и узлы помечать, и превращать их в заголовки.
Вот несколько полезных ссылок:
