Add new heading h4

Plugins and Custom CSS
#1

Hi!

I would like to add a new heading “h4” into remnote.

How can I do it?

Regards

Steffen

#2

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;
}
2 Likes
#3

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:

image
image1556×588 37.8 KB

And zooming into Document:

image
image1594×584 38.5 KB

CSS 
: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.)

2 Likes
Limit-less headers?
#4

Thank you for sharing.

#5

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?

1 Like
#6

You can read this post…