HOME | DD

Pascua-Tanya — Tutorial: Journal Skins

Published: 2011-10-08 04:49:21 +0000 UTC; Views: 30003; Favourites: 745; Downloads: 231
Redirect to original
Description En este tutorial se explica de una manera muy sencilla como hacer un Journal Skin propio. Yo aprendi averiguando para que era cada cosa y busque los códigos adicionales para darle mas estilo.

Aquí les dejo los códigos presentados en este tutorial para que los modifiquen como se indica y hagan su Skin propio:

En el cuadro CSS:

}
a: link{cursor:url("URL SKIN POINTER AQUI"), pointer;}
a: hover{cursor:url("URL SKIN POINTER AQUI"), pointer;}
body{cursor:url("URL SKIN POINTER AQUI"), pointer;}

.journalbox
{
max-width: 700px;
color: white;
background: url( URL BACKGROUND AQUI);
padding-top: 0px;
border: 5px double white;
margin-right: 3px;

}

.journaltop {
height: 327px;
_height: 700px;
background: url(URL SKIN HEADER AQUI);
background-repeat: no-repeat;
color: white;
font-family: 'Verdana';
font-size: 20px;
text-align: left;
letter-spacing: 1px;
_margin-bottom: 50px;
padding: 65px 10px 10px 0px;

}

.journaltop h2
{
color:white;
font-family: 'Verdana';
font-size: 50px;
font-weight: lighter;
text-align: left;
letter-spacing: 2px;
margin: 90px 0px 0px 0px;
}

.journaltop img
{
display: none;
}


.journaltext
{

color: white;
font-family: 'Verdana';
font-size: 14px;
text-align: center;
letter-spacing: auto;
padding: 20px 20px 20px 20px;

}

.title
{
text-align: left;
font-family: Arial, Helvetica, Trebuchet MS, Verdana;
font-size: 18px;
font-weight: lighter;
color: #ffffff;
letter-spacing: 1px;
background: url(URL SKIN TITLES AQUI) no-repeat center left;
height: 61px;
padding: 0px 0px 0px 80px;
line-height: 61px;
margin: 10px 0;
}


.boxy {
background:url(URL SKIN SCROLLBOX AQUI) top left no-repeat #b6cdec;
color:white;
padding:10px 10px 100px;
border:2px white solid;
margin-left:-6px;
}


.journalbottom
{
color: white;
font-family: Verdana;
font-size: 20px;
text-align: center;
padding: 20px 0px 10px 0px;
background: url(URL SKIN FOOTER AQUI)
center;
height: 36px;
_height: 880px;

}
.journalbottom a:link
{
color: white;
text-decoration: none;
}
.journalbottom a:active
{
color: white;
text-decoration: none;
}
.journalbottom a:active
{
color: white;
text-decoration: none;
}
.journalbottom a:visited
{
color: white;
text-decoration: none;
}

.list
{
color: white;
text-align: right;
margin: 10px 0px 0px 0px;
padding: 0px 8px 15px 0px;
font-family: Verdana;
font-size: 11px;
}
.list .a
{
background: none;
}
.list strong
{
color: red;
font-weight: bolder;
}
.list li
{
padding: 2px;
}

En el contenido de tu entrada de Journal

TU TITULO AQUI<*/div>
TU TEXTO AQUI<*/div>

(Quiten los astericos cuando lo copien en su entrada de Journal)

Espero que les sirva este tutorial. Si tienen alguna duda con respecto a alguno de estos códigos pueden preguntarme

Este tutorial será aportado al grupo . Cualquier duda que tengan con respecto a DA pueden pasar por este grupo y preguntar.

Plantilla para Tutoriales V2 (c) by
Tutorial(c) by me
Related content
Comments: 350

DaniiArts In reply to ??? [2012-09-22 22:51:16 +0000 UTC]

Esta muy bien el tutorial c: lo hice tal cual como sale, pero no me resulto u.u

👍: 0 ⏩: 1

Pascua-Tanya In reply to DaniiArts [2012-09-23 00:10:03 +0000 UTC]

Me alegra que te guste

¿En que parte del Skin tienes problemas?. Si me explicas en detalle vere como ayudarte para que salga ^^

👍: 0 ⏩: 1

DaniiArts In reply to Pascua-Tanya [2012-09-23 00:23:51 +0000 UTC]

entendi todo solo hasta la parte donde hay que poner un CSS y algo asi como un codigo en un recuadro

👍: 0 ⏩: 1

Pascua-Tanya In reply to DaniiArts [2012-09-28 00:54:04 +0000 UTC]

En la descripcion de este tutorial estan los codigos que necesitas para hacer tu Skin. Esos son los códigos CSS y los vas a poner en el cuadro CSS en el modo de ediciòn del skin. Cuando vas a escribir un journal nuevo al lado encontraràs un panel con los skins que has hecho o instalado. Para hacer un Skin nuevo te situas en el primero de la lista que es la forma basica del journal. Luego de seleccionarlo debes hacer click en la opciòn "Edit Skin" de arriba. Se abrirà una ventana y entonces pondràs los còdigos donde dice "CSS". Modifica los codigos a tu preferencia siguiendo las instrucciones de este tutorial, colocando tus imàgenes y los colores que quieras. Le pones un nombre a tu skin y le das al botón "Save".

Asì el nuevo Skin aparecerà en la lista de Skin y el espacio para escribir el nuevo journal cambiarà con el skin que guardaste . Y si quieres hacer otro skin màs vuelves a seleccionar el primero de la lista y entras en la opciòn de edicion para que aparezca una nueva ventana vacia para introducir los còdigos

👍: 0 ⏩: 1

DaniiArts In reply to Pascua-Tanya [2012-09-28 21:41:14 +0000 UTC]

eso lo se, me enrredo porque en el tutorial sale un codigo y en la descripcion sale otra cosa :'c

👍: 0 ⏩: 1

Pascua-Tanya In reply to DaniiArts [2012-09-30 00:12:14 +0000 UTC]

Los codigos que uso en el tutorial son los mismos que pongo en la descripcion pero alli se ven todos unidos y en orden, como se deberìa mostrar el Skin

Al principio es difìcil manejar los còdigos ya que uno no los conoce bien. A mi tambièn me paso lo mismo ya que tuve que aprender sola a manejarlos. Como yo, tu puedes ir probando cada còdigo para que veas como funcionan. Al final del cuadro de ediciòn del Skin se ve el botòn "Preview" que al presionarlo abre una ventana aparte que muestra una vista previa de como va quedando el Skin. Asì vez donde hay errores y los arreglas en los còdigos. Tardaràs un rato en hacerlo y es normal (yo tambièn me tarde mucho la primera vez que hice un Skin). Pero cuando los haces una y otra vez vas agarrando màs habilidad y cuando te des cuenta ya no te serà tan dificil y terminaras màs rapido ^^

👍: 0 ⏩: 0

Lulincomet In reply to ??? [2012-08-30 19:40:31 +0000 UTC]

No me sale

👍: 0 ⏩: 1

Pascua-Tanya In reply to Lulincomet [2012-08-30 22:17:22 +0000 UTC]

Hola, para poder usar Skin en tus journals necesitas tener una Membresía Premium

👍: 0 ⏩: 1

Lulincomet In reply to Pascua-Tanya [2012-08-31 00:41:56 +0000 UTC]

Ya lo sé, pero no puedo hacerlo

👍: 0 ⏩: 0

MegaAnimeFreak7 In reply to ??? [2012-08-26 04:44:13 +0000 UTC]

I NEEDS THIS IN ENGLISH!!!

👍: 0 ⏩: 1

Pascua-Tanya In reply to MegaAnimeFreak7 [2012-08-26 15:30:05 +0000 UTC]

Sorry. This tutorial is in Spanish only. There is no English version . But you can find tutorials on English of CSS in journals in the Search bar of dA

👍: 0 ⏩: 1

MegaAnimeFreak7 In reply to Pascua-Tanya [2012-08-26 17:01:50 +0000 UTC]

👍: 0 ⏩: 0

pizzadone In reply to ??? [2012-08-07 22:04:45 +0000 UTC]

No habla espanol... en engles por favor?

👍: 0 ⏩: 1

Pascua-Tanya In reply to pizzadone [2012-08-07 23:04:38 +0000 UTC]

Sorry. This tutorial is in Spanish only. There is no English version . But you can find tutorials on English of CSS in journals in the Search bar of dA

👍: 0 ⏩: 1

pizzadone In reply to Pascua-Tanya [2012-08-08 02:50:17 +0000 UTC]

Ok...

👍: 0 ⏩: 0

GomezStyle In reply to ??? [2012-07-25 06:13:57 +0000 UTC]

Como no tengo la membresia, casi no se ve, pero con tu ayuda y la de :iconRusembell :, me logro quedar asi [link] gracias

👍: 0 ⏩: 1

Pascua-Tanya In reply to GomezStyle [2012-07-25 17:04:25 +0000 UTC]

Me gusta como te ha quedado . Eso si tendrás que guardar los códigos en otra parte como en un blog de notas en tu computadora, ya que no puedes guardarlo en el editor de Skin. Hasta para guardarlo necesitas la Premium

👍: 0 ⏩: 0

GomezStyle In reply to ??? [2012-07-25 01:12:23 +0000 UTC]

Una pregunta, al poner el codigo del puntero, en cual de los tres lugares lo escribo??, en Skin CCS???

👍: 0 ⏩: 1

Pascua-Tanya In reply to GomezStyle [2012-07-25 03:57:32 +0000 UTC]

Si. Todos los códigos CSS van en el cuadro CSS de la ventana de edición del Skin. Los códigos del puntero van al principio antes que los demás. En la descripción de este tutorial podrás ver los códigos básicos de un Skin que puedes usar

Aunque no podrás mostrar subir tus journals con Skin ya que para usar un Skin necesitas una Membresía Premium

👍: 0 ⏩: 1

GomezStyle In reply to Pascua-Tanya [2012-07-25 04:31:25 +0000 UTC]

gracias , la membresia con suerte la tendre para final de mes

👍: 0 ⏩: 1

Pascua-Tanya In reply to GomezStyle [2012-07-25 17:05:39 +0000 UTC]

De nada ^^

Yo también estoy reuniendo puntos para comprar la mia

👍: 0 ⏩: 0

HijadeDios8D In reply to ??? [2012-07-20 18:28:23 +0000 UTC]

Esta muy bueno, gracias por la ayuda!!!!!
Ese tipo de deviantart siempre anda gritando en el tutorial!!!! XD

👍: 0 ⏩: 1

Pascua-Tanya In reply to HijadeDios8D [2012-07-21 03:07:16 +0000 UTC]

De nada. Me alegra de que te guste y lo encuentres muy útil

¿Te refieres al personaje con el megafono?. Su nombre es Fella y es la mascota oficial de deviantArt

[link]

👍: 0 ⏩: 1

HijadeDios8D In reply to Pascua-Tanya [2012-07-21 04:31:24 +0000 UTC]

Me di cuenta *^_^* y Gracias a ti, porque fue a mi que me ayudo

👍: 0 ⏩: 1

Pascua-Tanya In reply to HijadeDios8D [2012-07-23 00:33:01 +0000 UTC]

De nada

👍: 0 ⏩: 0

MorwenM In reply to ??? [2012-07-02 16:05:23 +0000 UTC]

Excelente, mucha gracias!

👍: 0 ⏩: 1

Pascua-Tanya In reply to MorwenM [2012-07-02 16:46:26 +0000 UTC]

De nada. Espero que te sea muy útil

👍: 0 ⏩: 0

Alicia1702 [2012-06-26 20:40:57 +0000 UTC]

y el de heater y foonder? y subir la imagen?

👍: 0 ⏩: 1

Pascua-Tanya In reply to Alicia1702 [2012-06-29 00:00:16 +0000 UTC]

Te refieres a los códigos? En el comment de artista puedes ver todos los códigos básicos para un Skin. Si quieres puedes usarlos para armar tu Skin ^^. El tutorial te dirá de que manera hacerlo. Las imágenes que vas a colocar debes subirlas a tu galería. Luego de eso copias el link directo de cada una y los pones en el lugar que corresponde en los códigos. Para copiar la url directa debes hacer click derecho sobre la imagen para desplegar una lista de opciones. Haz click en "Copiar la ruta de la Imagen"(en Firefox). En Google Chrome es "Copiar Url de Imagen"

Si te refieres a otra cosa me dices para ver como ayudarte

👍: 0 ⏩: 1

Alicia1702 In reply to Pascua-Tanya [2012-06-29 10:40:24 +0000 UTC]

oki, muchas gracias!!!!

👍: 0 ⏩: 1

Pascua-Tanya In reply to Alicia1702 [2012-06-29 16:23:13 +0000 UTC]

De nada

👍: 0 ⏩: 0

Rinashu In reply to ??? [2012-06-06 23:52:01 +0000 UTC]

Muuuy util!, gracias <3, pero aun tengo un duda, no logre entender claramente lo de los CSS, podrias explicarmelo profavor? ;_;

👍: 0 ⏩: 1

Pascua-Tanya In reply to Rinashu [2012-06-07 00:13:14 +0000 UTC]

De nada, me alegra que te sirva

¿Exactamente cual es tu duda sobre los CSS?¿Es donde colocarlos?. De ser esa tienes que ir al modo de edición de Skin (Edit Skin) en la página de escribir Journal. Te sale una ventana y verás un cuadro llamado "CSS". Es ahí donde pondrás tus códigos y los irás modificando a tu preferencia . En el comment de artista de este tutorial podrás encontrar los códigos que puedes utilizar para armar tu Skin

Si tu duda es otra me dices en que necesitas ayuda para ver que puedo hacer

👍: 0 ⏩: 0

TRYKY-II In reply to ??? [2012-05-21 00:04:53 +0000 UTC]

Yahoo! Sin duda que me será muy util OwO espero poder hacer todos esos pasos.

👍: 0 ⏩: 1

Pascua-Tanya In reply to TRYKY-II [2012-05-22 22:10:22 +0000 UTC]

Gracias
Seguro que si. Espero que te ayude mucho este tutorial

👍: 0 ⏩: 0

RainWaterfallsZone In reply to ??? [2012-05-16 18:00:54 +0000 UTC]

Muchas gracias!!!!! Hay que tomarse el tiempo y esfuerzo para hacer tutoriales, gracias por compartir . Nunca hice esto, vamos a intentarlo

👍: 0 ⏩: 1

Pascua-Tanya In reply to RainWaterfallsZone [2012-05-17 15:37:58 +0000 UTC]

De nada

También tomarse el tiempo de averiguar para que sirve cada código. Así estuve yo hasta que pude dominarlo y decidi hacer este tutorial para que los demás también puedan hacer su propio skin

Ojala te resulte muy útil

👍: 0 ⏩: 0

RaTTCate In reply to ??? [2012-04-08 03:01:50 +0000 UTC]

OMG TE AMO XD

yo que buscaba como hacer journal skins y todo en inglés!y me encuentro con esta aparición divina xD(?)

el tuto está BUENÍSIMO,MUCHAS GRACIAS !!

👍: 0 ⏩: 1

Pascua-Tanya In reply to RaTTCate [2012-04-09 17:20:34 +0000 UTC]

Gracias, me alegra que te haya gustado

Fue por eso mismo que hice este tutorial. Solo los había en Ingles y además muchos querían aprender a hacer el suyo propio. Por eso me anime a hacer este tutorial

👍: 0 ⏩: 1

RaTTCate In reply to Pascua-Tanya [2012-04-09 20:04:47 +0000 UTC]

está muy útil,de verdad xD

sigue haciendo cosas como estas!,salen geniales

👍: 0 ⏩: 0

IanShan04 In reply to ??? [2012-03-22 18:55:44 +0000 UTC]

Hay manera de que el footer sea mas alto? He visto journals con la parte de abajo customizada y eso, no solo la barrita esa(¿se me entiende?)

👍: 0 ⏩: 1

Pascua-Tanya In reply to IanShan04 [2012-03-22 22:51:35 +0000 UTC]

Cada quien tiene una manera diferente de personalizar su Skin. Yo te recomendaría cambiar la altura del Footer en tu computadora y luego lo vuelves a subir a tu galería o donde tenías guardado el anterior

👍: 0 ⏩: 1

IanShan04 In reply to Pascua-Tanya [2012-03-23 00:03:24 +0000 UTC]

No se si se me ha entendido, ¿la altura adicional del footer es tan pequeña?

👍: 0 ⏩: 0

Poisonous-Poison In reply to ??? [2012-03-17 16:22:15 +0000 UTC]

no entendi lo de los "scrolls" me gustaria ponerlos,pero como no entendi mucho no logro hacerlo.

me puedes explicar? :c

👍: 0 ⏩: 1

Pascua-Tanya In reply to Poisonous-Poison [2012-03-18 16:39:03 +0000 UTC]

Este es el código de los Scroll:

.boxy {
background:url(URL SKIN SCROLLBOX AQUI) top left no-repeat #b6cdec;
color:white;
font-family: Verdana;
font-size: 15px;
padding:10px 10px 100px;
border:2px white solid;
margin-left:-6px;
}

Pones tu imagen de Scroll donde se señala. Las medidas del Scroll son 700(ancho) x 3000(alto). Aunque si lo deseas, también puedes modificar el código de la Scroll para hacer una, es decir ponerle el color de fondo. Para ponerle el color de fondo borras todo donde dice "background" y lo colocarías así, ejemplo:

background-color: White;

Pero puedes poner el color que quieras pero que combine con el fondo de la Skin. También puedes poner el color como código(es para cuando quieres un tono en especifico), de la manera que aparece en los códigos de la Scroll. El código del color lo puedes ver en Photoshop en la herramienta de color. Hay un cuadrito blanco con el código del color seleccionado. Lo copias y lo pegas en los códigos de tu Scroll, recordando poner siempre # delante del código del color

background-color: #fbfbfb;

El anterior es el código del color blanco

Y sigues modificando lo demás a tu gusto como el color, tamaño y tipo de letra del texto dentro de la Scroll, el color y grosor del borde, etc.

Espero haber resuelto tu duda

👍: 0 ⏩: 0

paulithaxx In reply to ??? [2012-03-17 03:49:30 +0000 UTC]

disculpa pero donde hay que poner los codigos del bachground?

👍: 0 ⏩: 2

Pascua-Tanya In reply to paulithaxx [2012-03-18 16:46:15 +0000 UTC]

Pero no podrás usar tu Skin ya que requiere tener una Membresía Premium

👍: 0 ⏩: 1

paulithaxx In reply to Pascua-Tanya [2012-03-18 17:21:03 +0000 UTC]

pero se puede compartir, seas premium o no? ¿y como se sube a da? que ya lo tengo listo copie los codigos y todo.

👍: 0 ⏩: 1

Pascua-Tanya In reply to paulithaxx [2012-03-18 21:45:32 +0000 UTC]

Si que puedes hacerlo aunque no tengas la Premium. Aquí te dejo el tutorial sobre como subirlo a dA con todos los pasos que debes seguir:

[link]

👍: 0 ⏩: 1

paulithaxx In reply to Pascua-Tanya [2012-03-18 23:53:57 +0000 UTC]

gracias ^^

👍: 0 ⏩: 0


<= Prev | | Next =>