TEXTO B�SICO Y MARQUESINAS
Puedes configurar los estilos de texto tanto en [HTML] como en [CSS].
HTML es ideal para la estilizaci�n de palabras u oraciones, pero si lo que quieres es cambiar bloques m�s grandes de texto es mejor que utilices CSS, f�cil de usar.
Si quieres cambiar el texto o links que estan en tu p�gina de VF necesitar�s poner etiquetas de HTML alrededor de ellos.
Estilizar el texto en HTML:
<i> Texto en cursiva </i>
<b> Texto en negrita </b>
<u> Texto subrayado </u>
<strike> Texto tachado</strike>
Para centrar el texto:
<div align="center"> Texto centrado </div>
Para cambiar el color del texto:
<font color="orange"> Texto naranja </font>
<font color="#990000"> Texto rojo en hexadecimal </font>
<font size="1"> Texto peque�o </font>
<font size="4"> Texto m�s grande </font>
<font face="Times New Roman, Times, Serif">Texto en Times New Roman </font>
Puedes probar cambiando los valores para obtener distintos resultados.
Combinar distintos c�digos de fuente con HTML:
Si quieres cambiar el color, tama�o y/o fuente de letra, puedes hacerlo todo con la misma etiqueta:
<font size="1" color="red"> Texto rojo con tama�o 1 </font>
<font size="3" face="Georgia"> Texto Georgia con tama�o 3 </font>
<face="Courier" font size="1" color="orange"> Texto Courier de tama�o 1 en naranja </font>
Poner un enlace al texto:
Para poner un enlace a un texto necesitar�s el [URL] de la p�gina a la que quieres enlazar el texto y el c�digo siguiente:
<a href="URL DE LA P�GINA A ENLAZAR"> QUE QUIERES QUE PONGA EN EL LINK </a>
Estilizando el texto en CSS:
El estilo CSS utiliza una sintaxis distinta al HTML.
As�, utilizando CSS englobas dentro de una misma etiqueta un c�digo que afecta a todo el texto de una parte de tu perfil. Para que tenga efecto en el texto de tu perfil en general, aplica el c�digo a "html, body". Por ejemplo:
<style type="text/css">
html, body {
color: red;
font-family: Georgia;
font-size: 8pt;
font-weight: bold;
font-style: italic;
text-decoration: underline;
letter-spacing: 5px;
font-variant: small-caps;
}
</style>
Estilizando links con CSS:
Los Links tienen 3 estados diferentes: a:link (link por visitar), a:visited (link visitado) y a:hover (cuando el puntero del rat�n se pone encima del link). Puedes utilizar CSS para cambiarlos separadamente si quieres:
<style type="text/css">
a:link { color: red; text-decoration: none; }
a:visited { color: green; text-decoration: overline; }
a:hover { color: orange; background: white; text-decoration: none; }
</style>
Marquesinas en movimiento:
Puedes utilizar marquesinas para hacer que el texto se mueva. Tambi�n puedes utilizar las marquesinas para a�adir en lugar de texto, im�genes.
Tambi�n puedes cambiar la velocidad con "scrollamount:
"Scrolldelay" permite que tu marquesina se vaya parando en distinta posici�n:
IM�GENES (inc fondos y banners)
El c�digo b�sico para poner una imagen es: <img src="URL DE LA IMAGEN">
Puedes cambiar distintos atributos de la imagen como anchura, altura e incluso a�adir un texto alternativo. Es una buena opci�n el configurar la anchura y la altura porque as� le ordenas al navegador de internet c�mo quieres que aparezcan las imagenes de tama�o, por el contrario, si no defines los atributos de la imagen, el navegador las cargar�, por defecto, con el tama�o original de la imagen, lo cual a veces puede resultar inc�modo ya que puede aparecer demasiado grande en el navegador. Tambi�n es una buena idea poner un texto alternativo, de este modo los usuarios sabr�n de que trata la imagen en cso de que �sta no se cargue.
Una etiqueta m�s completa para definir estos atributos ser�a:
<img src="URL DE LA IMAGEN" width="100px" height="120px" alt="�Yo en la playa!">
La URL de la imagen que pongas en este c�digo debe proceder de alg�n servidor. Hay varios servidores de internet gratuitos y de muy buen uso donde puedes subir tus imagenes, como: [ Tinypic ] o [ Photobucket ]. El motivo de subirlas a un servidor es que el resto de gente no pueden ver las im�genes que tienes en tu disco duro, por lo cual al subirlas a la red podr�n ser vistas por cualquier usuario navegante. Estos servidores gratuitos te permiten compartir tus im�genes online �a cambio de nada! y te suministran una direcci�n http:// con la ubicaci�n en la que est�n colgadas, de hecho, en los servidores podr�s ver la URL de la imagen y as� s�lo tendr�s que copiarla y pegarla c�modamente. �sa es la direcci�n que tienes que sustituir en el c�digo para que tu imagen se muestre.
Fondos:
Puedes poner un fondo a toda tu p�gina o en cualquier caja.
Una vez que tengas la URL de la imagen que quieras colocar de fondo, este es el c�digo que necesitas para poner un fondo en tu p�gina:
<style type="text/css">
html, body { background: url('URL DE LA IMAGEN'); }
</style>
Banners:
Los Banners son b�sicamente im�genes clickeables. Necesitar�s la URL del banner (lee arriba si no est�s familiarizado con la forma de subir im�genes a internet) y tambi�n necesitas la URL del Cult o Perfil al cual quieres enlazar el banner:
<a href="URL DE LA P�GINA QUE QUIERES ENLAZAR"><img src="URL DEL BANNER" border="0"></a>
Al poner el valor border="0" evitas que aparezca un borde de color alrededor de la imagen, lo cual afea la imagen, asi que te recomendamos que utilices este valor.
NICK BANNER
�C�mo reemplazar tu nick en tu perfil con un banner?
Primero busca o haz tu banner. No necesitas ning�n software caro para hacerlo, puedes encontrar una larga lista de programas gratuitos o demos.
Os recomendamos [ Serif PhotoPlus ] o, si tienes algo m�s de experiencia, [ The GIMP ].
Cuando hayas hecho tu banner tendr�s que subirlo a un servidor. [ Tinypic ] o [ Photobucket ] son dos servidores gratuitos y f�ciles de manejar.
Finalmente necesitar�s poner la URL de la imagen subida al servidor que elijas en el siguiente c�digo:
<style type="text/css">
.profilename {
color: #000000;
font-size: 0px;
text-align: left;
background: url('URL DE LA IMAGEN');
height: ALTURA DE LA IMAGENpx;
width: ANCHURA DE LA IMAGENpx;
}
</style>
BORDES
Los bordes pueden ser utilizados al rededor de tablas o imagenes. A continuacion un ejemplo de como aplicar los bordes en SCC:
<style>
table, .table {
border: solid;
border-width: thin;
</style>
Estilo De Linea:
style="border: dashed; border-width: thin;
NOTA: Cambia EL TEXTO MARCADO por los atributos que deseas
Estilos
Anchuras
CURSORES
Estos son algunos de los cursores basicos que usted puede usar para su perfil.
Estos son Algunos ejemplos de cursores:
move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help, crosshair
Aqui Los Ejemplos:
| move |
| e-resize |
| ne-resize |
| nw-resize |
| n-resize |
| se-resize |
| sw-resize |
| s-resize |
| w-resize |
| text |
| wait |
| help |
| crosshair |
| auto (default for hover) |
| default (default arrow) |
Este es el CSS por defecto para colocar tu cursor:
<style type="text/css">
body {
cursor: Nombre;}
</style>
El texto rayado es donde deberas poner el nombre del cursor:
style="cursor: Nombre;
Este codigo es para tener tu cursor customizado (imagen o lo que sea):
<style type="text/css">
body {
cursor: url("URL DEL CURSOR AQUI");}
</style>
Cajas Y Tablas
Las Cajas [o Scrollboxes] Estan hechas por html.El DIV amplia la forma predeterminada, asi que en una caja todo lo que tienes que hacer es darle una altura y anchura y el desplazamiento en auto de esta manera:
<div style="width: 100px; height: 100px; overflow: auto; border: 1px solid red;">
contenito Aqui </div>
Las flechas de desplazamiento no se veran si no hasta que el contenido dentro sea extenso:
a little content | lots of content blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah |
To make scrollboxes appear side by side, as in the example above, the code is:
<table><tr><td>
br> Para hacer que las cajas esten juntas como en el ejemplo, El codigo es:
<table><tr><td>
<div style="width: 100px; height: 100px; overflow: auto; border: 1px solid red;"> box 1 content </div>
</td><td>
<div style="width: 100px; height: 100px; overflow: auto; border: 1px solid red;"> box 2 content </div>
</td></tr></table>
|
QUIEN SOY AQUI
LO QUE ME GUSTA AQUI
LO QUE ODIO AQUI
MUSICA AQUI |
Para crear una tabla como esta en donde se cambia el contenido haciendo clic en los links, es: <style type="text/css">
.container {
width: 250px; height: 200px;
overflow: auto; overflow-y: hidden;
border: 3px double #999999;
}
.section { height: 200px; overflow: auto; }
</style>
<table width="350px"><tr><td>
<div style="overflow: auto; width: 100px; height: 200px; border: 3px double #999999;">
NAVIGATION
<br><a href="#profile">[ HACERCA DE MI ]</a>
<br><a href="#likes">[ LO QUE ME GUSTA ]</a>
<br><a href="#loathes">[ LO QUE ODIO ]</a>
<br><a href="#music">[ MUSICA ]</a>
</div>
</td><td>
<div class="container">
<a name="profile"></a>
<div class="section">
<br><br>HACERCA DE MI
</div>
<a name="likes"></a>
<div class="section">
<br><br>LO QUE ME GUSTA O AMO
</div>
<a name="loathes"></a>
<div class="section">
<br><br>LO QUE ODIO
</div>
<a name="music"></a>
<div class="section">
<br><br>MUSICA
</div>
</div>
</td></tr></table>
Tablas
La etiqueta <table> define la tabla. En el interior se utiliza <tre> anidadas y <td> etiquetas para construir su estructura de la tabla. Las tablas son buenas para la organizaci�n de las cajas div, texto o im�genes, o incluso en otras tablas.
<table><tr>
<td> Cell 1 </td>
<td> Cell 2 </td>
</tr></table> |
|
<table><tr>
<td> Cell 1 </td>
<td> Cell 2 </td>
</tr><tr>
<td> Cell 3 </td>
<td> Cell 4 </td>
</tr></table> |
| Cell 1 | Cell 2 | | Cell 3 | Cell 4 | |
ESCONDER CONTENIDO
<style type="text/CSS">
.profile_title {display: None;}
.likes_title {display: None;}
.dislikes_title {display: None;}
.music_title {display: None;}
</style>
Este codigo sirve para crear un codigo mas limpio y más organizado que también puedes lograr el mismo efecto haciendo de este modo:
<style type="text/CSS">
.profile_title, .likes_title, .dislikes_title, .music_title {display: none;}
</style>
Tome en cuenta esto: Los usuarios Premium pueden elegir una opcion para que su perfil este en blanco, esto ayuda por si desea ocultar todo y nos facilita el trabajo. Para los no-premium es necesario usar un codigo con el nombre-codigo de lo que se desea borrar, vaya a las siguientes paginas
Puedes ir Tambien a
Aqui
musica
mostrarcode
geek
links
