Tuesday 5 September 2006

Sticky Message Board

Hans posted a wonderful tutorial on adding a little sticky message board to the top of your blog. It was extremely easy to follow, and I had it up and running within minutes. I made a few modifications so it would blend with my blog. Here is what I did.

First to the "/* Variable definitions" I added this:
<Variable name="bgMsgBrd" description="Messageboard Background Color" type="color" default="#EFEFF7" value="#EFEFF7">
<Variable name="bordercolor" description="Messageboard Border Color"
type="color" default="#336699" value="#336699">
<Variable name="colMsgBrd" description="Messageboard Text Color"
type="color" default="#555555" value="#555555">
Second to the CSS style sheet I added this with the modification for my fluid template:
/* Messageboard */

.msgbrd h2 {
display: none;
}

.msgbrd .widget-content {
width: 99%;
background-color: $bgMsgBrd;
border: 1px dotted $bordercolor;
color: $colMsgBrd;
font: $bodyfont;
}
Third, to the template I added:
<div id='content-wrapper'>
<div id='message-board'>
<b:section class='msgbrd' id='msgbrd' maxwidgets='1' showaddelement='yes'/>
</div>
Last I opened the Layout Editor and under the header was a new element. I clicked 'Add a Page Element' , and selected 'Text'. All that was left to do was type my message.

Thanks, Hans!!

post signature

No comments:

Post a Comment