Simple Forum Announcements In XenForo

[D]

Well i was just playing around with making alert balloons and i made some simple professional ones
and thought i would share them here for others to use.



Add this to the end of EXTRA.CSS

.alertgreen
{
	margin: 10px 0;
	color: @secondaryDarker;
	background-color: #f8fde5;
	text-align: center;
	padding: 5px;
	border-radius: 5px;
	border: solid 1px #99cc00;
}

.alertgreen a
{
	font-weight: bold;
	color: #99cc00;
}

.alertblue
{
	margin: 10px 0;
	color: @secondaryDarker;
	background-color: #f5fafe;
	text-align: center;
	padding: 5px;
	border-radius: 5px;
	border: solid 1px #176093;
}

.alertblue a
{
	font-weight: bold;
	color: #176093;
}

Here is the html that controls the baloons


Green Alert

<p class="alertgreen">alert message</p>

Blue Alert

<p class="alertblue">alert message</p>

To add the alerts above the forum list and breadcrumb make a new template and call it forum_alerts then add your alerts inside. Save the template and open PAGE_CONTAINER and find

<xen:include template="ad_above_top_breadcrumb" />

Add this code above it

<xen:include template="forum_alerts" />

you should then see something like this

 

[USHost247]

That's pretty nice looking. 🙂 good tutorial.

 

[Jay]

Thanks for the share mate! 😀

 

[Darthmaul]

Nice find man, thanks. 🙂

 

[Smokey]

This belongs in coding tutorials. 🙂 will move. 🙂

 

[Mr.Paine]

I got bored so i made yellow and red

.alertyellow{
   margin: 10px 0;
   color: @secondaryDarker;
   background-color: #FFFFCC;
   text-align: center;
   padding: 5px;
   border-radius: 5px;
   border: solid 1px #FFCC00;
}

.alertyellow a
{
   font-weight: bold;
   color: #FFCC00;
}

.alertred{
   margin: 10px 0;
   color: @secondaryDarker;
   background-color: #F7E8E8;
   text-align: center;
   padding: 5px;
   border-radius: 5px;
   border: solid 1px #CA0007;
}

.alertred a
{
   font-weight: bold;
   color: #CA0007;
}