Notion like Callout Rem(Block)

1st

[data-rem-container-tags~="callout"] {
    background-color: var(--callout-background-color, rgb(254, 247, 247));	
    padding: 15px 20px;
}

2nd Hide Bullet

[data-rem-container-tags~="callout"] .rem-bullet__container {
  visibility: hidden;
}
15 Likes

It looks like this, thank you for your contribution :slight_smile:

2 Likes

:grin:
If you feel the callout tag cluttered, you can hide them too simply by adding this snippet

[data-rem-container-tags~="callout"] .rem:not(:focus-within) .hierarchy-editor__tag-bar {
   display: none;
}
2 Likes

Loved it! I made three of them, with different colors: blue for comment, orange for pending and red for alert. Works great :slight_smile:

Awesome! I wonder if we could get a version of this going that includes the light-bulb symbol to draw your eye as well - ex. with some :before css wizardry.

3 Likes

I’m wondering this too. I know next to nothing about CSS, so I don’t know if this is possible, but maybe emoji that RemNote already recognizes as rem can be repurposed as the tag instead of “callout.”

That is, maybe this CSS can be triggered by :bulb: or :point_right:t2: instead of #callout?

Here is a snipped, that addresses Martin’s suggestion:

Callout with :bulb: use tag: calloutidea

[data-rem-container-tags~="calloutidea"] {
    background-color: var(--callout-background-color, #fdea80);	
    padding: 15px 20px;
    border-radius: 5px;
}

/* text formatting*/
[data-rem-container-tags~="calloutidea"] .rem-text {
	position: relative;
	left: 20px;
	font-size: initial; /* change font-size; e.g., large, x-large*/
}

/* new rem bullet icon*/
[data-rem-container-tags~="calloutidea"] .rem-bullet__container ::before {
  content: "💡";
  visibility: visible;
  position: relative;
  font-size: large; /* change symbol size here */
  bottom: 7px;
  
}
[data-rem-container-tags~="calloutidea"] .rem-bullet__container{
  visibility: hidden;
}

Callout with :rotating_light: use tag: calloutwarning

[data-rem-container-tags~="calloutwarning"] {
    background-color: var(--callout-background-color, rgb(254, 247, 247));	
    padding: 15px 20px;
    border-radius: 5px;
}

/* text formatting */
[data-rem-container-tags~="calloutwarning"] .rem-text {
	position: relative;
	left: 20px;
	font-size: initial; /*change font-size; e.g., large, x-large */
}

/* rem bullet icon*/
[data-rem-container-tags~="calloutwarning"] .rem-bullet__container ::before {
  content: "🚨";
  font-size: large; /* change symbol size here */
  visibility: visible;
  position: relative;
  bottom: 7px;
}

/* hide old rem bullet*/
[data-rem-container-tags~="calloutwarning"] .rem-bullet__container{

  visibility: hidden;
}
11 Likes

Sorry I’m new to RemNote but I don’t fully understand like how to get it in motion, may you please help me? :sweat_smile:

Follow this actions then you could make it.

  1. Ctrl(⌘) + P → Custom CSS

  2. Click Add Black CSS Block

  3. Then Codeblock for CSS code will pop up

  4. Paste the CSS code

  5. Go back to the black page and make callout Tag to a rem

Thank you! The problem was I a custom CSS Dark Mode on at the time