MyBB Community Forums

Please tell me how to add this to my forum? Is it a plugin for MyBB 1.8 or is it in core? I cannot figure out how to achieve this easily.

It's not a plugin, simple HTML and CSS.

An example would be:

CSS Code (to add in global.css)

.announcement_1, .announcement_2 {
text-align: center;
padding: 8px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border-style: solid;
border-width: 1px;
margin: 5px;
}

.announcement_1 {
background: #FFF3A6;
border-color: #F7CD26;
}

.announcement_2 {
background-color: #D6EDA2;
border-color: #80C02C;
}

HTML Code (index template or wherever you want it to appear)

<div class="announcement_1">
<strong>Announcement 1:</strong> content of my announcement
</div>

<div class="announcement_2">
<strong>Announcement 2:</strong> content of my announcement
</div>

Demo: http://jsfiddle.net/mxvu1b3y/

You could also just add the nicer bootstrap version.

<div class="alert alert-success" role="alert">Content here</div>
<div class="alert alert-info" role="alert">Content here</div>
<div class="alert alert-warning" role="alert">Content here</div>
<div class="alert alert-danger" role="alert">Content here</div>

CSS

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}
.alert h4 {
    margin-top: 0;
    color: inherit;
}
.alert .alert-link {
    font-weight: 700;
}
.alert>p, .alert>ul {
    margin-bottom: 0;
}
.alert>p+p {
    margin-top: 5px;
}
.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.alert-success hr {
    border-top-color: #c9e2b3;
}
.alert-success .alert-link {
    color: #2b542c;
}
.alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}
.alert-info hr {
    border-top-color: #a6e1ec;
}
.alert-info .alert-link {
    color: #245269;
}
.alert-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}
.alert-warning hr {
    border-top-color: #f7e1b5;
}
.alert-warning .alert-link {
    color: #66512c;
}
.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
.alert-danger hr {
    border-top-color: #e4b9c0;
}
.alert-danger .alert-link {
    color: #843534;
}

Which looks like:
Alert success


Alert info


Alert Warning


and
Alert Danger



Looks much nicer

Thank you very much! I thought it is a plugin thanks