Página principal  |  Contacto  

Correo electrónico:

Contraseña:

Registrarse ahora!

¿Has olvidado tu contraseña?

.мαяισlleттe eмpιяe.
 
Novedades
  Únete ahora
  Panel de mensajes 
  Galería de imágenes 
 Archivos y documentos 
 Encuestas y Test 
  Lista de Participantes
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
 
 
  Herramientas
 
★ αиυиcισs: ★ Tutoriales para el Rol! [Música, ID, etc]
Elegir otro panel de mensajes
Tema anterior  Tema siguiente
Respuesta Eliminar Mensaje  Mensaje 1 de 6 en el tema 
De: Kaisers  (Mensaje original) Enviado: 01/02/2013 04:59
Aquí encontraras código o ideas que pueden funcionar para hacer el rol más interesante, o para hacerlo más lindo y ordenado~

Tutoriales: Códigos de layouts:
Recomendaciones generales:
  • No usar el botón de 'Vista Previa' del cuadro de mensaje, arruinará todo! Confíen en lo que se ve en la edición.
  • Al usar los códigos de los layouts de arriba, para dar enter presionen Shift+Enter. Eso evitará que se dañe.

En los tutoriales con código, no olvides cambiar los { } por < > ! Todos estos códigos deben ser pegados en la parte de HTML de la caja de respuesta.
Si tienen alguna duda, o si tienes tus propios tutoriales, déjenlos como respuesta aquí!
*Aquí sólo es para tener los tutoriales ordenados en un solo lugar!


Primer  Anterior  2 a 6 de 6  Siguiente   Último  
Respuesta Eliminar Mensaje  Mensaje 2 de 6 en el tema 
De: Lyricalia Enviado: 01/02/2013 05:02
Poner música en tu mensaje
Cómo hacer esto, mis puppeteers? Pues es muy fácil!
OJO: Sólo funciona con videos de youtube, asique la url debe ser de ahí, sip? +w+

Esto hará el reproductor invisible~

1. El video que yo pondré es este! La parte de la url en color la deben copiar de su url, pero solo esa parte después del "=" : http://www.youtube.com/watch?v=A8YDaIThjco

2. Una vez terminado el post, apretarás el botón que dice "html" y verás la sarta de código. Vamos hasta el final (recuerda siempre salvar o copiar tu post por si internet se pone inteligente contigo!), y copias-pegas el siguiente código ;3

{object width="1" height="1" data="http://www.youtube.com/v/A8YDaIThjco?fs=1&hl=es_ES&rel=0&autoplay=1" type="application/x-shockwave-flash"} {param name="data" value="http://www.youtube.com/v/A8YDaIThjco?fs=1&hl=es_ES&rel=0&autoplay=1" /} {param name="src" value="http://www.youtube.com/v/A8YDaIThjco?fs=1&hl=es_ES&rel=0&autoplay=1" /}{param name="allowfullscreen" value="true" /} {/object}

NOTA: Reemplazar los { } por < >! Y cuida de no borrar los "?" y demás ;3 Y listo! Quedará al final como un puntito de 1x1 px, asique yo hago trampa y lo pongo al final de mi post, como el punto final,muahah.

**Para que la reproducción sea más de una vez hay que agregarle &loop=1, así:

{object width="1" height="1" data="http://www.youtube.com/v/A8YDaIThjco?fs=1&hl=es_ES&rel=0&autoplay=1&loop=1" type="application/x-shockwave-flash"} {param name="data" value="http://www.youtube.com/v/A8YDaIThjco?fs=1&hl=es_ES&rel=0&autoplay=1&loop=1" /} {param name="src" value="http://www.youtube.com/v/A8YDaIThjco?fs=1&hl=es_ES&rel=0&autoplay=1&loop=1" /}{param name="allowfullscreen" value="true" /} {/object}

Respuesta Eliminar Mensaje  Mensaje 3 de 6 en el tema 
De: Cherry-tan Enviado: 01/02/2013 05:03
Poner avatares al costado del texto

Hm, el código para poner los avatares a un costado sin necesidad de usar tablas, como estoy escribiendo ahorita, al menos el que yo suelo usar, es el siguiente:

{div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"}{img src="http://i159.photobucket.com/albums/t139/Stellita-san/leilavy.png" alt="" /}{/div}
{div style="font-size: 10px; font-family: verdana; color: #b45a52;"}TU TEXTO AQUI{/div}


Yo uso dos divs distintos: un div para la imagen, donde la tengo flotando a la izquierda, con separación del margen hacia la derecha y hacia abajo, y 'bloqueé' que cosas se metan a su izquierda; y el otro div es donde puedo escribir, con el estilo de texto que quiero, tipo de letra, color, tamaño, eso. Luego pueden usar las etiquetas de span para darle un estilo distinto a partes del texto~
Pero en realidad lo importante aquí es el float que está en el div de la imagen.

También hay otra forma, que es sólo añadiéndole align="left" a la imagen, pero a mi ese a veces no me funciona x,d tal vez ustedes tengan mejor suerte /o/ (en el ejemplo está con align="right")

{img src="http://i159.photobucket.com/albums/t139/Stellita-san/leilavy.png" alt="" align="right" /}

Luego están las tablas~ Que esas las recomiendo tratarlas solo en el editor nuevo de GG xd ahí es más fácil personalizar el espaciado y si quieren fusionar celdas y eso~
para que el avatar quede fijo en la parte de arriba y no se quede en la mitad, se tienen que ir al código, y en el td que está donde pusieron la imagen, deben agregarle valign="top", así:

{table border="0" cellspacing="0" cellpadding="0"}
{tbody}
{tr}
{td valign="top"}{img src="http://i159.photobucket.com/albums/t139/Stellita-san/leilavy.png" alt="" /}{/td}
{td} {div style="font-size: 10px; font-family: verdana; color: #b45a52;"}Aqui tu texto~{/div}
{/td} {/tr} {/tbody} {/table}


y algo así quedaría xd

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec diam sapien, eget sodales urna. Donec ac nunc id augue dictum accumsan. Sed tristique ligula vitae urna facilisis ullamcorper. Curabitur molestie porttitor gravida. Curabitur tempor, lectus sed venenatis molestie, odio nisi feugiat est, et blandit ante eros ac enim. Pellentesque aliquet orci blandit tortor tincidunt quis lacinia mauris eleifend. Praesent porta risus porttitor eros facilisis viverra. Morbi ac libero urna. Suspendisse blandit auctor venenatis. Aliquam in massa ipsum, molestie viverra urna. Morbi lobortis orci vitae diam lobortis sit amet faucibus erat porttitor. Phasellus vitae nisi odio, sit amet dapibus leo. Vestibulum lacinia mattis lectus, vitae lacinia nisl blandit a. Cras consectetur luctus quam, nec fermentum purus mollis non. Nullam lacinia tortor ut eros pellentesque blandit. Nunc bibendum tristique neque ac placerat. In elit nunc, venenatis sit amet porta eget, pulvinar ut neque. Praesent sit amet est ante. Pellentesque imperdiet rutrum malesuada. Maecenas vitae lectus quis dui posuere varius. Suspendisse lectus mauris, porttitor quis ornare eu, facilisis at odio. In at risus massa. Duis lacinia orci ut lectus lobortis ultrices. Curabitur vel leo ac tellus egestas vestibulum quis sed justo. Ut porttitor tempus velit, vitae cursus orci feugiat sit amet. Fusce nec justo ac enim congue fermentum. Curabitur in nisi nec sem viverra luctus. Nulla imperdiet, dolor vel tincidunt varius, lectus lorem tempor orci, a adipiscing lectus nibh at purus. Nulla malesuada est quis diam commodo nec vehicula nunc blandit. Mauris porta, nisl at feugiat porta, risus elit interdum sem, ultrices pellentesque tortor lacus ac lorem. Maecenas eu commodo sapien. Etiam bibendum feugiat dolor eu pulvinar. Curabitur fermentum arcu blandit dolor hendrerit viverra. Praesent elementum sem ac ligula consectetur eget auctor nulla vestibulum. Duis tempor, augue sed sodales dictum, nulla orci blandit sapien, sagittis eleifend nunc tellus eget leo. Nulla at consequat ipsum. Suspendisse consequat aliquam velit, sed tincidunt odio bibendum eget. Integer tortor ligula, posuere at commodo sit amet, tristique sed sem. Nulla gravida, leo eget consequat sodales, diam erat blandit lorem, ut vestibulum urna magna vitae purus. Curabitur in neque magna, ut imperdiet nibh.

Respuesta Eliminar Mensaje  Mensaje 4 de 6 en el tema 
De: Kaisers Enviado: 01/02/2013 05:04
Cajas con scroll
Es bien sencillo~ Simplemente donde quieras que esté la tabla con scroll pones lo siguiente:

{div style="overflow: auto; width: 240px; height: 190px;"}C O N T E N I D O {/div}

Y le modificas el ancho (width) y el alto (height) al que gustes y listo :D! Quedaría algo así!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec diam sapien, eget sodales urna. Donec ac nunc id augue dictum accumsan. Sed tristique ligula vitae urna facilisis ullamcorper. Curabitur molestie porttitor gravida. Curabitur tempor, lectus sed venenatis molestie, odio nisi feugiat est, et blandit ante eros ac enim. Pellentesque aliquet orci blandit tortor tincidunt quis lacinia mauris eleifend. Praesent porta risus porttitor eros facilisis viverra. Morbi ac libero urna. Suspendisse blandit auctor venenatis. Aliquam in massa ipsum, molestie viverra urna. Morbi lobortis orci vitae diam lobortis sit amet faucibus erat porttitor. Phasellus vitae nisi odio, sit amet dapibus leo. Vestibulum lacinia mattis lectus, vitae lacinia nisl blandit a. Cras consectetur luctus quam, nec fermentum purus mollis non. Nullam lacinia tortor ut eros pellentesque blandit. Nunc bibendum tristique neque ac placerat. In elit nunc, venenatis sit amet porta eget, pulvinar ut neque. Praesent sit amet est ante. Pellentesque imperdiet rutrum malesuada. Maecenas vitae lectus quis dui posuere varius. Suspendisse lectus mauris, porttitor quis ornare eu, facilisis at odio. In at risus massa. Duis lacinia orci ut lectus lobortis ultrices. Curabitur vel leo ac tellus egestas vestibulum quis sed justo. Ut porttitor tempus velit, vitae cursus orci feugiat sit amet. Fusce nec justo ac enim congue fermentum. Curabitur in nisi nec sem viverra luctus. Nulla imperdiet, dolor vel tincidunt varius, lectus lorem tempor orci, a adipiscing lectus nibh at purus. Nulla malesuada est quis diam commodo nec vehicula nunc blandit. Mauris porta, nisl at feugiat porta, risus elit interdum sem, ultrices pellentesque tortor lacus ac lorem. Maecenas eu commodo sapien. Etiam bibendum feugiat dolor eu pulvinar. Curabitur fermentum arcu blandit dolor hendrerit viverra. Praesent elementum sem ac ligula consectetur eget auctor nulla vestibulum. Duis tempor, augue sed sodales dictum, nulla orci blandit sapien, sagittis eleifend nunc tellus eget leo. Nulla at consequat ipsum. Suspendisse consequat aliquam velit, sed tincidunt odio bibendum eget. Integer tortor ligula, posuere at commodo sit amet, tristique sed sem. Nulla gravida, leo eget consequat sodales, diam erat blandit lorem, ut vestibulum urna magna vitae purus. Curabitur in neque magna, ut imperdiet nibh.



Sombra en el texto
Para las sombras tienes que usar el siguiente código:

{span style="text-shadow: -3px 3px 1px #6459fa;"}Aqui tu texto{/span}
Aqui tu texto

El primer -3px es para determinar la distancia de la sombra horizontalmente hacia la derecha. Como le puse en negativo será hacia la izquierda.
El segundo 3px es para determinar la distancia de la sombra verticalmente hacia abajo. Si le pones números negativos se va hacia arriba.
Y el tercero es para determinar el blur/desenfoque de la sombra
Luego le puedes cambiar el tipo de letra, tamaño, color y etc~

Respuesta Eliminar Mensaje  Mensaje 5 de 6 en el tema 
De: Cherry-tan Enviado: 01/02/2013 05:05
Armar un layout con divs

Hay varias formas de montar layus: con tablas, divs, templates, etc~
Yo aquí les enseñaré como sé con divs, ya que pueden haber otras formas (ya con el css sheet, clases y demás...)

Entonces, un div es como una 'caja', o una 'capa' (me acorde de los JFrames en Java x,D). Estas cajas pueden contener muchas cosas dentro, como texto, imágenes, y hasta otras cajas más!
Pero bueno! Aquí subiré un lay demasiado simple y feo, casi ni editado ya que estoy super oxidada en eso x,D Así que usaré como uno o dos divs simplemente~ pero los divs que pueden usar pueden ser los que sean! Como dije que son como 'capas', pueden ponerlos uno encima del otro, como las capas en photoshop y eso~ y en este caso sería la capa que esta escrita más abajo la que está más arriba.

Subiré este layu:  (pic original de pixiv)
El layu tiene estas dimensiones: 650x588. Entonces, creo un {div} con parámetro style que tenga como atributos de fondo la imag del layu, y que tenga esas dimensiones~ Width es para el ancho, y height es para el alto, y cada atributo va separado por punto y coma.

{div style="width:650px; height:588px; background-image:url(http://i159.photobucket.com/albums/t139/Stellita-san/layugasshu.png);"}Aquí iría tu texto~{/div}

Y hasta ahora sólo tienen el layu puesto y pueden escribir lo que quieran dentro de los tags ^0^~

--pero eso no queremos, queremos que escriba dentro del cuadrito que hice exclusivamente para escribir u_u Para eso, hay que crear o~tro div más! Pero este será como el div que grey explicó unos mensajes antes, con el scroll y eso~
Bueno, conocemos el tamaño del cuadrito donde vamos a escribir y dónde queda ubicado, verdad? Entonces, así mismo, abrimos otro tag {div style=""} con el tamaño que necesitemos, y esta vez no necesitamos ponerle color/imagen de fondo, pero sí la posición y los demás atributos para que funcione el scroll.
En este punto también es recomendable que le pongan los atributos de tipo de letra que quieran! Para que dentro del div no se llene de código basura que sale en cada línea pero realmente es el mismo!
Poniéndole los atributos en el div hace que todo lo que esté dentro de esa caja tenga esos atributos, y no solo la línea/párrafo, y si le quieren cambiar el estilo a todo el cuadro, simplemente lo cambian en un sólo lugar y se cambia todo sin problema :,D~ Pueden cambiarle luego los estilos con {span style=""} pero sólo en lo que necesitan y no a cada rato~

Entonces, el código estaría quedando así:

{div style="width:650px; height:588px; background-image:url(http://i159.photobucket.com/albums/t139/Stellita-san/layugasshu.png);"}
{div style="width: 325px; height: 280px; text-align: justify; padding-right: 3px; float: left; margin: 31px; overflow: auto; font-family: 'verdana'; font-size: 10px; color: white;"}Aquí iría tu texto~{/div}
{/div}


Donde pueden ya empezar a escribir normalmente :,D
Ahora, explicando un poco el código...  el text-align:justify; es para justificarlo; debemos ponerle también el atribujo de float:left; porque luego el div estaría 'pegado' al div de atrás y no podría ser libre como el viento (?);
El margin:31px; es para ubicarlo; como está con float left el numerito se sumará desde la izquierda, si estuviese float right se sumaria de la derecha, y si ponemos números negativos se va hacia el lado contrario. También pueden poner los atributos de cada margen por separado, margin-top, margin-right, margin-bottom, margin-left, con sus respectivos valores; o uno compuesto margin: 10px 20px 10px 20px;, donde los valores tienen el mismo orden que el anterior.
El overflow: auto; es para que ponga los scrollbars sólo si lo necesita, y donde lo necesite, para que el texto no se salga del cuadrito. El padding-right es para hacer que tenga un poco de espaciado entre el espacio de escritura y el borde (de la derecha, del lado del scroll). Y el font-family, font-size, color y demás son ya propiedades del texto.

Y básicamente eso es todo :,D! El layu está subido! Y quedó como lo que está abajo, con dummy text y eso~
Recuerden que esta es una de las formas de subir un layu; pude no haber usado dos divs sino solo el del fondo, o usando tablas~ Además que en internet pueden encontrar más ejemplos y atributos bonitos para ponerle~
Si tienen dudas pregunten :,D Y espero haberme hecho explicar bien ;U;


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec diam sapien, eget sodales urna. Donec ac nunc id augue dictum accumsan. Sed tristique ligula vitae urna facilisis ullamcorper. Curabitur molestie porttitor gravida. Curabitur tempor, lectus sed venenatis molestie, odio nisi feugiat est, et blandit ante eros ac enim. Pellentesque aliquet orci blandit tortor tincidunt quis lacinia mauris eleifend. Praesent porta risus porttitor eros facilisis viverra.

Morbi ac libero urna. Suspendisse blandit auctor venenatis. Aliquam in massa ipsum, molestie viverra urna. Morbi lobortis orci vitae diam lobortis sit amet faucibus erat porttitor. Phasellus vitae nisi odio, sit amet dapibus leo. Vestibulum lacinia mattis lectus, vitae lacinia nisl blandit a. Cras consectetur luctus quam, nec fermentum purus mollis non. Nullam lacinia tortor ut eros pellentesque blandit. Nunc bibendum tristique neque ac placerat. In elit nunc, venenatis sit amet porta eget, pulvinar ut neque. Praesent sit amet est ante. Pellentesque imperdiet rutrum malesuada.

Maecenas vitae lectus quis dui posuere varius. Suspendisse lectus mauris, porttitor quis ornare eu, facilisis at odio. In at risus massa. Duis lacinia orci ut lectus lobortis ultrices. Curabitur vel leo ac tellus egestas vestibulum quis sed justo. Ut porttitor tempus velit, vitae cursus orci feugiat sit amet. Fusce nec justo ac enim congue fermentum. Curabitur in nisi nec sem viverra luctus. Nulla imperdiet, dolor vel tincidunt varius, lectus lorem tempor orci, a adipiscing lectus nibh at purus. Nulla malesuada est quis diam commodo nec vehicula nunc blandit. Mauris porta, nisl at feugiat porta, risus elit interdum sem, ultrices pellentesque tortor lacus ac lorem.

Maecenas eu commodo sapien. Etiam bibendum feugiat dolor eu pulvinar. Curabitur fermentum arcu blandit dolor hendrerit viverra. Praesent elementum sem ac ligula consectetur eget auctor nulla vestibulum. Duis tempor, augue sed sodales dictum, nulla orci blandit sapien, sagittis eleifend nunc tellus eget leo. Nulla at consequat ipsum. Suspendisse consequat aliquam velit, sed tincidunt odio bibendum eget. Integer tortor ligula, posuere at commodo sit amet, tristique sed sem. Nulla gravida, leo eget consequat sodales, diam erat blandit lorem, ut vestibulum urna magna vitae purus. Curabitur in neque magna, ut imperdiet nibh.

Respuesta Eliminar Mensaje  Mensaje 6 de 6 en el tema 
De: Cherry-tan Enviado: 01/02/2013 05:06
Más sobre los estilos en HTML
Antes que nada, hay que saber que hay varios elementos/tags que se usan aquí, como el {a} para los links, {img} para las imágenes, {p} para párrafos, {div} para las cajitas, {span} para cosas comunes, {b} o {strong} para negrita, {i} o {em} para itálica, y así

A todos y cada uno de estos elementos se les puede cambiar el estilo, ya sea en la hoja de estilos CSS, o colocando los estilos directamente en cada tag como un atributo style. Y cuando digo a todos, es porque es a todos.

Hagamos una prueba~
Con el CSS que viene default en GG, los links (o lo que se ponga dentro del tag {a}) salen de esta forma, azules subrayados si no han sido visitados, y eso a algunos les molesta o no les gusta.

Pero si le cambiamos los estilos dentro del tag {a}, por ejemplo: ya no quiero que sea subrayado, que sea itálica, con color y tipo de letra distinto, y que tenga un subrayado muy personalizado (quiero que sea de puntitos! y de otro color!). El código para que funcione eso quedará más o menos así

{a style="text-decoration:none; font-style:italic; color:#cc92ff; font-family:'courier new'; border-bottom:dotted 1px #dd5980;" href="aquítuenlace"}aquí el texto{/a}

y el enlace se vería de esta manera!

Y así los links se ven personalizados ;D lo malo es que hay que agregar todo ese código cada vez que quiera cambiar el estilo... Por eso es bueno trabajar con el CSS :,D


Ahora, uno de los problemas mayores aquí en GG es que cada vez que le agregamos un estilo, este estilo crea un tag nuevo innecesario, y entonces quedan acumulados muchos tags; que si era de un color y se le volvió a cambiar de color, luego de un tamaño pequeño se lo hizo más grande, negritas que son del grosor normal, cosas así. Entonces, algo así (tomado de una sección de la comu)
.MARIOLLETTE EMPIRE

en realidad es así
{strong style="font-family: consolas; font-size: 11px; letter-spacing: 2px; "}{span style="font-weight: normal; "}{span style="color: rgb(153, 51, 102); "}.MARIOLLETTE EMPIRE{/span}{/span}{/strong}

y pudo ser escrito tranquilamente así, con un solo tag
{span style="font-family: consolas; font-size: 11px; letter-spacing: 2px; color: #993366;"}.MARIOLLETTE EMPIRE{/span}

Cosas así se llegan a ver, y por eso los códigos se ensucian, y pueden llegar a acumularse tanto que de los nosecuantos caracteres que GG les permite en el mensaje, más de la mitad sean estos tags que se abren y cierran, y existen, pero que no se ven.
Así que les recomiendo que sean ecológicos (?!!). No dejen que GG abra tags que no son necesarios, acumúlenlos todos en un solo tag, y el resto bórrenlo. Así mantenemos limpio nuestro código, y nuestra comunidad uwu *este es un mensaje del Ministerio de Salud Pública y Medio Ambiente (????)*

... no es que esté diciendo que usar muchos tags es malo, no no~ A veces es necesario para dar distintos estilos, como este:
esta es una frase subrayada
donde la frase cambió de color, pero el underline sigue del mismo color. El código se ve así:
{u style="color:#336600;"}{span style="color:#b39348;"}esta es una frase{/span} subrayada{/u}

Y creo que eso! Hay muchos valores que se pueden cambiar dentro del atributo style para hacer las cosas con el estilo que quieran~


Primer  Anterior  2 a 6 de 6  Siguiente   Último  
Tema anterior  Tema siguiente
 
©2024 - Gabitos - Todos los derechos reservados