Skip to content

Latest commit

 

History

History
74 lines (42 loc) · 5.17 KB

README.md

File metadata and controls

74 lines (42 loc) · 5.17 KB

Bootstrap Alert

Bootstrap Alert is an Orchard Core CMS Module that adds a recipe to your Orchard Core CMS Website. When run, the recipe creates an Alert Widget and corresponding template to display a Bootstrap Alert.

Current Status

Build status Status

Getting Started

The module expects Bootstrap to be used by the Orchard Core CMS website. The module does not come with Bootstrap CSS and JS. Make sure your theme includes the necessary assets for the Alert to look and work properly.

Add the NuGet package, BootstrapAlert.OrchardCore, to the Orchard Core CMS Website. Launch the website and sign in as an administrator to enable the module from the dashboard under Configuration -> Features.

BootstrapAlert.OrchardCore

The module installs a recipe, called Alert Widget, that adds a widget to display a Bootstrap Alert. You can view and run the recipe from the dashboard under Configuration -> Recipes.

Alert Widget Recipe

You can view the Alert Content Type (stereotyped as a widget) by displaying the Content Types from the dashboard under Content Definition -> Content Types.

Alert Content Type

In addition to the Alert Content Type, the recipe also installs a custom liquid template to display the Alert Widget. View the template from the dashboard under Configuration -> Templates.

Alert Widget Template

Specify the Type of alert (e.g. Success, Info, Warning, Danger) and the body of the alert when adding it to a zone. The recipe specifies the Standard HTML Editor for the body as it assumes HTML will be used infrequently and sparingly.

New Alert Widget

After publishing the widget, navigate to the appropriate area of your website to view the alert.

Bootstrap Alert Component

For more information on the the Bootstrap Alert Component, visit the Bootstrap documentation.

Customization

The Alert Widget produces the suggested HTML mentioned in the Bootstrap documentation and allows one to create an alert with no knowledge of HTML. You can, however, customize the HTML by modifying the liquid template that comes with the module, Widget__Alert. You can modify the template from the dashboard under Configuration -> Templates. See the Orchard Core Documentation for more information on Templates.

<div class="alert alert-{{ Model.ContentItem.Content.Alert.Type.Text }}" role="alert">
  {{ Model.Content.HtmlBodyPart | shape_render }}
</div>

The HTML Body Part used to input the body of the alert uses the Standard HTML Editor. You can change the editor to use a Wysiwyg editor.

HtmlBody Part Settings

If you prefer to use Markdown instead of HTML, you can replace the HTML Body Part with the Markdown Body Part. If you do choose Markdown, you will also need to change the template.

MarkdownBody Part Settings

<div class="alert alert-{{ Model.ContentItem.Content.Alert.Type.Text }}" role="alert">
  {{ Model.Content.MarkdownBodyPart | shape_render }}
</div>

The Type of alert is specified by choosing an option from the Type drop down list. The list comes preconfigued with the following types: Success, Info, Warning, and Danger. The list uses the Predefined List Editor. You can add additional types by editing the Type field and the list of options.

Predefined List Editor Options

Road map

There are no plans to add any additional features at this time.

Credits

BootstrapAlert.OrchardCore is created and maintained by David Hayden.

Bootstrap is a popular front-end component library.