Este programa sirve para colocar aquellas portadas de animes que no aparecen en los estilos personalizados CSS.
Dividiré el tutorial en dos procesos.
Pasos a seguir para el primer proceso:
1.Descargar el programa desde esta página: Blink!
Abrir el archivo ZIP y extraer el programa donde os vaya mejor (en el escritorio siempre está más a mano xD)
Necesario para este paso: Tener el programa Winrar o 7-zip para poder extraer el archivo.
2.Abrir el programa. Saldrá una cosa como esta:
Donde pone "Username" se deberá colocar vuestro nick de MAL.
Para acabar este segundo paso debereis ticar el cuadradito donde pone "Animelist" como en esta imagen:
Cabe decir que con la "mangalist" es igual pero ticando la de "mangalist"
3.Averiguar el "selector" de vuestro "style" y guardar archivo CSS:
Hay 6 tipos de "selectors" que son estos que veis en la imagen:
Hay diferentes tipos de "styles" con portadas y cada uno funciona con un "selector" diferente. Ahora procederé a explicar y ejemplificar cada uno de los "styles":
1- El primero es el clásico donde salen directamente las portadas, como se puede ver en este ejemplo:
Para este tipo de "style" utilizaremos el "selector" more
2- El segundo es el desplegable:
Para este tipo de "style" utilizaremos el "selector" animetitle
3- El tercero es el de seleccionar un anime y aparecer la portada a un lado (en algunos también se les puede añadir etiquetas bajo la portada) como se puede observar en la imagen:
Para este tipo de "style" utilizaremos en "selector" more
4- En el cuarto se amplia la portada con un zoom:
Para este tipo de "style" utilizaremos en "selector" more
P.D: Por cierto, este tipo de "style" es como el que tengo yo ^^
5- En el quinto al acercar el mouse a la portada se acerca, un poco distinto al 4 como se puede observar en el gif:
Para este tipo de "style" utilizaremos en "selector" animetitle:before
6- Y en el último las portadas estan ordenadas en una especie de fila vertical y cuando se selecciona el anime en cuestión, la portada se desplaza hacia un lado:
Para este tipo de "style" utilizaremos en "selector" animetitle:before
Una vez sepais cual es el "selector" que necesita vuestro "style" lo seleccionais y clicais a "browse...", donde lo guardareis con un nombre + .css al final:
4.Finalizar el primer proceso clicando a "Blink!":
Os saldrá un mensaje de "Saving completed" y ya tendreis vuestro archivo.css
Pasos a seguir para el segundo proceso:
5.Una vez tengamos el archivo.css creado habrá que hacer lo siguiente:
1- Creamos una cuenta de Dropbox e iniciamos sesión (si se tiene pues solo se inicia sesión)
2- Subiremos el archivo.css al Dropbox.
3- Una vez subido le daremos clic derecho encima del archivo.css y clicaremos compartir:
4- Entonces se abrirá una pequeña ventana, allí tendremos que copiar el link que hay marcado y luego clicar el la X para cerrar la ventana, como os muestro en esta imagen:
5- Después de copiarlo habrá que pegarlo en un bloc de notas y habrá que modificar esta parte del link: www.dropbox.com por esta otra dl.dropboxusercontent.com quedando como en la imagen:
6- Una vez tengamos el link perfecto entramos en nuestro perfil de MAL y clicamos en "edit profile":
7- Entonces nos dirigimos a "Style/Design" y después a "Advanced CSS List Design":
8- Una vez dentro clicamos al "style" que tenemos puesto:
9- Por último, sustituimos el link que hemos creado anteriormente por el que ya hay puesto justo al lado de @import url(, como veis en la imagen:
Clicais en "Update CSS" y os aparecerá más arriba esto:
Le dais donde veis en la imagen y os volverá a aparecer otra cosa (esta vez si lo último xD):
Elegis el "style" que acabais de modificar y clicais "submit" y voilà! Vuestra list estará perfectamente con todas las portadas ^^ (Lo malo de este proceso (desde la web de dropbox) es que habrá que repetirlo cada vez que añadamos un nuevo anime sin portada, en cambio si lo haceis desde la aplicación de dropbox solamente tendreis que hacer clic en el "Blink" sin necesidad de volver a modificar nada más ^^)
Si teneis alguna duda comentadla e intentaré resolverosla lo antes posible :) Se que estéticamente no es lo más bonito del mundo, tendré que mejorar jajajaj ^^' Muchas gracias por vuestra atención y espero que os haya ayudado :D
Gracias por el tutorial, te quedó muy bien explicado ;)
Me acabo de fijar de que tampoco se me ven algunos covers, pero no uso Windows así que no podré ejecutar Blink. GG para mi.
Al final cuando dijiste "Lo malo de este proceso es que habrá que repetirlo cada vez que añadamos un nuevo anime sin portada xD pero es eficaz ^^" estaría bien especificar que si tienen la aplicación de Dropbox instalada solamente tienen que hacer clic en el "Blink" sin necesidad de volver a modificar nada :).
-Ronin said: Gracias por el tutorial, te quedó muy bien explicado ;)
Me acabo de fijar de que tampoco se me ven algunos covers, pero no uso Windows así que no podré ejecutar Blink. GG para mi.
-Ronin said: Gracias por el tutorial, te quedó muy bien explicado ;)
Me acabo de fijar de que tampoco se me ven algunos covers, pero no uso Windows así que no podré ejecutar Blink. GG para mi.
¿Utilizas linux?
Sep, uso Linux.
Si preguntabas para decirme que lo haga con Wine, nah, que flojera xd
-Ronin said: Gracias por el tutorial, te quedó muy bien explicado ;)
Me acabo de fijar de que tampoco se me ven algunos covers, pero no uso Windows así que no podré ejecutar Blink. GG para mi.
Vaya... Me sabe mal que no puedas... Lo siento TT
TheVictor9634 said: He fallado :(. Tras un huevo de rato entrado a dropbox y siendo expulsado.... He hecho algo mal T^T
Exactamente en que paso te quedas estancado?
Andreias said: Muy bien echo el tutorial ^^.
Al final cuando dijiste "Lo malo de este proceso es que habrá que repetirlo cada vez que añadamos un nuevo anime sin portada xD pero es eficaz ^^" estaría bien especificar que si tienen la aplicación de Dropbox instalada solamente tienen que hacer clic en el "Blink" sin necesidad de volver a modificar nada :).
Felicidades :D
Cierto, se me pasó eso! Ahora lo edito en un momento ^^ Y graciass :D espero poder mejorar para los próximos :)
NuluT said: Muy bueno, intentare haber si logro algo xD
Lo malo es que tampoco uso windows, me tocara emular el programa en MAC D=
Jups... Una lástima que solo se pueda usar en Windows el programa... Ya podrían sacarlo para más sistemas operativos
/*
MAIN BACKGROUND
The space background by default.
*/
body {
background-image: url(http://i.imgur.com/G5WpY72.jpg);
background-position:0 50%, 0 0;
background-repeat:no-repeat no-repeat;
background-size:cover;
}
/*
SECONDARY BACKGROUND
Goes behind the list but in front of the main background. Image links to a character render in the parenthesis after
background. Add or remove the word "contain" (without quotations) after background-size if you want them to be fit or not
/*
MAGICA LOGO AND LIST TOP SPACING
Background-image is the Magica logo at page top. You can move it with background position.
Padding top controls the amount of space between the list top and the top of the page. If you raise the number the list will
/*
COVER PIC POSITION (hover)
This is how far to the left the cover pic will zoom out when you point to the thumbnail for it. If you want it more to the
right,
take away from the amount below.
*/
.hide:hover {
margin-left: -182px;
}
/*
LIST TOP COLORS
The colors for the top text (#, anime title, score, etc) and the panel itself.
Google "RGBA color generator" for easy to copy color and opacity numbers customized for you to put after "background-
/*
LIST BACKGROUND COLOR, ROW HEIGHT AND HOVER COLOR
Adjust the opacity and color of the list itself with the first two sets of code, as well as the height of the rows. td1 is
odd numbered rows, td2 is even. The third set of code is for the row color and opacity on height.
*/
.status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a {
color:transparent;
display:block;
font-size:0;
height:113px;
width:263px;
}
TheVictor9634 said: @Jonacles No me atasco en nada, lo he copiado todo como pone y simplemente no ha funcionado.
Así queda el código, a ver si algo no te cuadra:
/*
MAIN BACKGROUND
The space background by default.
*/
body {
background-image: url(http://i.imgur.com/G5WpY72.jpg);
background-position:0 50%, 0 0;
background-repeat:no-repeat no-repeat;
background-size:cover;
}
/*
SECONDARY BACKGROUND
Goes behind the list but in front of the main background. Image links to a character render in the parenthesis after
background. Add or remove the word "contain" (without quotations) after background-size if you want them to be fit or not
/*
MAGICA LOGO AND LIST TOP SPACING
Background-image is the Magica logo at page top. You can move it with background position.
Padding top controls the amount of space between the list top and the top of the page. If you raise the number the list will
/*
COVER PIC POSITION (hover)
This is how far to the left the cover pic will zoom out when you point to the thumbnail for it. If you want it more to the
right,
take away from the amount below.
*/
.hide:hover {
margin-left: -182px;
}
/*
LIST TOP COLORS
The colors for the top text (#, anime title, score, etc) and the panel itself.
Google "RGBA color generator" for easy to copy color and opacity numbers customized for you to put after "background-
/*
LIST BACKGROUND COLOR, ROW HEIGHT AND HOVER COLOR
Adjust the opacity and color of the list itself with the first two sets of code, as well as the height of the rows. td1 is
odd numbered rows, td2 is even. The third set of code is for the row color and opacity on height.
*/
.status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a {
color:transparent;
display:block;
font-size:0;
height:113px;
width:263px;
}
@TheVictor A mi me funciona perfectamente, copia y pega exactamente este que te paso, solo he cambiado lo que te puse unos comentarios más arriba, te debería funcionar ;) ^^
/*
MAIN BACKGROUND
The space background by default.
*/
body {
background-image: url(http://i.imgur.com/G5WpY72.jpg);
background-position:0 50%, 0 0;
background-repeat:no-repeat no-repeat;
background-size:cover;
}
/*
SECONDARY BACKGROUND
Goes behind the list but in front of the main background. Image links to a character render in the parenthesis after
background. Add or remove the word "contain" (without quotations) after background-size if you want them to be fit or not
/*
MAGICA LOGO AND LIST TOP SPACING
Background-image is the Magica logo at page top. You can move it with background position.
Padding top controls the amount of space between the list top and the top of the page. If you raise the number the list will
/*
COVER PIC POSITION (hover)
This is how far to the left the cover pic will zoom out when you point to the thumbnail for it. If you want it more to the
right,
take away from the amount below.
*/
.hide:hover {
margin-left: -182px;
}
/*
LIST TOP COLORS
The colors for the top text (#, anime title, score, etc) and the panel itself.
Google "RGBA color generator" for easy to copy color and opacity numbers customized for you to put after "background-
/*
LIST BACKGROUND COLOR, ROW HEIGHT AND HOVER COLOR
Adjust the opacity and color of the list itself with the first two sets of code, as well as the height of the rows. td1 is
odd numbered rows, td2 is even. The third set of code is for the row color and opacity on height.
*/
.status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a {
color:transparent;
display:block;
font-size:0;
height:113px;
width:263px;
}
/*
MAIN BACKGROUND
The space background by default.
*/
body {
background-image: url(http://i.imgur.com/G5WpY72.jpg);
background-position:0 50%, 0 0;
background-repeat:no-repeat no-repeat;
background-size:cover;
}
/*
SECONDARY BACKGROUND
Goes behind the list but in front of the main background. Image links to a character render in the parenthesis after
background. Add or remove the word "contain" (without quotations) after background-size if you want them to be fit or not
/*
MAGICA LOGO AND LIST TOP SPACING
Background-image is the Magica logo at page top. You can move it with background position.
Padding top controls the amount of space between the list top and the top of the page. If you raise the number the list will
/*
COVER PIC POSITION (hover)
This is how far to the left the cover pic will zoom out when you point to the thumbnail for it. If you want it more to the
right,
take away from the amount below.
*/
.hide:hover {
margin-left: -182px;
}
/*
LIST TOP COLORS
The colors for the top text (#, anime title, score, etc) and the panel itself.
Google "RGBA color generator" for easy to copy color and opacity numbers customized for you to put after "background-
/*
LIST BACKGROUND COLOR, ROW HEIGHT AND HOVER COLOR
Adjust the opacity and color of the list itself with the first two sets of code, as well as the height of the rows. td1 is
odd numbered rows, td2 is even. The third set of code is for the row color and opacity on height.
*/
.status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a {
color:transparent;
display:block;
font-size:0;
height:113px;
width:263px;
}
Tengo un gran problema, al terminar toda la guía no solo no se me han puesto las portadas que me faltaban, sino que han desaparecido las que sí.
Aquí voy a poner la que viene de serie:
/* Invisable Links */
.status_selected a, .status_not_selected a,
.status_selected:hover a, .status_not_selected:hover a {
color: transparent;
display:block;
width:300px;
height:80px;
}
/* Invisable Links */
.status_selected a, .status_not_selected a,
.status_selected:hover a, .status_not_selected:hover a {
color: transparent;
display:block;
width:300px;
height:80px;
}
Tu lista es tipo More así que has elegido bien.
De los dos enlaces que venían por defecto solamente tenías que borrar el primero, aun así el segundo parece que está caído...
El enlaces de "import" es inválido y tampoco le pusiste las comillas.
O sea, que tengo que cambiar el link de nuevo, creando otra carpeta y poner las comillas, no?
Pero tengo una duda, en el de serie sale: @import "...".
Pero en el de Jonacles sale: @import url(...).
Entonces cuál pongo? La de url o las comillas?
ueeeee conseguido!
La verdad es que soy un caso, estaba copiando el link a la mitad... ¬¬ como no cabía entero en la carpeta y no me di cuenta, pues... T.T
A mi el @import url me va bn, pero creo que eso es segun el style, algunos iran bn con comillas, otros con el url y otros con los dos, siento no haber llegado a tiempo para resolver tu duda @ferniss, gracias de nuevo @Andreias :)
