[Plantillas para posts] Cajas para usar como advertencia, error, etc.
XOPLANET 2.2

[Plantillas para posts] Cajas para usar como advertencia, error, etc.

OLPCMaster V2

  • ***
  • 271
    • En YouTube
  • Laptop: : --
Antes quisiera agradecer al admin por hacer realidad esta sugerencia, permitiéndonos manejar CSS en los posts y poner en práctica lo que hagámos.

Este post lo hice para que podáis usar cajas con diversos colores que permitirán al usuario usarlas como una nota, advertencia, error o lo que fuése. Es copiar los códigos y escribir entre los tags [div] y [/div]. Si dominas CSS podrás modificar este código y talvez agregar algo, bueno, aquí va:

CAJA DE ADVERTENCIA

Código: [Seleccionar]
[div style="background-image: url(http://msc.wlxrs.com/9X-1FV0Ez65-mbegJU4c3g/images/icon_shield_16.gif); background-repeat:no-repeat; background-position: top left; background-color: #FFEDA6; border: 1px solid #F0C000; color:#F0C000; padding-left: 18px;"]Una de advertencia.[/div]

[div style="background-image: url(http://msc.wlxrs.com/9X-1FV0Ez65-mbegJU4c3g/images/icon_shield_16.gif); background-repeat:no-repeat; background-position: top left; background-color: #FFEDA6; border: 1px solid #F0C000; color:#F0C000; padding-left: 18px;"]Una de advertencia.[/div]

CAJA DE INFO

Código: [Seleccionar]
[div style="background-image: url(http://www.quickrun.net/images/icon-info16.png); background-repeat:no-repeat; background-position: top left; background-color: #A6A6FF; border: 1px solid #0000FF; color:#0000FF; padding-left: 18px;"]Una de información.[/div]

[div style="background-image: url(http://www.quickrun.net/images/icon-info16.png); background-repeat:no-repeat; background-position: top left; background-color: #A6A6FF; border: 1px solid #0000FF; color:#0000FF; padding-left: 18px;"]Una de información.[/div]

CAJA VERDE

Código: [Seleccionar]
[div style="background-image: url(http://4.bp.blogspot.com/-KazMM3eeZIc/T-x1ppqFD1I/AAAAAAAAAGY/HWnhKqrdkpA/GreenTick.png); background-repeat:no-repeat; background-position: top left; background-color: #A6FFA6; border: 1px solid #00CE00; color:#00CE00; padding-left: 18px;"]Una de algo positivo.[/div]

[div style="background-image: url(http://4.bp.blogspot.com/-KazMM3eeZIc/T-x1ppqFD1I/AAAAAAAAAGY/HWnhKqrdkpA/GreenTick.png); background-repeat:no-repeat; background-position: top left; background-color: #A6FFA6; border: 1px solid #00CE00; color:#00CE00; padding-left: 18px;"]Una de algo positivo.[/div]

CAJA ROJA

Código: [Seleccionar]
[div style="background-image: url(http://www.retrojunk.com/bundles/rjcommon/image/buttons/cross-circle-frame.png); background-repeat:no-repeat; background-position: top left; background-color: #FFA6A6; border: 1px solid #FF0000; color:#FF0000; padding-left: 18px;"]Una de error o algo negativo.[/div]

[div style="background-image: url(http://www.retrojunk.com/bundles/rjcommon/image/buttons/cross-circle-frame.png); background-repeat:no-repeat; background-position: top left; background-color: #FFA6A6; border: 1px solid #FF0000; color:#FF0000; padding-left: 18px;"]Una de error o algo negativo.[/div]

EJEMPLO Y NOTA

Para aquellas "almas generosas" dejo este código para insertar al principio o final del post como una forma de dar el reconocimiento por hacer los códigos, todos los íconos son de Windows 7, si alguno no se ve avisar.

Código: [Seleccionar]
[div style="background-image: url(http://www.quickrun.net/images/icon-info16.png); background-repeat:no-repeat; background-position: top left; background-color: #A6A6FF; border: 1px solid #0000FF; color:#0000FF; padding-left: 18px;"]Los códigos de las cajas los hizo [color=blue][b][url=http://xoplanet.net/index.php?action=profile;u=2885]TS666[/url][/b]. Visita su [color=blue][b][url=http://xoplanet.net/tutoriales/%28plantillas-para-posts%29-cajas-para-usar-como-advertencia-error-etc/]post[/url][/b][/color] para saber como usarlos.[/div]

[div style="background-image: url(http://www.quickrun.net/images/icon-info16.png); background-repeat:no-repeat; background-position: top left; background-color: #A6A6FF; border: 1px solid #0000FF; color:#0000FF; padding-left: 18px;"]Los códigos de las cajas los hizo TS666. Visita su post para saber como usarlos.[/div]
« Última modificación: Enero 14, 2014, 12:56:45 am por TraceScarlet666 »
--

Administrator

  • *****
  • 770
    • xoplanet
  • Laptop: : Magallanes
Re:[Plantillas para posts] Cajas para usar como advertencia, error, etc.
« Respuesta #1 en: Enero 14, 2014, 10:59:56 am »
Muy bueno códigos, muy útiles para organizar los post y que queden claros! +10
¿No te gusta el tema del foro? Ahora puedes entrar a tu cuenta y cambiarlo!

Linux_Piojop

  • **
  • 213
    • Piojop Juegos Nuevo y Mejorado!!
  • Laptop: : Xo 1.75
Re:[Plantillas para posts] Cajas para usar como advertencia, error, etc.
« Respuesta #2 en: Enero 14, 2014, 11:50:39 am »
:aplauso:Muy bueno +5 cuando recarge

RafaelG130

  • ***
  • 412
  • Laptop: : Super MG3
Re:[Plantillas para posts] Cajas para usar como advertencia, error, etc.
« Respuesta #3 en: Enero 14, 2014, 12:27:48 pm »
Buen post +5

ZF123

  • 8
  • Laptop: : mg3
Re:[Plantillas para posts] Cajas para usar como advertencia, error, etc.
« Respuesta #4 en: Enero 14, 2014, 11:28:51 pm »
estan buenas si ago un post usare alguna, t dejo +3 :ok:
hola soy zelda fanboy 123, llamame zf123 o zelda y me gusta coleccionar rupias :D les prometo la trifuerza!!

Linux_Piojop

  • **
  • 213
    • Piojop Juegos Nuevo y Mejorado!!
  • Laptop: : Xo 1.75
Re:[Plantillas para posts] Cajas para usar como advertencia, error, etc.
« Respuesta #5 en: Enero 15, 2014, 02:01:25 pm »
[div style="background-image: url(http://www.retrojunk.com/bundles/rjcommon/image/buttons/cross-circle-frame.png); background-repeat:no-repeat; background-position: top left; background-color: #FFA6A6; border: 1px solid #FF0000; color:#FF0000; padding-left: 18px;"]Todavia no me cargaron los points[/div]

KnightOfDarkness

  • *****
  • 1.408
    • okay Admin
  • Laptop: : Unknown
Re:[Plantillas para posts] Cajas para usar como advertencia, error, etc.
« Respuesta #6 en: Enero 16, 2014, 04:54:05 am »
[div style="background-image: url(http://4.bp.blogspot.com/-KazMM3eeZIc/T-x1ppqFD1I/AAAAAAAAAGY/HWnhKqrdkpA/GreenTick.png); background-repeat:no-repeat; background-position: top left; background-color: #A6FFA6; border: 1px solid #00CE00; color:#00CE00; padding-left: 18px;"]Has Ganado +15 points!.[/div]