CSS in order to make my note similar to a forum thread

Hello, my workflow requires an approach very similar to a forum thread, that is:

  • I have a topic of research
  • I add learned things to this topic as I go.

Up to now I used this snippet:

/* EDIT MODE */

.thread
	.HyperMD-header-1 {
	text-align: right !important;
	/*font-variant: var(--h4-variant);*/
    	letter-spacing: 0.015em;
    	line-height: var(--h4-line-height);
    	font-size: var(--font-text-size);//var(--h4-size);
    	font-weight: var(--h4-weight);
    	/*font-style: var(--h4-style);*/
    	font-family: var(--h4-font);	
}

/* PREVIEW MODE */
.thread   
	h1{
        text-align: right !important;
        */font-variant: var(--h4-variant);*/
        letter-spacing: 0.015em;
        line-height: var(--h4-line-height);
	font-size: var(--font-text-size);//var(--h4-size);
        font-weight: var(--h4-weight);
        */font-style: var(--h4-style);*/
        font-family: var(--h4-font);
}

Basically this makes a H1 heading (the one I use the least) appear like a H4 heading aligned to the left, this way I sort of imitate the creation of a new post. Here’s how it’s like:


I use number headings plugin to numerate only heading 1 on the current note, so I can have my “posts automatically numbered”.

Problems

  • When posts are very long it’s not very clear the “separation” between posts, also I don’t like that much how a post is displayed (a left aligned H1 and some text below it). I would like something more similar to a phpBB forum:

    See how every post is separated by a box? I find it an optimal way of separate posts, on a markdown file like mine it’s not that clear the separation between posts. How can I achieve a similar result?

  • My “threads” are very very long, they can last one year with entries every day, on most forum there’s a limit to how many posts are displayed per page:

    image

    For example here it creates automatically a new page of the thread when a certain amount of posts is reached. Is there some way I can achieve something similar without having to lose much time?

Thank’s everyone.

I vaguely remember seeing snippets or plugins to make a sort of tab-box (kind of like the tabs in a settings menu). Perhaps something like that could be adapted to do pagination. But it would probably require you to mark the pages manually, and it wouldn’t surprise me if they used headings to do that. (Sorry I don’t remember clearly enough to provide good search terms — I know “tabs” will have a lot of irrelevant matches.)

I’ve got an idea (or fuel to the fire :-D), what if one created a new window, and split it into three tab groups, something like the image below:

How the image is created

The image is created through moving a tab into a new window, and then splitting each tab twice downwards, before adding some display: hidden to the various workspace-tab-header-container’s. I tried (for a few minutes) to reduce the height of the container, and failed, but I surely can be done once you have proper content in the various tabs.

In the top tab one inserts a query which pulls out which file is shown in the middle tab, and presents links/button for every 10th (or so) heading/“forum post”, which when pressed actually changes the middle tab.

In the bottom tab one could have a “category selector” which changes between the various posts described as categories. This also changes the middle tab.

I can imagine how to do both the top and bottom parts, with a slight uncertainty on how to actually shift the content of the middle tab. It would require some cool(?) CSS to achieve this kind of look, but in the end it would indeed make for a “forum” styled look with pagination (and potentially other information) on the top, and category selector (and “forum” information) in the bottom.

Thank’s but this seems fairly too complicated, I would like something that relies on CSS / html so that it can be ported to other apps/sites.

How about a snippet that surround a certain heading with a box? For example you create the snippet so that the content below each heading 1 is surrounded by a box and so you could easily separate posts with appending a heading 1 on top of them

I searched “tab” in plugins and found 2 like I was thinking of. One isn’t suitable but the one named “HTML Tabs” might be.

Thank’s but I was looking for a way to have “boxed” posts, not different tabs.
Edit: found on Stack, something like this:

So that a markdown file looks clean like:

---
cssclass: box
---
# First post
First post content

# Second post
Second post content

And when rendered, in this case, there would be two boxes. Some ideas on how to acomplish?

The tabs are something you might use or adapt for the pagination you want. I mentioned it earlier but wasn’t able to provide good search terms.

1 Like

Ok, so I think I’ve made it.

Here’s how it looks on live-preview:

Reading view:

Code:
:root .thread {
  --thread-border-color: #F1592A;
	--thread-bg-color: #EEEEEE;
}

  .thread h1 ,
  .thread .HyperMD-header-1 {
        text-align: right !important;
        line-height: var(--h4-line-height);

        font-size: var(--h4-size) !important;
        font-weight: var(--h4-weight);
        font-family: var(--h4-font);

				border-top: 5px solid var(--thread-border-color) !important;
        border-bottom: 5px solid var(--thread-border-color) !important;
        border-right: 5px solid var(--thread-border-color) !important;
        border-left: 5px solid var(--thread-border-color) !important;

				background-color:var(--thread-bg-color) !important;
				padding:5px !important;

        margin-top: 40px !important;
        margin-bottom: -10px;
}

.el-h1 ~ .el-p,
.el-h1 ~ .el-ul,
.el-h1 ~ .el-ol,
.el-h1 ~ .el-table,
.el-h1 ~ img
.thread {
    background-color: var(--thread-bg-color) !important;
		padding-top: calc( .1* var(--p-spacing));
		padding-bottom: calc(.1* var(--p-spacing));
		padding-left: 10px;
		padding-right: 10px;
		margin-block-start: calc(-1 * var(--p-spacing));
    margin-block-end: calc(-1 * var(--p-spacing));

		border-bottom: 5px solid var(--thread-border-color) !important;
		border-left:5px solid var(--thread-border-color) !important;
		border-right:5px solid var(--thread-border-color) !important;
}


Basically a new post is a new header 1 section. If someone knows how to make the css better and perhaps having it also on live-preview it would be awesome! Thank’s everyone.

@ironhak : Just a thought but have you considered creating/using a custom callout ? :innocent:

Of course, problem is that I would have to mess with “>” in front of every line, and it’s not a smooth experience. Using my way is also cleaner if I want to share the raw .md file.

Fair enough :smile: !

Although, an easy way to add a callout “around” some text is to select the text → right click → Insert → Callout (works through the command palette too) :blush: .
(So you don’t need to add all the necessary > “manually”)

But yes, that wouldn’t be the most readable thing in source/if you share the .md :smile:

1 Like

That looks pretty nice !
One question (since my CSS knowledge is poor) : does someone know how to alternate the background color of each box between light blue and slightly darker blue for each “post” ?
So that it looks a little more like your exemple in you first post (I think it could improve readability)

I created this css basically thank’s to ChatGPT and reading posts on here. My knowledge of css/html is virtually zero. Anyway for what I know there wouldn’t be an easy way to achieve what you said… Also, I would go to say that the hassle to achieve that thing is higher than the “readability improvement” you would get.

1 Like