Hi!
I would like to add a new heading “h4” into remnote.
How can I do it?
Regards
Steffen
Hi!
I would like to add a new heading “h4” into remnote.
How can I do it?
Regards
Steffen
There’s no direct option for H4 but some workarounds here
Use Bold Text
.rem-text span.bold {
font-size: 110%;
}
Tag using workaround
[data-rem-tags~="h4"] .rem-text {
font-size: 18px;
font-weight: bold;
}
I’d recommend using styling tags like shown by @Browneyedsoul.
I also made some auto headers which automatically adapt to indentation/zooming in. You just tag with #Header
(custom tag or power up) the rem will automatically get one heading level lower than the next closest ancestor heading:
And zooming into Document
:
:root {
--header-background-color-1: rgba(123,123,125, 0.18);
--header-background-color-2: rgba(123,123,125, 0.13);
--header-background-color-3: rgba(123,123,125, 0.10);
--header-background-color-4: rgba(123,123,125, 0.05);
--header-background-color-5: unset;
--header-background-color-6: unset;
--header-color-1: navy;
--header-color-2: maroon;
--header-color-3: darkgreen;
--header-color-4: black;
--header-color-5: black;
--header-color-6: black;
--header-font-size-1: 34px;
--header-font-size-2: 27px;
--header-font-size-3: 22px;
--header-font-size-4: 19px;
--header-font-size-5: 16px;
--header-font-size-6: 14px;
--header-font-1: serif;
/*--header-font-size-2: 25px;
--header-font-size-3: 21px;
--header-font-size-4: 18px;
--header-font-size-5: 16px;
--header-font-size-6: 15px;*/
--header-align-1: center;
--header-align-2: left;
--header-align-3: left;
--header-align-4: left;
--header-align-5: left;
--header-align-6: left;
--header-border-1: 3px solid darkgray;
--header-border-2: 2px solid lightgrey;
--header-border-3: 1px solid lightgrey;
--header-border-4: none;
}
.tree-node-container[data-rem-container-tags~=header] > :first-child .rem-text {
background-color: unset;
font-weight: normal;
}
.tree-node-container[data-rem-container-tags~=header] > :first-child .rem-text {
font-weight: bold;
font-family: var(--header-font-1);
font-size: var(--header-font-size-1) !important;
background-color: var(--header-background-color-1);
color: var(--header-color-1);
text-align: var(--header-align-1);
border-bottom: var(--header-border-1);
}
.tree-node-container[data-rem-container-tags~=header]
[data-rem-container-tags~=header] > :first-child .rem-text {
border-bottom: 2px solid lightgray;
font-family: var(--header-font-2);
font-size: var(--header-font-size-2) !important;
background-color: var(--header-background-color-2);
color: var(--header-color-2);
text-align: var(--header-align-2);
border-bottom: var(--header-border-2);
}
.tree-node-container[data-rem-container-tags~=header]
[data-rem-container-tags~=header]
[data-rem-container-tags~=header] > :first-child .rem-text {
border-bottom: none;
font-family: var(--header-font-3);
font-size: var(--header-font-size-3) !important;
background-color: var(--header-background-color-3);
color: var(--header-color-3);
text-align: var(--header-align-3);
border-bottom: var(--header-border-3);
}
.tree-node-container[data-rem-container-tags~=header]
[data-rem-container-tags~=header]
[data-rem-container-tags~=header]
[data-rem-container-tags~=header] > :first-child .rem-text {
font-family: var(--header-font-4);
font-size: var(--header-font-size-4) !important;
background-color: var(--header-background-color-4);
color: var(--header-color-4);
text-align: var(--header-align-4);
border-bottom: var(--header-border-4);
}
.tree-node-container[data-rem-container-tags~=header]
[data-rem-container-tags~=header]
[data-rem-container-tags~=header]
[data-rem-container-tags~=header]
[data-rem-container-tags~=header] > :first-child .rem-text {
font-family: var(--header-font-5);
font-size: var(--header-font-size-5) !important;
background-color: var(--header-background-color-5);
color: var(--header-color-5);
text-align: var(--header-align-5);
}
.tree-node-container[data-rem-container-tags~=header]
[data-rem-container-tags~=header]
[data-rem-container-tags~=header]
[data-rem-container-tags~=header]
[data-rem-container-tags~=header]
[data-rem-container-tags~=header] > :first-child .rem-text {
font-family: var(--header-font-6);
font-size: var(--header-font-size-6) !important;
background-color: var(--header-background-color-6);
color: var(--header-color-6);
text-align: var(--header-align-6);
}
/* Center bullet points again */
[data-rem-container-tags~=header] > :first-child .rem-bullet__container {
height: 100%;
margin-top: 0px;
top: 0 !important;
}
[data-rem-container-tags~=header] > :first-child .rem-bullet {
margin-top: auto;
margin-bottom: auto;
}
You can configure your favorite colors via variables and add as many header levels as you like. (I’d recommend less than 10 though.)
Thank you for sharing.
Hi!
I didn’t use remnote for 3 months and have installed an update today. The new design looks great but the automatic header by @hannesfrank doesn’t work anymore. Now all headings have the same size.
How can I fix it?
You can read this post…