HOME | DD
noticias — Sobre el Skin para Journal
Published: 2012-04-17 04:10:35 +0000 UTC; Views: 8757; Favourites: 46; Downloads: 0
Redirect to original
Description
body div#devskin7598942 .gr-box * { background:transparent; border:none; font-size:13px; line-height:20px; font-family:Georgia; margin:0; padding:0; } body div#devskin7598942 .tri { display:none; } body div#devskin7598942 .gr1 { display:none; } body div#devskin7598942 .gr2 { display:none; } body div#devskin7598942 .gr3 { display:none; } body div#devskin7598942 .gr { border:none; color:#fff; } body div#devskin7598942 .gr-top { background:transparent; } body div#devskin7598942 .barre_01 { background-image:url(https://i19.photobucket.com/albums/b184/Thiefoworld/noticiasgrs.png); float:left; clear:both !important; position:absolute !important; width:150% !important; right:0% !important; bottom:0px; width:210%; right:30%; height:36px; } body div#devskin7598942 .header { background-image:url(https://i19.photobucket.com/albums/b184/Thiefoworld/hdr_noticias_da.png); float:left; clear:both !important; position:relative !important; width:120% !important; right:14% !important; width:210%; right:25%; margin-top:-20px; height:120px !important; background-position:top right; } body div#devskin7598942 .shadow-body { background-color:#eaeaea; background-image:url(https://i19.photobucket.com/albums/b184/Thiefoworld/shadow1.png); float:left; clear:both !important; position:relative !important; width:150% !important; right:25% !important; width:210%; right:30%; height:25px !important; background-position:top right; background-repeat:no-repeat; margin-top:-24px; } body div#devskin7598942 .author { display:none; } body div#devskin7598942 .autor { background-image:url(https://i19.photobucket.com/albums/b184/Thiefoworld/box3.png); width:117px; height:111px; float:left; margin-left:8% !important; margin-top:10px !important; background-repeat:no-repeat; margin-left:53%; } body div#devskin7598942 .autor img { margin-top:20px; } body div#devskin7598942 .autor_text { margin-bottom:9px; color:#fff; font-size:12px; font-family:MS Sans Serif; } body div#devskin7598942 .autor_text a { color:#fff; font-size:12px; font-family:MS Sans Serif; margin-bottom:9px; text-decoration:none; } body div#devskin7598942 .barre_02 { background-image:url(https://i19.photobucket.com/albums/b184/Thiefoworld/noticiasgrs.png); float:left; clear:both !important; position:relative !important; width:150% !important; right:25% !important; width:210%; right:30%; height:60px !important; height:33px; margin-top:0px !important; margin-top:-22px; } body div#devskin7598942 .menu_links { float:right; margin-right:15% !important; margin-top:6px; margin-right:23px; color:white; } body div#devskin7598942 .menu_links a { color:white; text-decoration:none; margin-left:5px; } body div#devskin7598942 .menu_links a:hover { color:white; text-shadow:#000 -1px -1px; text-decoration:none; } body div#devskin7598942 .gr-top img { display:none; } body div#devskin7598942 .gr-top .gr { position:absolute; top:45px; left:100px; } body div#devskin7598942 .gr-top h2 { color:#fff; font-size:24px; text-shadow:#000 -1px -1px; } body div#devskin7598942 .gr-top a { color:#fff; font-size:24px; text-shadow:#000 -1px -1px; } body div#devskin7598942 .gr-top span { color:#eaeaea; font-size:11px; text-shadow:#000 -1px -1px; } body div#devskin7598942 .bottom { background:transparent; position:absolute; bottom:6px; right:20px; color:#FFF; margin-left:2% !important; margin-left:3%; } body div#devskin7598942 .bottom a { color:#FFF; text-decoration:none; } body div#devskin7598942 .bottom a:hover { color:#eaeaea; text-shadow:#000 -1px -1px; text-decoration:none; } body div#devskin7598942 .gr-body { background:#eaeaea; background-image:url(https://i19.photobucket.com/albums/b184/Thiefoworld/fondo_adantrandonos.png); background-position:bottom right; background-repeat:no-repeat; margin:auto; border:0px; } body div#devskin7598942 .gr-body .text { margin:0px !important; margin:auto !important; text-align:justify; color:#444; max-width:90% !important; width:90%; margin-left:21%; padding-bottom:60px; } body div#devskin7598942 .gr-body .text a { color:#43554a; text-decoration:none; } body div#devskin7598942 .list { display:none; } body div#devskin7598942 .titulo { color:#000; font-size:25px; letter-spacing:-.5 px; margin-bottom:-15px; border-bottom:1px solid; padding-bottom:5px; padding-left:10px; } body div#devskin7598942 .subtitulo { color:#000; font-size:20px; letter-spacing:-.5 px; margin-bottom:-20px; padding-bottom:5px; padding-left:15px; } body div#devskin7598942 .shadow-holder img { padding:0 0 18px 0; background:url(https://fc00.deviantart.net/fs50/o/2009/320/b/8/143795988_96426_devious_thumb_shadow.png); background-position:bottom right; background-repeat:no-repeat; } body div#devskin7598942 .shadow { background:none !important; } body div#devskin7598942 .shadow-holder img:hover { padding:0 0 18px 0; background:url(https://fc00.deviantart.net/fs50/o/2009/320/b/8/143795988_96426_devious_thumb_shadow.png) bottom right no-repeat; }
Un saludo a todos los deviants hispanos
Esta semana les hablare de un tema que de seguro algunos de ustedes ya conocerán, pero también un tema que será nuevo para otros o que apenas lo conozcan. Se trata de los Skins para el Journal.
Son estilos personalizados y totalmente elaborados a tu gusto que puedes utilizar para decorar tus Journals. En el buscador de deviantArt se puede encontrar una gran variedad de ellos, para instalarlos en unos pocos clicks sin necesidad de colocar códigos. Sin embargo, esta característica esta disponible solo para usuarios con una Membresia Premium.
Me gustaría hacer el mio propio ¿Como lo hago?
Aunque podemos encontrar muchos estilos para instalar nunca esta de más el querer hacer un estilo propio a nuestro gusto. Cualquiera tiene la posibilidad de crear un Skin (más no usarlo si no se tiene un Membresía Premium). ¿Como hacerlo?. Para poder elaborar un estilo para Journal hay que tener ciertos conocimientos básicos sobre CSS.
El CSS es un grupo de códigos que componen los documentos HTML. En este caso van a componer lo que será en su totalidad el Skin a elaborar.
Un Skin se compone básicamente de tres partes:
-El encabezado donde se visualizará una imagen representativa del tema del Skin, la fecha y el titulo del Journal
-El fondo principal
-El pie de página donde se visualizará una imagen decorativa y el número de comentarios de dicho Journal. Debajo de todo esto se puede ver la Mood List.
Otras imágenes adicionales son los cuadros para los títulos, los Scroll que son cuadros que sirven para escribir dentro, el puntero al señalar el Skin, etc;. Aquí una imagen de los códigos básicos y principales de un Skin más los códigos de la Mood List. Esta última es la lista que siempre aparece al final del Journal y la cual llenamos a nuestra preferencia.
Para ampliarlo haz Click Aquí
Armando el Skin
Para proceder a armar un Skin necesitamos tener códigos a la mano. Buscando mediante la barra "Search" de deviantArt se pueden encontrar algunos códigos que suben otros usuarios, para que muchos de nosotros podamos usarlos en nuestro Skin. Si tenemos códigos que nos ha dado algún amigo también nos servirá para armar el Skin a nuestro gusto. Una vez que tengamos los códigos procedemos a entrar en la página para escribir una nueva entrada y de allí hacía "Edit Skin". Inmediatamente saldrá una ventana con 3 partes:
1-Header: en esta parte colocaremos lo primero que queremos mostrar siempre en nuestro Journal. Por ejemplo, podrían ser enlaces a nuestro perfil, galería, otros Journals, etc;
2-CSS: esta es la parte más importante porque es donde colocaremos todos los códigos que conformarán nuestro Skin y que luego modificaremos a nuestro gusto
3-Footer: cumple una función parecida a la primera. Aquí colocaremos lo último que queremos mostrar siempre en nuestro Journal. Puede ser cualquier cosa
CSS
Dicho antes, procedemos a colocar nuestros códigos en este cuadro y comenzamos a modificar para darle cuerpo a nuestro Skin. Pondré como ejemplo los códigos del fondo principal que serán los primeros en colocarse:
.journalbox
{
max-width: 700px; --->
color: white;
background: url( URL BACKGROUND AQUI);
padding-top: 0px;
border: 5px double white;
margin-right: 3px;
Lo único a modificar en este código será el background o fondo principal. Aquí debes poner un link de tu fondo si lo has hecho en tu computadora y lo has subido a tu galería o a otra página. Si no quieres hacer un fondo de esta manera puedes ponerle color poniendo el código como "background-color" y llenarlo con el color de tu preferencia. Ejemplo:
background-color: white; --->o si quieres un tono en especifico puedes copiar el código del color de tu preferencia desde la herramienta de color de tu programa de diseño que uses. En Photoshop se puede ver el código de cada color
background-color: #fbfbfb ; -->este es el código del color blanco (White). Siempre hay que poner un # antes del código para que pueda funcionar.
Lo siguiente a modificar será el color y grosor del borde. Aquí también se puede poner el código del color. Este mismo proceso de modificación se hace con los demás códigos del Skin.
Para una mayor información sobre como ir modificando los códigos pueden consultar este tutorial:
Y aquí más tutoriales y Tips que les servirán de ayuda:
:thumb80916163:
Puede parecer tedioso y complicado pero con práctica se puede dominar. Lo más recomendable para armar un Skin es tener la base CSS a la mano lo cual nos facilitará el trabajo sin tener que comenzarlo todo desde cero. No desesperen si no les sale bien a la primera. Eso es parte normal del proceso de prácticas y los errores nos dicen que esta mal para poder arreglar lo que hace falta. Cuanto más practiquen más fácil se les hará manejar los códigos y ya no será una tarea tan tediosa. Recuerden, la practica hace al maestro
Eso es todo por hoy. Espero que este Blog y los tutoriales les ayuden a entender mejor el tema de los Skin y se animen a hacer el suyo. Es cierto que nos gusta probar estilos que suben otros usuarios pero nunca esta de más aprender hacer el nuestro. Hasta puede que algún día queramos compartir nuestros diseños para que otros los usen también
Hasta el próximo Blog
Related content
Comments: 22
Una preguntita >w<
si yo hago mi propio background, de que medidas debería hacerlo para que entre en el journal?
se puede usar las mismas medidas para los widgets?
👍: 0 ⏩: 1
Hola
Estas son las medidas que yo utilizo:
Header: 700(ancho) x 397(alto)
Background: 700 (ancho) x 3000 (alto)
Footer: 700 (ancho) x 66 (alto)
Estas son medidas base pero puedes modificarlas por las que quieras. Incluso puedes modificar el ancho del skin en la parte max-width del codigo para que sea más ancho 
👍: 0 ⏩: 0
Me temo que necesitas una Membresia Premium para usar Skins en tu journal
👍: 0 ⏩: 0
me Haces Un Skin de taylor Swift porfavor es que para mi es Muy dificil eso de los Codigos y si Puedes que sea Instalable Porfavor si Puedes me lo Haces?
👍: 0 ⏩: 1
Hola, disculpa por no haber contestado antes. Es que los nuevos mensajes en los journals del grupo no aparecen en el centro de mensajes del grupo y por eso no me doy cuenta si han comentado o no
No estoy muy segura de eso 
👍: 0 ⏩: 0
yo hice todo bien los codigos y eso, puse previev para ver como queda y cuando pongo publicar no me aparece como yo lo vi me aparece el titulo nomas
👍: 0 ⏩: 1
¿Cuanto publicas tu journal aparece con el diseño por defecto de DA?. Esto se debe a que los usuarios gratuitos no tienen la posibilidad de usar Skins en sus journals. Para hacerlo necesitas una Membresia Premium
👍: 0 ⏩: 1
me parece interesante parece algo compligado para hacer jeje
👍: 0 ⏩: 1
Bueno si al principio es algo complicado pero cuando los haces una y otra vez vas ganando habilidad y ya no te serà tan difìcil. Con practica se aprende
👍: 0 ⏩: 1
pude superar el de crear las imagenes a la medida pero la acometida de la armado del skin siempre requiere de ingenio jeje
👍: 0 ⏩: 0
Esta información debería ser más conocida, te invito a que puedas publicar en el grupo #Ayu-dA y así dar a conocer a más público este tema que es de mucho interés y poco hablado.
Que muchos usuarios conozcan sobre este tipo de herramientas de personalización ayuda mucho a que se desempeñen mejor en la página, felicitaciones por tu aporte, muy valioso!
👍: 0 ⏩: 1
Gracias Darkyd
Bueno hay un tutorial en el grupo sobre los Skins pero no tengo problema en publicar esta información también
Me alegro que lo consideres así. Muchas gracias
👍: 0 ⏩: 0
De nada. Me alegra que te resulte útil
👍: 0 ⏩: 0
que interesante! cuando me compre le premium lo probare de hacer xDDD pero todavía no entiendo muy bien eso de buscar los codigos... ;3;
👍: 0 ⏩: 1
De nada. Me alegra que te haya gustado
Puedes buscar códigos en la barra "Search" de arriba poniendo "CSS Journal". Pero también puedes entrar en el primer tutorial y encontrarás en el comment de artísta los códigos básicos que puse para que todos los puedan usar
👍: 0 ⏩: 1
thx! me guardo los tutoriales para cuando me haga falta!!! :_D
👍: 0 ⏩: 0
Estupendo blog ~Pascua-Tanya y de mucha utilidad para todos.
Nuevamente gracias por tus buenas publicaciones!!
👍: 0 ⏩: 1
Gracias Alicia
Me pareció bien hablar de los Skins en esta ocasión ya que muchos aun no saben como hacer uno
Me alegra que te gusten mis publicaciones
👍: 0 ⏩: 0