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 |
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 |
 |
5tryxx_Reng3 said: Shishio-kun said: 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  |
Shishio-kun said: 5tryxx_Reng3 said: 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 |
|
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 |
| Sorry im bad in english. Something like this i want the yt list to put on top of the picture  |
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. |
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. |
| 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? |
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. |
| 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). |
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. |
| 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
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
| can you add music to your anime list if yes, how? |
 |
| 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/ |
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. |
SAOLover69k said: Shishio-kun said: 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 |
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
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; |
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 |
| @SAOLover69k you didn't post anything just now, you just quoted my post |
| 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
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
| 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] |
| 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: 2) I would like to know how to change the colors and transparency, specifically for these parts as shown is the pictures: |
 |
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: 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 |
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)  |
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: 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... |
|
| @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; } |
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 |
|
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. |
mae08 said: can you add music to your anime list if yes, how? https://myanimelist.net/forum/?topicid=1923093 |
| There's multiple background images on my list, how do I fix this? The imgur link I used only had one image |
 |
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  |
| 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] |
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 |
|
Harbinger1572 said: 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 |
More topics from this board
Sticky: » 💚 [REPAIR STICKY] Repair/speed up a design + Request a layout fixShishio-kun - Nov 17, 2023 |
15 |
by Shishio-kun
»»
5 hours ago |
|
Sticky: » [ USERSTYLES & DARK THEMES ] All MyAnimeList themesShishio-kun - Jan 28, 2023 |
19 |
by is_peque
»»
Yesterday, 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 |