EM EN
Conectarse

Recuperar mi contraseña

Los posteadores más activos de la semana

Últimos temas
» En que casa te voy a poner?... (LEER PRIMER POST)
por KennethKrieger Lun Oct 10, 2016 6:39 pm

» Descubre cual es tu varita idonea
por KennethKrieger Lun Oct 10, 2016 6:27 pm

» Hermione Granger y el anillo de Slytherin
por Artemisa Dom Ago 28, 2016 1:06 am

» Libro llamado "Amor Doloroso", un Dramione!!! EXCELENTE!
por Artemisa Dom Ago 28, 2016 1:02 am

» He vuelto :) | LexTonks
por cinthya Miér Ago 19, 2015 1:44 pm

» Fullmetal Alchemist
por Tonks30 Sáb Jul 11, 2015 4:27 am

» Parodias de Juego de Tronos
por Tonks30 Dom Mayo 31, 2015 4:01 am

» (Thirty Seconds To Mars) This Is War.
por Tonks30 Dom Mayo 24, 2015 2:42 am

» Star Wars VII
por Tonks30 Miér Mayo 13, 2015 4:08 am

» Sword Art Online
por Tonks30 Sáb Mayo 09, 2015 10:42 pm

» El Comienzo De La Tercera Guerra Mágica
por LexTonks Lun Mar 30, 2015 12:18 am

» REGISTROregistro en pottermore
por Vero Boullhesen Williams Jue Ene 15, 2015 7:27 am


Firmas para el foro, a base de códigos. ¡Elige el tuyo!

Ver el tema anterior Ver el tema siguiente Ir abajo

Firmas para el foro, a base de códigos. ¡Elige el tuyo!

Mensaje  JessxFlyller el Lun Oct 08, 2012 10:27 am

¡Hola!
Si no sabéis de códigos HTML, será un poco complicado haceros entrar en ese mundo, pero haré el intento. Un código HTML es, en cierto punto, una forma de crear 'el cuerpo' de un documento o página web. De momento, lo que yo haré es daros esos códigos básicos, para que los uséis en vuestras firmas.
Os mostraré un ejemplo simple:
Código:
[blur] Tu texto [/blur]
Poniendo eso, os queda algo así:
Hola, soy un ejemplo.

Si veis mi firma, notaréis que parece manipulada con Photoshop pero no, son códigos. Si no sabéis usar el photoshop, estos códigos os vienen de maravillas.
El código que yo uso en mi firma, es éste:
Código:
<center><BR><div style="font-size: 58px; letter-spacing: -3px; color:#578C9E; text-shadow:0 0 11px #578C9E;">[font=Georgia]More Than[i][color=#ABBCC2] {This}[/color][/i][/font]    
<div style="width:500px;height:200px;;background-image:url(http://desmond.imageshack.us/Himg827/scaled.php?server=827&filename=yousaiditwaseasy.jpg&res=landing);-moz-border-radius-bottomleft: 100px;-webkit-border-top-right-radius:115px;-webkit-border-bottom-left-radius:115px;border-bottom: 3px solid #578C9E;border-top: 3px solid #578C9E;"></div></div>

Os iré explicando parte por parte, para que podáis modificar a vuestro gusto vuestras firmas.

Transformar el texto:
Código:
<div style="font-size: 58px; letter-spacing: -3px; color:#578C9E; text-shadow:0 0 11px #578C9E;">[font=Georgia]More Than[i][color=#ABBCC2] {This}[/color]</div>
Font-size viene siendo el tamaño de letra.
Letter-spacing es el espacio entre letras y se controla con 'px' por ejemplo, si las quiero muy juntas, uso -10px.
'Color' debe ser manejado con colores HTML, que conseguís plantillas así en internet poniendo 'colores HTML', porque no sirve si ponéis 'color=darkred', como aquí en el foro.
Text-shadow: simple, los dos primeros ceros se encargan de la ubicación de la sombra, no olvidéis poner 'px' al lado del número. El tercero se encarga del grosor, más el color que le queráis poner.
Lo demás viene siendo cosa fácil, es sólo el tipo de letra, que lo buscáis aquí mismo, el color y el texto que vais a usar.

Transformar imagen:
Código:
<div style="width:500px;height:200px;;background-image:url(http://desmond.imageshack.us/Himg827/scaled.php?server=827&filename=yousaiditwaseasy.jpg&res=landing);-moz-border-radius-bottomleft: 100px;-webkit-border-top-right-radius:115px;-webkit-border-bottom-left-radius:115px;border-bottom: 3px solid #578C9E;border-top: 3px solid #578C9E;"></div>
Width: Ancho de la imagen
Height: Alto de la imagen
Background-Image:url(linkdeimagen) = Ahí colocais el link de la imagen que deseais poner
-moz- border-radius-topleft = Esto es para transformar los bordes de la imagen, atentos.
Si queréis redondear los 4 bordes, poned
Código:
-moz-border-radius: *Número*px;

Si sólo queréis redondear de uno en uno, con diferentes medidas, bordes, etc, añadís:
Código:
Abajo izquierda: -webkit-border-bottom-left-radius:
Abajo derecha: -webkit-border-bottom-right-radius:
Arriba izquierda:-webkit-border-top-left-radius:
Arriba derecha: -webkit-border-top-right-radius:
Mis redondeos son de 115px, pero podéis variarlo, mientras más px, más redondo será, y mientras menos... pues menos.
Como veis, yo tengo unos bordes azules en mi imagen, eso se logra poniendo:
Código:
Borde abajo: border-bottom:
Borde arriba: border-top:
Borde izquierda: border-left:
Borde derecha: border-right:
Y para lograr que el borde sea sólido y de cierto tamaño y color, agrego:
Código:
border-bottom: 3px solid #578C9E
Existen ciertos tipos de bordes, que son:
none: Nada, sin borde.
dotted: Puntos
solid: Sólido, recto
double: Doble línea

Y esa vendría siendo mi firma. Y así podéis jugar con los valores, os mostraré algo diferente.


Time Turner
Sometimes we don't
know what we had
till the time
it's gone



Podría seguir, pero ya entendéis a dónde voy. Ahora, la idea es que juguéis con vuestras firmas, pero como no es algo fácil de aprender, podéis hacerme pedidos de códigos y estaré gustosa. Y además en este mismo tema seguiré haciendo tutoriales de códigos HTML, que queda mucho para ver y para los foros queda genial. Y aquí acabamos, de momento. Preguntas, dudas, pedidos, lo que sea, en un coment :)



The girl on fire

avatar
JessxFlyller
Director de hogwarts
Director de hogwarts

Casa perteneciente : Gryffindor
Estatus de Sangre : Sangre Mestiza
Femenino Mensajes : 696
Fecha de inscripción : 03/07/2011
Edad : 23
Empleo/ocio : Auror y escritora mediocre en mis tiempos libres.
Lugar Mágico : En busca de mí misma.
Medallas :

Volver arriba Ir abajo

Re: Firmas para el foro, a base de códigos. ¡Elige el tuyo!

Mensaje  lopez walter gustavo el Mar Oct 09, 2012 7:53 am

Jessx! no entendí ni "J" XDDD Laughing


[Tienes que estar registrado y conectado para ver esa imagen]
[Tienes que estar registrado y conectado para ver esa imagen]
[Tienes que estar registrado y conectado para ver esa imagen]
avatar
lopez walter gustavo
SubLíder Hufflepuff
SubLíder Hufflepuff

Casa perteneciente : Hufflepuff
Estatus de Sangre : Hijo de Muggles
Masculino Mensajes : 574
Fecha de inscripción : 27/12/2011
Edad : 21
Varita : Largo: 26.75 cm Madera: Fresno Centro: Unicornio Flexibilidad: flexible
Patronus : Hipogrifo
Empleo/ocio : Desmemorizador
Lugar Mágico : Ministerio de magia

Volver arriba Ir abajo

Re: Firmas para el foro, a base de códigos. ¡Elige el tuyo!

Mensaje  JessxFlyller el Miér Oct 10, 2012 6:56 am

En vista de la cantidad de comentarios y pedidos que recibió el tema(?) haré otra demostración de códigos HTML.
Sé que a efectos simples todo esto de los códigos suena a 'ugh, muchas letras, mejor pasaré de eso', pero es entretenido y de verdad muy, muy útil.
Bueno, os mostraré lo que como no tiene nombre, yo llamé 'Entrada cool de un foro'

Así llamáis la atención
¿A que mola? ¡Decid que sí!

Os pongo de ejemplo que aquí va un anuncio importante del foro, o simplemente un juego o concurso, y queréis que sea prolijo. Por mi parte estoy cansada de los típicos puntitos que nos da esa opción de 'Lista', así que usaría algo así.


Código:
<center><div style="width:500px; padding:10px; border: 1px dashed #CC0044; border-radius: 55px 10px 55px 55px"><div style="text-align:center; font-family:georgia; font-style:italic; color:#FF0055; line-height:1em; text-shadow:#292929 2px 1px 1px 2px; font-size:34px">Así llamáis la atención</div><div style="width:380px; background-color:#9E0236; font-family:courier new; color:#FFFFFF; letter-spacing:5px; text-align:center; font-size:9px">¿A que mola? ¡Decid que sí!</div><div style="text-align:justify; width:400px; font-family:georgia; font-size:9px line-height:1em; color:#FFFFFF;">
Os pongo de ejemplo que aquí va un anuncio importante del foro, o simplemente un juego o concurso, y queréis que sea prolijo. Por mi parte estoy cansada de los típicos puntitos que nos da esa opción de 'Lista', así que usaría algo así. </div></div></center>

Ese sería el código, lo único que cambiaríais serían los colores y los textos.
Color de los bordes punteados:
Código:
border: 1px dashed #CC0044;
Color del encabezado y su sombra:
Código:
font-style:italic; color:#FF0055;
text-shadow:#292929
Color de la 'línea' (la rosa) y color de texto:
Código:
background-color:#9E0236;
font-family:courier new; color:#FFFFFF;

Y de momento no os molesto más. Algún día alguien amará los códigos HTML tanto como yo y os hartaremos con ellos(?)



The girl on fire

avatar
JessxFlyller
Director de hogwarts
Director de hogwarts

Casa perteneciente : Gryffindor
Estatus de Sangre : Sangre Mestiza
Femenino Mensajes : 696
Fecha de inscripción : 03/07/2011
Edad : 23
Empleo/ocio : Auror y escritora mediocre en mis tiempos libres.
Lugar Mágico : En busca de mí misma.
Medallas :

Volver arriba Ir abajo

Re: Firmas para el foro, a base de códigos. ¡Elige el tuyo!

Mensaje  SoriDraco el Vie Oct 12, 2012 8:06 am

¡¡Vaya!! Que interesante. Vengo a pedirte algo sobre HTML pero que no es para foros. Llevo días intentando encontrar la manera de que en Tumblr se puedan centrar las imágenes mediante un código HTML añadido en el HTML de la linea de imágenes, (Nos entendemos). Pero claro no encuentro, y ahora que veo que sabes de HTML seguramente podrías generarmelo o algo así.

Si es posible gracias, y sino no pasa nada igualmente gracias.


[Tienes que estar registrado y conectado para ver esa imagen][Tienes que estar registrado y conectado para ver esa imagen]
avatar
SoriDraco
SubLíder Slytherin
SubLíder Slytherin

Casa perteneciente : Slytherin
Estatus de Sangre : Sangre Pura
Femenino Mensajes : 465
Fecha de inscripción : 02/08/2011
Medallas :

Volver arriba Ir abajo

Re: Firmas para el foro, a base de códigos. ¡Elige el tuyo!

Mensaje  JessxFlyller el Vie Oct 12, 2012 10:28 am

SoriDraco escribió:¡¡Vaya!! Que interesante. Vengo a pedirte algo sobre HTML pero que no es para foros. Llevo días intentando encontrar la manera de que en Tumblr se puedan centrar las imágenes mediante un código HTML añadido en el HTML de la linea de imágenes, (Nos entendemos). Pero claro no encuentro, y ahora que veo que sabes de HTML seguramente podrías generarmelo o algo así.

Si es posible gracias, y sino no pasa nada igualmente gracias.

La verdad es que nunca usé códigos en Tumblr, pero si me hablas del cuerpo de tu Tumblr, necesitaría la plantilla entera para poder modificarla y que las imágenes queden en el centro. No podría darte otra plantilla que arruine/cambie todo tu diseño.



The girl on fire

avatar
JessxFlyller
Director de hogwarts
Director de hogwarts

Casa perteneciente : Gryffindor
Estatus de Sangre : Sangre Mestiza
Femenino Mensajes : 696
Fecha de inscripción : 03/07/2011
Edad : 23
Empleo/ocio : Auror y escritora mediocre en mis tiempos libres.
Lugar Mágico : En busca de mí misma.
Medallas :

Volver arriba Ir abajo

Re: Firmas para el foro, a base de códigos. ¡Elige el tuyo!

Mensaje  SoriDraco el Vie Oct 12, 2012 6:50 pm

xD. Es igual, me da pereza pegartela. Ya buscaré por ahí *^* Muchas gracias por el ofrecimiento. Según leí un día es CSS así que buscaré algo por google. Supongo que algo encontraré.


[Tienes que estar registrado y conectado para ver esa imagen][Tienes que estar registrado y conectado para ver esa imagen]
avatar
SoriDraco
SubLíder Slytherin
SubLíder Slytherin

Casa perteneciente : Slytherin
Estatus de Sangre : Sangre Pura
Femenino Mensajes : 465
Fecha de inscripción : 02/08/2011
Medallas :

Volver arriba Ir abajo

Re: Firmas para el foro, a base de códigos. ¡Elige el tuyo!

Mensaje  JessxFlyller el Vie Oct 12, 2012 6:58 pm

SoriDraco escribió:xD. Es igual, me da pereza pegartela. Ya buscaré por ahí *^* Muchas gracias por el ofrecimiento. Según leí un día es CSS así que buscaré algo por google. Supongo que algo encontraré.

Ya, igualmente todo lo que quieras centrar, lleva este código:
Código:
<center>El HTML de los posts</center>
Si la foto con info (home, archive, ask) es muy ancha y quieres ponerla más al costado para que no tape los posts, sólo pones
Código:
<div style="margin-left: Numero px> </div>
<div style="margin-right: Numero px> </div>
A ver si eso ayuda :)



The girl on fire

avatar
JessxFlyller
Director de hogwarts
Director de hogwarts

Casa perteneciente : Gryffindor
Estatus de Sangre : Sangre Mestiza
Femenino Mensajes : 696
Fecha de inscripción : 03/07/2011
Edad : 23
Empleo/ocio : Auror y escritora mediocre en mis tiempos libres.
Lugar Mágico : En busca de mí misma.
Medallas :

Volver arriba Ir abajo

Re: Firmas para el foro, a base de códigos. ¡Elige el tuyo!

Mensaje  SoriDraco el Sáb Oct 13, 2012 4:24 am

JessxFlyller escribió:
SoriDraco escribió:xD. Es igual, me da pereza pegartela. Ya buscaré por ahí *^* Muchas gracias por el ofrecimiento. Según leí un día es CSS así que buscaré algo por google. Supongo que algo encontraré.

Ya, igualmente todo lo que quieras centrar, lleva este código:
Código:
<center>El HTML de los posts</center>
Si la foto con info (home, archive, ask) es muy ancha y quieres ponerla más al costado para que no tape los posts, sólo pones
Código:
<div style="margin-left: Numero px> </div>
<div style="margin-right: Numero px> </div>
A ver si eso ayuda :)

No es eso. Conozco sobre estos códigos y no son esos xD. Buscaré. No te preocupes ^^ muchas gracias.


[Tienes que estar registrado y conectado para ver esa imagen][Tienes que estar registrado y conectado para ver esa imagen]
avatar
SoriDraco
SubLíder Slytherin
SubLíder Slytherin

Casa perteneciente : Slytherin
Estatus de Sangre : Sangre Pura
Femenino Mensajes : 465
Fecha de inscripción : 02/08/2011
Medallas :

Volver arriba Ir abajo

Re: Firmas para el foro, a base de códigos. ¡Elige el tuyo!

Mensaje  Contenido patrocinado


Contenido patrocinado


Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

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