Les dejo estas barras que son como las de mybbsource.
Técnicamente son copeados basados en los tutoriales que ya se escribieron antes pero actualizadas con css3.
No usa imagenes, pero les dejo una para que si quieren que san visibles para los usuarios con navegadores no tan modernos como:
Opera 11.01-, Firefox 3.5-, Chrome 2.0-, IE7- y otros...
Codigo CSS
Entren a ACP -> Estilos y Temas -> Temas -> TU TEMA -> global.css -> Edicion Avanzada
Asta abajo escriben esto:
Colocar las barras:
Entren a ACP -> Estilos y Temas -> Platillas -> TU TEMA Plantillas -> Cabecera Templates -> header para todos los usuarios.
ACP -> Estilos y Temas -> Platillas -> TU TEMA Plantillas -> Cabecera Templates -> header_welcomeblock_guest para invitados.
ACP -> Estilos y Temas -> Platillas -> TU TEMA Plantillas -> Cabecera Templates -> header_welcomeblock_member para miembros.
ACP -> Estilos y Temas -> Platillas -> TU TEMA Plantillas -> Cabecera Templates -> header_welcomeblock_moderator para moderadores.
ACP -> Estilos y Temas -> Platillas -> TU TEMA Plantillas -> Cabecera Templates -> header_welcomeblock_admin para administradores.
Puedes colocar distintas barras en todas para mostrar distinta información a cada tipo de usuario.
Para colocar la barra coloquen este código:
<p class="bar middle white">CONTENIDO DE LA BARRA</p>
Los colores permitidos son estos:
Crear colores personalizados:
Entran en el global.css y escriben esto:
NOMBRE - Nombre de la barra
COLOR1 - Color regularmente bajo
COLOR2 - Mas alto que el COLOR1
COLOR3 - Color del borde, mas alto que el COLOR1 y COLOR2
Colocan esto donde quieran colocar la barra:
<p class="bar middle NOMBRE">CONTENIDO</p>
Subir esta imagen en la carpeta principal de imagenes de tu foro(root/images):
[attachment=919]
Así quedaran:
[attachment=918]
Técnicamente son copeados basados en los tutoriales que ya se escribieron antes pero actualizadas con css3.
No usa imagenes, pero les dejo una para que si quieren que san visibles para los usuarios con navegadores no tan modernos como:
Opera 11.01-, Firefox 3.5-, Chrome 2.0-, IE7- y otros...
Codigo CSS
Entren a ACP -> Estilos y Temas -> Temas -> TU TEMA -> global.css -> Edicion Avanzada
Asta abajo escriben esto:
/* CSS Bars */
p.bar{
margin:4px 2px;
padding:4px;
color:#000;
font-family:"Times New Roman", Times, serif;
font-size: 14px;
height:20px;
text-align:center;
vertical-align:middle;
}
p.black, p.red, p.gamboge, p.brown, p.arsenic, p.feldgrau, p.xanadu {
text-shadow: 0px 1px #000;
font-weight:bold;
color:#fff;
}
p.white, p.green, p.blue, p.cpink {
text-shadow: 0px 1px #000;
font-weight:bold;
color:#000;
}
.bar a:link, .bar a:visited, .bar a:hover, .bar :active {
text-decoration:none;
}
.middle {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
p.white {
background: #f0f0f0 url(images/gradient.png) repeat-x bottom left;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#E3E3E3');
background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#E3E3E3));
background: -moz-linear-gradient(top, #f0f0f0, #E3E3E3);
border:1px solid #d6d6d6;
}
p.black {
background: #333 url(images/gradient.png) repeat-x bottom left;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#262626');
background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#262626));
background: -moz-linear-gradient(top, #333, #262626);
border:1px solid #1A1A1A;
}
p.red {
background: #e00 url(images/gradient.png) repeat-x bottom left;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee0000', endColorstr='#D60000');
background: -webkit-gradient(linear, left top, left bottom, from(#e00), to(#D60000));
background: -moz-linear-gradient(top, #e00, #D60000);
background: -o-linear-gradient(#e00,#D60000);
border:1px solid #BD0000;
}
p.green {
background: #0BDA51 url(images/gradient.png) repeat-x bottom left;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0BDA51', endColorstr='#0AC247');
background: -webkit-gradient(linear, left top, left bottom, from(#0BDA51), to(#0AC247));
background: -moz-linear-gradient(top, #0BDA51, #0AC247);
background: -o-linear-gradient(#0BDA51,#0AC247);
border:1px solid #09AA3E;
}
p.blue {
background: #448FDA url(images/gradient.png) repeat-x bottom left;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#448FDA', endColorstr='#2E82D6');
background: -webkit-gradient(linear, left top, left bottom, from(#448FDA), to(#2E82D6));
background: -moz-linear-gradient(top, #448FDA, #2E82D6);
background: -o-linear-gradient(#448FDA,#2E82D6);
border:1px solid #2775C4;
}
p.gamboge {
background: #E49B0F url(images/gradient.png) repeat-x bottom left;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E49B0F', endColorstr='#CE8B0D');
background: -webkit-gradient(linear, left top, left bottom, from(#E49B0F), to(#CE8B0D));
background: -moz-linear-gradient(top, #E49B0F, #CE8B0D);
background: -o-linear-gradient(#E49B0F,#CE8B0D);
border:1px solid #B67A0C;
}
p.brown {
background: #A52A2A url(images/gradient.png) repeat-x bottom left;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A52A2A', endColorstr='#922626');
background: -webkit-gradient(linear, left top, left bottom, from(#A52A2A), to(#922626));
background: -moz-linear-gradient(top, #A52A2A, #922626);
background: -o-linear-gradient(#A52A2A,#922626);
border:1px solid #7E2020;
}
p.cpink {
background: #FFA6C9 url(images/gradient.png) repeat-x bottom left;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFA6C9', endColorstr='#FF8FBC');
background: -webkit-gradient(linear, left top, left bottom, from(#FFA6C9), to(#FF8FBC));
background: -moz-linear-gradient(top, #FFA6C9, #FF8FBC);
background: -o-linear-gradient(#FFA6C9,#FF8FBC);
border:1px solid #FF75AC;
}
p.arsenic {
background: #3B444B url(images/gradient.png) repeat-x bottom left;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3B444B', endColorstr='#2F363C');
background: -webkit-gradient(linear, left top, left bottom, from(#3B444B), to(#2F363C));
background: -moz-linear-gradient(top, #3B444B, #2F363C);
background: -o-linear-gradient(#3B444B,#2F363C);
border:1px solid #24292E;
}
p.feldgrau {
background: #4D5D53 url(images/gradient.png) repeat-x bottom left;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4D5D53', endColorstr='#414E46');
background: -webkit-gradient(linear, left top, left bottom, from(#4D5D53), to(#414E46));
background: -moz-linear-gradient(top, #4D5D53, #414E46);
background: -o-linear-gradient(#4D5D53,#414E46);
border:1px solid #354039;
}
p.xanadu {
background: #738678 url(images/gradient.png) repeat-x bottom left;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#738678', endColorstr='#67796C');
background: -webkit-gradient(linear, left top, left bottom, from(#738678), to(#67796C));
background: -moz-linear-gradient(top, #738678, #67796C);
background: -o-linear-gradient(#738678,#67796C);
border:1px solid #5B6B60;
}
Colocar las barras:
Entren a ACP -> Estilos y Temas -> Platillas -> TU TEMA Plantillas -> Cabecera Templates -> header para todos los usuarios.
ACP -> Estilos y Temas -> Platillas -> TU TEMA Plantillas -> Cabecera Templates -> header_welcomeblock_guest para invitados.
ACP -> Estilos y Temas -> Platillas -> TU TEMA Plantillas -> Cabecera Templates -> header_welcomeblock_member para miembros.
ACP -> Estilos y Temas -> Platillas -> TU TEMA Plantillas -> Cabecera Templates -> header_welcomeblock_moderator para moderadores.
ACP -> Estilos y Temas -> Platillas -> TU TEMA Plantillas -> Cabecera Templates -> header_welcomeblock_admin para administradores.
Puedes colocar distintas barras en todas para mostrar distinta información a cada tipo de usuario.
Para colocar la barra coloquen este código:
<p class="bar middle white">CONTENIDO DE LA BARRA</p>
Los colores permitidos son estos:
<p class="bar middle white">CONTENIDO</p>
<p class="bar middle black">CONTENIDO</p>
<p class="bar middle red">CONTENIDO</p>
<p class="bar middle green">CONTENIDO</p>
<p class="bar middle blue">CONTENIDO</p>
<p class="bar middle gamboge">CONTENIDO</p>
<p class="bar middle brown">CONTENIDO</p>
<p class="bar middle cpink">CONTENIDO</p>
<p class="bar middle arsenic">CONTENIDO</p>
<p class="bar middle feldgrau">CONTENIDO</p>
<p class="bar middle xanadu">CONTENIDO</p>
Crear colores personalizados:
Spoiler
Entran en el global.css y escriben esto:
p.NOMBRE {
background: #COLOR1 url(images/gradient.png) repeat-x bottom left;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#COLOR1', endColorstr='#COLOR2');
background: -webkit-gradient(linear, left top, left bottom, from(#COLOR1), to(#COLOR2));
background: -moz-linear-gradient(top, #COLOR1, #COLOR2);
background: -o-linear-gradient(#COLOR1,#COLOR2);
border:1px solid #COLOR3;
}
NOMBRE - Nombre de la barra
COLOR1 - Color regularmente bajo
COLOR2 - Mas alto que el COLOR1
COLOR3 - Color del borde, mas alto que el COLOR1 y COLOR2
Colocan esto donde quieran colocar la barra:
<p class="bar middle NOMBRE">CONTENIDO</p>
Subir esta imagen en la carpeta principal de imagenes de tu foro(root/images):
[attachment=919]
Así quedaran:
[attachment=918]
