[CSS- CLASSIC] Fate/Stay Night premade list layout, turns your anime titles into icons that can be zoomed in!
This layout is custom CSS. If you don't know how to install it, use the easy Beginner's Tutorial in this section: http://myanimelist.net/forum/?topicid=419405 The design is intended for both anime and manga lists. For more layouts check the full list of Premade Layouts: http://myanimelist.net/forum/?topicid=318587[/b]  I took a beautiful layout posted by Ayame_chan in our donation thread and added a couple cool features to it! Now it displays your anime titles as their DVD covers in a small Icon size. I also added the perfect Saber render behind the list and an Icon Style Top Bar to better show off the background she chose. You can change the render out with your own and its coded to fit any screen size! Plus if you put your cursor on those pics they will blow up to their maximum size! Animated example below (low quality resolution since its a GIF):  How to install Install it with the code in the spoiler button at the bottom of this post. It automatically customizes the top 4500 titles with their DVD cover, but you can update it for your list if some titles aren't customized (see What to do if some of your anime titles don't get customized below). Best settings for the columns Show Column settings (with the exception of Numbers) can interfere with the DVD covers on the list. The best Show Column settings (with Numbers already checked first) are Score/Progress/Tags, Score/Progress/Type/Rating/, any four settings or less excluding Tags, or Tags with two other settings. Checking priority will only show up on Planned to Watch and counts as a column. Change your Column Settings this way: http://myanimelist.net/editprofile.php?go=listpreferences If you do uncheck Numbers, you might have to adjust the layout a little bit, see What to do if the DVD covers overlap text on your list below. What to do if some of your anime titles don't get customized with their DVD cover You'll have to update the import link at the top of the CSS with one that better matches your list. Use my tutorial: http://myanimelist.net/forum/?topicid=443333 What to do if the DVD covers overlap text on your list Check the "Best Settings" above first to see if you can adjust your columns. If you don't want those settings, go to the part in your code POSITION/SIZE OF ANIME POSTERS ON LIST and find margin-left, then lower (or raise) the px amount after it. Adjust it until the pic is in the place you want. You might want to change the change the margin-left on the next set of codes, and increase the padding right as well. How to customize this layout Use the notes in the CSS to customize this layout's pics and font colors. How to set this code for Manga Lists Replace the link at the very top of the code with this in blue and green: @import "http://dl.dropbox.com/u/49469857/MAL/premade/manga.css"; You will also need to change the images for the custom headers to ones suited for a manga list. You can post any questions you have about this layout here in this topic. The code |
Shishio-kunFeb 18, 2018 11:57 AM
| The position of the pictures is a bit off if you don't have the right columns displayed. You should hide the More link as it doesn't work anymore |
u531355 said: The position of the pictures is a bit off if you don't have the right columns displayed. You should hide the More link as it doesn't work anymore I list the best combination of column settings in the info and how to adjust the DVD pics is in there, plus its noted in the code too. But I should probably post "three" settings rather than "three or less" settings since it'd be easier to add columns than customize the layout for when you have one or two columns. Also Date Started/Finished are spacy as Tags but I barely see anyone use these. I didn't notice the more link not working anymore, hmm I guess I will remove it and fix the edit button too so it doesn't have as much a chance to end up behind the pics when you adjust the columns lol |
Shishio-kunMay 26, 2012 3:14 AM
| Is it possible to make an add-on out of the small inline DVD cover thumbnails from this design? For example, I'd really like to add just the inline title covers from the Fate/Stay design to this design: http://myanimelist.net/forum/?topicid=412713&show=0 By the way, I don't mind if the hover-and-enlarge effect from this design doesn't work when adding it to other designs. I'm mostly just a huge fan of the inline pictures. |
FauxAzn said: Is it possible to make an add-on out of the small inline DVD cover thumbnails from this design? For example, I'd really like to add just the inline title covers from the Fate/Stay design to this design: http://myanimelist.net/forum/?topicid=412713&show=0 By the way, I don't mind if the hover-and-enlarge effect from this design doesn't work when adding it to other designs. I'm mostly just a huge fan of the inline pictures. Its possible, you'll have to rip the parts of the code that make the pics (import at the top), then the parts that control the pics (POSITION/SIZE OF ANIME POSTERS ON LIST), then adjust the size and position. Also you might have to adjust the row height, but those are going to be a separate code I think. |
Shishio-kun said: FauxAzn said: Is it possible to make an add-on out of the small inline DVD cover thumbnails from this design? For example, I'd really like to add just the inline title covers from the Fate/Stay design to this design: http://myanimelist.net/forum/?topicid=412713&show=0 By the way, I don't mind if the hover-and-enlarge effect from this design doesn't work when adding it to other designs. I'm mostly just a huge fan of the inline pictures. Its possible, you'll have to rip the parts of the code that make the pics (import at the top), then the parts that control the pics (POSITION/SIZE OF ANIME POSTERS ON LIST), then adjust the size and position. Also you might have to adjust the row height, but those are going to be a separate code I think. Thank you so much! I got it! I tried it by myself before and just couldn't get the pictures inline, but setting row height to 125px definitely did the trick. |
FauxAzn said: Shishio-kun said: FauxAzn said: Is it possible to make an add-on out of the small inline DVD cover thumbnails from this design? For example, I'd really like to add just the inline title covers from the Fate/Stay design to this design: http://myanimelist.net/forum/?topicid=412713&show=0 By the way, I don't mind if the hover-and-enlarge effect from this design doesn't work when adding it to other designs. I'm mostly just a huge fan of the inline pictures. Its possible, you'll have to rip the parts of the code that make the pics (import at the top), then the parts that control the pics (POSITION/SIZE OF ANIME POSTERS ON LIST), then adjust the size and position. Also you might have to adjust the row height, but those are going to be a separate code I think. Thank you so much! I got it! I tried it by myself before and just couldn't get the pictures inline, but setting row height to 125px definitely did the trick. Good job, and your list looks freakin amazing now. |
| After I spent sometime reading through this club in order to finally get the dvd pictures into my list, I think I kinda figured out how it works and decided I'd like to make my list similar to this. I can adjust the size of the pics so it would fit my list, but there is a problem, with the margin code. I copy and paste it like this: And after I save it, it becomes this: I can not save the margin code and I don't understand why. I tested to import the whole theme on my manga list and it works there. I guessed it interferes with one of my other codes since it works in the 2nd code and tried out different versions but in the end nothing worked. |
 |
Lirina said: After I spent sometime reading through this club in order to finally get the dvd pictures into my list, I think I kinda figured out how it works and decided I'd like to make my list similar to this. I can adjust the size of the pics so it would fit my list, but there is a problem, with the margin code. I copy and paste it like this: And after I save it, it becomes this: I can not save the margin code and I don't understand why. I tested to import the whole theme on my manga list and it works there. I guessed it interferes with one of my other codes since it works in the 2nd code and tried out different versions but in the end nothing worked. Hmm first of all from what it looks like now you added #more CSS to the bottom, you need to always import this as when you have too many of these your CSS will get too long and problems happen. a[href="http://myanimelist.net/anime/6347/Baka_to_Test_to_Shoukanjuu"]{ background-image: url(http://image-upload.de/image/v5v9Gu/970877c4f6.png); background-repeat: no-repeat; background-attachment: scroll; background-position: right top; background-color: transparent; padding-bottom: 50px; padding-right: 75px !important; color: !important; position:absolute; } Sometimes margin codes disappear for some reason I don't know yet, its only happened one other time and I don't see how since they aren't normally filtered out. The way I fixed it was to take those parts that vanished and move just them to another part of the CSS (you can have multiple selectors like body). You can try that and move the missing code to the top or the bottom. You also want the stuff you originally copied from this layout at the top. Another alternative to all that is to import the entire CSS copied from the Fate layout and edit from there. Also you should leave the broken code up on your list for a few days at least or take a screenshot, its easier to fix it that way. |
| Problem solved. ^^ I just built up the code new from scratch and now there weren't any problems. |
|
Lirina said: Problem solved. ^^ I just built up the code new from scratch and now there weren't any problems. Very good job! Tho now the thumbnails are hover are little flickery on my end, you might want to adjust the sizes and area, or move the hover to the right of it while maintaining some of its area over the thumbnail. You can always post back here if you get stumped. |
Marhuto said: Thanks for this guys :) One question... I take it that there isn't a way to use both imports for anime (@import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css";) and manga (@import "http://dl.dropbox.com/u/49469857/MAL/premade/manga.css";), so that the images match both perfectly? Why would you use anime import on the manga list, you use a separate CSS for the manga list and put manga import in that. If you're using the same CSS for both lists for some reason, you can try to just add both import links and see what happens, might be fine. btw Manga can be obscure tho so it might be best to make a personal manga import too, since this import only covers 5000 most popular.. |
Shishio-kun said: Marhuto said: Thanks for this guys :) One question... I take it that there isn't a way to use both imports for anime (@import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css";) and manga (@import "http://dl.dropbox.com/u/49469857/MAL/premade/manga.css";), so that the images match both perfectly? Why would you use anime import on the manga list, you use a separate CSS for the manga list and put manga import in that. If you're using the same CSS for both lists for some reason, you can try to just add both import links and see what happens, might be fine. btw Manga can be obscure tho so it might be best to make a personal manga import too, since this import only covers 5000 most popular.. Thanks alot. I realized what I did wrong, I didn't create another list separate for the manga list. Now i'm trying to create and replace the 'Watching' image headers for 'Reading'. Do you know the name of the font? |
MarXHunterSep 30, 2012 7:12 AM
Marhuto said: Shishio-kun said: Marhuto said: Thanks for this guys :) One question... I take it that there isn't a way to use both imports for anime (@import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css";) and manga (@import "http://dl.dropbox.com/u/49469857/MAL/premade/manga.css";), so that the images match both perfectly? Why would you use anime import on the manga list, you use a separate CSS for the manga list and put manga import in that. If you're using the same CSS for both lists for some reason, you can try to just add both import links and see what happens, might be fine. btw Manga can be obscure tho so it might be best to make a personal manga import too, since this import only covers 5000 most popular.. Thanks alot. I realized what I did wrong, I didn't create another list separate for the manga list. Now i'm trying to create and replace the 'Watching' image headers for 'Reading'. Do you know the name of the font? Its not possible to extract the font name from the header so you'd have to ask Ayame but if she doesn't remember its likely Cloister Black, Kingthings, Old English or Royal. All look similar and will probably work, free to download and theres 3-D and shadow versions in case you need texture. Cooltext.com has these and can make logos too. |
Shishio-kun said: Marhuto said: Shishio-kun said: Marhuto said: Thanks for this guys :) One question... I take it that there isn't a way to use both imports for anime (@import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css";) and manga (@import "http://dl.dropbox.com/u/49469857/MAL/premade/manga.css";), so that the images match both perfectly? Why would you use anime import on the manga list, you use a separate CSS for the manga list and put manga import in that. If you're using the same CSS for both lists for some reason, you can try to just add both import links and see what happens, might be fine. btw Manga can be obscure tho so it might be best to make a personal manga import too, since this import only covers 5000 most popular.. Thanks alot. I realized what I did wrong, I didn't create another list separate for the manga list. Now i'm trying to create and replace the 'Watching' image headers for 'Reading'. Do you know the name of the font? Its not possible to extract the font name from the header so you'd have to ask Ayame but if she doesn't remember its likely Cloister Black, Kingthings, Old English or Royal. All look similar and will probably work, free to download and theres 3-D and shadow versions in case you need texture. Cooltext.com has these and can make logos too. Ayame said the font's name is 'Old English Text MT'. I'm using photoshop, so i'm good... I've already made some changes already. Ayame already had a 'Reading', so I got it... gonna make some more changes though. http://myanimelist.net/mangalist/Marhuto |
| I'm trying to use a higher resolution version of the background image https://dl.dropbox.com/u/8179377/FSN%20BG2.jpg However, it's zoomed in on the middle as you can see in my anime list. Any idea how I can fix the "zoom" on the BG? |
GyroSpinOct 2, 2012 6:31 PM
| put this in the Main Background section of your code: background-position: center bottom; and then use this version of the BG: http://i.imgur.com/wWJDx.jpg Its not as high res as your version but it should fix your problem. |
_SilenOct 2, 2012 8:17 PM
| That worked perfectly! Thank you so much! |
| Looks great. Thank you. |
 |
Eaglewing said: Hi, the link to Saber's picture isn't working anymore. I'd like to ask whether there is a way for you to change the list with a new link to this picture. Thank you in advance You can replace the saber render in the CSS it has notes that tell how. But the link has been reuploaded in this original CSS, so you can just copy and paste it again into your CSS edit box. |
demonxhalphas said: Hello! I'm pretty new to all this, so forgive me if it's obvious ^^; I've replaced the link on top with the one for the manga, but the headings are still coming out as 'Watching' and such. Is this normal? Thank you very much! It just changes the covers not the headers. |
demonxhalphas said: Shishio-kun said: demonxhalphas said: Hello! I'm pretty new to all this, so forgive me if it's obvious ^^; I've replaced the link on top with the one for the manga, but the headings are still coming out as 'Watching' and such. Is this normal? Thank you very much! It just changes the covers not the headers. Ah, I see :D Well, thank you! And thank you for making the layout also, it's really awesome ^-^ (I changed the theme though XD) Is there a place in the forum where I can request someone to make a header? I honestly have no idea how ^^; It was Ayame's layout first, I just altered and added some things. If you want new headers made for this layout request the graphics for them here: http://myanimelist.net/forum/?topicid=615429&show=0#post1 |
Marhuto said: Shishio-kun said: Marhuto said: Shishio-kun said: Marhuto said: Thanks for this guys :) One question... I take it that there isn't a way to use both imports for anime (@import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css";) and manga (@import "http://dl.dropbox.com/u/49469857/MAL/premade/manga.css";), so that the images match both perfectly? Why would you use anime import on the manga list, you use a separate CSS for the manga list and put manga import in that. If you're using the same CSS for both lists for some reason, you can try to just add both import links and see what happens, might be fine. btw Manga can be obscure tho so it might be best to make a personal manga import too, since this import only covers 5000 most popular.. Thanks alot. I realized what I did wrong, I didn't create another list separate for the manga list. Now i'm trying to create and replace the 'Watching' image headers for 'Reading'. Do you know the name of the font? Its not possible to extract the font name from the header so you'd have to ask Ayame but if she doesn't remember its likely Cloister Black, Kingthings, Old English or Royal. All look similar and will probably work, free to download and theres 3-D and shadow versions in case you need texture. Cooltext.com has these and can make logos too. Ayame said the font's name is 'Old English Text MT'. I'm using photoshop, so i'm good... I've already made some changes already. Ayame already had a 'Reading', so I got it... gonna make some more changes though. http://myanimelist.net/mangalist/Marhuto Thanks for the changes! :) |
 |
Romanov-1st said: Okay first of all this is brilliant! so i tried it out for my self, but when i load my list the "on hold" button on the side doesn't show up, i can still click on the space where it should be and it will take me to that part of my list but the button itself doesn't appear, any help/idea's guys. It looks like Imageshack deleted the pic. I replaced it in the original top post so you will have to copy and paste the CSS again to fix it, or add this to the bottom of ur CSS #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background: url("http://i43.tinypic.com/2nlbmna.jpg") repeat scroll 0 0 transparent; top: 238px; } |
| Is there a way to keep the fate battlefield background picture to stay while scrolling down to view my list? Because when I scroll down to view my list, after the background picture goes up, all I see is black after with the Saber picture still intact. Is there a way I can just keep Saber with the battlefield background while scrolling down to view my list? And is the code I pasted right? Because, for example, (and it's only happening to the on-hold link) when I click on the on-hold link, then it directs me to the on-hold page but the fate battlefield background picture doesn't load fully? It only loads to half of what the battlefield background looks like. I mean I can see Saber there, but the background battlefield image won't fully load. Why is that? Or maybe it has something to do with percentage viewing on the page? I don't know.. |
hanabiyomiMay 27, 2014 1:37 PM
 Know that there is warmth, love, happiness, kindness and peace in the world. |
| I've updated the code for this layout too, replacing some broken images. @xsapphire: It shouldn't do that, but try the new version and see if you still have the same problems |
| @Shishio: I tried the new code for the manga list and it's still the same.. But that's okay, I'll just use another layout, I've been in need of looking for a new one. ;) But thank you for helping. =) And I have just one more question, is there a code to make an anime list layout to a manga list layout? I wanted to use the Blue Exorcist layout that was already made for my manga list, but it only works for my anime list, but not my manga list because instead of saying reading, it says watching. Is there a code to change it to a manga list layout? Preview: http://i.imgur.com/ZJafSro.jpg Code: @import url(https://dl.dropboxusercontent.com/u/188037746/AdespotaAoNoExorcist.css); @import url(https://dl.dropboxusercontent.com/u/78340470/Club%20layouts/Special/topbarreduxgreenblue.css); #copyright {visibility: visible;} |
hanabiyomiAug 4, 2014 9:24 PM
Know that there is warmth, love, happiness, kindness and peace in the world. |
XsapphireblueX said: @Shishio: And I have just one more question, is there a code to make an anime list layout to a manga list layout? It has images in the code to change the headers to custom headers for an anime list. You need to change those images to ones for a manga list, and also change the import to a manga cover import if it uses covers. Or you remove the custom headers from the CSS. |
Shishio-kunAug 5, 2014 1:44 AM
| @Shishio-kun, do you have any Archer pictures by chance, that would fit in there?.. Or is there a guide how to diy? And if I wanted to change the background, what resolution should it be to fit best? I'm asking, cause my favorite character is Archer, not Saber.. And for the background, it just looks kinda too plain for me |
TheMoonServant said: @Shishio-kun, do you have any Archer pictures by chance, that would fit in there?.. Or is there a guide how to diy? And if I wanted to change the background, what resolution should it be to fit best? I'm asking, cause my favorite character is Archer, not Saber.. And for the background, it just looks kinda too plain for me The res that fits best if your computer screen res. There's tons of Archer wallpapers. You can use the "Useful Sites" links on the front page to find sites for this too. I don't have any Archer pics sorry. To replace Saber, you'd need an Archer render, which is also on the sites linked or just found thru Google Images. You'd replace the Saber render under BACKGROUND RENDER AND LOGO, the second image URL. Are you asking how to make your own Archer wallpaper? There is a guide on making wallpapers on the front page as well, but the best option may be just to find one on Google or the sites recommended. There's definitely one in your com res, even 4K! |
So, if my computer res is 1280x1024, I'd have to choose the same resolution for MAL background? But wouldn't it be different for other people? Shishio-kun said: To replace Saber, you'd need an Archer render, which is also on the sites linked or just found thru Google Images. You'd replace the Saber render under BACKGROUND RENDER AND LOGO, the second image URL. I already tried playing around with it, but they just kept getting out of control (stretching out, too big, doesn't fit and etc.) That's what I've expected, but thank you for the tip |
TheMoonServant said: So, if my computer res is 1280x1024, I'd have to choose the same resolution for MAL background? But wouldn't it be different for other people? Shishio-kun said: To replace Saber, you'd need an Archer render, which is also on the sites linked or just found thru Google Images. You'd replace the Saber render under BACKGROUND RENDER AND LOGO, the second image URL. I already tried playing around with it, but they just kept getting out of control (stretching out, too big, doesn't fit and etc.) That's what I've expected, but thank you for the tip You should choose that or a bigger one. The background is set to automatically adjust to any screen. but the best size is still your own res. However, it shouldn't matter as long as you have a wallpaper bigger than or equal to your res. If you put a render in thats too big, it should shrink down to size, its set for that too. So maybe you didn't put it in the right parenthesis? idk. You can get the ideal archer render, or one that showed too big, and post it back here and we'll set it in the layout for you |
Shishio-kun said: TheMoonServant said: So, if my computer res is 1280x1024, I'd have to choose the same resolution for MAL background? But wouldn't it be different for other people? I already tried playing around with it, but they just kept getting out of control (stretching out, too big, doesn't fit and etc.) That's what I've expected, but thank you for the tip You should choose that or a bigger one. The background is set to automatically adjust to any screen. but the best size is still your own res. However, it shouldn't matter as long as you have a wallpaper bigger than or equal to your res. If you put a render in thats too big, it should shrink down to size, its set for that too. So maybe you didn't put it in the right parenthesis? idk. You can get the ideal archer render, or one that showed too big, and post it back here and we'll set it in the layout for you Lmao, I accidently found the perfect render, seems I need some practicing to search in google... But the background seems to be something easier to do, I will try to toy around with it too and find the perfect one too! Thank you for the help! |
| It does not appear in the list of images of anime, as is the code to display? |
 |
pwassoncru said: Yo ! First, congratz for this layout, I love it :) I was wondering if it was possible to access the two scripts that we cannot access anymore in your dropbox. The two scripts are : http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css https://dl.dropboxusercontent.com/u/78340470/CSSforfoxgirls.css One of these scripts was supposed to modify the top bar, and I don't really want/have time to do this from scratch, it would be really nice if I could see what you did :) I think you have to find the proper tutorial on cover pics and add that it has the replacement for CSSforfoxgirls. https://myanimelist.net/forum/?topicid=1162203 Should be first one, do all three steps but I think you only need to do the first two Go to the topbar's topic through the CSS tutorials (Classic) stickies, or simply Google Myanimelist Topbar. The topbar replacement is there |
SteelersKc said: I try copying and pasting the CSS and replacing the old image but it still doesn't work. Only the copyright and text font work but nothing else. Your list right now is modern, this layout is classic. it won't work on the modern list. You need to install it the classic way https://myanimelist.net/forum/?topicid=419405#msg56132846 change your list from modern to classic here https://myanimelist.net/ownlist/style |
More topics from this board
» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7812 |
by mtsRhea
»»
Apr 21, 5:25 AM |
|
» [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 |