Does anybody know how to get the red text block back?

[v-bulynkin]

Recently, I have updated my Yellow instance and noticed that all coloured text blocks became common paragraphs. I found that the syntax had been changed:

Old syntax	Modern syntax
! Warning	! {.note} (next line: ! Warning)
!! Error
!!! Info	! {.important} (next line: ! Info)

There's no alternative for red text block. Could you please get it back?

[annaesvensson]

You can add your own block elements, don't worry, it's easier than you think. First, create a custom CSS class for your block element and add it to your theme's stylesheet, which is stored in your system/themes folder. Second, in your Markdown make a general block element with the ! character and add the CSS class to the first line.

In a nutshell, here's how to make a red text block in Datenstrom Yellow:

• Define a .red-text-block class in your CSS.
• Use it with ! {.red-text-block} in your Markdown.

Can you figure out the rest?

[v-bulynkin]

Anna, thank you for the information!

Unfortunately, it was not an update which make choice wider. Now, in the newest versions of Yellow, there is only one block left - important (former info). So, no gradation in blocks, no choice at all. I don't understand the meaning of such updates.

Anyway, how to get things back (I cloned the .important class to .info to have more accustomed approach, you don't have to do this).

In your theme file (for example, system/themes/copenhagen.css) you should make the following changes:

1. Add to :root block:

    --info-bg: #f0f8fe;
    --info-accent: #08e;
    --warning-bg: #fffbf0;
    --warning-accent: #fb0;
    --error-bg: #fdf0f0;
    --error-accent: #d00;

2. Add to "content" paragraph:

.content .info {
    margin: 1em 0;
    padding: 10px 1em;
    background-color: var(--info-bg);
    border-left: 4px solid var(--info-accent);
}
.content .warning {
    margin: 1em 0;
    padding: 10px 1em;
    background-color: var(--warning-bg);
    border-left: 4px solid var(--warning-accent);
}
.content .error {
    margin: 1em 0;
    padding: 10px 1em;
    background-color: var(--error-bg);
    border-left: 4px solid var(--error-accent);
}

3. At the end of the file, add strings to @media print section:

@media print {
    .page {
        border: none !important;
        border: none !info;
        border: none !warning;
        border: none !error;
    }
}

I don't use editor, so that you will probably need to add something else. Inspect commits which were made 15 September 2025 (the one which I used) and further.

Now, you can add blocks this way:

! {.info}
! Thank you to contacting us

! {.warning}
! Slippery when wet

! {.error}
! The application failed to initialize

[henryVr7]

Hello, I've also noticed that my notification boxes, which I previously created with ! or !!, are no longer displayed.
Can you briefly tell me what you changed and how I can undo it?
The change probably came with the update of the Paris theme.

[henryVr7]

Hey, I'm not really familiar with this and would like some help please. Has anything changed in the Markdown syntax or CSS? What can I do to get my clue boxes back?

[adegans]

Maybe relevant - In my theme I added this:

/* -------------------------
 Noficiations/highlights
 Specify a color to signify different things/importances
 
 Usage:
 ! {.important [.red .green .orange]}
 ! Here's information that needs attention.
------------------------- */
.important {
    display: block;
    position: relative;
    margin: 0.5em 0 1.5em;
    padding: 20px 20px 20px 34px;
    background-color: #e2f2fd;
    box-shadow: 0 4px 8px 0 rgba(0, 41, 89, .3);
    border-radius: var(--radius);
    color: var(--content-dark);
}

.important p {
	margin: 0;
}

.important::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 100%;
    content: "";
    background-color: #00a6ec;
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
}

.important.red {
    background-color: #fff5f5;
}
.important.red::before {
    background-color: #e64342;
}

.important.orange {
    background-color: #ffffcc;
}
.important.orange::before {
    background-color: #eeb707;
}

.important.green {
    background-color: #f0fff4;
}
.important.green::before {
    background-color: #38bc7d;
}

This'll let you easily add info and alert bars into sites using Markdown.
Of-course edit as needed - colors, the var()'s etc.