How to Add a Message Board to your Blog

As should be clear I added a Message Board to my Blog that sticks to the highest point of the page. It is not a Post, but quite a Page Element that can be changed from the Layout Editor.
This is how I applied the Message Board.

Add a new segment 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 substance

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.

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...

More From Webworld