Wednesday, September 13, 2006

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!

4 comments:

  1. Thankful for saving the push to wreck this, I feel all around about it, and I worth looking at it. If possible, when you cause seeing, Okay to have to reestablish your blog with more information? It's truly key to me. Hi I providing hosting in 80% off. For more information visit my website click here Hostinger Promo Code 2021

    ReplyDelete
  2. If you are searching like pay someone to complete assignment UK then you are at the right place you can get at studentsassignmethelp.co.uk. It has over 2000 expert writers who are the best in their field and have received a high number of positive feedback from UK students. If you employ a writer from SAH, you can contact them at any time via phone, email, or live chat. They are available 24 hours a day, 7 days a week to assist you. They often thesis writing help like online exam help,research paper writing,essay writing, online exam help,research paper writing,research paper writing,dissertation, case study,homework, thesis writing , addition to assignment writing with 100% plagiarism free at a very low cost.

    ReplyDelete
  3. Get case study help at cheapest price UK at studentsassignmethelp.co.uk. It has over 2000 expert writers who are the best in their field and have received a high number of positive feedback from UK students. If you employ a writer from SAH, you can contact them at any time via phone, email, or live chat. They are available 24 hours a day, 7 days a week to assist you. They often thesis writing help like online exam help,research paper writing,essay writing, online exam help,research paper writing,research paper writing,dissertation, case study,homework, thesis writing , addition to online exam help with 100% plagiarism free at a very low cost.

    ReplyDelete