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
11828
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
11828
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
11828
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
11828
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
11828
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

» [BBCode] Font Awesome Guide

hideso - Dec 25, 2023

6 by Shishio-kun »»
Yesterday, 12:26 AM

Sticky: » 💚 [REPAIR STICKY] Repair/speed up a design + Request a layout fix

Shishio-kun - Nov 17, 2023

33 by Shishio-kun »»
Nov 25, 11:42 PM

» [CSS - Modern] 🛠️ Tweaks for lists -- Horizontal tags, descriptions, category-coloured text, accent colour, and more.

Valerio_Lyndon - Oct 24, 2019

20 by IridescentJaune »»
Nov 22, 10:58 PM

» ✳️ Bunkasai 2024 List Design and Graphic Design contests are OPEN

Shishio-kun - Nov 18

2 by Shishio-kun »»
Nov 18, 5:01 AM

Sticky: » [ SIGNATURES ~ PROFILES] All guides, generators, and templates

Shishio-kun - Feb 16, 2023

29 by floral_sacrifice »»
Nov 15, 10:24 AM
It’s time to ditch the text file.
Keep track of your anime easily by creating your own list.
Sign Up Login