MyBB Community Forums

Full Version: [Tuturial HTML&CSS] Creating a News Bar
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
Well before everything you need to have the MyBB or other type of system installed on your server.

Tuturial for myBB;

The bars that I teach to make are indeed gloss makes available here on the forum, but I am not going to gloss but without gloss, you can see here in the index.php page.

Go to - > AdminCP/Templates&Style/Style/*Your Theme*/global.css/Edit Stylesheet: Advanced Mode

(now go to the bottom of the page and add the following lines)

.alerta {
	background: #FFF6BF;
	border-top: 2px solid #FFD324;
	border-bottom: 2px solid #FFD324;
	text-align: center;
	margin: 10px auto;
	padding: 5px 20px;
}

.noticia {
	background: #ADCBE7;
	border-top: 2px solid #0F5C8E;
	border-bottom: 2px solid #0F5C8E;
	text-align: center;
	margin: 10px auto;
	padding: 5px 20px;
}

.analise {
	background: #D6ECA6;
	border-top: 2px solid #8DC93E;
	border-bottom: 2px solid #8DC93E;
	text-align: center;
	margin: 10px auto;
	padding: 5px 20px;
}

Save ...
Now -> AdminCP / Templates & Style / Templates / * your theme * /Index templates/index

Add These codes codes before "forum tag";


<p class="alerta"><strong>Alerta:</strong> CONTEUDO .</p>

<p class="noticia"><strong>Notícia:</strong> - CONTEUDO .</p>

<p class="analise"><strong>Analise: </strong> - CONTEUDO .</p>


Note if they want instead of copying the code to use this global.css which use the "p class" ..


<style type="text/css"> .alerta { background: #FFF6BF; border-top: 2px solid #FFD324; border-bottom: 2px solid #FFD324; text-align: center; margin: 10px auto; padding: 5px 20px;} .noticia { background: #ADCBE7; border-top: 2px solid #0F5C8E; border-bottom: 2px solid #0F5C8E; text-align: center; margin: 10px auto; padding: 5px 20px;} .analise{ background: #D6ECA6; border-top: 2px solid #8DC93E; border-bottom: 2px solid #8DC93E; text-align: center; margin: 10px auto; padding: 5px 20px;}</style>


And it will word, feedback please.
Are functional; http://www.forum.moviemania-pt.com/misc.php?page=teste
As in this tutorial;

<style type="text/css"> .alerta { background: #FFF6BF;
border-top: 2px solid #FFD324; border-bottom: 2px solid #FFD324;
text-align: center; margin: 10px auto; padding: 5px 20px;} .noticia {
background: #ADCBE7; border-top: 2px solid #0F5C8E; border-bottom: 2px
solid #0F5C8E; text-align: center; margin: 10px auto; padding: 5px
20px;} .analise{ background: #D6ECA6; border-top: 2px solid #8DC93E;
border-bottom: 2px solid #8DC93E; text-align: center; margin: 10px
auto; padding: 5px 20px;}</style>


<p class="alerta"><strong>Alerta:</strong> CONTEUDO .</p>
<p class="noticia"><strong>Notícia:</strong> - CONTEUDO .</p>
<p class="analise"><strong>Analise: </strong> - CONTEUDO .</p>

Outcome:
[Image: 2gv7urm.png]
I think this belongs in the 'User Submitted Tutorials' section. Good tut though.
As above. Wrong section, great guide Smile
Posts have to be approved before they can go in the tutorials section so it's ok to post them here then ask to have them moved.

There also is already a tutorial on this in the wiki http://wiki.mybboard.net/index.php/Help:Latest_News_Bar
But any way, this one might be clearer to some people.
@TimB, "latest news bar" ist equalt to mime, and i post in general and i reported xD

And i can upldate this tut to News Bar with gloss efect, you can see it in my website
www.forum.moviemania-pt.com
Hey,


When I'm at thepart where I go to the index, I cant find 'forum tag'. Any help?
Good tutorial but Im using a mod for this .
Could you link me to the mod please?
forum tag?
good work man
Pages: 1 2