¡Bienvenido a Universo Maker!
¿Es esta la primera vez que visitas el foro? Si es así te recomendamos que te registres para tener completo acceso a todas las áreas y secciones del foro, así también podrás participar activamente en la comunidad. Si ya tienes una cuenta, conectate cuanto antes.
Iniciar Sesión Registrarme

No estás conectado. Conéctate o registrate

Ver el tema anterior Ver el tema siguiente Ir abajo Mensaje [Página 1 de 1.]

#1 [*] Códigos Especiales el Vie Jul 12, 2013 6:48 pm

Razor

avatar
Introducción

Con las recientes actualizaciones de Foroactivo, hay unas cuantas nuevas posibilidades que nos permitirán hacer un mejor formato de post por medio del código, lo cuál es ideal para atraer vistas y participación en tu post, por medio de este tema te mostraré algunos códigos que complementarán tu post de la mejor manera, cabe destacar que los posteo con la exclusividad para Universo Maker.
Tag WOW

El código WoW, sirve para poner una descripción con el estilo “hover” sobre la palabra, es decir, al pasar el puntero por una palabra se mostrará una descripción. Aquí un ejemplo:

[wow]custom:[Colocad una palabra],,[colocad una descripcion],/t[/wow]
Código:
[wow]custom:[Colocad una palabra],,[colocad una descripcion],/t[/wow]
Imagen con Formato

A las imágenes que insertas en el foro también les puedes dar formato, lo único es que no es posible por código BB, mas si en HTML que viene siendo casi lo mismo, utilizaremos las propiedades de estilo de la imagen y verás que puedes armar posts informativos muy bonitos y ordenados.
Ejemplo:
Imagen en Cuadro a la Derecha
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vestibulum ornare gravida. Vivamus neque risus, auctor sed enim eu, fermentum lacinia magna. Etiam imperdiet sem non elit pretium feugiat. Proin dignissim adipiscing dapibus. Ut condimentum ultrices diam, nec tincidunt tortor mattis sagittis. Mauris et mauris fringilla, condimentum neque nec, iaculis orci. Integer porttitor, elit vel rutrum pulvinar, magna urna scelerisque orci, quis vehicula erat dui sit amet nulla. Praesent egestas auctor nisl, nec porta nibh convallis eu. Aenean et scelerisque est. Ut mattis vulputate tristique. Suspendisse ut erat magna.
Código:
<img src="LINK" ALIGN=right/left FLOAT=right/left WIDTH=100px HEIGHT=100px>

Ten en cuenta que tienes que modificar dónde dice LINK con el enlace a tu imagen, el valor de la propiedad align puede ser a la izquierda [left], derecha [right], o centrado [center], pero en este ultimo caso no se puede combinar con la propiedad de flote (la que hace que la imagen tenga reciprocidad con respecto al texto que se presenta). La propiedad float únicamente puede tomar los valores de izquierda o derecha, y width/height son atributos opcionales, cuando quieras redimensionar una imagen solamente tienes que ponerlos con las dimensiones con las cuales quieres que se muestre la imagen, recuerda, tiene que ir en px [píxeles] o cm [centímetros].
Propiedades de Párrafo

Ahora una propiedad que siempre me viene muy bien, es la de dar formato a los párrafos, esto se hace mediante CSS aplicado en una baliza de HTML, (no os confundáis, ya parece que estoy dando clase de código, pero soy un novato en esto xD nada más pongo lo que os podría resultar útil), la única que os mostraré es la de los márgenes del párrafo, por medio de esta puedes hacer que el texto se ajuste a tus demandas.
Ejemplo:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vestibulum ornare gravida. Vivamus neque risus, auctor sed enim eu, fermentum lacinia magna. Etiam imperdiet sem non elit pretium feugiat. Proin dignissim adipiscing dapibus. Ut condimentum ultrices diam, nec tincidunt tortor mattis sagittis. Mauris et mauris fringilla, condimentum neque nec, iaculis orci.
Código:
<div style="margin: 0px 0px 0px 0px">TEXTO</div>

Recuerda que esta propiedad se aplica mediante la baliza div y el style que aplica el css, así que siempre tienes que abrirla y cerrarla adecuadamente, luego los 4 valores que preceden al atributo margin son los que tienes que modificar para definir los espaciados, el orden que representan es este: arriba [top], derecha [right], abajo [bottom] e izquierda [left] respectivamente.
Font-Family

Las fuentes son importantes para estilizar nuestros temas, seguramente ya sabéis como poner algunas, mas os enseñare los arboles de fuentes o Font-family, es simple de hacer y entender, esto se basa en poner una Font especial o principal seguida por una sustituto en caso de que la Font especial o primaria este ausente en el ordenador del que está viendo el tema, así siempre se vera el tema adecuadamente.

Código:
[font=Bauhaus 93, Arial Black]Texto de Prueba[/font]

En este código se pondrá la font Bauhaus 93 como principal, en caso de que no la tengáis, la fuente Arial Black pasara a reemplazarla.
Cajas

Esto es algo que me he estado tratando de currar sobre cómo hacer desde hace rato y por fin lo pude lograr, se trata de algunas cajas de titulo para adornar tus post, dejé predefinidos muchos estilos que logre hacer en motivos en el Photoshop, espero os sean de utilidad. :’D
Muestras:

Estilo Especial 1
Código:
[table style="BORDER: 1px solid #000000" cellspacing="0" width="100%"][tr style="HEIGHT: 23px; BACKGROUND-IMAGE: URL(http://i.imgur.com/DjA5NoZ.png); PADDING: 10PX;"][td][color=#ffffff]<div style="text-align:center;">[b]TITULO[/b][/color]
[/td]
[/tr]
[/table]</div>
Estilo Especial 2
Código:
[table style="BORDER: 1px solid #000000" cellspacing="0" width="100%"][tr style="HEIGHT: 23px; BACKGROUND-IMAGE: URL(http://i.imgur.com/VlIFW83.png); PADDING: 10PX;"][td][color=#ffffff]<div style="text-align:center;">[b]Titulo[/b][/color]
[/td]
[/tr]
[/table]</div>
Titulo
Código:
[table style="BORDER: 1px solid #000000" cellspacing="0" width="100%"][tr style="HEIGHT: 23px; BACKGROUND-IMAGE: URL(http://i.imgur.com/RDZpRnc.png); PADDING: 10PX;"][td][b][color=#ffffff]<div style="text-align:center;">Titulo[/color][/b]
[/td]
[/tr]
[/table]<div>
Titulo
Código:
[table style="BORDER: 1px solid #000000" cellspacing="0" width="100%"][tr style="HEIGHT: 23px; BACKGROUND-IMAGE: URL(http://i.imgur.com/2QUOPBm.png); PADDING: 10PX;"][td][b][color=#ffffff]<div style="text-align:center;">Titulo[/color][/b]
[/td]
[/tr]
[/table]</div>
Titulo
Código:
[table style="BORDER: 1px solid #000000" cellspacing="0" width="100%"][tr style="HEIGHT: 23px; BACKGROUND-IMAGE: URL(http://i.imgur.com/1gwb7hK.png); PADDING: 10PX;"][td][b][color=#ffffff]<div style="text-align:center;">Titulo[/color][/b]
[/td]
[/tr]
[/table]</div>
Titulo
Código:
[table style="BORDER: 1px solid #000000" cellspacing="0" width="100%"][tr style="HEIGHT: 23px; BACKGROUND-IMAGE: URL(http://i.imgur.com/jhmNL5v.png); PADDING: 10PX;"][td][b][color=#ffffff]<div style="text-align:center;">Titulo[/color][/b]
[/td]
[/tr]
[/table]</div>
Titulo
Código:
[table style="BORDER: 1px solid #000000" cellspacing="0" width="100%"][tr style="HEIGHT: 23px; BACKGROUND-IMAGE: URL(http://i.imgur.com/MnXn1yr.png); PADDING: 10PX;"][td][b][color=#262626]<div style="text-align:center;">Titulo[/color][/b]
[/td]
[/tr]
[/table]</div>
Titulo
Código:
[table style="BORDER: 1px solid #000000" cellspacing="0" width="100%"][tr style="HEIGHT: 23px; BACKGROUND-IMAGE: URL(http://i.imgur.com/GlVuaP1.png); PADDING: 10PX;"][td][b][color=#262626]<div style="text-align:center;">Titulo[/color][/b]
[/td]
[/tr]
[/table]</div>
Titulo
Código:
[table style="BORDER: 1px solid #000000" cellspacing="0" width="100%"][tr style="HEIGHT: 23px; BACKGROUND-IMAGE: URL(http://i.imgur.com/4uG5Q01.png); PADDING: 10PX;"][td][b][color=#262626]<div style="text-align:center;">Titulo[/color][/b]
[/td]
[/tr]
[/table]</div>
Titulo
Código:
[table style="BORDER: 1px solid #000000" cellspacing="0" width="100%"][tr style="HEIGHT: 23px; BACKGROUND-IMAGE: URL(http://i.imgur.com/TTdUxdn.png); PADDING: 10PX;"][td][color=#ffffff]<div style="text-align:center;">[b]Titulo[/b][/color]
[/td]
[/tr]
[/table]</div>
Titulo
Código:
[table style="BORDER: 1px solid #000000" cellspacing="0" width="100%"][tr style="HEIGHT: 23px; BACKGROUND-IMAGE: URL(http://i.imgur.com/gLwhzBd.png); PADDING: 10PX;"][td][color=#262626]<div style="text-align:center;">Titulo[/color]
[/td]
[/tr]
[/table]</div>
Titulo
Código:
[table style="BORDER: 1px solid #000000" cellspacing="0" width="100%"][tr style="HEIGHT: 23px; BACKGROUND-IMAGE: URL(http://i.imgur.com/YTKdv0g.png); PADDING: 10PX;"][td][color=#262626]<div style="text-align:center;">Titulo[/color]
[/td]
[/tr]
[/table]</div>
Titulo
Código:
[table style="BORDER: 1px solid #000000" cellspacing="0" width="100%"][tr style="HEIGHT: 23px; BACKGROUND-IMAGE: URL(http://i.imgur.com/G3Zf7Pt.png); PADDING: 10PX;"][td][color=#262626]<div style="text-align:center;">Titulo[/color]
[/td]
[/tr]
[/table]</div>
Nota: Tened en cuenta que el atributo WIDTH presente en todos los anteriores códigos puede ser variable y se define en Porcentaje, alterarlo te puede venir bien para acoplar las tablas de la mejor manera.
¡Bien! Eso es todo por ahora, editaré a medida siga modificando cosas, espero os sean de utilidad y ojala pueda ver posts bien bonitos de aquí en más. :’D
Out.-





Todos mis aportes por Mediafire tienen contraseña, esa es: www.universomaker.net
Esto es para evitar plagio, asegúrense de copiar y pegar la contraseña.

#2 Re: [*] Códigos Especiales el Vie Jul 12, 2013 7:08 pm

Ledai

avatar
Wah!! Me encantó en especial lo de las barras, sin duda lo usaré par mejorar el post de Stolen Shadows, y cualquiera más que haga; gracias por compartirlo, está muy bien distribuido y más con la posibilidad de personalizar las barras con cualquier imagen de fondo, me gustan mucho, gracias por todo Razor.




Entérate de todas las novedades

#3 Re: [*] Códigos Especiales el Vie Jul 19, 2013 1:01 am

Cuervoso

avatar
Vaya, yo ya me preguntaba para qué era el WoW, ya había supuesto que tenía algo que ver con World of Warcraft xD.

Lo que más me gustó fue aquello de las cajas, se deben ver geniales (ya veré el post de Stolen Shadows para verlas en acción xD).

Saludos.






Cuervoso! No te pases ¬_¬

Contenido patrocinado


Ver el tema anterior Ver el tema siguiente Volver arriba  Mensaje [Página 1 de 1.]

Permisos de este foro:
No puedes responder a temas en este foro.