More highlights and alerts in October CMS blog posts

More highlights and alerts in October CMS blog posts

A few custom plugins for October CMS to add some highlights and colored alerts to improve your blog content

The October CMS blog plugin from Rainlab is the way to go when you want to write articles with Markdown syntax. But the Markdown set is not so extensive when it comes to colors and bring something under attention of your visitor.

Another Markdown based CMS that is very popular is Grav CMS. This CMS has some nice plugins that would be very useful in October CMS as well. I have spent some effort to port a few plugins to October CMS having very promising results.yello

The plugins mentioned are not published on the October CMS marketplace yet, but you can clone them from Github.

Now I will explain all the colored features within these plugins. Please share some feedback with me and help me to have a final first version available in the October CMS marketplace.

Notices in Markdown the easy way

The idea for this plugin came from the same kind of plugin within Grav CMS a markdown based content management system.


This is an warning notice
This is an danger notice
This is an info notice
This is an success notice

How it is done

! This is an *warning* notice
!! This is an **danger** notice
!!! This is an info notice
!!!! This is an success notice

Notices, alerts and colors with the Shorcodes Thunder plugin

The Shortcodes Thunder plugin is relying on Bootstrap for the alert shortcode and some shortcodes rely on Fontawesome (version 4 or 5).

Alert sample (Bootstrap 4 required)

Danger Dit is een mooie alert
Warning Alert
Info Alert
Success Alert
Primary Alert
Default Alert

How it is done

[alert type=danger class="super dangerous"]**Danger** Dit is een mooie alert[/alert] 
[alert type=warning]Warning Alert[/alert]
[alert type=info]**Info** Alert[/alert]
[alert type=success]**Success** Alert[/alert]
[alert type=primary]**Primary** Alert[/alert]
[alert type=default]**Default** Alert[/alert]

Notice Sample

Different title
This is the default notice
This is the primary notice
Attention please
This is the warning notice
This is the info notice
This is the success notice
System error
This is the danger notice

How it is done

[notice type=default t="Different title"]This is the **default** notice[/notice]
[notice type=primary]This is the **primary** notice[/notice]
[notice type=warning t="Attention please"]This is the **warning** notice[/notice]
[notice type=info]This is the **info** notice[/notice]
[notice type=success]This is the **success** notice[/notice]
[notice type=danger t="System error"]This is the **danger** notice[/notice]

Coloring text


This text contains some red, yellow, green and blue. Finally some orange.

How it is done

This text contains some [color c=red]red[/color], 
[color c=yellow bg=#444 padding=20]yellow[/color], [color c=green]green[/color] 
and [color c=#1291f1]blue[/color]. Finally some [color c=#ff9910]orange[/color].

Highlighting text


This is a sample of text with here some highlighted text with markdown parsed syntax included. From here it is just plain again.

How it is done

This is a sample of text [mark]with here some **highlighted** text with _markdown_ parsed syntax included[/mark]. 
From here it is just plain again.

Github Links

More from same category