Adding a Message Board to your Blog

As you can see I added a Message Board to my Blog, that sticks to the top of the page. It is not a Post, but a Page Element that can be edited from the Layout Editor.

This is how I implemented the Message Board.

Add a new section to the template

At the top of the content-part, just beneath the content-wrapper div, add a new <div>, with a unique id (I chose 'message-board'). Inside this <div> add a new section, with a unique id and class. Set maxwidgets to 1, and showaddelements to 'yes'.

<div id='content-wrapper'>
<div id='message-board'>
<b:section class='msgbrd' id='msgbrd' maxwidgets='1' showaddelement='yes'/>
</div>

Add variables to the css-part of your template

To control the font and colors of the Message Board, add the following variables to your css:

<Variable name="MsgBrdFont" description="Message Board Font" type="font" default="italic normal 100% Verdana, Arial, Sans-serif;" value="italic normal 100% Verdana, Arial, Sans-serif;">

<Variable name="bgMsgBrd" description="Messageboard Background Color" type="color" default="#ffffff" value="#ffffcc">
<Variable name="borderMsgBrd" description="Messageboard Border Color"
type="color" default="#336699" value="#336699">
<Variable name="colMsgBrd" description="Messageboard Text Color"
type="color" default="#000000" value="#000000">

Add style-definitions for your Message Board classes

Now add the following css to the template.

/* Messageboard */

.msgbrd h2 {
display: none;
}

.msgbrd .widget-content {
padding: 2px 2% 2px;
background-color: $bgMsgBrd;
border: 4px solid $borderMsgBrd;
color: $colMsgBrd;
font: $MsgBrdFont;
}

Add the MessageBoard content

In the Add Page Elements-part of the Layout Editor you will see the new section just beneath your Header.
Click 'Add a Page Element' here, and select Text.
Enter a title and a message, and click Save.
Voila!