Forum Settings
Forums

⚡️[VIDEOS] [CSS] How to add Modern premade layouts or backgrounds to lists

New
Apr 7, 2016 9:16 PM
#1

Offline
Feb 2010
11294
This topic is part of our Customizing your list section:
https://myanimelist.net/forum/?topicid=2077862


I'll show you how to add any premade layout to your list with preview pics and your choice of background!



Starter tutorial makes it simple for even beginners!

Post #2: Video Tutorials

Post #3: Text tutorial alternatives

Post #4: Frequently asked questions

Post #5: Where to get help and additional customization

Shishio-kunFeb 21, 2023 9:57 AM
Reply Disabled for Non-Club Members
Apr 7, 2016 9:23 PM
#2

Offline
Feb 2010
11294
Video Starter Tutorials


Apply a premade layout to Modern CSS



Youtube link:
https://www.youtube.com/watch?v=FeYbQEpf0l0


List of premade layouts:
http://myanimelist.net/forum/?topicid=1499058


How to repair a layout:
https://myanimelist.net/forum/?topicid=439897






Apply background changes, preview pics, and more to Modern CSS



Resources mentioned in video
Imgur upload page: https://imgur.com/upload
Remember after uploading, you can edit the image as I do in the video!

Topic 1 on adding HD preview pics to Modern: https://myanimelist.net/forum/?topicid=1751705
Topic 2 on adding HD preview pics to Modern: https://myanimelist.net/forum/?topicid=1751661
Modern Layouts with Preview Pics built in: https://myanimelist.net/forum/?topicid=1499058#msg45619592

For LIGHT layouts transparency code: https://pastebin.com/raw/aHP2hcFS
For DARK layouts transparency code: https://pastebin.com/raw/jmYmANsa
List of simple transparent layout templates: https://myanimelist.net/forum/?topicid=1501171

Classic Premade layouts with preview pics: https://myanimelist.net/forum/?topicid=318587#msg37396975
Topics on adding preview pics to Classic: https://myanimelist.net/forum/?topicid=1162203

Topic on fixing preview pics for Modern or Classic: https://myanimelist.net/forum/?topicid=439897

Google Images: https://images.google.com/
Waifux2: https://waifu2x.booru.pics/

Premade layout installation video: https://www.youtube.com/watch?v=FeYbQEpf0l0



CSS code mentioned for default lists:
body{
background-image: url(YOUR URL HERE);
background-size: cover;
background-attachment: fixed;
}





Shishio-kunJun 9, 2021 9:18 AM
Apr 8, 2016 12:48 AM
#3

Offline
Feb 2010
11294
Text Tutorial Alternatives


Apply a premade layout to Modern CSS




Add/change a backgrounds and banners on the Modern CSS




How to add preview pics (thumbnails, covers, etc)



Shishio-kunJan 2, 2017 6:14 PM
Jul 8, 2016 5:32 PM
#4

Offline
Feb 2010
11294
Frequently Asked Questions

Remove the default banner




MAL says my wallpaper is too big or my premade layout doesn't show uploaded backgrounds, what now?
You'll have to change the background within the premade code itself. Don't worry this is very easy and how we did it for years. Here's how:



How to change the manga list



How to add thumbnails (cover pics) to the modern style
Covered in the post above.



How to repair missing or blurry preview pics (covers)
https://myanimelist.net/forum/?topicid=439897



How to upload a new background or banner
Covered in the post above.



How to make your wallpaper cover the entire screen on all resolutions



How to switch to classic layouts
Shishio-kunOct 26, 2018 9:44 PM
Jan 2, 2017 6:09 PM
#5

Offline
Feb 2010
11294
Additional Help and and Extensions for your list

More CSS tutorials and tips, including how to find/add any code: http://myanimelist.net/forum/?topicid=1499059

Ask for help: https://myanimelist.net/forum/?topicid=200323

Image help and sources: http://myanimelist.net/forum/?topicid=504129

Graphic Design: http://myanimelist.net/forum/?topicid=419631

Tools and Tips: http://myanimelist.net/forum/?topicid=513201

Useful Downloads: http://myanimelist.net/forum/?topicid=1309867

Get Feedback: http://myanimelist.net/forum/?topicid=413691

Donate Used Works: http://myanimelist.net/forum/?topicid=393503

Show off your Latest Design: http://myanimelist.net/forum/?topicid=318547
Shishio-kunJan 2, 2017 6:12 PM
Reply Disabled for Non-Club Members

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 layout

Shishio-kun - May 4, 2021

3 by hideso »»
Apr 20, 4:33 PM

» [CSS] [VIDEO GUIDE] ⭐️ How to change fonts on a list layout

Shishio-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
It’s time to ditch the text file.
Keep track of your anime easily by creating your own list.
Sign Up Login