New
May 17, 2021 10:49 AM
#6901
5tryxx_Reng3 said: First of all, hello and sorry 1000 times if this question is asked every day, or if it's posted in the wrong category. Here is my list : https://myanimelist.net/animelist/5tryxx_Reng3 Here is the custom css code that i use : http://controlc.com/16f52808 (from https://myanimelist.net/forum/?topicid=1501171) The gif in the background is in very low quality, because i tried my best to not exceed 1 MB. So here is my only question : Can i (and how ?) modify that code to link the background to a gif hosted on imgur (for example) ? Instead of using the background option limited to 1 MB. Thanks in advance. There's tons of videos and tutorials here about uploading your background to Imgur https://myanimelist.net/forum/?topicid=1499059 And the channel link in the opening post |
May 17, 2021 12:00 PM
#6902
Shishio-kun said: 5tryxx_Reng3 said: First of all, hello and sorry 1000 times if this question is asked every day, or if it's posted in the wrong category. Here is my list : https://myanimelist.net/animelist/5tryxx_Reng3 Here is the custom css code that i use : http://controlc.com/16f52808 (from https://myanimelist.net/forum/?topicid=1501171) The gif in the background is in very low quality, because i tried my best to not exceed 1 MB. So here is my only question : Can i (and how ?) modify that code to link the background to a gif hosted on imgur (for example) ? Instead of using the background option limited to 1 MB. Thanks in advance. There's tons of videos and tutorials here about uploading your background to Imgur https://myanimelist.net/forum/?topicid=1499059 And the channel link in the opening post Thanks, it helped me a lot But now the wallpaper is not covering the full screen, only partially I tried to resize but nothing I also tried to put this in the code but nothing again : background-size: cover !important; background-attachment: fixed !important; } Thanks again |
May 17, 2021 12:44 PM
#6903
5tryxx_Reng3 said: Shishio-kun said: 5tryxx_Reng3 said: First of all, hello and sorry 1000 times if this question is asked every day, or if it's posted in the wrong category. Here is my list : https://myanimelist.net/animelist/5tryxx_Reng3 Here is the custom css code that i use : http://controlc.com/16f52808 (from https://myanimelist.net/forum/?topicid=1501171) The gif in the background is in very low quality, because i tried my best to not exceed 1 MB. So here is my only question : Can i (and how ?) modify that code to link the background to a gif hosted on imgur (for example) ? Instead of using the background option limited to 1 MB. Thanks in advance. There's tons of videos and tutorials here about uploading your background to Imgur https://myanimelist.net/forum/?topicid=1499059 And the channel link in the opening post Thanks, it helped me a lot But now the wallpaper is not covering the full screen, only partially I tried to resize but nothing I also tried to put this in the code but nothing again : background-size: cover !important; background-attachment: fixed !important; } Thanks again Are you sure it works when I added it to your list body{ background-size: cover !important; background-attachment: fixed !important; } Always close your lines of code with a semicolon, you were missing it. It's supposed to look like this |
May 17, 2021 1:56 PM
#6904
Shishio-kun said: 5tryxx_Reng3 said: Shishio-kun said: 5tryxx_Reng3 said: First of all, hello and sorry 1000 times if this question is asked every day, or if it's posted in the wrong category. Here is my list : https://myanimelist.net/animelist/5tryxx_Reng3 Here is the custom css code that i use : http://controlc.com/16f52808 (from https://myanimelist.net/forum/?topicid=1501171) The gif in the background is in very low quality, because i tried my best to not exceed 1 MB. So here is my only question : Can i (and how ?) modify that code to link the background to a gif hosted on imgur (for example) ? Instead of using the background option limited to 1 MB. Thanks in advance. There's tons of videos and tutorials here about uploading your background to Imgur https://myanimelist.net/forum/?topicid=1499059 And the channel link in the opening post Thanks, it helped me a lot But now the wallpaper is not covering the full screen, only partially I tried to resize but nothing I also tried to put this in the code but nothing again : background-size: cover !important; background-attachment: fixed !important; } Thanks again Are you sure it works when I added it to your list body{ background-size: cover !important; background-attachment: fixed !important; } Always close your lines of code with a semicolon, you were missing it. It's supposed to look like this You get a point. Thanks, it's now working. you are the hero we need but don't deserve Thanks again, a lot |
May 17, 2021 6:36 PM
#6905
Hello can i know what codes for the yt thing to put in the background? I need some codes idk how to codes here |
May 17, 2021 6:57 PM
#6906
justsadlittleboy said: Hello can i know what codes for the yt thing to put in the background? I need some codes idk how to codes here ? Youtube player on a list background, or embed a Youtube player in the background on a profile (people don't usually call the profile a background)? It's not clear what you're asking to do. Adding a Youtube player in a post https://myanimelist.net/forum/?topicid=496203 Making a profile graphic with a Youtube player in GIMP https://myanimelist.net/forum/?topicid=1761000 Youtube player on the list https://myanimelist.net/forum/?topicid=1923093 Otherwise see if the stickies or recent posts cover what you're trying to do |
May 17, 2021 7:05 PM
#6907
Sorry im bad in english. Something like this i want the yt list to put on top of the picture |
May 17, 2021 7:28 PM
#6908
justsadlittleboy said: Sorry im bad in english. Something like this i want the yt list to put on top of the picture OK, but it can be difficult to do. I add a Youtube player to a graphic later on in this video. So you could see how I do it there, and then do the same with an image you use in GIMP. https://myanimelist.net/forum/?topicid=1761000 There's a Photoshop version of this video too on my Youtube channel. |
May 21, 2021 11:26 AM
#6909
I have a genuine question, I recently watched your Make a Custom Layout Theme video and I was wondering how to make it so I can change the shows grid format back to a list format while still keeping the banner, gifs, and such in the grid format (I'm super new to CSS so I'm having a difficult time figuring out which code affects what section and I'm not sure if its possible to do so). Here is myanimelist link: https://myanimelist.net/animelist/Tapatio47 And I apologize for any inconveniences but I really appreciate any advice. |
May 21, 2021 11:38 AM
#6910
Tapatio47 said: I have a genuine question, I recently watched your Make a Custom Layout Theme video and I was wondering how to make it so I can change the shows grid format back to a list format while still keeping the banner, gifs, and such in the grid format (I'm super new to CSS so I'm having a difficult time figuring out which code affects what section and I'm not sure if its possible to do so). Here is myanimelist link: https://myanimelist.net/animelist/Tapatio47 And I apologize for any inconveniences but I really appreciate any advice. You'd have to remove the one drive import which is sending the takana grid backup to your layout, then take the original layout codes at the bottom and put them into something that'd reverse the compressed codes and then manually take out whatever codes cause the grid- via trial and error with the live editor I show in other videos. That would take forever and be buggy since it is the longest code in the group out of over 1000 layouts.. but maybe there are only two or three codes that need to be removed (unlikely but who knows). It would be far easier to take the codes used for the parts you want to keep, and add them to a line style layout then modify them as needed to fit the line style (see my other videos to learn how to make your own layout for something like this). That's still hard tho and it'd be time consuming I think. |
May 21, 2021 11:42 AM
#6911
Shishio-kun said: Tapatio47 said: I have a genuine question, I recently watched your Make a Custom Layout Theme video and I was wondering how to make it so I can change the shows grid format back to a list format while still keeping the banner, gifs, and such in the grid format (I'm super new to CSS so I'm having a difficult time figuring out which code affects what section and I'm not sure if its possible to do so). Here is myanimelist link: https://myanimelist.net/animelist/Tapatio47 And I apologize for any inconveniences but I really appreciate any advice. You'd have to remove the one drive import which is sending the takana grid backup to your layout, then take the original layout codes at the bottom and put them into something that'd reverse the compressed codes and then manually take out whatever codes cause the grid- via trial and error with the live editor I show in other videos. That would take forever and be buggy since it is the longest code in the group out of over 1000 layouts.. but maybe there are only two or three codes that need to be removed (unlikely but who knows). It would be far easier to take the codes used for the parts you want to keep, and add them to a line style layout then modify them as needed to fit the line style (see my other videos to learn how to make your own layout for something like this). That's still hard tho and it'd be time consuming I think. Appreciate the feedback, I'll see if either of those methods work (time crunching isn't something I'm too worried about). If I end up getting stuck or give up, I'll probably try to find another pre-made layout that might be similar to what I want for my list. |
May 21, 2021 3:18 PM
#6912
Hello! I've got 2 questions. My list is: https://myanimelist.net/animelist/Ghetza and the style I have is this one: https://pastebin.com/raw/gigyMZwF (Grid Style 1). 1. The border going around the animes in the list is not going all the way down. I've tried looking for it in the code, but I can't find it. I think it should move itself so that I don't need to fix it every time I add more animes on the list. I'll attach a screenshot so it's easier to understand. https://i.imgur.com/TMxL3Jq.png 2. I watched the video about changing the font and in the video the code was really well placed and easy to read, the one I have is line after line and it's kind of hard to read near the end where the code for the font should be. Is there a way to find it faster or do I just need to search harder for it? |
May 21, 2021 5:08 PM
#6913
Ghetza said: Hello! I've got 2 questions. My list is: https://myanimelist.net/animelist/Ghetza and the style I have is this one: https://pastebin.com/raw/gigyMZwF (Grid Style 1). 1. The border going around the animes in the list is not going all the way down. I've tried looking for it in the code, but I can't find it. I think it should move itself so that I don't need to fix it every time I add more animes on the list. I'll attach a screenshot so it's easier to understand. https://i.imgur.com/TMxL3Jq.png 2. I watched the video about changing the font and in the video the code was really well placed and easy to read, the one I have is line after line and it's kind of hard to read near the end where the code for the font should be. Is there a way to find it faster or do I just need to search harder for it? I sent an update for the first thing, so I think it looks fine now. I don't think much else can be done but this is the code I used. .list-unit { padding-bottom: 150px; } For the second thing, we had to compress the CSS at the bottom for more room for extensions and other customizations, but if you go to the bottom and copy the line under Original Layout into this decompresser https://mrcoles.com/blog/css-unminify/ you can search the original layout for the code you want. |
May 22, 2021 4:23 AM
#6914
Thanks a lot. I solved the second problem and that decompresser site is really useful. I noticed, after I saved, that some icons bugged out. They appear like squares instead of what they should be. https://i.imgur.com/3SZrp6U.png (the menu thing in the top left corner) and https://i.imgur.com/Kl5r70z.png (I think it's the anime status like watching, completed, etc). |
May 22, 2021 8:00 AM
#6915
Ghetza said: Thanks a lot. I solved the second problem and that decompresser site is really useful. I noticed, after I saved, that some icons bugged out. They appear like squares instead of what they should be. https://i.imgur.com/3SZrp6U.png (the menu thing in the top left corner) and https://i.imgur.com/Kl5r70z.png (I think it's the anime status like watching, completed, etc). You probably need to add Fontawesome to fix those icons. I think I addressed that in the fonts video? Please check. |
May 22, 2021 9:17 PM
#6916
My List: https://myanimelist.net/animelist/Shishio-kun My CSS: https://pastebin.com/y3XWq4Ld Are there any ways to make the falling blossoms fade at the bottom instead of an abrupt stop (for people who want them behind the covers)? Solved with a code Valerio gave to me for banner fades --banner-fade-multiplier: 0.41; -webkit-mask: linear-gradient(to top, rgba(0,0,0,0), #000 calc(100% * var(--banner-fade-multiplier))); mask: linear-gradient(to top, rgba(0,0,0,0), #000 calc(100% * var(--banner-fade-multiplier))); Anyone know on a custom layout how do we stick the category menu (current, complete, etc) and sort menu (score, type, etc) to the page after a certain scroll time? (might stick sort on the side since I think it is possible to stick category after scrolling down since its in the default). Will look into this in the morning since it should be on more layouts... Got it, and I don't think its possible to fix sort menu after scrolling unless you fix it before scrolling. .status-menu-container.fixed { position: fixed !important; display: block !important; top: 0 !important; z-index: 10 !important; } Can anyone suggest a good color for the bars and background? I am bad with colors. Current choice seems ok to me. |
Shishio-kunMay 23, 2021 12:51 PM
May 23, 2021 8:55 AM
#6917
I don't really know how to use BBCode so I cant really send screenshots but I have all the anime in my list as a list but I want them to be in a grid how do I do that. Also how do I make the bar with Image Anime Title Score Type Progress Tags Rated Studios to the right of the screen? |
May 23, 2021 10:47 AM
#6918
SAOLover69k said: I don't really know how to use BBCode so I cant really send screenshots but I have all the anime in my list as a list but I want them to be in a grid how do I do that. Also how do I make the bar with Image Anime Title Score Type Progress Tags Rated Studios to the right of the screen? This is a basic grid CSS, part of this layout makes a grid, maybe you could isolate the codes that do it? https://myanimelist.net/forum/?topicid=1735802 Looks like all the codes under Other Codes (especially the first few sections) make it grid, or move the text into place, this gets really tricky tho and you need to be editing it with Inspect Element (I have 3 videos with it) or else it's going to be tedious af. Depending on what you're trying to do it may be best to start with this simplified grid then edit it from there. |
Shishio-kunMay 23, 2021 10:52 AM
May 24, 2021 11:42 AM
#6920
Any alternatives to Screenfly that work? MAL blocks it somehow. I want to test other resolutions but not using browser zoom. https://bluetree.ai/screenfly/ |
May 24, 2021 11:56 AM
#6921
Shishio-kun said: Any alternatives to Screenfly that work? MAL blocks it somehow. I want to test other resolutions but not using browser zoom. https://bluetree.ai/screenfly/ Responsinator. Google DevTools Device Mode. Google Resizer. Ghostlab. Browser Stack. CrossBrowserTesting. That's what I've found after searching. |
May 24, 2021 1:35 PM
#6922
Shishio-kun said: SAOLover69k said: I don't really know how to use BBCode so I cant really send screenshots but I have all the anime in my list as a list but I want them to be in a grid how do I do that. Also how do I make the bar with Image Anime Title Score Type Progress Tags Rated Studios to the right of the screen? This is a basic grid CSS, part of this layout makes a grid, maybe you could isolate the codes that do it? https://myanimelist.net/forum/?topicid=1735802 Looks like all the codes under Other Codes (especially the first few sections) make it grid, or move the text into place, this gets really tricky tho and you need to be editing it with Inspect Element (I have 3 videos with it) or else it's going to be tedious af. Depending on what you're trying to do it may be best to start with this simplified grid then edit it from there. Thanks, also quick question on css animation, how do I flip the card with image? |
May 24, 2021 3:13 PM
#6923
SAOLover69k said: Shishio-kun said: SAOLover69k said: I don't really know how to use BBCode so I cant really send screenshots but I have all the anime in my list as a list but I want them to be in a grid how do I do that. Also how do I make the bar with Image Anime Title Score Type Progress Tags Rated Studios to the right of the screen? This is a basic grid CSS, part of this layout makes a grid, maybe you could isolate the codes that do it? https://myanimelist.net/forum/?topicid=1735802 Looks like all the codes under Other Codes (especially the first few sections) make it grid, or move the text into place, this gets really tricky tho and you need to be editing it with Inspect Element (I have 3 videos with it) or else it's going to be tedious af. Depending on what you're trying to do it may be best to start with this simplified grid then edit it from there. Thanks, also quick question on css animation, how do I flip the card with image? I would rip it from a layout with it |
May 24, 2021 3:18 PM
#6924
Ghetza said: Shishio-kun said: Any alternatives to Screenfly that work? MAL blocks it somehow. I want to test other resolutions but not using browser zoom. https://bluetree.ai/screenfly/ Responsinator. Google DevTools Device Mode. Google Resizer. Ghostlab. Browser Stack. CrossBrowserTesting. That's what I've found after searching. Thanks, but unfortunately none of these worked for me (blank screens), or they want money. But Device Mode does have some useful screen sizes, not all I need, but some important ones so I should be good for now Oh and I just found they have custom sizes, this will work for me, thanks again |
Shishio-kunMay 24, 2021 3:44 PM
May 25, 2021 12:41 AM
#6925
Hey I'm having a bit of trouble with my side renders. I'm using the Grid Style 5 layout and my renders are a little too high up and I want to move them down. I tried adding height: 100%; to my render code based off another person's post but it didn't seem to change anything. Some help would be much appreciated! |
May 25, 2021 7:49 AM
#6926
ObiWanShinobi said: Hey I'm having a bit of trouble with my side renders. I'm using the Grid Style 5 layout and my renders are a little too high up and I want to move them down. I tried adding height: 100%; to my render code based off another person's post but it didn't seem to change anything. Some help would be much appreciated! The renders have space on the bottom, so you could crop them, maybe even on Imgur? Or use bottom codes instead of height to move them down: bottom: -200px; |
May 25, 2021 9:27 AM
#6927
Shishio-kun said: how do I do that?SAOLover69k said: Shishio-kun said: SAOLover69k said: I don't really know how to use BBCode so I cant really send screenshots but I have all the anime in my list as a list but I want them to be in a grid how do I do that. Also how do I make the bar with Image Anime Title Score Type Progress Tags Rated Studios to the right of the screen? This is a basic grid CSS, part of this layout makes a grid, maybe you could isolate the codes that do it? https://myanimelist.net/forum/?topicid=1735802 Looks like all the codes under Other Codes (especially the first few sections) make it grid, or move the text into place, this gets really tricky tho and you need to be editing it with Inspect Element (I have 3 videos with it) or else it's going to be tedious af. Depending on what you're trying to do it may be best to start with this simplified grid then edit it from there. Thanks, also quick question on css animation, how do I flip the card with image? I would rip it from a layout with it |
May 25, 2021 9:38 AM
#6928
SAOLover69k said: Shishio-kun said: how do I do that?SAOLover69k said: Shishio-kun said: SAOLover69k said: I don't really know how to use BBCode so I cant really send screenshots but I have all the anime in my list as a list but I want them to be in a grid how do I do that. Also how do I make the bar with Image Anime Title Score Type Progress Tags Rated Studios to the right of the screen? This is a basic grid CSS, part of this layout makes a grid, maybe you could isolate the codes that do it? https://myanimelist.net/forum/?topicid=1735802 Looks like all the codes under Other Codes (especially the first few sections) make it grid, or move the text into place, this gets really tricky tho and you need to be editing it with Inspect Element (I have 3 videos with it) or else it's going to be tedious af. Depending on what you're trying to do it may be best to start with this simplified grid then edit it from there. Thanks, also quick question on css animation, how do I flip the card with image? I would rip it from a layout with it You could find a layout with the animation, and you could ask the layout designer for the animation codes to see if they will simply get it to you, but then if they dont answer you would have to search the entire layout code for the animation codes that do that effect Learning to use Inspect Element for this makes it so much easier to find this kinda thing, see the videos on it, otherwise its going to be extremely tedious or you'll have to rely on others to get it for you |
May 25, 2021 10:56 AM
#6929
Shishio-kun said: SAOLover69k said: Shishio-kun said: SAOLover69k said: Shishio-kun said: SAOLover69k said: I don't really know how to use BBCode so I cant really send screenshots but I have all the anime in my list as a list but I want them to be in a grid how do I do that. Also how do I make the bar with Image Anime Title Score Type Progress Tags Rated Studios to the right of the screen? ok This is a basic grid CSS, part of this layout makes a grid, maybe you could isolate the codes that do it? https://myanimelist.net/forum/?topicid=1735802 Looks like all the codes under Other Codes (especially the first few sections) make it grid, or move the text into place, this gets really tricky tho and you need to be editing it with Inspect Element (I have 3 videos with it) or else it's going to be tedious af. Depending on what you're trying to do it may be best to start with this simplified grid then edit it from there. Thanks, also quick question on css animation, how do I flip the card with image? I would rip it from a layout with it You could find a layout with the animation, and you could ask the layout designer for the animation codes to see if they will simply get it to you, but then if they dont answer you would have to search the entire layout code for the animation codes that do that effect Learning to use Inspect Element for this makes it so much easier to find this kinda thing, see the videos on it, otherwise its going to be extremely tedious or you'll have to rely on others to get it for you |
May 25, 2021 12:37 PM
#6930
@SAOLover69k you didn't post anything just now, you just quoted my post |
May 25, 2021 12:38 PM
#6931
Can anyone show me a way to make the top of the image fade into transparency (in CSS or a graphic design program)? I want to do that to the steam on this https://i.imgur.com/PpJOBRQ.png Tutorials online for this are confusing af and didn't work for me made a CSS code with this thanks to @Valerio_Lyndon's banner fade code he gave us before (thanks friend) /* Banner fade effect. * min: 0 / recommended max: 1 * higher = more fading */ --banner-fade-multiplier: 1; mask: linear-gradient(to bottom, rgba(0,0,0,0), #000 calc(20% * var(--banner-fade-multiplier))); If anyone has done that in Photoshop, to a render like that, please tell me cuz I tried many online tutorials they don't work the same on a render or something...? |
Shishio-kunMay 25, 2021 1:56 PM
May 25, 2021 1:18 PM
#6932
Shishio-kun said: ObiWanShinobi said: Hey I'm having a bit of trouble with my side renders. I'm using the Grid Style 5 layout and my renders are a little too high up and I want to move them down. I tried adding height: 100%; to my render code based off another person's post but it didn't seem to change anything. Some help would be much appreciated! The renders have space on the bottom, so you could crop them, maybe even on Imgur? Or use bottom codes instead of height to move them down: bottom: -200px; This worked perfectly! Thank you very much :) |
May 25, 2021 2:57 PM
#6933
Not sure why that happened, I was just saying thank you. |
May 25, 2021 4:12 PM
#6934
SAOLover69k said: Not sure why that happened, I was just saying thank you. OK. Thanks for that :D Definitely ask the layout designers for the flip animation before trying to find it on your own, because it could be a real pain. However, on this layout, luckily, the list cards are organized in one place in between LIST CARDS and FOOTER https://lucasc.me/share/mal/theme-mirai-remix.css And that section alone would give you card flip animations, which is very good, and you could add the entire thing and get the animation possibly, but it's very hard to tell what codes alone cause the animation and how to integrate them perfectly into another layout. But its definitely any codes with rotate, animation, and transform lines at least. And from there you'd need to re-order the text on the covers (that's not so bad with Inspect Element). This is the layout https://myanimelist.net/forum/?topicid=1826033 |
Shishio-kunMay 25, 2021 4:16 PM
May 26, 2021 1:45 PM
#6935
Shishio-kun said: ThanksOK. Thanks for that :D Definitely ask the layout designers for the flip animation before trying to find it on your own, because it could be a real pain. However, on this layout, luckily, the list cards are organized in one place in between LIST CARDS and FOOTER https://lucasc.me/share/mal/theme-mirai-remix.css And that section alone would give you card flip animations, which is very good, and you could add the entire thing and get the animation possibly, but it's very hard to tell what codes alone cause the animation and how to integrate them perfectly into another layout. But its definitely any codes with rotate, animation, and transform lines at least. And from there you'd need to re-order the text on the covers (that's not so bad with Inspect Element). This is the layout https://myanimelist.net/forum/?topicid=1826033 |
May 26, 2021 9:54 PM
#6936
Edit: Sorry for mis-quote if anyone other than Shishio got a notification, was not intentional! Shishio-kun said: Can anyone show me a way to make the top of the image fade into transparency (in CSS or a graphic design program)? I want to do that to the steam on this https://i.imgur.com/PpJOBRQ.png Tutorials online for this are confusing af and didn't work for me made a CSS code with this thanks to @Valerio_Lyndon's banner fade code he gave us before (thanks friend) /* Banner fade effect. * min: 0 / recommended max: 1 * higher = more fading */ --banner-fade-multiplier: 1; mask: linear-gradient(to bottom, rgba(0,0,0,0), #000 calc(20% * var(--banner-fade-multiplier))); If anyone has done that in Photoshop, to a render like that, please tell me cuz I tried many online tutorials they don't work the same on a render or something...? Sounds like a layer mask would do exactly what you want. The easiest way to use the layer mask is with the brush tool, but you can also use gradients and other such tools to get different effects. Here's an example image and PSD with a 45 second video since it was faster than typing this all out. [PSD] |
May 29, 2021 12:13 PM
#6937
Hello there! So, I'm currently trying to do some changes to my list design, and I'd like to ask 2 questions: 1) I used a custom cursor when navigating my lists but it looks like it's only meant to be for me. Is this true? And is there a way to make the custom cursor visible to other people when they are navigating my list? Here's the code: /* FOR MORE HELP SEE HERE: http://myanimelist.net/clubs.php?cid=19736 */ /* DISTANCE OF LIST FROM TOP Increase or decrease the px amount to change the distance from the top. */ .header { padding-bottom: 10px; } /* CUSTOM BACKGROUND IMAGE SETTINGS*/ body { background-size: cover; background-attachment: fixed; } /* HEADERS AND TABLE LINK FONT */ a { color: ; font-family: arial; } /* CATEGORY HEADER FONT */ .list-unit .list-status-title .text { color: ; font-family: arial; } /* CATEGORY HEADER BACKGROUND COLOR */ .list-unit .list-status-title { background-color: ; } /* LIST LINK FONT */ .list-table .list-table-data .data a{ color: ; font-family: arial; } /* LIST NON-LINK FONT */ body{ color: ; font-family: arial; } /* TAGS EDIT FONT */ .list-table .list-table-data .tags .edit{ color: ; font-family: arial; } /* LINK COLOR ON HOVER*/ a:hover, .list-table .list-table-data .data a:hover{ color: ; } /*BACKGROUND AND BORDER COLOR OF CATEGORY LINKS The first number in the parenthesis is the amount of red (0-255). The second number in the parenthesis is the amount of green (0-255). The third number in the parenthesis is the amount of blue (0-255). The fourth number in the parenthesis is the amount of opacity (.0 to 1). Change the fourth number (opacity) to a lesser number like .3 for more transparency. Raise to a higher number like .8 for less transparency. */ .status-menu-container{ background-color: rgba(255,255,255,.8) !important; border: 1px white solid !important; } /* BACKGROUND AND BORDER COLOR OF LIST See BACKGROUND AND BORDER COLOR OF CATEGORY LINKS above for guide on using RGBA colors. */ .list-block{ background-color: rgba(255,255,255,.6) !important; border: 1px white solid !important; } /*BACKGROUND COLOR OF ROWS ON HOVER See BACKGROUND AND BORDER COLOR OF CATEGORY LINKS above for guide on using RGBA colors. */ tbody[class*="list-item"]:hover, .list-table tbody:nth-of-type(2n+1):hover {background-color:rgba(255,255,255,.5) !important;} /*OTHER CODES*/ .list-table > tbody:nth-of-type(2n+1), .list-table, .list-container, .list-table .list-table-header .header-title{ background-color: transparent !important; border: 0 transparent solid !important; } .list-table .list-table-data .data{ border: 0 transparent solid !important; } .status-menu-container { border-bottom: transparent 0 solid; } */* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/anime/ani-8/ani755.cur), auto !important;} /* End https://www.cursors-4u.com */ 2) I would like to know how to change the colors and transparency, specifically for these parts as shown is the pictures: |
May 29, 2021 12:20 PM
#6938
Orion_Gospel said: Hello there! So, I'm currently trying to do some changes to my list design, and I'd like to ask 2 questions: 1) I used a custom cursor when navigating my lists but it looks like it's only meant to be for me. Is this true? And is there a way to make the custom cursor visible to other people when they are navigating my list? Here's the code: /* FOR MORE HELP SEE HERE: http://myanimelist.net/clubs.php?cid=19736 */ /* DISTANCE OF LIST FROM TOP Increase or decrease the px amount to change the distance from the top. */ .header { padding-bottom: 10px; } /* CUSTOM BACKGROUND IMAGE SETTINGS*/ body { background-size: cover; background-attachment: fixed; } /* HEADERS AND TABLE LINK FONT */ a { color: ; font-family: arial; } /* CATEGORY HEADER FONT */ .list-unit .list-status-title .text { color: ; font-family: arial; } /* CATEGORY HEADER BACKGROUND COLOR */ .list-unit .list-status-title { background-color: ; } /* LIST LINK FONT */ .list-table .list-table-data .data a{ color: ; font-family: arial; } /* LIST NON-LINK FONT */ body{ color: ; font-family: arial; } /* TAGS EDIT FONT */ .list-table .list-table-data .tags .edit{ color: ; font-family: arial; } /* LINK COLOR ON HOVER*/ a:hover, .list-table .list-table-data .data a:hover{ color: ; } /*BACKGROUND AND BORDER COLOR OF CATEGORY LINKS The first number in the parenthesis is the amount of red (0-255). The second number in the parenthesis is the amount of green (0-255). The third number in the parenthesis is the amount of blue (0-255). The fourth number in the parenthesis is the amount of opacity (.0 to 1). Change the fourth number (opacity) to a lesser number like .3 for more transparency. Raise to a higher number like .8 for less transparency. */ .status-menu-container{ background-color: rgba(255,255,255,.8) !important; border: 1px white solid !important; } /* BACKGROUND AND BORDER COLOR OF LIST See BACKGROUND AND BORDER COLOR OF CATEGORY LINKS above for guide on using RGBA colors. */ .list-block{ background-color: rgba(255,255,255,.6) !important; border: 1px white solid !important; } /*BACKGROUND COLOR OF ROWS ON HOVER See BACKGROUND AND BORDER COLOR OF CATEGORY LINKS above for guide on using RGBA colors. */ tbody[class*="list-item"]:hover, .list-table tbody:nth-of-type(2n+1):hover {background-color:rgba(255,255,255,.5) !important;} /*OTHER CODES*/ .list-table > tbody:nth-of-type(2n+1), .list-table, .list-container, .list-table .list-table-header .header-title{ background-color: transparent !important; border: 0 transparent solid !important; } .list-table .list-table-data .data{ border: 0 transparent solid !important; } .status-menu-container { border-bottom: transparent 0 solid; } */* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/anime/ani-8/ani755.cur), auto !important;} /* End https://www.cursors-4u.com */ 2) I would like to know how to change the colors and transparency, specifically for these parts as shown is the pictures: Not sure where you got that cursor code but its not complete, yes only you can see CUR files https://myanimelist.net/forum/?topicid=1903808 There's already headings and instructions in the codes for two of those parts, did you try those and read through the code? You need to use an RGBA color as it explains. /* CATEGORY HEADER BACKGROUND COLOR */ /*BACKGROUND AND BORDER COLOR OF CATEGORY LINKS For the third outlined part I'm not sure what exactly you want to customize but maybe these will be it https://myanimelist.net/forum/?topicid=1567153 https://myanimelist.net/forum/?topicid=1862823 Read through the code and copy the side menu codes from here, /*BACKGROUND COLOR OF SIDE MENU */ etc https://pastebin.com/raw/iC2m9WYP |
May 29, 2021 12:42 PM
#6939
Valerio_Lyndon said: Edit: Sorry for mis-quote if anyone other than Shishio got a notification, was not intentional! Shishio-kun said: Can anyone show me a way to make the top of the image fade into transparency (in CSS or a graphic design program)? I want to do that to the steam on this https://i.imgur.com/PpJOBRQ.png Tutorials online for this are confusing af and didn't work for me made a CSS code with this thanks to @Valerio_Lyndon's banner fade code he gave us before (thanks friend) /* Banner fade effect. * min: 0 / recommended max: 1 * higher = more fading */ --banner-fade-multiplier: 1; mask: linear-gradient(to bottom, rgba(0,0,0,0), #000 calc(20% * var(--banner-fade-multiplier))); If anyone has done that in Photoshop, to a render like that, please tell me cuz I tried many online tutorials they don't work the same on a render or something...? Sounds like a layer mask would do exactly what you want. The easiest way to use the layer mask is with the brush tool, but you can also use gradients and other such tools to get different effects. Here's an example image and PSD with a 45 second video since it was faster than typing this all out. [PSD] OMFG THANK YOU IT FINALLY WORKED!!!! I spent hours on this before lol. How did you learn this, because no tutorials I saw use the brush which is the only thing that works for me and the other methods failed... and this method is BETTER by far (Saving settings here) |
May 29, 2021 1:03 PM
#6940
Shishio-kun said: Orion_Gospel said: Hello there! So, I'm currently trying to do some changes to my list design, and I'd like to ask 2 questions: 1) I used a custom cursor when navigating my lists but it looks like it's only meant to be for me. Is this true? And is there a way to make the custom cursor visible to other people when they are navigating my list? Here's the code: /* FOR MORE HELP SEE HERE: http://myanimelist.net/clubs.php?cid=19736 */ /* DISTANCE OF LIST FROM TOP Increase or decrease the px amount to change the distance from the top. */ .header { padding-bottom: 10px; } /* CUSTOM BACKGROUND IMAGE SETTINGS*/ body { background-size: cover; background-attachment: fixed; } /* HEADERS AND TABLE LINK FONT */ a { color: ; font-family: arial; } /* CATEGORY HEADER FONT */ .list-unit .list-status-title .text { color: ; font-family: arial; } /* CATEGORY HEADER BACKGROUND COLOR */ .list-unit .list-status-title { background-color: ; } /* LIST LINK FONT */ .list-table .list-table-data .data a{ color: ; font-family: arial; } /* LIST NON-LINK FONT */ body{ color: ; font-family: arial; } /* TAGS EDIT FONT */ .list-table .list-table-data .tags .edit{ color: ; font-family: arial; } /* LINK COLOR ON HOVER*/ a:hover, .list-table .list-table-data .data a:hover{ color: ; } /*BACKGROUND AND BORDER COLOR OF CATEGORY LINKS The first number in the parenthesis is the amount of red (0-255). The second number in the parenthesis is the amount of green (0-255). The third number in the parenthesis is the amount of blue (0-255). The fourth number in the parenthesis is the amount of opacity (.0 to 1). Change the fourth number (opacity) to a lesser number like .3 for more transparency. Raise to a higher number like .8 for less transparency. */ .status-menu-container{ background-color: rgba(255,255,255,.8) !important; border: 1px white solid !important; } /* BACKGROUND AND BORDER COLOR OF LIST See BACKGROUND AND BORDER COLOR OF CATEGORY LINKS above for guide on using RGBA colors. */ .list-block{ background-color: rgba(255,255,255,.6) !important; border: 1px white solid !important; } /*BACKGROUND COLOR OF ROWS ON HOVER See BACKGROUND AND BORDER COLOR OF CATEGORY LINKS above for guide on using RGBA colors. */ tbody[class*="list-item"]:hover, .list-table tbody:nth-of-type(2n+1):hover {background-color:rgba(255,255,255,.5) !important;} /*OTHER CODES*/ .list-table > tbody:nth-of-type(2n+1), .list-table, .list-container, .list-table .list-table-header .header-title{ background-color: transparent !important; border: 0 transparent solid !important; } .list-table .list-table-data .data{ border: 0 transparent solid !important; } .status-menu-container { border-bottom: transparent 0 solid; } */* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/anime/ani-8/ani755.cur), auto !important;} /* End https://www.cursors-4u.com */ 2) I would like to know how to change the colors and transparency, specifically for these parts as shown is the pictures: Not sure where you got that cursor code but its not complete, yes only you can see CUR files https://myanimelist.net/forum/?topicid=1903808 There's already headings and instructions in the codes for two of those parts, did you try those and read through the code? You need to use an RGBA color as it explains. /* CATEGORY HEADER BACKGROUND COLOR */ /*BACKGROUND AND BORDER COLOR OF CATEGORY LINKS For the third outlined part I'm not sure what exactly you want to customize but maybe these will be it https://myanimelist.net/forum/?topicid=1567153 https://myanimelist.net/forum/?topicid=1862823 Read through the code and copy the side menu codes from here, /*BACKGROUND COLOR OF SIDE MENU */ etc https://pastebin.com/raw/iC2m9WYP This is the website I got the custom cursor from, but too bad it only works for me The third outlined part is basically the color for the entries on my list. I do want to change the highlight color when I'm nagivating above an anime (which looks like you already helped, so thanx) but I also want to change the overall color and/or transparency. Instead of being white (as it is right now) I'd like to make it more blue-ish for example. Hopefully I made myself clear, because not only English isn't my native language, but I don't know how to name anything related with CSS etc... |
May 29, 2021 1:33 PM
#6941
@Orion_Gospel Use the cursor topic I gave you for better cursor codes everyone can see One of these might be what you're looking for otherwise you need to read through the topics and codes and use those codes and instructions. .list-table-data:hover td { background-color: rgba(0,0,255,.6) !important; } .data.image a[href*="/41457"]:before { background-color: rgba(0,0,255,.6) !important; content: ""; opacity: .2; position:absolute; display: block; width: 1060px; height: 90px; margin-left: -42px; margin-top: -10px; pointer-events: none !important; } .list-block{ background-color: rgba(0,0,255,.6) !important; } .list-table-data { background-color: rgba(0,0,255,.6) !important; } |
May 29, 2021 1:45 PM
#6942
Shishio-kun said: @Orion_Gospel Use the cursor topic I gave you for better cursor codes everyone can see One of these might be what you're looking for otherwise you need to read through the topics and codes and use those codes and instructions. .list-table-data:hover td { background-color: rgba(0,0,255,.6) !important; } .data.image a[href*="/41457"]:before { background-color: rgba(0,0,255,.6) !important; content: ""; opacity: .2; position:absolute; display: block; width: 1060px; height: 90px; margin-left: -42px; margin-top: -10px; pointer-events: none !important; } .list-block{ background-color: rgba(0,0,255,.6) !important; } .list-table-data { background-color: rgba(0,0,255,.6) !important; } I'll read and try again everything, and most likely I'll find the solutions for both of them. Thank you very much for your help! Hopefully I won't need to bother you again for this :P |
May 30, 2021 7:54 PM
#6943
Shishio-kun said: OMFG THANK YOU IT FINALLY WORKED!!!! I spent hours on this before lol. How did you learn this, because no tutorials I saw use the brush which is the only thing that works for me and the other methods failed... and this method is BETTER by far I forget exactly. I might have heard of it when looking up how to do image renders, or I might have figured it out manually after finding layer masks. It can definitely be tricky finding a good tutorial though. |
Jun 6, 2021 10:34 AM
#6944
mae08 said: can you add music to your anime list if yes, how? https://myanimelist.net/forum/?topicid=1923093 |
Jun 7, 2021 1:15 AM
#6945
Jun 7, 2021 10:13 AM
#6946
Harbinger1572 said: There's multiple background images on my list, how do I fix this? The imgur link I used only had one image ??? this is what your list looks like |
Jun 7, 2021 6:57 PM
#6947
Anyone got a solution to the blog lines? :/ https://myanimelist.net/blog.php?eid=719966 white lines The BBcode, this problem only happens on the single blog entries [img]https://i.imgur.com/T9gIvhW.png[/img][img]https://i.imgur.com/H3DqJBn.png[/img] [url=http://myanimelist.net/animelist/Shishio-kun][img]https://i.imgur.com/IDDQssP.png[/img][/url][img]https://i.imgur.com/hRJzXYs.gif[/img] [url=http://myanimelist.net/animelist/Shishio-kun][img]https://i.imgur.com/rPt4Gwb.png[/img][/url][img]https://i.imgur.com/USpoWej.gif[/img] [url=http://myanimelist.net/mangalist/Shishio-kun][img]https://i.imgur.com/2z1COZz.png[/img][/url][img]https://i.imgur.com/IRJYhaq.png[/img] [url=http://myanimelist.net/clubs.php?cid=19736][img]https://i.imgur.com/GleMIcB.png[/img][/url][img]https://i.imgur.com/27B2nlp.gif[/img] [url=http://myanimelist.net/animelist/Shishio-kun][img]https://i.imgur.com/oD44CuL.png[/img][/url][img]https://i.imgur.com/mveTdKh.gif[/img] [url=http://myanimelist.net/animelist/Shishio-kun][img]https://i.imgur.com/IKzSTwW.png[/img][/url][img]https://i.imgur.com/vw90noO.png[/img] [url=http://myanimelist.net/animelist/Shishio-kun][img]https://i.imgur.com/h4EuBmn.png[/img][/url][img]https://i.imgur.com/rVOtSOW.png[/img] [url=http://myanimelist.net/animelist/Shishio-kun][img]https://i.imgur.com/7Nh0o7d.png[/img][/url][img]https://i.imgur.com/cDdfyvd.png[/img] [url=http://myanimelist.net/animelist/Shishio-kun][img]https://i.imgur.com/u3F9EHA.png[/img][/url][img]https://i.imgur.com/ESgU7PR.png[/img] [url=http://myanimelist.net/animelist/Shishio-kun][img]https://i.imgur.com/vSHoX8v.png[/img][/url][img]https://i.imgur.com/PZRsPH0.png[/img] [url=http://myanimelist.net/animelist/Shishio-kun][img]https://i.imgur.com/XuoAdE4.png[/img][/url][img]https://i.imgur.com/1NxO247.png[/img] [img]https://i.imgur.com/S8Sd7OL.png[/img] |
Jun 7, 2021 7:30 PM
#6948
Shishio-kun said: Harbinger1572 said: There's multiple background images on my list, how do I fix this? The imgur link I used only had one image ??? this is what your list looks like Yeah I gave up on trying to make a list lol, the background image was either blurry or had multiple images every time I tried |
Jun 7, 2021 7:54 PM
#6949
Harbinger1572 said: Shishio-kun said: Harbinger1572 said: There's multiple background images on my list, how do I fix this? The imgur link I used only had one image ??? this is what your list looks like Yeah I gave up on trying to make a list lol, the background image was either blurry or had multiple images every time I tried It could be a million different reasons why it was broken You have you post the code that was broken so we can look at it and fix it |
Jun 12, 2021 1:41 AM
#6950
Is there a code so that when I hover over an anime, it displays both the start/finish dates with the tags on top? https://imgur.com/a/GEPXkvR |
More topics from this board
Sticky: » 💚 [REPAIR STICKY] Repair/speed up a design + Request a layout fixShishio-kun - Nov 17, 2023 |
17 |
by Shishio-kun
»»
Yesterday, 9:28 AM |
|
Sticky: » [ USERSTYLES & DARK THEMES ] All MyAnimeList themesShishio-kun - Jan 28, 2023 |
19 |
by is_peque
»»
Sep 23, 12:11 AM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1222 |
by laBelphe
»»
Sep 20, 3:16 PM |
|
» [CLASSIC CSS] ⭐️Space Layout by nblur/U531355 ✨RESTORED AND UPSCALED✨Shishio-kun - Nov 17, 2023 |
7 |
by Recon911
»»
Sep 20, 4:43 AM |
|
Sticky: » 💎 Show off your latest design!Shishio-kun - Sep 16 |
2 |
by Shishio-kun
»»
Sep 18, 7:40 PM |