HOME | DD

Pascua-Tanya — Tutorial: Journal Skins

Published: 2011-10-08 04:49:21 +0000 UTC; Views: 30002; 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

Ume-Chi [2013-07-17 01:19:00 +0000 UTC]

Gracias me sirvio de mucho n.n

👍: 0 ⏩: 1

Pascua-Tanya In reply to Ume-Chi [2013-07-21 00:22:54 +0000 UTC]

Que bueno ^^. No hay de que

👍: 0 ⏩: 0

PinkieFlash [2013-06-18 21:59:34 +0000 UTC]

Porque cada vez que le doy a preview aparece una página que pone devious journal entry.Le doy a devious journal entry y me pone "Oops the page you wanted to visit doesn't exist".
¿Qué hago?

👍: 0 ⏩: 1

Pascua-Tanya In reply to PinkieFlash [2013-06-18 23:13:29 +0000 UTC]

El botón "Preview" te sirve para tener una vista previa de tu Skin . De esa forma podrás saber como va y corregir los errores que encuentres . Aunque si le haces click en "devious journal entry" no irás a ninguna página ya que aun no has subido tu nuevo journal . Esa ventana que te aparece es la vista previa de tu skin.

Por lo que puedo ver a los usuarios gratuitos solo les aparece el botón "Preview" en el editor de Skin (lo se porque tengo otra cuenta que es gratuita y solo puedo ver ese). La nueva actualización ha hecho que los usuarios gratuitos no puedan hacer más que tener una vista previa de su diseño . Como no hay más opciones no hay nada que hacer. La única forma seria conseguir una Membresia Premium y de esa forma aparecerán las opciones que te permitirán guardar y usar tu diseño.

Yo te recomendaría guardar los códigos de tu Skin en un archivo txt en el block de notas de tu computadora. De esa forma no los perderás y podrás usar tu diseño cuando tengas Membresia Premium

👍: 0 ⏩: 1

PinkieFlash In reply to Pascua-Tanya [2013-06-19 14:42:56 +0000 UTC]

¡Ah vale!¡Pues muchísimas gracias!

👍: 0 ⏩: 0

Crazy-Blanshy In reply to ??? [2013-05-27 06:48:54 +0000 UTC]

Hola tengo problemas , nose como alinear el texto en el medio del cuadro asi pueda escribir bien miraa --> [link] y aca mira lo qe pasa --> [link]

👍: 0 ⏩: 1

Pascua-Tanya In reply to Crazy-Blanshy [2013-05-27 17:02:13 +0000 UTC]

Hola

He estado revisando detenidamente tu Skin colocando las imágenes en los códigos que tengo y me he dado cuenta de que el problema viene de las imágenes, exactamente su tamaño. Por eso parece que el texto se ve abajo, cuando en realidad es la imagen la que no queda bien porque es demasiado grande . Pareciera que fuera pequeña pero en realidad tiene un tamaño mayor que el determinado para Skins:

-Encabezado: 700 x 397 pixeles
-Background: 700 x 3687 pixeles.

Como puedes ver tanto el ancho del uno como el otro (700) coinciden entre sí además de que también coinciden con el ancho máximo del Skin establecido en los códigos (max-width: 700px; ).

Las tuyas:

-Encabezado: 1240×784 pixeles
-Background: 1536 × 2048

El encabezado necesita ser más pequeño y el background más grande. Si cambias los tamaños y los ajustas a los que te puse arriba de seguro ambas imágenes encajarán perfectamente en el Skin .

Yo arme uno utilizando una de tus imágenes y cambiando el tamaño y la alineación del título y de la fecha para que se viera mejor. Quedo así:

[link]

Lo hice con los códigos que tengo . Como puedes ver la imagen de arriba casi encaja perfectamente en el Skin. Solo necesitas reducir el tamaño y ya queda bien . No puse la otra imagen porque sería difícil hacer que encaje, pero puse un fondo de color gris que se le parece . No lo puse los códigos del background si no en el código llamado "Journaltext" del texto. Aquí te dejo los códigos modificados desde el background hasta "Journaltext". Solo deberás cambiar los que tienes por estos y ves que queda como lo hice:

.journalbox
{
max-width: 700px;
color: white;
background: none;
padding-top: 0px;
border: none;
margin-right: 3px;

}

.journaltop {
height: 327px;
_height: 700px;
background: url(ENLACEDIRECTODELENCABEZADO);
background-repeat: no-repeat;
color: black;
font-family: 'Verdana';
font-size: 15px;
text-align: center;
height: 150px;
padding: 210px 78px 0 0;

}

.journaltop h2
{
color:black;
font-family: 'Verdana';
font-size: 17px;
font-weight: lighter;
text-align: left;
letter-spacing: 2px;
padding: 110px 0 2px;
margin-left:30px;
}

.journaltop img
{
display: none;
}


.journaltext
{

color: black;
background-color: #d3d2d2;
font-family: 'Verdana';
font-size: 14px;
text-align: center;
letter-spacing: auto;
letter-spacing: auto;
padding: 30px 30px 30px 30px;
}


Arriba en journaltop no olvides modificar las mayúsculas por el enlace directo de tu imagen de encabezado.

"background-color: #d3d2d2;", es el color gris que puse debajo del encabezado del Skin. Aunque si no quieres poner un color si no la imagen que hiciste te recomiendo lo siguiente:

-El tamaño de un fondo para la sección del texto es de 650 × 431 pixeles. Creo que quedaría bien sin el borde negro pero con su fondo gris texturizado. Luego subes la imagen a tu galería y la colocas en el código del texto (journaltext). Pero ya no va a ser "background-color" si no:

background: url(ENLACEDIRECTODELAIMAGEN);

Ya verás que queda muy bien

Y para que la barra de comentario tenga el fondo negro debes ir hasta la parte "journalbottom" de los códigos y cambiar "background: url" por:

background-color: black;

Lo siguiente que puedes hacer es cambiar el tipo de letra, tamaño y color de los textos de cada parte del Skin .

Disculpa si te ofende el haber elegido otro diseño para la parte del background, es solo una sugerencia . Aunque si te gusta puedes usarlo si quieres .

Espero que todos estos consejos te ayuden a terminar tu Skin ^^

👍: 0 ⏩: 0

mel2003 [2013-04-25 02:52:45 +0000 UTC]

pero obligatoriamente tienes que tener membresia premium? =/

👍: 0 ⏩: 1

Pascua-Tanya In reply to mel2003 [2013-04-25 04:11:25 +0000 UTC]

Lamentablemente sí

Pero por estos días hay uso libre y limitado de los Skins por patrocinio de BlackBerry

[link]

👍: 0 ⏩: 1

mel2003 In reply to Pascua-Tanya [2013-04-25 23:52:23 +0000 UTC]

lo se pero crees que sea de verdad?

👍: 0 ⏩: 1

Pascua-Tanya In reply to mel2003 [2013-04-25 23:56:15 +0000 UTC]

Si es verdad . Esta es la tercer vez que Blackberry patrocina los Skins de Journal. En las dos veces anteriores subí journals con Skin y si me dejo utilizarlo

👍: 0 ⏩: 1

mel2003 In reply to Pascua-Tanya [2013-04-26 02:16:36 +0000 UTC]

ok gracias

👍: 0 ⏩: 0

SweetsBunny In reply to ??? [2013-04-16 13:23:06 +0000 UTC]

Do you know in any chance to make a tutorial like this? (In English Way)

👍: 0 ⏩: 1

Pascua-Tanya In reply to SweetsBunny [2013-04-16 23:03:39 +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 ⏩: 0

LaConeja [2013-04-11 05:56:24 +0000 UTC]

Buenisimo el tutorial, te hice un feature en mi nuevo journal ^^ [link]

👍: 0 ⏩: 0

zuley821 In reply to ??? [2013-04-06 01:10:47 +0000 UTC]

y si no soy premium :c

👍: 0 ⏩: 2

Pascua-Tanya In reply to zuley821 [2013-04-08 02:58:09 +0000 UTC]

Si no eres Premium no podrás usar Skins en tus journals

Aunque por estos días hay uso gratis y limitado de Skins, patrocinado por Blackberry

👍: 0 ⏩: 0

Pascua-Tanya In reply to zuley821 [2013-04-08 02:56:57 +0000 UTC]

Si no eres Premium no podrás usar Skins en tus journals

Aunque por estos días hay uso libre y limitado de Skins, patrocinados por Blackberry

👍: 0 ⏩: 1

zuley821 In reply to Pascua-Tanya [2013-04-09 02:51:25 +0000 UTC]

ok gracias ^^

👍: 0 ⏩: 0

OurInfinitePromise In reply to ??? [2013-03-28 20:11:51 +0000 UTC]

si ya subi las imagenes ;que sigue? me atrape en lo de CSS (como los consigo?)
osea que codigos pondre??:c

👍: 0 ⏩: 1

Pascua-Tanya In reply to OurInfinitePromise [2013-03-28 23:31:30 +0000 UTC]

Lo que sigue es colocar los links directos de las imágenes donde corresponde en los códigos CSS. En la descripción debajo de este tutorial podrás encontrar los códigos CSS básicos que puedes usar para hacer tu Skin

👍: 0 ⏩: 1

OurInfinitePromise In reply to Pascua-Tanya [2013-03-29 20:21:37 +0000 UTC]

OK deja que checo los odigos CSS gracias! espero no batallar!

👍: 0 ⏩: 0

HiHereAmI In reply to ??? [2013-03-23 17:26:56 +0000 UTC]

Cmo hago para ajustar el ancho y el alto del Header? Como compruebo que está bien?
Las imagenes que voy a usar son estas [link]

👍: 0 ⏩: 1

Pascua-Tanya In reply to HiHereAmI [2013-03-24 04:37:40 +0000 UTC]

En la base de codigos, los del Header son el "Journaltop"

.journaltop {
height: 327px;
_height: 700px;


Al inicio de estos codigos, como se muestra aquí, puedes ver los codigos "height" con los que podrás modificar el ancho y alto del header . Y arriba, en "Journal box", puedes cambiar el ancho maximo del skin en donde dice "max-width". Esto te ayudará ajustarlo al ancho del header .

Para ver como va quedando tu diseño debes presionar el botón "Preview" al final de la ventana de edición de Skin. Aparecerá otra ventana con la vista previa de tu skin. De esa forma podrás saber si algo ha quedado mal y corregirlo en los codigos

👍: 0 ⏩: 1

HiHereAmI In reply to Pascua-Tanya [2013-03-24 21:09:07 +0000 UTC]

oKI! GRACIAS!

👍: 0 ⏩: 0

ManzanoRD In reply to ??? [2013-03-22 22:47:48 +0000 UTC]

genial ,gracias por salvarme de nuevo ,que bien detallado esta ,muchas gracias

👍: 0 ⏩: 1

Pascua-Tanya In reply to ManzanoRD [2013-03-24 04:30:49 +0000 UTC]

De nada . Me alegra que te sea util ^^

👍: 0 ⏩: 0

jimjimfuria1 [2013-03-20 00:34:17 +0000 UTC]

comp puedes poner varios scroll?

👍: 0 ⏩: 1

Pascua-Tanya In reply to jimjimfuria1 [2013-03-22 15:25:23 +0000 UTC]

Los Scroll se colocan con este codigo, en el espacio para escribir tu nuevo journal:

< div class="boxy">TU TEXTO AQUI<*/div>

Lo puedes volver a usar debajo del primero. así:

< div class="boxy">TU TEXTO AQUI<*/div>
< div class="boxy">TU TEXTO AQUI<*/div>
< div class="boxy">TU TEXTO AQUI<*/div>

Colocas el texto que desees en cada uno y al presionar "Preview" (en el editor de Skin) podrás ver cada texto con su scroll . Y no olvides quitar el espacio al principio del codigo y el * que esta casí al final del codigo, para que este pueda funcionar.

👍: 0 ⏩: 1

jimjimfuria1 In reply to Pascua-Tanya [2013-03-23 04:12:26 +0000 UTC]

ya me la rife solo moviendole gracias

👍: 0 ⏩: 0

HiHereAmI [2013-03-17 00:44:43 +0000 UTC]

Hice todo lo que dice,pero pongo PREVIEW y las nimagenes que seleccioné no aparecen.

👍: 0 ⏩: 1

Pascua-Tanya In reply to HiHereAmI [2013-03-19 22:53:52 +0000 UTC]

Que raro

Tal vez sea algun error al modificar los codigos . Asegurate de colocar los links de las imágenes en el lugar que les corresponde:

-Background: fondo principal
-Header: encabezado
-Footer: pie de página

👍: 0 ⏩: 1

HiHereAmI In reply to Pascua-Tanya [2013-03-20 14:09:20 +0000 UTC]

Puede,voy a probar de nuevo .w. Gracias!

👍: 0 ⏩: 0

HiHereAmI [2013-03-16 23:59:46 +0000 UTC]

Me aparece : CSS Error:
Only descendant, class, sibling, and attribute selectors are allowed (token: .journalbottom a: url [link] )

👍: 0 ⏩: 1

Pascua-Tanya In reply to HiHereAmI [2013-03-17 00:31:21 +0000 UTC]

Creo que se debe a que colocaste un link donde no debería ir. El link del pie de página no va en "journalbottom a:". Este link debe colocarse más arriba donde dice "background: url", en los códigos principales del journalbottom:

.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;

En donde estan las mayusculas debes poner el link de la imagen que será el pie de pagina de tu skin

👍: 0 ⏩: 1

HiHereAmI In reply to Pascua-Tanya [2013-03-17 00:39:43 +0000 UTC]

Ahhh gracias

👍: 0 ⏩: 0

HiHereAmI In reply to ??? [2013-03-16 23:23:34 +0000 UTC]

Hay que usar links HTML o cualquiera sirve?

👍: 0 ⏩: 1

Pascua-Tanya In reply to HiHereAmI [2013-03-16 23:44:40 +0000 UTC]

¿Te refieres a los links de las imágenes que van a ser tu Skin?. Debes usar los links directos de cada una, los cuales terminan en el formato de dicha imagen como JPG

👍: 0 ⏩: 1

HiHereAmI In reply to Pascua-Tanya [2013-03-17 00:00:19 +0000 UTC]

Si,gracias

👍: 0 ⏩: 0

HiHereAmI In reply to ??? [2013-03-16 22:52:44 +0000 UTC]

dONDE COLOCO LOS CODIGOS DEL BACKGROUND?
En CSS,Footer o HEATHER?

👍: 0 ⏩: 1

Pascua-Tanya In reply to HiHereAmI [2013-03-16 22:55:37 +0000 UTC]

Todos los códigos del Skin van en el cuadro "CSS" de la ventana "Edit Skin". Los cuadros "Footer" y "Header" sirven para mostrar algo siempre al final o al principio de tu journal

Debes tener en cuenta que para usar un Skin en tu journal necesitas Membresia Premium

👍: 0 ⏩: 1

HiHereAmI In reply to Pascua-Tanya [2013-03-16 23:17:59 +0000 UTC]

Gracias Gracias,Gracias!
No,no hace falta ahora BlackBerry auspicia por tiempo limitado los Jornal Skins

👍: 0 ⏩: 1

Pascua-Tanya In reply to HiHereAmI [2013-03-16 23:42:01 +0000 UTC]

De nada

Lamentablemente ya se acabo esa promoción . Ayer intente usar un Skin en mi journal pero no pude

👍: 0 ⏩: 1

HiHereAmI In reply to Pascua-Tanya [2013-03-16 23:52:22 +0000 UTC]

que??? Noooo

👍: 0 ⏩: 1

Pascua-Tanya In reply to HiHereAmI [2013-03-22 15:19:55 +0000 UTC]

Blackberry volverá a patrocinar los Skins gratis. Aprovechalo ^^

[link]

👍: 0 ⏩: 1

HiHereAmI In reply to Pascua-Tanya [2013-03-22 18:50:51 +0000 UTC]

Siii! Gracias!

👍: 0 ⏩: 0

OtherIcons [2013-03-05 03:20:09 +0000 UTC]

Hola una pregunta, si o si hay que tener la membresia Premium? ♥

👍: 0 ⏩: 1

Pascua-Tanya In reply to OtherIcons [2013-03-06 00:30:40 +0000 UTC]

Hola

Si debes tener Membresia Premium para poder usar un Skin en tu journal

Sin embargo, en estos días hay uso gratis pero limitado de los Skins debido a una promoción:

[link]

👍: 0 ⏩: 1

OtherIcons In reply to Pascua-Tanya [2013-03-06 03:33:56 +0000 UTC]

Hay lo leo!, gracias!

👍: 0 ⏩: 0

Clausu In reply to ??? [2013-03-02 10:51:33 +0000 UTC]

XD gracias por el tuto, aunque no soy premium me sirvió de mucho

👍: 0 ⏩: 1


| Next =>