[Tutorial] Barra de informação no topo

Autor: JQuery
Funcionalidade: Todas as versões

Este é um efeito bem simples e original que pode colocar em seu fórum e editar normalmente.

Crie um novo widget com o table type desativado:

Código:

<div id="First-wnb-bar">
 <span>Precisa de Suporte para seu fórum? </span> <a target="_blank" href="http://bestskins.forumeiros.com/"><span class="First-wnb-bar-button">BestSkins</span></a>
</div><style>
#First-wnb-bar {
color: white;
position: fixed;
background-color: #ed4e0c;
background-image: -moz-linear-gradient(top,#ed4e0c,#cb430a);
background-image: -ms-linear-gradient(top,#ed4e0c,#cb430a);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#ed4e0c),to(#cb430a));
background-image: -webkit-linear-gradient(top,#ed4e0c,#cb430a);
background-image: -o-linear-gradient(top,#ed4e0c,#cb430a);
background-image: linear-gradient(top,#ed4e0c,#cb430a);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed4e0c',endColorstr='#cb430a',GradientType=0);
}
#First-wnb-bar {
font-family: sans-serif;
position: absolute;
width: 100%;
z-index: 99999;
text-align: center;
color: #fff;
height: 33px;
top: 0px;
left: 0px;
border-bottom: 3px solid #fff;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
font-size: 14px;
line-height: 33px;
}
.First-wnb-bar-button {
color: black;
text-shadow: 0 -1px 0 rgba(255,255,255,0.25);
background-color: white;
}
.First-wnb-bar-button {
display: inline-block;
margin-left: 5px;
font-family: sans-serif;
padding: 2px 6px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 10.998px;
font-weight: bold;
line-height: 14px;
white-space: nowrap;
vertical-align: baseline;
}
</style>

Espero que gostem.