Better Notes (Entity Posts) en

Installations 5 Likes 1

This plugin aims to replace the existing posting within entities with an easier to read, textured, paper like note style.
I shrunk the posts to fit multiple on a single line and re-themed them to better fit the atmosphere of a TTRPG, along with customization options for colors and textures if you want.

I have also created a second plugin called "Paragraph Drop Caps" which adds a stylized larger letter to the first paragraph of your post, I didn't bundle this here as some people may not want it. This plugin works with "Paragraph Drop Caps"

The default colors are listed at the top of the plugin under "root" and if you'd like to adjust the colors you can go to "theming" under campaign administration, create a new style and add the following code.

:root {
--paper-color:#fcf5e5;
--header-color:#75352c;
--vert-line-color:#75352c;
--line-break-color:#75352c;
--quotes-color:#75352c;
--table-code-color:#75352c;
--drop-letter-color:#b8860b;
--quote-bg-color:#e5ecfc;
--header-text: #fff5f5;
}

The hex values above are the default ones included with the plugin.

Adjust these accordingly, Brief description of each below.

"paper-color" - Background color of actual note itself.
"header-color" - Color of the note header that has the note title and the collapse button,etc.
"vert-line-color" - Vertical line on left side of paper.
"line-break-color" - Color for the HTML line break, used as a separator.
"quotes-color" - Color of the big quotes around block quoted text.
"table-code-color" - Color for the HTML table and HTML code inserts.
"drop-letter-color" - Color for the large drop letter at the beginning of paragraphs.
"quote-bg-color" - Background color of the quoted text.
"header-text" - Text color for note headers.

Latest version 1.1 View content

Released 1 year ago

Added HTML tag <li> Styling

Plugin CSS for 1.1


:root {
--paper-bg:url("https://www.transparenttextures.com/patterns/exclusive-paper.png");
--other-bg:url("https://www.transparenttextures.com/patterns/black-paper.png");
--font-family:'Dancing Script',cursive;
--Note-Header-Height:43px;
}

/* Adjust to single column on small screens */
@media (max-width: 1024px) {
.entity-story .entity-notes {
display:flex;
flex-direction:column
}
}

/* Note container Columns */
.entity-story .entity-notes {
width:100%;
margin:0 auto;
columns:2;
column-gap:1em
}

/* Note container children */
.entity-story .entity-notes > * {
display:inline-block;
width:100%;
padding:5px;
break-inside:avoid
}

/*Better Notes: Container Styling*/

/* Note Container Styling */
.entity-story .entity-posts div[id^="post-"] {
padding-left:0;
padding-right:0;
background-color: var(--paper-color, #fcf5e5);
background-image: var(--paper-bg);
border-radius:20px 20px 5px 5px
}

/* Note Header styling */
.entity-story .entity-notes div[id^="post-"] .box-header {
padding-left:20px;
padding-right:20px;
color: var(--header-text, #fff5f5);
border-radius:20px 20px 0 0;
height:var(--Note-Header-Height);
border-bottom: none;
background-color:var(--header-color, #75352c);
background-image: var(--other-bg);
}


/* Vertical Note line */
.entity-story .post-body::before {
content:'';
width:2px;
height:calc(100% - var(--Note-Header-Height));
position:absolute;
top:var(--Note-Header-Height);
left:40px;
background-color:var(--vert-line-color, #75352c)
}

/* Blue Note Lines */
.entity-story .entity-note-body {
height:100%;
background-image:repeating-linear-gradient(transparent 0px,transparent 26px,#5b92e5 27px)
}


/* Footer Styling */
.entity-story .entity-note-footer {
padding-top:6px;
padding-left:56px;
padding-right:16px;
color:var(--font-color, #000);
font-family:var(--font-family);
font-size:16px
}

/*Better Notes: Tag Styling*/

/* tag:hr styling  */
.entity-story .entity-note-body hr {
height:2px;
margin:25px 0;
background-color:var(--line-break-color, #75352c);
}

/* tag:p,h1-h5 and spoiler styling */
.entity-story div[id^="post-body"] :is(p,h1,h2,h3,h4,h5,h6,.spoiler):not(blockquote p){
margin:0;
margin-right:5px;
padding-left:50px;
line-height:27px;
font-family:var(--font-family);
color:var(--font-color, #000);
}

/* tag:ul,ol styling */
.entity-story div[id^="post-body"] :is(ul,ol){
margin:0;
background-color: transparent;
padding-left:65px;
line-height:27px;
font-family:var(--font-family);
color:var(--font-color, #000);
}

/* tag:li styling */
.entity-story div[id^="post-body"] :is(li){
margin:0;
background-color: transparent;
padding-left:5px;
line-height:27px;
font-family:var(--font-family);
color:var(--font-color, #000);
}

/* tag:blockquote styling */
.entity-story div[id^="post-body"] :is(blockquote) {
background-color:var(--quote-bg-color, #E5ECFC);
background-image: var(--paper-bg);
border: 0;
width:40%;
margin: 0;
position:relative;
left:42px;
font-family: Georgia, "Times New Roman", serif
}
.entity-story div[id^="post-body"] :is(blockquote)::before {
  content: '\201C';position: absolute;font-size: 60px;top: 16px;left: -1px;color: var(--quotes-color, #75352c);
}
.entity-story div[id^="post-body"] :is(blockquote)::after {
  content: '\201D';position: absolute;font-size: 60px;bottom: -17px;right: -2px;color: var(--quotes-color, #75352c);
}

/* tag:blockquote:paragraph styling */
.entity-story div[id^="post-body"] :is(blockquote p) {
margin:0;
font-size:16px;
line-height:27px;
color:var(--font-color, #000);
font-family: Georgia, "Times New Roman", serif;
text-align:center;
}

/* tag:pre/table styling */
.entity-story div[id^="post-body"] :is(pre, .table) {
color: #fff;
background-color:var(--table-code-color, #75352c);
background-image: var(--other-bg);
width:calc(100% - 45px);
position:relative;
left:43px;
}