Shishio-kun said: zau said: I've tried using the "View Page Source" method to see the list but it still doesn't work, the list just becomes so scrambled. You should be able to copy the layout CSS with Inspect Element, it will be on one of the style sheets in Firefox, see the video on my channel in my signature tried this, each and every sheet and it didn't work. :^( |
Shishio-kunOct 1, 2021 12:22 PM
zau said: Shishio-kun said: I don't open up my private info I hate doing requests since I put so much effort into tutorials, but I'd do it for $300 up front and that's all you'd have to pay in total, is that fine? Ah that's a shame, that's too much for me, especially for only 3-4 changes that I wanted added to that list. A few changes can take a long time and keeps turning into more changes, taking hours so I prefer a flat rate now up front Well if you were a local company or someone on upwork or a similar site, my rate is 50$ an hour for my services in IT, but unfortunately after my past experiences dealing with individuals I ask for a flat rate up front now since individuals and small businesses are difficult to collect from because they often try to say "it didn't take that many hours" and I do not haggle or deal with BS. Try the designers in this group instead, their flat rate is much lower https://myanimelist.net/clubs.php?cid=70797 But you probably don't need to hire anyone though, if its just a few simple changes that might be something you can copy from a guide or read about, or ask about and someone can do them when they want to volunteer depending on the complexity. zau said: Shishio-kun said: You should be able to copy the layout CSS with Inspect Element, it will be on one of the style sheets in Firefox, see the video on my channel in my signature tried this, each and every sheet and it didn't work. :^( Her layout is the one with this link https://dl.dropboxusercontent.com/s/pfdcockijwsgudi/pokemon.css  Nymph is on modern you are on classic, switch to modern and add the codes there Review the support guide for anymore problems first please, it goes over this issue in part A https://myanimelist.net/forum/?topicid=439897 |
Shishio-kunOct 1, 2021 12:23 PM
Shishio-kun said: zau said: Ah that's a shame, that's too much for me, especially for only 3-4 changes that I wanted added to that list. A few changes can take a long time and keeps turning into more changes, taking hours so I prefer a flat rate now up front Well if you were a local company or someone on upwork or a similar site, my rate is 50$ an hour for my services in IT, but unfortunately after my past experiences dealing with individuals I ask for a flat rate up front now since individuals and small businesses are difficult to collect from because they often try to say "it didn't take that many hours" and I do not haggle or deal with BS. Try the designers in this group instead, their flat rate is much lower https://myanimelist.net/clubs.php?cid=70797 But you probably don't need to hire anyone though, if its just a few simple changes that might be something you can copy from a guide or read about, or ask about and someone can do them when they want to volunteer depending on the complexity. Her layout is the one with this link https://dl.dropboxusercontent.com/s/pfdcockijwsgudi/pokemon.css Nymph is on modern you are on classic, switch to modern and add the codes there Review the support guide for anymore problems first please, it goes over this issue in part A https://myanimelist.net/forum/?topicid=439897 Dang you really helped me with a lot. Thanks dude! |
Shishio-kunOct 1, 2021 12:23 PM
@Shishio-kun you can add me to https://myanimelist.net/clubs.php?cid=70797 if you want or think I'm capable/good enough.[img align=left]https://cdn.myanimelist.net/images/userimages/335133.jpg?t=1633138800[/img][b]Username: [color=darkred]ShaggyZE[/color][/b] [b]Skills:[/b] [color=purple]List Editing(CSS)[/color], [color=green]Tampermonkey Userscripts[/color], [color=blue]Github AutoIt Scripts (Windows)[/color] [b]Contact me:[/b] Discord: [b]ShaggyZE#8815[/b] MAL Profile: http://myanimelist.net/profile/ShaggyZE Github: https://github.com/shaggyze Greasyfork: https://greasyfork.org/users/198611-shaggyze List Edits: [color=green]$5 per edit or free depending on the amount and complexity[/color] Other: [color=green]$10/H depending on the amount of work[/color] [b]Pricing for new Tampermonkey/Github scripts:[/b] I can only program basic Tampermonkey scripts for now so those will be free if I'm capable, Windows AutoIt scripts will be $10/H depending on the amount of work |
ShaggyZEOct 2, 2021 12:57 AM
| I can't figure out how I can add a search function without fucking up the whole list. I've tried asking for help everywhere but no one seems to know the solution to this, so I'm back here. What I'm trying to do is put the search button on the side here:  and make the search bar appear on top of the list, in the center. To get the search function I tried using this code : div.header { z-index: 0 !important; } .list-menu-float { z-index: -1 !important; } .status-menu-container .search-container { display: inherit !important; } .status-menu-container .search-container #search-button { position: fixed; top: 274.75px !important; left: 107px !important; } .status-menu-container .search-container { position: fixed; top: 40px; left: 630px ; z-index: 1 !important; This is without the code:  And this is the problem I get when I'm using the code:  |
zauOct 2, 2021 2:51 PM
zau said: I can't figure out how I can add a search function without fucking up the whole list. I've tried asking for help everywhere but no one seems to know the solution to this, so I'm back here. What I'm trying to do is put the search button on the side here: and make the search bar appear on top of the list, in the center. To get the search function I tried using this code : This is without the code: And this is the problem I get when I'm using the code: @Shishio-kun for a bit of context he did commission me for a few other edits as well, but I’m stuck on this one, tried messing with z-index to get search-box to show and I figure its a padding problem or footer and I’m not good enough with z-index or padding yet, magnifier and search-box appear fine though is just the list that needs lowered or hidden behind header somehow.  |
ShaggyZEOct 2, 2021 3:23 PM
ShaggyZE said: @Shishio-kun you can add me to https://myanimelist.net/clubs.php?cid=70797 if you want or think I'm capable/good enough. [img align=left]https://cdn.myanimelist.net/images/userimages/335133.jpg?t=1633138800[/img][b]Username: [color=darkred]ShaggyZE[/color][/b] [b]Skills:[/b] [color=purple]List Editing(CSS)[/color], [color=green]Tampermonkey Userscripts[/color], [color=blue]Github AutoIt Scripts (Windows)[/color] [b]Contact me:[/b] Discord: [b]ShaggyZE#8815[/b] MAL Profile: http://myanimelist.net/profile/ShaggyZE Github: https://github.com/shaggyze Greasyfork: https://greasyfork.org/users/198611-shaggyze List Edits: [color=green]$5 per edit or free depending on the amount and complexity[/color] Other: [color=green]$10/H depending on the amount of work[/color] [b]Pricing for new Tampermonkey/Github scripts:[/b] I can only program basic Tampermonkey scripts for now so those will be free if I'm capable, Windows AutoIt scripts will be $10/H depending on the amount of work Maybe later, I'm tired of adding people to that group for now because it always turned into problems later for like half the people we added being unreliable and/or creating drama and other issues which I had to clean up |
zau said: I can't figure out how I can add a search function without fucking up the whole list. I've tried asking for help everywhere but no one seems to know the solution to this, so I'm back here. What I'm trying to do is put the search button on the side here: and make the search bar appear on top of the list, in the center. To get the search function I tried using this code : div.header { z-index: 0 !important; } .list-menu-float { z-index: -1 !important; } .status-menu-container .search-container { display: inherit !important; } .status-menu-container .search-container #search-button { position: fixed; top: 274.75px !important; left: 107px !important; } .status-menu-container .search-container { position: fixed; top: 40px; left: 630px ; z-index: 1 !important; This is without the code: And this is the problem I get when I'm using the code: First of all there's a bracket missing at the bottom which ruins all codes added to the bottom. Well if you add these codes to the bottom of your current layout, you can move the container and the button. Then you can adjust the percentages and px amounts until the stuff is where you want it. You can interchange % and pixel amounts and also use absolute instead of fixed until you get your desired positions. There's many codes that have positioning that can be adjusted near the bottom Also .status-menu-container .search-container #search-button is the magnifying glass (change the numbers under this to move it) .status-menu-container .search-container is the search box but it shouldn't need to be moved, I think As for the second part of your post its not really clear to me, because it seems the problem is the list spilling out the box but I thought the problem was the position of the search box and you have all these extra codes listed for..? But you could use the search button to make a new box (the orange box) to cover the list so it looks like the original, but you need to recolor it like the background. It's all in the codes below
.status-menu-container .search-container #search-button {
position: fixed !important;
top: 330px !important;
left: 290px !important;
}
.status-menu-container .search-container #search-box {
position: fixed !important;
z-index: 10000 !important;}
.status-menu-container .search-container #search-button:before{
content: "";
background: orange !important;
height: 75px !important;
width: 100vw !important;
pointer-events: none;
left: 0;
top: 0;
position: fixed;
display: block !important;
z-index: 1 !important;
}
.list-unit .list-status-title .text{
z-index: -1 !important;
position: relative !important;
}
.status-menu-container .search-container {
position: fixed;
top: 40px;
left: 47%;
z-index: 1 !important;}
.status-menu-container .search-container {
left: 47% !important;}
Stats/filter might need this too .list-unit .list-status-title .stats a { color: #555; z-index: 0 !important; position: relative; } Should look like this, remember to add the missing bracket first and change the orange color to the background color  Personally it would look better to use the header as Nymphiae intended, you can remove the z index from the table then readd it to individual parts to move the list and links behind the header and then the search in front of the header. Remove the red color (it's useful for seeing where the search is for now). This is replacing the entire layout because something up top had to be adjusted. When you give the codes a new position than the default, you can usually control the z index more accurately. It should look like this when you scroll up and use search (you have to remove the red color part when you're done)  If you're not using it is really really REALLY recommended you watch this video so you can move stuff on your own through a live inspection; it will make everything so much easier if you just customize it in Firefox with Inspect Element. There's a similar tool in Chrome but the Firefox one is best to use first. |
Shishio-kunOct 2, 2021 6:22 PM
Shishio-kun said: Maybe later, I'm tired of adding people to that group for now because it always turned into problems later for like half the people we added being unreliable and/or creating drama and other issues which I had to clean up okay, no worries. Shishio-kun said: First of all there's a bracket missing at the bottom which ruins all codes added to the bottom. He's not going to be able to understand most of the code or even some of your explanations though he will read it and hopefully watch the video, but I will probably still end up helping him some more with it. I didn't notice he was missing a bracket so I'll upload a .css to dropbox with the entire code under my account that he can just import with 1 line to avoid this problem in the future. Shishio-kun said: As for the second part of your post its not really clear to me, because it seems the problem is the list spilling out the box but I thought the problem was the position of the search box and you have all these extra codes listed for..? But you could use the search button to make a new box (the orange box) to cover the list so it looks like the original, but you need to recolor it like the background. It's all in the codes below The problem was the list spilling out, the magnifier and search-box position were fine as I sent the codes at the bottom for positioning he may have just needed to tweak, but will look at your orange box and red box code to figure out where I messed up with z-index. Shishio-kun said: Stats/filter might need this too okay, they were working fine, but I'll check it again after I put all the css into a single file instead of just sending him bits of code at a time. I did mention in discord a few times this would be better, also I should be testing it on my own list instead of using Stylus. Shishio-kun said: Personally it would look better to use the header as Nymphiae intended, you can remove the z index from the table then readd it to individual parts to move the list and links behind the header and then the search in front of the header. Remove the red color (it's useful for seeing where the search is for now). This is replacing the entire layout because something up top had to be adjusted. I have yet to look at Nymphiae's so will do that now and recommend possible changes to @zau he's asleep now and I know he wanted it to be more minimalistic, but we'll see. Thank you so much for spending so much time going through the code and explaining the problems thoroughly as well as the tip to change background-color to help with z-index, I appreciate it as I should be able to get it working as requested now. |
ShaggyZEOct 2, 2021 7:43 PM
| @ShaggyZE cool, you should be able to do a lot with the codes left |
ShaggyZE said: Shishio-kun said: Maybe later, I'm tired of adding people to that group for now because it always turned into problems later for like half the people we added being unreliable and/or creating drama and other issues which I had to clean up okay, no worries. Shishio-kun said: First of all there's a bracket missing at the bottom which ruins all codes added to the bottom. He's not going to be able to understand most of the code or even some of your explanations though he will read it and hopefully watch the video, but I will probably still end up helping him some more with it. I didn't notice he was missing a bracket so I'll upload a .css to dropbox with the entire code under my account that he can just import with 1 line to avoid this problem in the future. Shishio-kun said: As for the second part of your post its not really clear to me, because it seems the problem is the list spilling out the box but I thought the problem was the position of the search box and you have all these extra codes listed for..? But you could use the search button to make a new box (the orange box) to cover the list so it looks like the original, but you need to recolor it like the background. It's all in the codes below The problem was the list spilling out, the magnifier and search-box position were fine as I sent the codes at the bottom for positioning he may have just needed to tweak, but will look at your orange box and red box code to figure out where I messed up with z-index. Shishio-kun said: Stats/filter might need this too okay, they were working fine, but I'll check it again after I put all the css into a single file instead of just sending him bits of code at a time. I did mention in discord a few times this would be better, also I should be testing it on my own list instead of using Stylus. Shishio-kun said: Personally it would look better to use the header as Nymphiae intended, you can remove the z index from the table then readd it to individual parts to move the list and links behind the header and then the search in front of the header. Remove the red color (it's useful for seeing where the search is for now). This is replacing the entire layout because something up top had to be adjusted. I have yet to look at Nymphiae's so will do that now and recommend possible changes to @zau he's asleep now and I know he wanted it to be more minimalistic, but we'll see. Thank you so much for spending so much time going through the code and explaining the problems thoroughly as well as the tip to change background-color to help with z-index, I appreciate it as I should be able to get it working as requested now. Yep. Many thanks to both of you!! |
| Hey so one last little thing @Shishio-kun. We figured out the search bar and the search icon but we can't seem to figure out why everyone sees the position of the search icon differently. For example, I see it near the edge of the right side of the other icons, and Shaggy sees it more to left. Another friend of mine sees it differently as well. What I want is basically for the search icon to have the same proprieties as the other icons and everyone to be able to see it in the same place, no matter the resolution of the screen. P.S. I also see its position to be very different in the "Edit Custom CSS" page than my usual "/animelist/zau" page. |
Nymphiae's uses codes like below, but i didn't even try them as the second one I don't even understand the math to, this example is from status menu top: calc(50% + 33px);
left: calc((((100% - 630px)/2) - 150px)/2); |
zau said: Hey so one last little thing @Shishio-kun. We figured out the search bar and the search icon but we can't seem to figure out why everyone sees the position of the search icon differently. For example, I see it near the edge of the right side of the other icons, and Shaggy sees it more to left. Another friend of mine sees it differently as well. What I want is basically for the search icon to have the same proprieties as the other icons and everyone to be able to see it in the same place, no matter the resolution of the screen. P.S. I also see its position to be very different in the "Edit Custom CSS" page than my usual "/animelist/zau" page. This would happen if the screen size changes and some things are centered and other things are positioned from the left or right, and if some things are positioned by % and px. The edge of the screen is a different length from the center on different screen sizes, so positioning for random parts changes. You can try to make everything more stable with all the same kind of positioning, only use px or %, and try to define all left and top definitions on anything outside of the centered stuff, etc. |
ShaggyZE said: Nymphiae's uses codes like below, but i didn't even try them as the second one I don't even understand the math to, this example is from status menu top: calc(50% + 33px);
left: calc((((100% - 630px)/2) - 150px)/2);I would Disable all custom CSS with Inspect Element Add that code to a part Experiment with it to break down the math You can usually replace these kinda positioning codes tho with something simpler |
| is their code that i can put that allows me to put different cover images or banners in the default list style |
 "Hard work is worthless for those that don’t believe in themselves" - Naruto Uzumaki |
JayDaAnimeLord said: is their code that i can put that allows me to put different cover images or banners in the default list style What do you mean exactly? Do you want the code for the banner/cover image spot, or do you want to change the banner for each category page, or...? |
Shishio-kun said: each category pageJayDaAnimeLord said: is their code that i can put that allows me to put different cover images or banners in the default list style What do you mean exactly? Do you want the code for the banner/cover image spot, or do you want to change the banner for each category page, or...? |
"Hard work is worthless for those that don’t believe in themselves" - Naruto Uzumaki |
JayDaAnimeLord said: Shishio-kun said: each category pageWhat do you mean exactly? Do you want the code for the banner/cover image spot, or do you want to change the banner for each category page, or...? Yes, you can add these codes /*CURRENTLY WATCHING BANNER To change background images: Delete what's in the parenthesis. Upload the new background to Imgur or a similar site, then copy the direct link (or Original GIF link if it's animated) and paste it into the parenthesis. Save. */ [data-query*='"status":1'] .cover-block .image-container, [data-query*='"status":1'] .cover-block { background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwJm1eOb8TWkyv3gu3BECAVc) !important; } /*COMPLETED BANNER*/ [data-query*='"status":2'] .cover-block .image-container , [data-query*='"status":2'] .cover-block{ background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwILR5rUgLcNd7kV1uIV2azE) !important; } /*ON HOLD BANNER*/ [data-query*='"status":3'] .cover-block .image-container, [data-query*='"status":3'] .cover-block { background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwMZ0D4vUFnwbES2RAjmJIak) !important; } /*DROPPED BANNER*/ [data-query*='"status":4'] .cover-block .image-container, [data-query*='"status":4'] .cover-block { background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwDxEdPucEdhGyFDBWz8osHs) !important; } /*PLANNED BANNER*/ [data-query*='"status":6'] .cover-block .image-container, [data-query*='"status":6'] .cover-block{ background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwB4u5E1Al-Wm3GygJ0sYUlE) !important; } /*ALL ANIME/MANGA BANNER*/ [data-query*='"status":7'] .cover-block .image-container, [data-query*='"status":7'] .cover-block{ background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwFGHS19EiHgdhR2LlkJE4N4) !important; } .cover-block .image-container .lazyloaded{ opacity: 0; } .cover-block{ height: 600px; } |
Shishio-kunOct 5, 2021 11:03 AM
Shishio-kun said: having to edit the height number mutliple times is quite a hassle so could i have the banner/cover image spot or is their another way i can do it without editing the heightJayDaAnimeLord said: each category page Yes, you can add these codes /*CURRENTLY WATCHING BANNER To change background images: Delete what's in the parenthesis. Upload the new background to Imgur or a similar site, then copy the direct link (or Original GIF link if it's animated) and paste it into the parenthesis. Save. */ [data-query*='"status":1'] .cover-block .image-container, [data-query*='"status":1'] .cover-block { background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwJm1eOb8TWkyv3gu3BECAVc) !important; } /*COMPLETED BANNER*/ [data-query*='"status":2'] .cover-block .image-container , [data-query*='"status":2'] .cover-block{ background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwILR5rUgLcNd7kV1uIV2azE) !important; } /*ON HOLD BANNER*/ [data-query*='"status":3'] .cover-block .image-container, [data-query*='"status":3'] .cover-block { background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwMZ0D4vUFnwbES2RAjmJIak) !important; } /*DROPPED BANNER*/ [data-query*='"status":4'] .cover-block .image-container, [data-query*='"status":4'] .cover-block { background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwDxEdPucEdhGyFDBWz8osHs) !important; } /*PLANNED BANNER*/ [data-query*='"status":6'] .cover-block .image-container, [data-query*='"status":6'] .cover-block{ background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwB4u5E1Al-Wm3GygJ0sYUlE) !important; } /*ALL ANIME/MANGA BANNER*/ [data-query*='"status":7'] .cover-block .image-container, [data-query*='"status":7'] .cover-block{ background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwFGHS19EiHgdhR2LlkJE4N4) !important; } .cover-block .image-container .lazyloaded{ opacity: 0; } .cover-block{ height: 600px; } |
"Hard work is worthless for those that don’t believe in themselves" - Naruto Uzumaki |
JayDaAnimeLord said: Shishio-kun said: having to edit the height number mutliple times is quite a hassle so could i have the banner/cover image spot or is their another way i can do it without editing the heightYes, you can add these codes /*CURRENTLY WATCHING BANNER To change background images: Delete what's in the parenthesis. Upload the new background to Imgur or a similar site, then copy the direct link (or Original GIF link if it's animated) and paste it into the parenthesis. Save. */ [data-query*='"status":1'] .cover-block .image-container, [data-query*='"status":1'] .cover-block { background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwJm1eOb8TWkyv3gu3BECAVc) !important; } /*COMPLETED BANNER*/ [data-query*='"status":2'] .cover-block .image-container , [data-query*='"status":2'] .cover-block{ background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwILR5rUgLcNd7kV1uIV2azE) !important; } /*ON HOLD BANNER*/ [data-query*='"status":3'] .cover-block .image-container, [data-query*='"status":3'] .cover-block { background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwMZ0D4vUFnwbES2RAjmJIak) !important; } /*DROPPED BANNER*/ [data-query*='"status":4'] .cover-block .image-container, [data-query*='"status":4'] .cover-block { background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwDxEdPucEdhGyFDBWz8osHs) !important; } /*PLANNED BANNER*/ [data-query*='"status":6'] .cover-block .image-container, [data-query*='"status":6'] .cover-block{ background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwB4u5E1Al-Wm3GygJ0sYUlE) !important; } /*ALL ANIME/MANGA BANNER*/ [data-query*='"status":7'] .cover-block .image-container, [data-query*='"status":7'] .cover-block{ background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwFGHS19EiHgdhR2LlkJE4N4) !important; } .cover-block .image-container .lazyloaded{ opacity: 0; } .cover-block{ height: 600px; } Those codes are the ones for that spot, along with .cover-block .image-container img Use inspect element (right click the page and see the video for it on my channel in my signature) and find the code for the section you want to use instead. You could also use background-size: cover; under each background image code to cover the entire space with the image. Your list is private so I don't really know what problem you're talking about and can't recommend a better fix |
| Are there any codes to make my list wider? especially with the anime title column. I'm trying to search in the tutorials, but I can't find one. |
何それ？意味分かんない  |
AkeZZZ said: Are there any codes to make my list wider? especially with the anime title column. I'm trying to search in the tutorials, but I can't find one. width is all you need to know, so watching Shishio-kun's inspect element video will show you how to find everything to change the width of. https://www.youtube.com/watch?v=cTGbVutdqfc you must be on a high resolution cause it already looks wide to me, but just change 1440 to whatever you need .header, .status-menu-container, .list-container, .list-status-title, .list-status-title span, .list-unit {
width: 1440px !important;
}
.list-unit .list-status-title .stats *, .list-unit .list-status-title .stats a {
float: right;
}if you need to change your font size you can do it all at once with * {
font-size: 20px !important;
} |
ShaggyZEOct 6, 2021 2:15 PM
AkeZZZ said: Are there any codes to make my list wider? especially with the anime title column. I'm trying to search in the tutorials, but I can't find one. It's very complicated to make the modern list wider so I never made a topic for it afaik, because too many parts get affected and have to be adjusted differently depending on the layout and user :/ But for you the codes would be: .list-container { width: 1361px;} .list-unit { width: 1340px; } .status-menu-container { width: 1359px;} .list-unit .list-status-title .stats { right: -159px; } .list-unit .list-status-title .text { display: block; margin-left: 200px; } You add them to the bottom of the CSS and adjust the width and px amounts from there to your liking. .stats is the stats/filter thingies. Title text is the header text (Completed etc). The other codes control different parts of the table width. There is also a tutorial on customizing individual parts of the list, you could find the code for the anime title column there, and add width codes to it. But you shouldn't need it with what I've posted :D |
Shishio-kunOct 6, 2021 6:42 PM
| @ShaggyZE @Shishio-kun Thank you, I will try to do it. |
何それ？意味分かんない |
| Hi, how can I make my "about me" profile turn from this into this here's the grapic design i made |
          "Crying is how your heart speaks, when your lips can't explain the pain you feel." |
| @notshiro17 Include the text in your graphic. The only way to have images next to text on MAL is to use align=left or align=right on image tags, but that will introduce spacing in between the images due to how MAL styles the aligned images. |
Valerio_Lyndon said: @notshiro17 Include the text in your graphic. The only way to have images next to text on MAL is to use align=left or align=right on image tags, but that will introduce spacing in between the images due to how MAL styles the aligned images. hmm, I see... yeah, I tried it myself earlier too but there's this white lines as a result, just like what you said. I guess it won't work unless I include the text in the image. So, yeah thanks for helping me out! that solved my problem, thanks! |
| "Crying is how your heart speaks, when your lips can't explain the pain you feel." |
| After a long time like every couple years for some reason my import for the thumbnails just stops working on my list despite me not editing anything at all. I don't know how to make my own imports can someone provide me a new one? It would be greatly appreciated! |
 |
shootingstar999 said: After a long time like every couple years for some reason my import for the thumbnails just stops working on my list despite me not editing anything at all. I don't know how to make my own imports can someone provide me a new one? It would be greatly appreciated! Since cover imports are third-party tools and not officially supported by MAL, they will occasionally break as MAL makes changes. This is unavoidable. Every time something breaks Shishio sends out newsletters and updates the help threads with the new methods to keep them working. There are solutions and new imports in the broken layouts thread, linked on the club front page. In your case, you probably just need to change the import from "auto" to "anime/shootingstar999". @\import "https://malscraper.azurewebsites.net/covers/anime/shootingstar999/presets/more"; If that doesn't work, check out the broken layouts thread and try some of the other solutions. |
eli_shmeli said: My HD posters for my Animelist are currently in a layer below my non-HD (original) posters. I know a way to hide the non-HD posters, but doing so means others cant see any posters when they look at my list My solution would be to use z-index, and make the non-HD posters behind the HD ones, but I can't figure out the correct element to put it in to work i would really appreciate any help. Even tho I designed my own list, I am very new to CSS You have the right idea with z-index, and you have it applied to the correct element. The only thing that needs changing is to add a non-static "position" value so that the z-index can work. .list-table .list-table-data .data.image .image {
left: initial; /* resetting property that you have elsewhere in your code because it currently does nothing, but will make things look weird once the relative position is added */
position: relative; /* use relative positioning so that z-index can work */
z-index: -1;
} |
Valerio_LyndonOct 23, 2021 9:30 AM
LGonzo said: Hello, today I wanted to modify the style of my BAD and there is a problem, the preview image is not seen when the cursor is placed over it, and I am getting frustrated because I have been trying to solve it all night and I can not. Another error I have is that the "Plan to watch" button appears below "all anime" and I don't know how to fix it either. D: Could you review it and find the error? I would appreciate it a lot, and thanks for all the posts you make about it, but it's a shame that they don't work for me MAL: https://myanimelist.net/animelist/LGonzo CSS: https://pastebin.com/HDtGJ3AS IMAGE: https://prnt.sc/1xcme2q Thank you- LGonzo. The plan to watch button is due to your font displaying the way it is. Usually the font looks very very different. Anyway, it can be solved with a "white-space" property. Add to the bottom of your CSS. .status-menu {
white-space: nowrap;
}If it oveflows off the right after that change, you can reduce the letter-spacing: .status-menu .status-button {
letter-spacing: 1px;
}As for the image, you're using the wrong cover image preset. You would probably also have to apply one of the fixes in the broken layouts thread. I don't know where you got your current cover image import, but you should remove it as it is useless: @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkafter"; Then try this one. It uses the dataimagelinkbefore preset instead, which Clarity was made to use, and specifies your username and list type as per the broken layouts thread. Add to the very top of your code. @\import "https://malscraper.azurewebsites.net/covers/anime/LGonzo/presets/dataimagelinkbefore"; You should also know you have some broken CSS near the top of your code. It doesn't seem to be affecting anything serious right now, but you should know for future reference. For one, they should be at the bottom of the code instead of the top, for two they can't have the surrounding text from the forum post as that prevents the actual code pieces from working, and for three they aren't made for Clarity and don't actually do anything. |
| @xAcTiiVe most codepen animations require HTML and/or Javascript to go with the CSS code in order to function correctly, MAL only supports CSS code. |
| @xAcTiiVe sure, you may want to make an HTML file on your pc with the codepen animation so you can record it in a larger resolution and get some gif editing software to loop it at a good start and end time so that the gif doesn't jitter and is seamless, a trick I sometimes use is to duplicate the loop and reverse it so it alternates, but it's up to you on how good you want it to look. |
xAcTiiVe said: Hello, first off i just started with CSS thanks to these awesome looking Lists that you have done. I've found some really cool looking codepen animations and i was wondering if there is a chance to import them to my list. It seems to be not that easy for a beginner, i already imported it once, but the animation took over the whole website and glitched. I appreciate every little help. Thank you! What I would do is: Record animation playing on screen with an ap- https://www.youtube.com/watch?v=4C2sDMqg8qM crop and convert to GIF, insert into layout CSS background image codes |
| alternatively, you can just use ShareX or a similar program to record the screen straight to GIF and then use ezgif.com to crop/edit/optimize it. |
ShaggyZE said: alternatively, you can just use ShareX or a similar program to record the screen straight to GIF and then use ezgif.com to crop/edit/optimize it. Ah seems like an interesting program. I usually find these long-time aps most reliable for fast and basic tasks, for example JASC animation shop, obviously Photoshop, Camtasia, and a few others. We should probably organize a bunch of useful free aps and extensions in the future like next year, we have a thread for it but I haven't looked at it in a while |
Shishio-kun said: ShaggyZE said: alternatively, you can just use ShareX or a similar program to record the screen straight to GIF and then use ezgif.com to crop/edit/optimize it. Ah seems like an interesting program. I usually find these long-time aps most reliable for fast and basic tasks, for example JASC animation shop, obviously Photoshop, Camtasia, and a few others. We should probably organize a bunch of useful free aps and extensions in the future like next year, we have a thread for it but I haven't looked at it in a while I've been using ShareX the last couple of years and it's been very helpful! You can set up some pretty detailed shortcuts. I usually press Print Screen (or Alt Print Screen for gif creation), select the region, click upload and the URL is automatically copied to my clipboard for use in my forum posts. If I wanted, I could set up a shortcut that automatically uploads to skip that menu, but I choose not to. |
| @Valerio_Lyndon wow, I'll def get it then :D |
Valerio_Lyndon said: Shishio-kun said: Ah seems like an interesting program. I usually find these long-time aps most reliable for fast and basic tasks, for example JASC animation shop, obviously Photoshop, Camtasia, and a few others. We should probably organize a bunch of useful free aps and extensions in the future like next year, we have a thread for it but I haven't looked at it in a while I've been using ShareX the last couple of years and it's been very helpful! You can set up some pretty detailed shortcuts. I usually press Print Screen (or Alt Print Screen for gif creation), select the region, click upload and the URL is automatically copied to my clipboard for use in my forum posts. If I wanted, I could set up a shortcut that automatically uploads to skip that menu, but I choose not to. yea, I have mine set up to skip that menu, the nice thing is all the options you have to upload to, I use to have it set up to one of my FTP webhost, but now have it set up to a dropbox direct link. |
| First i use for my anime list Grid Style 5 and for my manga list Clarity (Dark Window, 6 Themes) and i have a problem with the popup message which notices me if i want to discuss the chapter which ive read, heres the link https://i.imgur.com/kZTUMfN.jpg, the thing is that the text "Someone has..... chapter!" has the color black and i cant see it properly and i want to know if its a way to change the color of the text from black to white for example or the popup to look like this https://i.imgur.com/tYxLS4c.jpg for everytime I update my ep count for an anime. |
 |
JohnnyNumbuh28 said: First i use for my anime list Grid Style 5 and for my manga list Clarity (Dark Window, 6 Themes) and i have a problem with the popup message which notices me if i want to discuss the chapter which ive read, heres the link https://i.imgur.com/kZTUMfN.jpg, the thing is that the text "Someone has..... chapter!" has the color black and i cant see it properly and i want to know if its a way to change the color of the text from black to white for example or the popup to look like this https://i.imgur.com/tYxLS4c.jpg for everytime I update my ep count for an anime. Add this to the bottom of your CSS, it should work. #fancybox-inner div {
color: var(--text);
} |
Valerio_Lyndon said: JohnnyNumbuh28 said: First i use for my anime list Grid Style 5 and for my manga list Clarity (Dark Window, 6 Themes) and i have a problem with the popup message which notices me if i want to discuss the chapter which ive read, heres the link https://i.imgur.com/kZTUMfN.jpg, the thing is that the text "Someone has..... chapter!" has the color black and i cant see it properly and i want to know if its a way to change the color of the text from black to white for example or the popup to look like this https://i.imgur.com/tYxLS4c.jpg for everytime I update my ep count for an anime. Add this to the bottom of your CSS, it should work. #fancybox-inner div {
color: var(--text);
}Thx it worked. |
|
| Hello I needed some help with something I have been trying to change the colors of the status bars next to the anime titles:  \^that bar but i have no idea how to change colors for it |
 |
More topics from this board
» [CSS- MODERN] ⭐ Minimal Dashboard layout by 5cm ~ Compact and convenient! ( 1 2 3 )Shishio-kun - Sep 4, 2020 |
121 |
by Pokitaru
»»
Apr 21, 3:25 AM |
|
» [CSS-MODERN] Change list text/font colors on any list layoutShishio-kun - May 4, 2021 |
3 |
by hideso
»»
Apr 20, 4:33 PM |
|
» [CSS] [VIDEO GUIDE] ⭐️ How to change fonts on a list layoutShishio-kun - Jul 15, 2019 |
17 |
by hideso
»»
Apr 20, 4:03 PM |
|
» [CSS][Modern] ☀️ Endless Summer Layout by Cateinya ( 1 2 3 4 5 ... Last Page )Cateinya - Aug 18, 2016 |
309 |
by hideso
»»
Apr 20, 3:56 PM |
|
» [CSS - CLASSIC] Wishes of the heart ~ XXXholic layout by HahaidoShishio-kun - Dec 27, 2015 |
9 |
by tsyndi
»»
Apr 18, 9:23 PM |