Páginas: 1 2 3 … 14

 

#1 2013-08-11 22:04:52

sara
Membre
Registrado: 2008-02-06
Mensajes: 567

Tutorial de edición de pagina

Buenos días!

Hoy tendré el agrado de publicarle la forma de como se diseña su pagina de OhMyDollz (Perfil de su dollz)

Para que no cometan errores o tengan miedo de que algo le salga mal, les dejo la tabla, así ustedes solo insertan las url de las imágenes que desean colocar.

Modificación de la pagina

<p style="width:570px;"><style>

#blochaut {background:url('URL') !important;}

#gauche_bonte {background:url('URL') !important;}

#gauche_note {background:url('URL') !important;}

#gauche_comz {background:url('URL') !important;}

#contenu2012 {background:url('URL') !important;}

#gauche_amiz {background:url('URL') !important;}

#barrejaune {background:url('URL') !important;}

#fiche_espsm {background:url('URL') !important;}

#qsj_view_haut {background:url('URL') !important;}

#fiche_info {background:url('URL') !important;}

#blocgauche_online {background:url('URL') !important;}

#logo2012 {
background : url('URL');
!important;
}

#logo2012 > a {
opacity: 0!important;

#deco{
  position:absolute;
  top:10px;
  left:290px;
  background:url("URL") no-repeat;
  width:19px;
  height:89px;}

#note9 > a {opacity: 0!important;}
#note9 {background:url('URL') !important;}
#note10 > a {opacity: 0!important;}
#note10 {background:url('URL') !important;}

#gauche_envoyer_mp a img{content: url("URL");}

#gauche_cadeau > a {opacity: 0!important;}
#gauche_cadeau {background:url('URL') !important;}

#gauche_amiz_ajouter > a {opacity: 0!important;}
#gauche_amiz_ajouter {background:url('URL') !important;}

#fiche_share {display: none;}  body {background:url('URL') repeat fixed !important;}

#blochautlogout { background-image: url("URL") !important; }

#fiche_piece_favoris table{
background: url("URL") !important;
width: 600px;
height: auto;}

#toggle_maison_img{
left: -200px;
position: relative;
top: 2px;
content: url("URL");}

#fiche_maison {
background: url("URL") !important;}

#cadeaux_haut {
    background: url("URL") no-repeat scroll 0% 0% transparent;
    width: 600px;
    height: auto;
}
#cadeaux_milieu {
    background: url("URL") repeat-y scroll 0% 0% transparent;
    width: 590px;
    height: auto;
    padding-left: 10px;}

#cadeaux_bas {
    background: url("URL") no-repeat scroll 0% 0% transparent;
    width: 600px;
    height: auto;}

#fiche_loft {font-weight:bold; border: 6px double #FFFCFC;}

#avatar {
    position: absolute;
    padding: 6px;
    top: 5px;
    left: 10px;
    background: url("URL") no-repeat scroll 0% 0% transparent;}

#message_haut{
  background:url(URL) no-repeat; width:901px; height:28px;}

#message_milieu{
  background:url(URL) repeat; width:901px;}

#message_bas{
  background:url(URL) no-repeat; width:901px; height:15px;}
</style>

Nota: Solo cambian la palabra URL por la dirección de la imagen que desean colocar (Que es el link terminado en jpg, png, gif u otro)

Como pueden ver todos son diferentes para diferentes tipo de posición que tienen las imágenes en los perfiles de las doll, para que no se les complique les daré un miniresumen...
Utilizare algunas imágenes que tiene ca123456 en su perfil de doll

#blochaut dijo:

#blochaut {background:url('URL') !important;}
Es la imagen principal donde muestra la ficha como su avatar, dinero, feez, mensajes, etc..
http://imageshack.us/a/img838/2697/9s1m.png

gauche_bonte dijo:

#gauche_bonte {background:url('URL') !important;}
Es la imagen que esta en la parte de Bondad
http://imageshack.us/a/img11/3618/hqzo.png

#gauche_note dijo:

#gauche_note {background:url('URL') !important;}
Imagen que sale en la parte de Tus Votos
http://imageshack.us/a/img577/6416/79rk.png

#gauche_comz dijo:

#gauche_comz {background:url('URL') !important;}
Imagen que sale en la parte de Tus Comentarios
http://imageshack.us/a/img42/6834/o8xq.png

#contenu2012 dijo:

#contenu2012 {background:url('URL') !important;}
Imagen que sale en la parte del Fondo del contenido (No fondo de pagina)
http://zupimages.net/up/3/1396393131.png

#gauche_amiz dijo:

#gauche_amiz {background:url('URL') !important;}
Imagen que sale en la parte de Tus Amigos
http://imageshack.us/a/img845/2316/kbrv.png

dijo:

#barrejaune {background:url('URL') !important;}
Imagen que sale en la parte de Barra de contenido como tienda, niveles, banco, etc...
http://imageshack.us/a/img22/7753/81zb.png

#fiche_espsm dijo:

#fiche_espsm {background:url('URL') !important;}
Imagen que sale en la parte de Datos de la dollz
http://imageshack.us/a/img843/4789/9jqa.png

#qsj_view_haut dijo:

#qsj_view_haut {background:url('URL') !important;}
Imagen que sale en la parte de QSJ principal
http://imageshack.us/a/img7/1107/wc8k.png

#fiche_info dijo:

#fiche_info {background:url('URL') !important;}
Imagen que sale en la parte de Información donde sale que nivel es, rango, nombre y trabajo que tiene.
http://imageshack.us/a/img268/4070/99a.png

#logo2012 dijo:

#logo2012 {
background : url('URL');
!important;
}

#logo2012 > a {
opacity: 0!important;
Ultimo y primordial el Logo de OhMyDollz
http://imageshack.us/a/img109/659/fn4c.png

#blocgauche_online dijo:

#blocgauche_online {background:url('URL') !important;}
Imagen que sale en la parte de Dollz Conectadas
http://imageshack.us/a/img827/7686/omc7.png

#deco dijo:

http://i62.tinypic.com/1792t5.png
#deco{
  position:absolute;
  top:10px;
  left:290px;
  background:url("URL") no-repeat;
  width:19px;
  height:89px;
}

#note9 y #note10 dijo:

#note9 > a {opacity: 0!important;}
#note9 {background:url('URL') !important;}
#note10 > a {opacity: 0!important;}
#note10 {background:url('URL') !important;}
http://i60.tinypic.com/zlavzk.png

#gauche_envoyer_mp dijo:

#gauche_envoyer_mp a img{content: url("URL");}
http://i57.tinypic.com/29v6fp.png

#gauche_cadeau dijo:

#gauche_cadeau > a {opacity: 0!important;}
#gauche_cadeau {background:url('URL') !important;}
http://i60.tinypic.com/23szswl.png

#gauche_amiz_ajouter dijo:

#gauche_amiz_ajouter > a {opacity: 0!important;}
#gauche_amiz_ajouter {background:url('URL') !important;}
http://i57.tinypic.com/2ng935c.jpg

#fiche_share dijo:

#fiche_share {display: none;}  body {background:url('URL) repeat fixed !important;}
http://i57.tinypic.com/2mniwea.jpg
Note: Es para el Fondo Fijo

#blochautlogout dijo:

#blochautlogout { background-image: url("URL") !important; }
http://i59.tinypic.com/jtwdqf.jpg

Sección de Habitaciones dijo:

#fiche_piece_favoris dijo:

#fiche_piece_favoris table{
background: url("URL") no-repeat,  !important;
width: 600px;
height: auto;}
http://zupimages.net/up/14/07/722i.png

#toggle_maison_img dijo:

#toggle_maison_img{
left: -200px;
position: relative;
top: 2px;
content: url("URL");}
http://zupimages.net/up/14/07/mz3p.png

#fiche_maison  dijo:

#fiche_maison {
background: url("URL") !important;}
http://zupimages.net/up/14/07/6f85.png

Sección de obsequios dijo:

#cadeaux_haut dijo:

#cadeaux_haut {
    background: url("URL") no-repeat scroll 0% 0% transparent;
    width: 600px;
    height: 60px;}
http://i62.tinypic.com/2ijgu87.png

#cadeaux_milieu dijo:

#cadeaux_milieu {
    background: url("URL") repeat-y scroll 0% 0% transparent;
    width: 590px;
    height: auto;
    padding-left: 10px;}
http://i59.tinypic.com/v6i3o2.png

#cadeaux_bas dijo:

#cadeaux_bas {
    background: url("URL") no-repeat scroll 0% 0% transparent;
    width: 600px;
    height: auto;}
http://i57.tinypic.com/zxo97a.png

#fiche_loft dijo:

#fiche_loft {font-weight:bold; border: 6px double #FFFCFC;}
http://i62.tinypic.com/2h5i61y.png

#avatar dijo:

#avatar {
    position: absolute;
    padding: 6px;
    top: 5px;
    left: 10px;
    background: url("URL") no-repeat scroll 0% 0% transparent;}
http://i842.photobucket.com/albums/zz341/keisibel22/keisibel22007/cadre_avatar1_zps3be69765.png

Burbuja N°2 dijo:

#message_haut dijo:

#message_haut{
  background:url(URL) no-repeat; width:901px; height:28px;}
http://i58.tinypic.com/nwanh0.png

#message_milieu dijo:

#message_milieu{
  background:url(URL) repeat; width:901px;}
http://i61.tinypic.com/330u5pg.png

#message_bas dijo:

#message_bas{
  background:url(URL) no-repeat; width:901px; height:15px;}
http://i60.tinypic.com/or2ix1.png

Note: Es para la burbuja de cuando dejan un comentario u obsequio a un jugador

Personalizar posiciones de info de la dollz(Cuando esta centrado) dijo:

#fiche_nfo_niveau{left: 525px;}
#fiche_metier_nfo{left: 25px;}
#fiche_metier_star{right: -225px;}
#fiche_pseudo{left: 228px;}
#fiche_grade{left: 223px;}
http://i59.tinypic.com/5da4w.png
También pueden modificarlo a su gusto tan solo cambiando los números pixeles

--------------------------------------
Ocultar secciones de la pagina
Esto pueden juntarle con las otras opciones de arriba ^^

#pub_flash, #blocgauche_online {
visibility: hidden !important;
width : 0 !important;
height : 0 !important;
}
#fiche_piece_favoris {display: none;}

#fiche_depliant_piece {display: none;}

#fiche_share {display: none;}

#footer2012 {display: none;}

#pub_flash, #blocgauche_online dijo:

#pub_flash, #blocgauche_online {
visibility: hidden !important;
width : 0 !important;
height : 0 !important;
}http://imageshack.us/a/img20/8662/hj3s.png

#fiche_piece dijo:

#fiche_piece_favoris, #fiche_depliant_piece {display: none;}
http://imageshack.us/a/img62/8514/mpcp.png

#fiche_share dijo:

#fiche_share {display: none;}
http://imageshack.us/a/img849/3037/93t1.png

#footer2012 dijo:

#footer2012 {display: none;}
http://i57.tinypic.com/sb3mys.png

--------------------------------------------
Cambio de color en las letras:
Esto pueden juntarle con las otras opciones de arriba ^^

#gauche_note div { color: [Color en ingles] !important;
}
#gauche_comz div { color: [Color en ingles] !important;}

#fiche_info div { color: [Color en ingles] !important;}

#fiche_espsm div { color: [Color en ingles] !important;}

#cadeaux div { color: [Color en ingles] !important;}

#blochaut { color: [Color en ingles] !important;}

#mp #nb a, #travailler #action a, #serelooker #action a{font-size:11pt;color:[Color en ingles];text-decoration:underline;}

#message_txt{ color: [Color en ingles] !important;}

#gauche_note dijo:

#gauche_note div { color: [Color en ingles] !important;
}
http://imageshack.us/a/img843/450/t8rt.png

#gauche_comz dijo:

#gauche_comz div { color: [Color en ingles] !important;}
http://imageshack.us/a/img843/4295/fk45.png

#fiche_info dijo:

#fiche_info div { color: [Color en ingles] !important;}
http://imageshack.us/a/img839/2012/52bn.png

#fiche_espsm dijo:

#fiche_espsm div { color: [Color en ingles] !important;}
http://imageshack.us/a/img13/7695/qmdj.png

#cadeaux div dijo:

#cadeaux div { color: [Color en ingles] !important;}
http://i60.tinypic.com/jpzu36.png

#blochaut dijo:

#blochaut { color: [Color en ingles] !important;}
#mp #nb a, #travailler #action a, #serelooker #action a{font-size:11pt;color:[Color en ingles];text-decoration:underline;}

http://i58.tinypic.com/68d0kh.png

#message_txt dijo:

#message_txt{ color: [Color en ingles] !important;}
http://i60.tinypic.com/6oids1.png

Nota: No agregar los corchetes, solo seleccionan desde el primer corchete hasta el segundo y lo borran, y el color es en ingles

ejemplo dijo:

#fiche_espsm div { color: blue !important;}

-------------------------------------
Ennegrecer algunas secciones

#blochaut div { font-weight:bold !important;}

#fiche_loft {font-weight:bold !important;}

#gauche_note div { font-weight:bold !important;}

#gauche_comz div { font-weight:bold !important;}

#gauche_bonte_contenu p {font-weight:bold !important;}

#cadeaux div { font-weight:bold !important;}

#message_txt{ font-weight:bold}

#blochaut dijo:

#blochaut div { font-weight:bold !important;}
http://i58.tinypic.com/68d0kh.png

#fiche_loft dijo:

#fiche_loft {font-weight:bold !important;}
http://i61.tinypic.com/vi1jix.png

#gauche_note dijo:

#gauche_note div { font-weight:bold !important;}
http://i59.tinypic.com/bezypv.png

#gauche_comz dijo:

#gauche_comz div { font-weight:bold !important;}
http://i57.tinypic.com/2csfluw.png

#gauche_bonte_contenu dijo:

#gauche_bonte_contenu p {font-weight:bold; !important;}
http://i57.tinypic.com/2behlk.png

#cadeaux div dijo:

#cadeaux div { font-weight:bold !important;}
http://i60.tinypic.com/jpzu36.png

#message_txt dijo:

#message_txt{ font-weight:bold !important;}
http://i60.tinypic.com/6oids1.png

Importante!: Esto pueden incluirlo junto con el color

Ejemplo dijo:

#gauche_bonte_contenu p {font-weight:bold; color: blue !important;}

-------------------------------------
Leer antes de aplicar estas opciones
Se hará para los que tienen el Qs girado y a los que no tiene girado ya que hay diferencia en los códigos.

Para los que tienen el QS girado hacia la izquierda dijo:

Girar Quien Soy + Centrar nombre dijo:

#gauche2012 {float: right; !important;}
#fiche {float: left !important;}
#fiche_loft {left: -10px;}
#fiche_info {left: 150px; }
http://i58.tinypic.com/1zd7viu.png
http://i61.tinypic.com/xkxd35.png

Burbuja junto a la dollz dijo:

<style>#note15{
  position:absolute;
  top:100px;
  left: 300px;
  width: 240px;
  height: 60px;
  color: [color en Ingles];
  background: url("URL de la imagen") no-repeat scroll 0% 0% transparent;
  height: 60px;
  text-align: center;
}</style>
http://i62.tinypic.com/2jenrmf.png
Solo cambian color e imagen, también puedes colocar burbuja mas grande, solo tienen que modificar width y height
Importante Para que funcione necesitan seguir los pasos mencionados por michu136(Lo encontraran un poco mas abajo)

Menu dijo:

<div id="ohmydollz1">
<table style="border-collapse: collapse; border: none; mso-yfti-tbllook: 1184; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-border-insideh: none; mso-border-insidev: none;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: .95in; padding: 0in 5.4pt 0in 5.4pt;" width="91" valign="top">
<div>
<p style="margin-bottom: 0.0001pt;"><a href="http://es.ohmydollz.com/?p=news"><img src="URL de la Imagen" alt="News" width="112" height="30" /></a></p>
</div>
<a href="http://es.ohmydollz.com/?p=news"> </a></td>
<td style="width: .95in; padding: 0in 5.4pt 0in 5.4pt;" width="91" valign="top">
<div>
<p style="margin-bottom: 0.0001pt;"><a href="http://es.ohmydollz.com/?p=magasin"><img src="URL de la Imagen" alt="Tienda" width="112" height="30" /></a></p>
</div>
</td>
<td style="width: .95in; padding: 0in 5.4pt 0in 5.4pt;" width="91" valign="top">
<div>
<p style="margin-bottom: 0.0001pt;"><a href="http://es.ohmydollz.com/?p=defile_choix"><img src="URL de la Imagen" alt="Desfile" width="112" height="30" /></a></p>
</div>
</td>
<td style="width: .95in; padding: 0in 5.4pt 0in 5.4pt;" width="91" valign="top">
<div>
<p style="margin-bottom: 0.0001pt;"><a href="http://es.ohmydollz.com/foro/"><img src="URL de la Imagen" alt="Forum" width="112" height="30" /></a></p>
</div>
</td>
<td style="width: .95in; padding: 0in 5.4pt 0in 5.4pt;" width="91" valign="top">
<div>
<p style="margin-bottom: 0.0001pt;"><a href="http://es.ohmydollz.com/?p=ohmygames"><img src="URL de la Imagen" alt="Oh My Games" width="112" height="30" /></a></p>
</div>
</td>
<td style="width: .95in; padding: 0in 5.4pt 0in 5.4pt;" width="91" valign="top">
<div>
<p style="margin-bottom: 0.0001pt;"><a href="http://es.ohmydollz.com/?p=banqueglobale&l=hautbanque2"><img src="URL de la Imagen" alt="Bank" width="112" height="30" /></a></p>
</div>
</td>
</tr>
</tbody>
</table>
</div>

<style>#ohmydollz1{
  position:absolute;
  top: -310px;
  left: 80px;
  width: 240px;
  height: 60px;
  text-align: center;
   z-index: 500;
}
#menulink {display: none;}
</style>
http://i58.tinypic.com/28ko60p.png
Recomiendo realizar las imágenes 150px de ancho y 40px de largo, ya que después serán modificadas.
Solo hay 6 ya que chat no es necesario, el link de estudio es complicado y nivel lo vi innecesario

Para los que NO giraron su Qs dijo:

Para las que no tienen el Quien Soy girado!

Centrar el nombre de la dollz dijo:

#fiche_info {left: -180px; }
http://i61.tinypic.com/xkxd35.png

Burbuja junto a la dollz dijo:

<style>#note15{
  position:absolute;
  top:100px;
  left: -50px;
  width: 240px;
  height: 60px;
  color: [color en Ingles];
  background: url("URL de la imagen") no-repeat scroll 0% 0% transparent;
  height: 60px;
  text-align: center;
}</style>
http://i62.tinypic.com/2jenrmf.png
Solo cambian color e imagen, también puedes colocar burbuja mas grande, solo tienen que modificar width y height
Importante Para que funcione necesitan seguir los pasos mencionados por michu136(Lo encontraran un poco mas abajo)

Menu dijo:

<div id="ohmydollz1">
<table style="border-collapse: collapse; border: none; mso-yfti-tbllook: 1184; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-border-insideh: none; mso-border-insidev: none;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: .95in; padding: 0in 5.4pt 0in 5.4pt;" width="91" valign="top">
<div>
<p style="margin-bottom: 0.0001pt;"><a href="http://es.ohmydollz.com/?p=news"><img src="URL de la Imagen" alt="News" width="112" height="30" /></a></p>
</div>
<a href="http://es.ohmydollz.com/?p=news"> </a></td>
<td style="width: .95in; padding: 0in 5.4pt 0in 5.4pt;" width="91" valign="top">
<div>
<p style="margin-bottom: 0.0001pt;"><a href="http://es.ohmydollz.com/?p=magasin"><img src="URL de la Imagen" alt="Tienda" width="112" height="30" /></a></p>
</div>
</td>
<td style="width: .95in; padding: 0in 5.4pt 0in 5.4pt;" width="91" valign="top">
<div>
<p style="margin-bottom: 0.0001pt;"><a href="http://es.ohmydollz.com/?p=defile_choix"><img src="URL de la Imagen" alt="Desfile" width="112" height="30" /></a></p>
</div>
</td>
<td style="width: .95in; padding: 0in 5.4pt 0in 5.4pt;" width="91" valign="top">
<div>
<p style="margin-bottom: 0.0001pt;"><a href="http://es.ohmydollz.com/foro/"><img src="URL de la Imagen" alt="Forum" width="112" height="30" /></a></p>
</div>
</td>
<td style="width: .95in; padding: 0in 5.4pt 0in 5.4pt;" width="91" valign="top">
<div>
<p style="margin-bottom: 0.0001pt;"><a href="http://es.ohmydollz.com/?p=ohmygames"><img src="URL de la Imagen" alt="Oh My Games" width="112" height="30" /></a></p>
</div>
</td>
<td style="width: .95in; padding: 0in 5.4pt 0in 5.4pt;" width="91" valign="top">
<div>
<p style="margin-bottom: 0.0001pt;"><a href="http://es.ohmydollz.com/?p=banqueglobale&l=hautbanque2"><img src="URL de la Imagen" alt="Bank" width="112" height="30" /></a></p>
</div>
</td>
</tr>
</tbody>
</table>
</div>

<style>#ohmydollz1{
  position:absolute;
  top: -50px;
  left: -260px;
  width: 240px;
  height: 60px;
  text-align: center;
   z-index: 500;
}
#menulink {display: none;}
</style>
http://i58.tinypic.com/28ko60p.png
Recomiendo realizar las imágenes 150px de ancho y 40px de largo, ya que después serán modificadas.
Solo hay 6 ya que chat no es necesario, el link de estudio es complicado y nivel lo vi innecesario

-------------------------------------

cristian-13 dijo:

Para Cambio de la Burbuja de Comentarios:
Ejemplo: http://i842.photobucket.com/albums/zz341/keisibel22/keisibel22006/bulle_commentaire1_zpsc2c953b1.png
El Codigo es:

.bullecom {
    background: url("Tu Url") no-repeat scroll 0% 0% transparent;
    width: 200px;
    height: 60px;
    padding-left: 17px;
    padding-right: 10px;
}

Nota: "No olviden que va entre: Style y / Style (me refiero al codigo original antes mencionado de Sara, lo ponen al terminar el ultimo "}" le dan un Enter Antes de </Style> para que asi les salga, si no pues no sale o bien se desconfigura su actual diseño!

Si desean saber Más me avisan, estoy cada vez haciendo más investigaciones y cambios de vez en cuando visiten mi dollz y me dicen que cambio desean saber, mientras logro contactar a Lennny para hacer un Tutorial un poco más especifico (con imagenes) para que asi sea un poco más facil para las que recien comiensan este mundo de Diseño de Paginas y tienen dudas!!!

Eso si en otro sitio diferente al foro!

escarchacristal dijo:

applau Hola Chicas, He descubierto Que poniendo esto...
#header2012 {background:url(URL);height: 270px;} 
Se puede poner una imagen Encima de el estudio.. no se como explicarlo.... intr  Entrar para verlo en mi QS non

michu136 dijo:

Hace unos meses yo estaba jugando con el código de fuente de omd, para ver que podría sacar... Pensé que podría volver a recolocar los botones para votar una doll(cambiarlos de lugar)
Al final no lo logre, pero vi un efecto curioso con otro código:
Puedes poner un mensaje sobre el estudio.
El código seria:
<div id="note15"> Escribes aquí ewe </div>

Al principio no me pareció del todo seguro por que pensé que podría desconfigurar Qs y no es tan importante en si, y es un código que saque del mismo código de fuente de la pagina xD (Por eso mismo no sabia si realmente dejarlo por aquí o no ouf )
He hecho pruebas con mis hadas con ese código y ahora gran parte de mis hadas principales lo usan, por si quieren ver como se vería pueden visitar una de mis hadas:http://es.ohmydollz.com/?p=fiche&pseudo=hadititita

Se le puede cambiar la fuente a la letra (Solo deben poner el código de la fuente y color donde iría el mensaje ) y no necesitan ponerlo entre el tag "style" ok

Tambien se puede cambiar la posición del mensaje:
   

<div id="note15" style="left: 100px; top: -50px; visibility: visible;"> Escribes aquí</div>

Pero deben cambiar los valores que van luego de "left" (477) y "top" (496) al que deseen
Y en el mensaje para saltar linea deben utilizar <p></p>

<div id="note15" style="left: 477px; top: 496px; visibility: visible;"> Escribes aquí<p></p> Y aparecerá en la parte de abajo</div>

Gracias escarcha, cristian y michu por compartirlo!
-------------------------------------

Cursor dijo:

Puedes buscar uno en esta dirección cursors-4u

Eligen el cursor que mas les guste
(En mi caso elegiré el siguiente http://cur.cursors-4u.net/others/images9/oth803.png)

Le hacen un clic a la imagen que les guste para ver las opciones de link que tenga
(En mi caso copiare la opcion N°1 [Option #1 - Universal CSS/HTML Code]
Y seria lo siguiente
<style type="text/css">body, a:hover {cursor: urlhttp://cur.cursors-4u.net/others/oth-9/oth803.cur), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2012/02/04/purple-bow-tie-4.html" target="_blank" title="Purple Bow Tie"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Purple Bow Tie" style="position:absolute; top: 0px; right: 0px;" /></a> )

Copian todo el HTML y lo pegan en su QS (Recuerden que debe estar en formato HTML para que les funcione)

Luego clic a la opción validar y lo pueden ver desde una cuenta alterna para verificar como les quedo ^^

---------------------------------------

Importante!:Antes de tenerlo lista y pegarlo en tu QS, deberás pegarlo cuando el QS este en Modo HTML, si lo pegas en Modo Normal no funcionara

Para que tu QS quede en Modo HTML debes recargar la pagina (Haciendo clic en la flecha del navegador para re-cargarlo o oprimiendo CTRL+R en el teclado) una vez que se este cargando tienes que detenerlo cuando aparezca como lo muestra la siguiente imagen
http://img13.imageshack.us/img13/2554/89tt.png
Es la única forma de que funcione.
--------------------------------------

Si llegas a colocarlo cuando el QSJ este en Modo Normal como lo muestra la siguiente imagen
http://imageshack.us/a/img543/8684/vw37.png
No te funcionara...

------------------------------------
[Tutorial] Como diseñar diseños para edicion de pagina Creado por 1ema1
[Tutorial] Imágenes del diseño de pagina por defecto Creado por Kikij
-----------------------------------

Eso es todo... Y solo puede ser visible por otras dollz (Para que puedas verlo tendrás que desconectar y verlo a través de un hada o a través de alguna ventana incógnita que traen los navegadores ^^)

También pueden cambiarle el color de letra...
No me agradezcan ami, ya que fue ca123456 quien me pidió que lo hiciera ^^
Cualquier otra duda o pregunta, solo dilo...


Tema Editado y Actualizado!

Modifcado por sara (2014-03-19 23:40:17)

“Las hojas del otoño lejanas ya están. El verano cubre el velo frío del viento, el invierno frío devendrá en solitario paisaje.”(Miguel Visurraga Sosa)

Besos y abrazos
Sara!
 

#2 2013-08-11 22:34:52

1ema1
Membre
Ubicación: La casa maldita de Amityville
Registrado: 2013-06-10
Mensajes: 2036

Re: Tutorial de edición de pagina

Gracias Sara te adoro!!!! :DDD lo estube buscando durante un tiempo, mil arigato mil arigato!!!! fete

署名の画像マーカーを有効にしてほしい
署名画像がないのはうんざりです
(ﾉ -益-)ﾉ︵ ┻━┻
 

#3 2013-08-12 14:33:00

kurisuki
Redactora
Ubicación: En Londres de 1889
Registrado: 2010-11-26
Mensajes: 1453
Web

Re: Tutorial de edición de pagina

Muchas gracias, la verdad es que lo andaba buscando. Incluso le acabo de preguntar a una persona. Muchas gracias y saludos. Ya se lo mostraré cuando acabe :)

||| ||| ¡Hey! ¿Harta de reglas sin sentido? ¿Eres una escritora, artista, otaku, cantante o poeta? ¿Vives en los suburbios de OMD? ¡Ven al foro!*O*Más de un año con La Secta de OMD.
 

#4 2013-08-12 16:54:41

laliter
Membre
Ubicación: En un mundo maravilloso
Registrado: 2010-03-16
Mensajes: 963
Web

Re: Tutorial de edición de pagina

Esta genial!!

..{Por muy larga que sea la tormenta, el sol ☼ siempre vuelve a brillar entre las nubes.}..
 

#5 2013-08-12 19:42:06

mermaidnati
Princesa Sirena de OMD Moderadora
Registrado: 2010-10-27
Mensajes: 6482

Re: Tutorial de edición de pagina

gracias linda, justo estaba pensando como hacer esas ediciones y tu ayuda me servira muchisismo good

Las estrellas de la noche son tantas como mis sentimientos
 

#6 2013-08-12 20:11:19

3m0-d011
Membre
Ubicación: dare?//Canada dayo~
Registrado: 2008-12-01
Mensajes: 8476

Re: Tutorial de edición de pagina

Esta genial *O* voy a intentar hacerlo con mi doll francesa asdadasd aver que tal *u*

Aiden  <3
 

#7 2013-08-12 20:23:16

kurisuki
Redactora
Ubicación: En Londres de 1889
Registrado: 2010-11-26
Mensajes: 1453
Web

Re: Tutorial de edición de pagina

Me costó la misma vida conseguir el modo html, pero lo conseguí. Lo hice sencillo y muy rosita, de manera de prueba. XD Muchas gracias por el aporte. Andaba loca buscando como hacerlo.

||| ||| ¡Hey! ¿Harta de reglas sin sentido? ¿Eres una escritora, artista, otaku, cantante o poeta? ¿Vives en los suburbios de OMD? ¡Ven al foro!*O*Más de un año con La Secta de OMD.
 

#8 2013-08-12 20:41:19

alixie
Membre
Ubicación: Winterfell
Registrado: 2010-07-30
Mensajes: 72

Re: Tutorial de edición de pagina

Muchas gracias magic, es de gran ayuda :D

- μεράκι -
      ♥
 

#9 2013-08-12 22:57:33

kurisuki
Redactora
Ubicación: En Londres de 1889
Registrado: 2010-11-26
Mensajes: 1453
Web

Re: Tutorial de edición de pagina

Si lo hago....¿No puedo cambiar mi quien soy, verdad? Es que le volví a dar a validar y se me fue todo.

||| ||| ¡Hey! ¿Harta de reglas sin sentido? ¿Eres una escritora, artista, otaku, cantante o poeta? ¿Vives en los suburbios de OMD? ¡Ven al foro!*O*Más de un año con La Secta de OMD.
 

#10 2013-08-13 06:25:07

zelit
Membre
Ubicación: Con Mr. Darcy ♥
Registrado: 2011-08-05
Mensajes: 1664

Re: Tutorial de edición de pagina

Mil gracias, en serio lo quería saber :3 Gran aporte! :D

[...]Adoro oírte decir eso, Louis. Necesito oírtelo decir. No creo que nadie lo diga nunca como tu lo dices. Vamos, dilo otra vez. Soy un perfecto diablo. Dime lo malo que soy. ¡Me hace sentir tan bueno![...]

Le Vampire Lestat♥
 

#11 2013-08-13 06:48:25

sara
Membre
Registrado: 2008-02-06
Mensajes: 567

Re: Tutorial de edición de pagina

kurisuki dijo:

Si lo hago....¿No puedo cambiar mi quien soy, verdad? Es que le volví a dar a validar y se me fue todo.

si puedes cambiarlo, pero debes tener en cuenta que no podrás modificar todo el contenido del QS para que no afecte el CSS (código para la cascada)

Por ejemplo en el mio agregare 3 asterisco al final del QS y agregare el código, así sabre hasta donde puedo cambiar el contenido de mi QS en modo normal para que no afecte el diseño de la pagina ^^

***
<p style="width:570px;"><style>
...

“Las hojas del otoño lejanas ya están. El verano cubre el velo frío del viento, el invierno frío devendrá en solitario paisaje.”(Miguel Visurraga Sosa)

Besos y abrazos
Sara!
 

#12 2013-08-13 13:32:30

pearlove
Membre
Registrado: 2012-08-14
Mensajes: 6

Re: Tutorial de edición de pagina

Es genial, la cosa mala es que tendre que usar internet explorer para que vaya a cargarse lento y yo parar cuando tendra que ser...

~La vida se va, los sueños esperan hacerse realidad...~
 

#13 2013-08-13 21:57:24

zahii
Membre
Registrado: 2012-08-11
Mensajes: 365
Web

Re: Tutorial de edición de pagina

También pueden cambiarle el color de letra...

¿A que cosa? ¿Como? No entendí lo de "también pueden cambiarle el color de letra" ... Alguien me explica?

 

#14 2013-08-14 14:33:26

rapunsel
Redactora
Registrado: 2008-08-01
Mensajes: 1926
Web

Re: Tutorial de edición de pagina

Esto me trajo mucha nostalgia del viejo pv, cuando muchos editaban sus fichas asi ;cc y ahora el juego es tan pupu ewe no imaginé que se podría hacer aquí,
pero muy ingenioso eso de  "agarrar" al quien soy cargando mientras esta en html xD

Gracias, supongo que alguuuuuun día lo intentaré hacer xd

Facebook // DevianART // Tumblr
 

#15 2013-08-14 16:44:14

sara
Membre
Registrado: 2008-02-06
Mensajes: 567

Re: Tutorial de edición de pagina

zahii dijo:

También pueden cambiarle el color de letra...

¿A que cosa? ¿Como? No entendí lo de "también pueden cambiarle el color de letra" ... Alguien me explica?

Si...
el color de letra que quieras cambiarle ya sea a la parte de los votos, comentarios, datos o ya sea a la ficha en general ^^

“Las hojas del otoño lejanas ya están. El verano cubre el velo frío del viento, el invierno frío devendrá en solitario paisaje.”(Miguel Visurraga Sosa)

Besos y abrazos
Sara!
 

#16 2013-08-14 18:27:25

1ema1
Membre
Ubicación: La casa maldita de Amityville
Registrado: 2013-06-10
Mensajes: 2036

Re: Tutorial de edición de pagina

Se refiere como hacerlo, como poner el color...

署名の画像マーカーを有効にしてほしい
署名画像がないのはうんざりです
(ﾉ -益-)ﾉ︵ ┻━┻
 

#17 2013-08-14 22:40:07

zahii
Membre
Registrado: 2012-08-11
Mensajes: 365
Web

Re: Tutorial de edición de pagina

Exacto, como le pongo el color? :3

 

#18 2013-08-15 17:08:13

mariamartinez
Membre
Ubicación: Sobre un unicornio rosa!
Registrado: 2012-02-24
Mensajes: 389
Web

Re: Tutorial de edición de pagina

si alguien sabe hacer y va a vender que me avise, besitos!!aomd_bisous

Be happy! ~ Be yourself ~ Smile!
 

#19 2013-08-16 04:10:20

aazula
Membre
Ubicación: Nicaragua
Registrado: 2012-12-01
Mensajes: 822

Re: Tutorial de edición de pagina

Intentare hacer uno... Muchas gracias sara star

Mis creaciones♥

Mis creaciones foro francés♥
 

#20 2013-08-18 06:01:41

sara
Membre
Registrado: 2008-02-06
Mensajes: 567

Re: Tutorial de edición de pagina

zahii dijo:

Exacto, como le pongo el color? :3

Es fácil... mañana edito el primer mensaje y lo agrego ya que es muy tarde...
También agregare la opción de ocultar, ya que si van a colocar la pagina en negro u otro color así no les molesta el rosa de las habitaciones favoritas...

Edit: Mañana domingo lo expongo sin falta (Ya que los domingo descanso ^^)

“Las hojas del otoño lejanas ya están. El verano cubre el velo frío del viento, el invierno frío devendrá en solitario paisaje.”(Miguel Visurraga Sosa)

Besos y abrazos
Sara!
 

#21 2013-08-18 19:50:27

medusa16
Membre
Registrado: 2009-05-18
Mensajes: 32

Re: Tutorial de edición de pagina

oh esto es genial *-* sirve de mucho!! :3 una chica cobraba mucho por esto ._. ... no me parecio justo xD en cuanto pueda lo intentare!... Lo que si no entiendo muy bien intr  si lo hago se me borrara todo el contenido del QS? quoi

Modifcado por medusa16 (2013-08-18 19:50:54)

By Medusa16
 

#22 2013-08-18 23:21:58

zahii
Membre
Registrado: 2012-08-11
Mensajes: 365
Web

Re: Tutorial de edición de pagina

Gracias Sara :D Me sirvio muchisimo! Ahora, tengo una duda.. sobre las imagnes, como se de que tamaño hacerlas?

 

#23 2013-08-18 23:54:26

sara
Membre
Registrado: 2008-02-06
Mensajes: 567

Re: Tutorial de edición de pagina

Debe ser del mismo tamaño que las imágenes de la pagina

“Las hojas del otoño lejanas ya están. El verano cubre el velo frío del viento, el invierno frío devendrá en solitario paisaje.”(Miguel Visurraga Sosa)

Besos y abrazos
Sara!
 

#24 2013-08-18 23:56:12

amaia2002
Membre
Ubicación: Donde los pájaros cantan
Registrado: 2012-12-09
Mensajes: 174
Web

Re: Tutorial de edición de pagina

¡Oh! ¡Victoria! Por fin encontré como editar mi ficha love  Te doy más que miiil gracias sara fete  gai  magic 
Parece un poco difícil, pero lo intentaré mdr

Si el camino es díficil es por que vas en la dirección correcta.
Cuando dejes de seguir un sueño piensa en porque lo has seguido todo este tiempo.
El amor no es lo que queremos sentir, sino lo que sentimos sin querer.
 

#25 2013-08-19 20:12:52

noelialove123
Membre
Ubicación: España
Registrado: 2012-12-24
Mensajes: 87

Re: Tutorial de edición de pagina

No lo entiendo lo del Modo HTML me lo puedes esplicarr¿?

Vivir no es sólo existir,sino existir y crear, saber gozar y sufrir
y no dormir sin soñar. Descansar, es empezar a morir.
 

 

Páginas: 1 2 3 … 14

 

Pie del foro

Powered by PunBB
© Copyright 2002–2005 Rickard Andersson