[HTML] Stylish Global Announcement

This tutorial will help you learn how to add a Global Announcement to the top of your forum that will be displayed to all users that view your forum and to all pages.





1º - HMTL
Go to:

Admin Panel > Display > Templates > General > overall_header

edit the template and search for:
[ic]<div id="page-body">[/ic]

When you find that paste above that the below code:

Code:

<div class="GlAnnounc">This is one Global Announcement displayed to all members to all pages.</div>

Explanations:
[ic]<div class="GlAnnounc">[/ic]: is the element to style the announcement after in the CSS using [ic].GlAnnounc[/ic]

[ic]This is one Global Announcement displayed to all members to all pages.[/ic] : This is the content you want to be displayed to the Announcement box.

Make your changes and then click Sumbit and then Publish the template.


2º - CSS
Go to:

Admin Panel > Display > Pictures and Colors > Colors > CSS Stylesheet

and paste in the code field the below code:

Code:

.GlAnnounc{  background:url(https://cdn2.iconfinder.com/data/icons/humano2/32x32/apps/sticky-notes.png) no-repeat 14px #FFDFE1;
  border:1px solid #DA0000;
  border-radius:5px;
  color:#720000;
  box-shadow:2px 2px 2px #EBF7FF;
  padding-top:8px;
  padding-bottom:10px;
  padding-left:64px;
  text-shadow:1px 1px 3px #ddd;
  margin-top:5px;
  font-size:15px;
}


Explanations:
[ic]background:url(https://cdn2.iconfinder.com/data/icons/humano2/32x32/apps/sticky-notes.png) no-repeat 14px #FFDFE1;[/ic] : the url displayed is the image to the left of the box as provided to the image below. You can change it to any image url you want and whatever size you want.

[ic]border:1px solid #DA0000;[/ic] : this is the dark red border around the box. You can change the #DA0000 with whatever color you want. Careful not to delete the ";".

[ic]color:#720000;[/ic] : this is the color of the letters in the box. Here also you can change the #720000 with whatever color you want but be careful not to delete the ";".

[ic]box-shadow:2px 2px 2px #EBF7FF;[/ic] : this is the box shadow. It is not necessary to change it. It has neutral color.

[ic]padding-top:8px;padding-bottom:10px;padding-left:64px;[/ic] : these are the paddings to the top, bottom and left side of the box. Do not mess with these otherwise your box will be ruined!

[ic]text-shadow:1px 1px 3px #ddd;[/ic] : this is the text shadow. If you want to change it change the #ddd.

[ic]margin-top:5px;[/ic] : this rule moves the box 5 px from the top so it will not be exactly after the navbar line.

[ic]font-size:15px;[/ic] : this is the size of the text. Change it if wanted.


After you do the changes you want click Submit.


3º - Preview
Here is how the box will be if you do not make any changes to the codes provided above:



Good Luck!

---

If you have any questions related to this topic create a topic with the following title: Stylish Global Announcement

Very good indeed. Would be nice if it can be closed.

8loop wrote:[link="/t772-stylish-global-announcement#5081"]Very good indeed. Would be nice if it can be closed.

Closed how exactly?

Virus wrote:[link="/t772-stylish-global-announcement#5082"]

Closed how exactly?

I mean if you click the button "X" then it will be closed.. or disappeared.

8loop wrote:[link="/t772-stylish-global-announcement#5083"]I mean if you click the button "X" then it will be closed.. or disappeared.

This Global Announcement is for standard message or announcement that Administrators want members to see all the times anywhere in the forum. For example if you have tutorials or new updates, you could have in the announcement box: "Visit our latest tutorial/update and tell us if you like it!". That's why there is no X button to close.

Btw, thanks for the idea. I might come up with something more interesting with your suggestion!

Have a nice evening,
~ Virus ~

[sucesso="Tutorial Accepted"]This tutorial has been reviewed and points are added to the user accordingly.[/sucesso]