Forum Settings
Forums
#1
Jul 19, 7:52 AM
Offline
Joined: Jul 2015
Posts: 20
Hey this is my current list

https://myanimelist.net/animelist/Nashy?status=7&order=4&order2=0

So now i want to add a picture at the left down corner like the right one but if im add this to the code it wont show. my code is

150 * BOTTOM RENDER */
151 footer::after {
152 width: 20%;
153 height: 100%;
154 left:calc(55% + 460px);
155 background: url(https://i.imgur.com/I4jTZtP.png) no-repeat bottom right


And how can i delete the box with the picture in the middle with all anime
Modified by Nashy, Jul 19, 8:49 AM
 
#2
Jul 19, 3:08 PM

Offline
Joined: Feb 2010
Posts: 6053
I answered the first question here:
https://myanimelist.net/forum/?topicid=1640096#msg57998710



For the second question, there isn't really a box there, I don't think. It's separate sections with the header text and the picture. But you can remove the text and pic with

.list-unit .list-status-title .text {
display: none;}

.list-status-title{display: none !important;}

then move your list up with

.list-item {
top: -500px;
}

 
#3
Jul 19, 5:38 PM
Offline
Joined: Jul 2015
Posts: 20
Shishio-kun said:
I answered the first question here:
https://myanimelist.net/forum/?topicid=1640096#msg57998710



For the second question, there isn't really a box there, I don't think. It's separate sections with the header text and the picture. But you can remove the text and pic with

.list-unit .list-status-title .text {
display: none;}

.list-status-title{display: none !important;}

then move your list up with

.list-item {
top: -500px;
}



hey thank you for your help it works :) can i ask you maybe 1 thing more?

my actually list https://myanimelist.net/animelist/Nashy?status=7&order=4&order2=0

and now i want it like this https://myanimelist.net/animelist/Lenslow?status=2

i mean that at the top is this "banner" with an picture and unter this there is a little space transparent and then comes the anime list.

hope you know what i mean because my english is really bad
 
#4
Jul 19, 6:11 PM

Offline
Joined: Feb 2010
Posts: 6053
Nashy said:
Shishio-kun said:
I answered the first question here:
https://myanimelist.net/forum/?topicid=1640096#msg57998710



For the second question, there isn't really a box there, I don't think. It's separate sections with the header text and the picture. But you can remove the text and pic with

.list-unit .list-status-title .text {
display: none;}

.list-status-title{display: none !important;}

then move your list up with

.list-item {
top: -500px;
}



hey thank you for your help it works :) can i ask you maybe 1 thing more?

my actually list https://myanimelist.net/animelist/Nashy?status=7&order=4&order2=0

and now i want it like this https://myanimelist.net/animelist/Lenslow?status=2

i mean that at the top is this "banner" with an picture and unter this there is a little space transparent and then comes the anime list.

hope you know what i mean because my english is really bad


OK, maybe use something like this. Otherwise you could mix together the two CSS themes like he or she did

.cover-block {

height: 400px;
background-image: url(https://i.imgur.com/i8Ys7Gl.jpg);
}
 
#5
Jul 20, 2:28 AM
Offline
Joined: Jul 2015
Posts: 20
Shishio-kun said:
Nashy said:


hey thank you for your help it works :) can i ask you maybe 1 thing more?

my actually list https://myanimelist.net/animelist/Nashy?status=7&order=4&order2=0

and now i want it like this https://myanimelist.net/animelist/Lenslow?status=2

i mean that at the top is this "banner" with an picture and unter this there is a little space transparent and then comes the anime list.

hope you know what i mean because my english is really bad


OK, maybe use something like this. Otherwise you could mix together the two CSS themes like he or she did

.cover-block {

height: 400px;
background-image: url(https://i.imgur.com/i8Ys7Gl.jpg);
}


Thanks again it works too but how can i make a little space that is transparent like the other list between my icons and the start of the list? And write Alle Anime in There with the same font as all anime at the top icon

And if i clikc at the right site on stats it looks weird because its in the list hope you can help me there D:
Modified by Nashy, Jul 20, 2:51 AM
 
#6
Jul 20, 2:17 PM

Offline
Joined: Feb 2010
Posts: 6053
Nashy said:
Shishio-kun said:


OK, maybe use something like this. Otherwise you could mix together the two CSS themes like he or she did

.cover-block {

height: 400px;
background-image: url(https://i.imgur.com/i8Ys7Gl.jpg);
}


Thanks again it works too but how can i make a little space that is transparent like the other list between my icons and the start of the list? And write Alle Anime in There with the same font as all anime at the top icon

And if i clikc at the right site on stats it looks weird because its in the list hope you can help me there D:
Nashy said:
Shishio-kun said:


OK, maybe use something like this. Otherwise you could mix together the two CSS themes like he or she did

.cover-block {

height: 400px;
background-image: url(https://i.imgur.com/i8Ys7Gl.jpg);
}


Thanks again it works too but how can i make a little space that is transparent like the other list between my icons and the start of the list? And write Alle Anime in There with the same font as all anime at the top icon

And if i clikc at the right site on stats it looks weird because its in the list hope you can help me there D:


You don't have a space with All Anime in there because you asked how to remove that space in your second question here

So you can adjust this code to make space. Try making it -300px

.list-item {
top: -500px;
}


and remove this code to bring All anime back

.list-status-title{display: none !important;}

the
n add
.list-unit .list-status-title .text {
top: -300px}


When you lower the list with the list item code, there might be more room with for the stats
Modified by Shishio-kun, Jul 20, 2:20 PM
 
#7
Jul 21, 2:27 AM
Offline
Joined: Jul 2015
Posts: 20
Shishio-kun said:
Nashy said:


Thanks again it works too but how can i make a little space that is transparent like the other list between my icons and the start of the list? And write Alle Anime in There with the same font as all anime at the top icon

And if i clikc at the right site on stats it looks weird because its in the list hope you can help me there D:
Nashy said:


Thanks again it works too but how can i make a little space that is transparent like the other list between my icons and the start of the list? And write Alle Anime in There with the same font as all anime at the top icon

And if i clikc at the right site on stats it looks weird because its in the list hope you can help me there D:


You don't have a space with All Anime in there because you asked how to remove that space in your second question here

So you can adjust this code to make space. Try making it -300px

.list-item {
top: -500px;
}


and remove this code to bring All anime back

.list-status-title{display: none !important;}

the
n add
.list-unit .list-status-title .text {
top: -300px}


When you lower the list with the list item code, there might be more room with for the stats


okay i think i have everything thank you so much :) and two last little things if i am on my list i have the "cool" cursor but if someone else is on my list or im with another browser than chrome there have the normal one. How can i change that everyone have the other cursor?

and how can i write Nash's Anime List like this list https://myanimelist.net/animelist/Lenslow?status=2 behind the icon in the banner? if im editing the text i wont let you go its always in the middle and not left
 
#8
Jul 21, 2:24 PM

Offline
Joined: Feb 2010
Posts: 6053
I dont know about the first thing

Add this and adjust the number after margin-left until the text moves where you want. Replace TEXT HERE with the text you want

/* BANNER QUOTE*/
.cover-block::before {
content: "TEXT HERE";
margin-left: -150px !important;
}

 
#9
Jul 22, 10:39 AM
Offline
Joined: Jul 2015
Posts: 20
Shishio-kun said:
I dont know about the first thing

Add this and adjust the number after margin-left until the text moves where you want. Replace TEXT HERE with the text you want

/* BANNER QUOTE*/
.cover-block::before {
content: "TEXT HERE";
margin-left: -150px !important;
}



with the first thing i mean this cursor here https://i.imgur.com/5BUHtkV.jpg so i want it but if someone else goes on my page he doesnt have this cursor.

with the second thing how can i make the font bigger and maybe the white font with a black "border" or with a shadow? ?
 
Jul 22, 11:39 AM

Offline
Joined: Feb 2010
Posts: 6053
Nashy said:
Shishio-kun said:
I dont know about the first thing

Add this and adjust the number after margin-left until the text moves where you want. Replace TEXT HERE with the text you want

/* BANNER QUOTE*/
.cover-block::before {
content: "TEXT HERE";
margin-left: -150px !important;
}



with the first thing i mean this cursor here https://i.imgur.com/5BUHtkV.jpg so i want it but if someone else goes on my page he doesnt have this cursor.

with the second thing how can i make the font bigger and maybe the white font with a black "border" or with a shadow? ?


these codes

https://www.w3schools.com/cssref/css3_pr_text-shadow.asp

https://www.w3schools.com/cssref/pr_font_font-size.asp
 
Jul 22, 12:08 PM
Offline
Joined: Jul 2015
Posts: 20
Shishio-kun said:
Nashy said:


with the first thing i mean this cursor here https://i.imgur.com/5BUHtkV.jpg so i want it but if someone else goes on my page he doesnt have this cursor.

with the second thing how can i make the font bigger and maybe the white font with a black "border" or with a shadow? ?


these codes

https://www.w3schools.com/cssref/css3_pr_text-shadow.asp

https://www.w3schools.com/cssref/pr_font_font-size.asp


thanks but where i have to write these codes down?
 
Jul 22, 12:14 PM

Offline
Joined: Feb 2010
Posts: 6053
 
Jul 22, 12:18 PM
Offline
Joined: Jul 2015
Posts: 20
Shishio-kun said:
In between the brackets here

.cover-block::before {


}


sorry but i am a complete scrub in it and i dont can do it idk why it doesnt work here is the code

.cover-block::before {
content: "NASHY'S ANIME LIST";
margin-left: -345px !important;
}

so if i am taking the code after before it doesnt work idk sorry

and is it possible to make baner pictures gifs for stats and filters?
Modified by Nashy, Jul 22, 12:37 PM
 
Jul 22, 12:41 PM

Offline
Joined: Feb 2010
Posts: 6053
You can add this; you can adjust any of the numbers:

change 35px to 55px for example for bigger text
change 2px 2px to 4px 4px for example and that would change the shadows
and you know change -245px to another number and that will move the text :D

.cover-block::before {
content: "NASHY'S ANIME LIST";
margin-left: -245px !important;
text-shadow: 2px 2px black;
font-size: 35px !important;
}
 
Jul 22, 12:46 PM
Offline
Joined: Jul 2015
Posts: 20
Shishio-kun said:
You can add this; you can adjust any of the numbers:

change 35px to 55px for example for bigger text
change 2px 2px to 4px 4px for example and that would change the shadows
and you know change -245px to another number and that will move the text :D

.cover-block::before {
content: "NASHY'S ANIME LIST";
margin-left: -245px !important;
text-shadow: 2px 2px black;
font-size: 35px !important;
}


damn thanks now i know what u mean so 2 short questions left then im done i hope


is it possible to make gifs/pictures for stats and filters like the others?

and do you know now what i mean with the cursor like this picture https://i.imgur.com/5BUHtkV.jpg
Modified by Nashy, Jul 22, 1:03 PM
 
Jul 22, 1:57 PM

Offline
Joined: Feb 2010
Posts: 6053
Nashy said:
Shishio-kun said:
You can add this; you can adjust any of the numbers:

change 35px to 55px for example for bigger text
change 2px 2px to 4px 4px for example and that would change the shadows
and you know change -245px to another number and that will move the text :D

.cover-block::before {
content: "NASHY'S ANIME LIST";
margin-left: -245px !important;
text-shadow: 2px 2px black;
font-size: 35px !important;
}


damn thanks now i know what u mean so 2 short questions left then im done i hope


is it possible to make gifs/pictures for stats and filters like the others?

and do you know now what i mean with the cursor like this picture https://i.imgur.com/5BUHtkV.jpg



Yeah you need the code for the section you want then you add a background pic. I go over getting codes and adding pics to sections in these videos
https://myanimelist.net/forum/?topicid=1780591

https://myanimelist.net/forum/?topicid=1781239

no I haven't used a custom cursor in years, you can probably rip cursor codes from older layouts then add them to your own CSS.
 
Jul 23, 8:24 AM
Offline
Joined: Jul 2015
Posts: 20
Shishio-kun said:
Nashy said:


damn thanks now i know what u mean so 2 short questions left then im done i hope


is it possible to make gifs/pictures for stats and filters like the others?

and do you know now what i mean with the cursor like this picture https://i.imgur.com/5BUHtkV.jpg



Yeah you need the code for the section you want then you add a background pic. I go over getting codes and adding pics to sections in these videos
https://myanimelist.net/forum/?topicid=1780591

https://myanimelist.net/forum/?topicid=1781239

no I haven't used a custom cursor in years, you can probably rip cursor codes from older layouts then add them to your own CSS.


uhm i watched 2 videos and i really dont know how to do anything.. Im a complete scrub in css and maybe if u have time u can make me a stats and a filter codes? only the same as the others with a gif in it. do you need my complete code? im very thankful
 
Jul 25, 9:35 AM
Offline
Joined: Jul 2015
Posts: 20
Shishio-kun said:
Nashy said:


damn thanks now i know what u mean so 2 short questions left then im done i hope


is it possible to make gifs/pictures for stats and filters like the others?

and do you know now what i mean with the cursor like this picture https://i.imgur.com/5BUHtkV.jpg



Yeah you need the code for the section you want then you add a background pic. I go over getting codes and adding pics to sections in these videos
https://myanimelist.net/forum/?topicid=1780591

https://myanimelist.net/forum/?topicid=1781239

no I haven't used a custom cursor in years, you can probably rip cursor codes from older layouts then add them to your own CSS.


can please do it for me?
 
Jul 25, 2:46 PM

Offline
Joined: Feb 2010
Posts: 6053
Nashy said:
Shishio-kun said:



Yeah you need the code for the section you want then you add a background pic. I go over getting codes and adding pics to sections in these videos
https://myanimelist.net/forum/?topicid=1780591

https://myanimelist.net/forum/?topicid=1781239

no I haven't used a custom cursor in years, you can probably rip cursor codes from older layouts then add them to your own CSS.


can please do it for me?


ok

#show-stats-button{
background-image: url(https://i.imgur.com/1zaNxQQ.gif);
padding-left: 20px;
padding-right: 20px;
height: 20px;
padding-top: 40px;
left: -40px;
top: -35px;
position: absolute;
filter: grayscale(100%);
border-radius: 10px;
}


#show-stats-button:hover, #advanced-options-button:hover{
filter: inherit;

}

#advanced-options-button{
background-image: url(https://i.imgur.com/1zaNxQQ.gif);
padding-left: 20px;
padding-right: 20px;
height: 20px;
padding-top: 40px;
left: 50px;
top: -35px;
position: absolute;
filter: grayscale(100%);
border-radius: 10px;
}
Modified by Shishio-kun, Jul 25, 2:51 PM
 
Jul 26, 4:13 AM
Offline
Joined: Jul 2015
Posts: 20
Shishio-kun said:
Nashy said:


can please do it for me?


ok

#show-stats-button{
background-image: url(https://i.imgur.com/1zaNxQQ.gif);
padding-left: 20px;
padding-right: 20px;
height: 20px;
padding-top: 40px;
left: -40px;
top: -35px;
position: absolute;
filter: grayscale(100%);
border-radius: 10px;
}


#show-stats-button:hover, #advanced-options-button:hover{
filter: inherit;

}

#advanced-options-button{
background-image: url(https://i.imgur.com/1zaNxQQ.gif);
padding-left: 20px;
padding-right: 20px;
height: 20px;
padding-top: 40px;
left: 50px;
top: -35px;
position: absolute;
filter: grayscale(100%);
border-radius: 10px;
}


thanks it works but i dont want it always a gif. I wrote you on twitter if you have time and want to help me ehre would be nice
 
Jul 26, 1:20 PM

Offline
Joined: Feb 2010
Posts: 6053
Nashy said:
Shishio-kun said:


ok

#show-stats-button{
background-image: url(https://i.imgur.com/1zaNxQQ.gif);
padding-left: 20px;
padding-right: 20px;
height: 20px;
padding-top: 40px;
left: -40px;
top: -35px;
position: absolute;
filter: grayscale(100%);
border-radius: 10px;
}


#show-stats-button:hover, #advanced-options-button:hover{
filter: inherit;

}

#advanced-options-button{
background-image: url(https://i.imgur.com/1zaNxQQ.gif);
padding-left: 20px;
padding-right: 20px;
height: 20px;
padding-top: 40px;
left: 50px;
top: -35px;
position: absolute;
filter: grayscale(100%);
border-radius: 10px;
}


thanks it works but i dont want it always a gif. I wrote you on twitter if you have time and want to help me ehre would be nice


just replace the GIF link in parenthesis with a JPG or PNG. download some JPGs or PNGs and upload them to Imgur. copy the direct link and put it in parenthesis

I don't answer CSS stuff over Twitter or email



#show-stats-button{
background-image: url(https://i.imgur.com/Jo7vTt4.jpg);
padding-left: 20px;
padding-right: 20px;
height: 20px;
padding-top: 40px;
left: -40px;
top: -35px;
position: absolute;
filter: grayscale(100%);
border-radius: 10px;

background-size: cover;
}


#show-stats-button:hover, #advanced-options-button:hover{
filter: inherit;

}

#advanced-options-button{
background-image: url(https://i.imgur.com/tmspjJs.jpg);
padding-left: 20px;
padding-right: 20px;
height: 20px;
padding-top: 40px;
left: 50px;
top: -35px;
position: absolute;
filter: grayscale(100%);
border-radius: 10px;
background-size: cover;
}
Modified by Shishio-kun, Jul 26, 1:54 PM
 
Jul 27, 12:00 AM
Offline
Joined: Jul 2015
Posts: 20
Shishio-kun said:
Nashy said:


thanks it works but i dont want it always a gif. I wrote you on twitter if you have time and want to help me ehre would be nice


just replace the GIF link in parenthesis with a JPG or PNG. download some JPGs or PNGs and upload them to Imgur. copy the direct link and put it in parenthesis

I don't answer CSS stuff over Twitter or email



#show-stats-button{
background-image: url(https://i.imgur.com/Jo7vTt4.jpg);
padding-left: 20px;
padding-right: 20px;
height: 20px;
padding-top: 40px;
left: -40px;
top: -35px;
position: absolute;
filter: grayscale(100%);
border-radius: 10px;

background-size: cover;
}


#show-stats-button:hover, #advanced-options-button:hover{
filter: inherit;

}

#advanced-options-button{
background-image: url(https://i.imgur.com/tmspjJs.jpg);
padding-left: 20px;
padding-right: 20px;
height: 20px;
padding-top: 40px;
left: 50px;
top: -35px;
position: absolute;
filter: grayscale(100%);
border-radius: 10px;
background-size: cover;
}


sorry for asking on twitter than. nice thanks but can u tell me how can i make an png and a gif like the other ones? because now its only png. so what i have to do that its a grey png and if i hover over it its an gif with color? and how can i change the font from stats and filters?
 
Jul 27, 3:12 PM

Offline
Joined: Feb 2010
Posts: 6053
The greyscale thing was built in the code. You're not using it so I can't tell you much why its not working your list. Use this code instead. Make the background codes under :hover your gif, and make the codes under the non-hover the pngs or jpg, like I have below. You have to upload and make these jpgs and GIFs. afaik the CSS code doesn't stop a GIF for you and show only the first frame.

Rip the first frame from a GIF and save it as a JPG or PNG with Jasc Animation Shop (google it, its free).



#show-stats-button{
background-image: url(https://i.imgur.com/Jo7vTt4.jpg);
padding-left: 20px;
padding-right: 20px;
height: 20px;
padding-top: 40px;
left: -40px;
top: -35px;
position: absolute;
filter: grayscale(100%);
border-radius: 10px;

background-size: cover;
}


#show-stats-button:hover, #advanced-options-button:hover{
filter: inherit;

}

#advanced-options-button{
background-image: url(https://i.imgur.com/tmspjJs.jpg);
padding-left: 20px;
padding-right: 20px;
height: 20px;
padding-top: 40px;
left: 50px;
top: -35px;
position: absolute;
filter: grayscale(100%);
border-radius: 10px;
background-size: cover;
}

#show-stats-button:hover{
background-image: url(https://i.imgur.com/Anz71GW.gif);

}


#advanced-options-button:hover{
background-image: url(https://i.imgur.com/Anz71GW.gif);

}





pick your font
.list-unit .list-status-title .stats a {
font-family: comic sans ms;
}

add !important if it doesn't work, or see my fonts video.


.list-unit .list-status-title .stats a {
font-family: comic sans ms !important;
}

Modified by Shishio-kun, Jul 27, 3:27 PM
 
Jul 28, 1:18 AM
Offline
Joined: Jul 2015
Posts: 20
Shishio-kun said:
The greyscale thing was built in the code. You're not using it so I can't tell you much why its not working your list. Use this code instead. Make the background codes under :hover your gif, and make the codes under the non-hover the pngs or jpg, like I have below. You have to upload and make these jpgs and GIFs. afaik the CSS code doesn't stop a GIF for you and show only the first frame.

Rip the first frame from a GIF and save it as a JPG or PNG with Jasc Animation Shop (google it, its free).



#show-stats-button{
background-image: url(https://i.imgur.com/Jo7vTt4.jpg);
padding-left: 20px;
padding-right: 20px;
height: 20px;
padding-top: 40px;
left: -40px;
top: -35px;
position: absolute;
filter: grayscale(100%);
border-radius: 10px;

background-size: cover;
}


#show-stats-button:hover, #advanced-options-button:hover{
filter: inherit;

}

#advanced-options-button{
background-image: url(https://i.imgur.com/tmspjJs.jpg);
padding-left: 20px;
padding-right: 20px;
height: 20px;
padding-top: 40px;
left: 50px;
top: -35px;
position: absolute;
filter: grayscale(100%);
border-radius: 10px;
background-size: cover;
}

#show-stats-button:hover{
background-image: url(https://i.imgur.com/Anz71GW.gif);

}


#advanced-options-button:hover{
background-image: url(https://i.imgur.com/Anz71GW.gif);

}





pick your font
.list-unit .list-status-title .stats a {
font-family: comic sans ms;
}

add !important if it doesn't work, or see my fonts video.


.list-unit .list-status-title .stats a {
font-family: comic sans ms !important;
}



thanks im done finally but the last thing is how can i make the font bigger from stats and filters?
 
Jul 28, 2:01 PM

Offline
Joined: Feb 2010
Posts: 6053
pick a number

.list-unit .list-status-title .stats a {
font-size: 50px;
}

 
Top