[Tuturial HTML&CSS] Creating a News Bar

[Legendary]

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)

Code:

.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";

Code:

<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" ..

Code:

<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;

Code:

<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:

[RPicard]

I think this belongs in the 'User Submitted Tutorials' section. Good tut though.

[Clarkie]

As above. Wrong section, great guide

[Tim B.]

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.

[Legendary]

@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
http://www.forum.moviemania-pt.com

[Alex H.]

Hey,


When I'm at thepart where I go to the index, I cant find 'forum tag'. Any help?

[mario4]

Good tutorial but Im using a mod for this .

[Alex H.]

Could you link me to the mod please?

[Legendary]

forum tag?

[jameel225]

good work man