Tutorial: Avisos en forma de cinta (como en vBHispano)

Angel Srto

Gamma
Programador
Verificación en dos pasos desactivada
Desde
16 Sep 2010
Mensajes
355
Edad
34
Crédito(s)
0
Puntos
0
Esta es una simple modificación de CSS que cambia la presentación de los avisos en el foro, por uno en forma de cienta.

Lo que hay que hacer para que aparezca tal como en vBHispano es poner el siguiente código en la plantilla additional.css:

HTML:
.notices LI {
	-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
	-o-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
	border-top: 1px solid #FFE260;
	-moz-border-radius:0;
	-webkit-border-radius:0;
	margin: 0 -27px 6px;
	position: relative;

}
.notices LI::before
{
	content: " ";
	background: url({vb:stylevar imgdir_misc}/ribbon-right.png);
	display: block;
	width: 10px;
	height: 10px;
	position: absolute;
	bottom: 0;
	left: 0;
	margin-bottom: -10px;
	z-index: -1;
}
.notices LI::after
{
	content: " ";
	background: url({vb:stylevar imgdir_misc}/ribbon-left.png);
	display: block;
	width: 10px;
	height: 10px;
	position: absolute;
	bottom: 0;
	right: 0;
	margin-bottom: -10px;
	z-index: -1;
}
Luego hay que subir las dos imágenes en el archivo zip adjuntado abajo a la carpeta misc de tu estilo.

Debería funcionarles en las versiones de los navegadores más recientes. No estoy seguro si funcione para IE8, IE7 entre otros.

Vista previa:
Ver el archivo adjunto 4664
 

tetsu

Gamma
Verificación en dos pasos desactivada
Desde
9 Feb 2010
Mensajes
381
Crédito(s)
0
Puntos
15
Andale esto si me gusto :D
la verdad a mi me gusta mucho como se visualiza esto :) se agradece mucho la modificacion :)

saludos :)
 

Destron

Beta
Verificación en dos pasos desactivada
Desde
31 Ene 2010
Mensajes
46
Edad
44
Crédito(s)
0
Puntos
0
Muy bonito detalle, alguna posibilidad de hacer esto con los navtabs? :D
 

imported_Agustin

Baneado
Gamma
Verificación en dos pasos desactivada
Desde
8 Ago 2010
Mensajes
399
Edad
25
Crédito(s)
0
Puntos
0
Cintas Release.
Ahora el Footer :B

---------- Actualizado a las 07:39 ---------- Original a las 07:29 ----------

Muy bonito detalle, alguna posibilidad de hacer esto con los navtabs? :D
Claro, si sabes CSS, claro que se puede :D
 

tetsu

Gamma
Verificación en dos pasos desactivada
Desde
9 Feb 2010
Mensajes
381
Crédito(s)
0
Puntos
15
si... el footer seria bueno tambien :D
--------------------

habria la posibilidad de poner una cinta del estado del usuario -conectado/desconectad- pero ponerla en el postbit_legacy, algo asi como una barrita que diga, "Conectado" "Desconectado"????
algo asi como en esta imagen:

saludos :)
 

imported_Agustin

Baneado
Gamma
Verificación en dos pasos desactivada
Desde
8 Ago 2010
Mensajes
399
Edad
25
Crédito(s)
0
Puntos
0
si... el footer seria bueno tambien :D
--------------------

habria la posibilidad de poner una cinta del estado del usuario -conectado/desconectad- pero ponerla en el postbit_legacy, algo asi como una barrita que diga, "Conectado" "Desconectado"????
algo asi como en esta imagen:

saludos :)
Si me pasas la URL de ese foro, yo te consigo ese codigo que usan.
:B
 

Destron

Beta
Verificación en dos pasos desactivada
Desde
31 Ene 2010
Mensajes
46
Edad
44
Crédito(s)
0
Puntos
0
Cintas Release.
Ahora el Footer :B

---------- Actualizado a las 07:39 ---------- Original a las 07:29 ----------



Claro, si sabes CSS, claro que se puede :D
Para nada, anantes pude modificar los breadcrumbs como xenforo, pero veré si le doy un intento mas al rato XD
 

hotcubano

Baneado
Beta
Verificación en dos pasos desactivada
Desde
15 Sep 2010
Mensajes
116
Edad
32
Crédito(s)
0
Puntos
0
Esta es una simple modificación de CSS que cambia la presentación de los avisos en el foro, por uno en forma de cienta.

Lo que hay que hacer para que aparezca tal como en vBHispano es poner el siguiente código en la plantilla aditional.css:

HTML:
.notices LI {
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
    border-top: 1px solid #FFE260;
    -moz-border-radius:0;
    -webkit-border-radius:0;
    margin: 0 -27px 6px;
    position: relative;

}
.notices LI::before
{
    content: " ";
    background: url({vb:stylevar imgdir_misc}/ribbon-right.png);
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    margin-bottom: -10px;
    z-index: -1;
}
.notices LI::after
{
    content: " ";
    background: url({vb:stylevar imgdir_misc}/ribbon-left.png);
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    bottom: 0;
    right: 0;
    margin-bottom: -10px;
    z-index: -1;
}
Luego hay que subir las dos imágenes en el archivo zip adjuntado abajo a la carpeta misc de tu estilo.

Debería funcionarles en las versiones de los navegadores más recientes. No estoy seguro si funcione para IE8, IE7 entre otros.

Vista previa:
Ver el archivo adjunto 4664
Te falta un detalle:
Es la plantilla additional.css no aditional.css ---> Te comistes una d :) Solo lo digo proque muchos copian y lo buscan en el buscador de plantilla y no va a salir de esa forma.

Por lo demas Instalado
 

Angel Srto

Gamma
Programador
Verificación en dos pasos desactivada
Desde
16 Sep 2010
Mensajes
355
Edad
34
Crédito(s)
0
Puntos
0
Gracias, corregido :p
Te falta un detalle:
Es la plantilla additional.css no aditional.css ---> Te comistes una d :) Solo lo digo proque muchos copian y lo buscan en el buscador de plantilla y va a salir de esa forma.

Por lo demas Instalado
 

Great Kitten

Iota
Social Media
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
14 Jul 2010
Mensajes
2.135
Edad
31
Crédito(s)
0
Puntos
1.541
veo que es para la versión 4, mi versión es la de 3.8.5 también funcionara?
 

imported_Sara

Beta
Verificación en dos pasos desactivada
Desde
22 Abr 2010
Mensajes
46
Edad
33
Crédito(s)
0
Puntos
0
Ey es genial... estos días estuve dudando si abrir un tema para preguntar y mira tú por donde! gracias :D

---------- Actualizado a las 13:20 ---------- Original a las 13:15 ----------

En Firefox funciona, en IE 8 no, pero vaya que tampoco es que quede horrible... además, en IE nunca funciona nada :p
 

imported_Agustin

Baneado
Gamma
Verificación en dos pasos desactivada
Desde
8 Ago 2010
Mensajes
399
Edad
25
Crédito(s)
0
Puntos
0
Ey es genial... estos días estuve dudando si abrir un tema para preguntar y mira tú por donde! gracias :D

---------- Actualizado a las 13:20 ---------- Original a las 13:15 ----------

En Firefox funciona, en IE 8 no, pero vaya que tampoco es que quede horrible... además, en IE nunca funciona nada :p
Por eso estan los <!--[if lt IE ]> para los CSS.
Internet Explorer viene con una configuracion diferente, al igual que google chrome.
Muchos desarrolladores hacen sus webs directamente para Firefox.
Pero lastima que Firefox 4, me esta consumiendo mucha RAM :S ( firefox.exe -> 656 MB)
Demaciado consume, pero es lo mejor :D
 

alvarocamus

Beta
Verificación en dos pasos desactivada
Desde
28 May 2010
Mensajes
93
Edad
29
Crédito(s)
0
Puntos
0
no avisaron si se podia para 3.8.x...
en la espera, almenos tengo el dato de que angel tiene instalado por ahí el 3.8.x
jejejeje
 

Angel Srto

Gamma
Programador
Verificación en dos pasos desactivada
Desde
16 Sep 2010
Mensajes
355
Edad
34
Crédito(s)
0
Puntos
0
Pero podrías intentar poniendo el CSS en la parte de CSS Adicional, editando tu estilo. Luego sube las imágenes y si funciona entonces lo vas a notar, si no entonces no funciona ;)
 

ZEL

Gamma
Verificación en dos pasos desactivada
Desde
17 Dic 2009
Mensajes
428
Crédito(s)
0
Puntos
0
Gracias muy bien exelente una sola preguntica como le cambio ese color amarillo que sebe muy fatal
 

Organization

Curioso
Verificación en dos pasos desactivada
Desde
27 Feb 2011
Mensajes
8
Crédito(s)
0
Puntos
0
Hola, soy nuevo en vBulletin y no he podido localizar el archivo additional.css

Gracias,
- Friend
 

ninjemys oweni

Beta
Verificación en dos pasos desactivada
Desde
14 Ene 2011
Mensajes
54
Edad
55
Crédito(s)
0
Puntos
0
Gracias muy bien exelente una sola preguntica como le cambio ese color amarillo que sebe muy fatal
En la misma plantilla donde se adiciona el código, busca este
.vbipostbit {
margin-top: 2px;
margin-button: 2px;
padding: 4px;
background-color: #BBC3CD;
border: 1px solid #BBC3CD;
y cambia el color de los que está en rojo por el color que gustes y listo

---------- Actualizado a las 04:53 ---------- Original a las 04:43 ----------

Hola, soy nuevo en vBulletin y no he podido localizar el archivo additional.css

Gracias,
- Friend
entra al control panel, ve a estilos y plantillas luego administrar estilos busca tu estilo y editar plantillas, en plantillas CSS alli está abajo de eso additional.css le das dos clics y te mostrará el editor con el código, despues de eso sigues los pasos descritos y listo
 

Arriba