[CSS - CLASSIC] How to automatically change all your list's anime/manga titles into their DVD covers! (updated and working again)
This cover style uses #more CSS. This topic is part of our CSS Tutorials and Add-ons section: http://myanimelist.net/forum/?topicid=419405 You might have seem some lists that have their titles customized with their DVD covers like in the example below. I'll show you how to do this with your list no matter what kind of list it is, and you won't have to upload the pics for each title yourself- the pics come from MAL's database of DVD covers and movie posters! I'll also show you how to resize and move the pics too if you want. Note: This trick uses a #more CSS import to show the covers, and this makes your More button unusable. But most ppl don't use this anyways. Plus I'll provide you a code that removes it from view! There are other cover styles tho that keep your more button.  Step 1: Add one of these imports to the top of your CSS If you want covers for your anime list, add this to the top of your custom CSS: For the separate manga list CSS, add this to the top (don't add this to an anime list CSS!): Note: Don't add both imports to one layout code! You need to use the anime import only on an anime list and manga import only on the manga one. You will need two separate layouts for your anime and manga list, see making a separate layout for your manga list here: http://myanimelist.net/forum/?topicid=200320 Step 2: Put this code at the bottom of your list CSS. Everything in bold below also needs to be put in the top of your CSS edit box, along with any other import lines like the one from step 1. /* DISPLAY ANIME/MANGA TITLE PICS This is the CSS to control and reveal title pics. You'll need #more CSS or a import link to one in your CSS too. Got a question or want to learn more? Try this link: Change background-size from "auto" to "contain" and then adjust height to change the size of the pics. Move the pics to the left with margin-left, by adding an amount to it. */ .hide { background-size: auto; height: 310px; margin-left: 0px; background-position: left top; background-repeat: no-repeat; display: inline-block !important; margin-top: 5px; position: relative; width: 245px !important; } Step 3: Add the CSS from this link to the bottom of your list Add the codes from the link to the bottom of your CSS edit box. It removes the more button from your list, which is no longer useable when you use the above code for covers. I can't post it in the forum because it has backslashes which are not allowed to be posted in MAL's forum (but are ok in the CSS edit box). It also improves some settings for tag hover options if you use those. Otherwise, it shouldn't affect your list at all. When you save, you're all done! Now save your CSS with these additions. Check all your category pages to see how many of your titles have been customized. You should see you most or all of your titles turned into pics as in the example pic at the top of this post! I'll post info below on how you can change the size of the pics, or what to do if some of your titles don't come up customized. Extra info and FAQs What to do if some but not all, of your title pics don't show up How you can customize the size of the pics How to customize an individual title If none of your titles are customized, or the covers suddenly disappear If those tips don't bring the covers back, then the import link probably no longer works. If you're sure you entered everything right, use a generator to make your own #more CSS import (replacing the one from step 1): https://myanimelist.net/forum/?topicid=443333 |
Shishio-kunNov 5, 2018 8:28 PM
| This has been updated to working again, but you have to reinstall the new codes in the first post. |
Shishio-kunNov 6, 2014 12:39 AM
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 |