 Need help creating your List Design? Use this thread to ask questions or request feedback! Event Schedule Submissions: Now ~ August 24 8pm PT Voting: September 8 ~ September 19 Winners: September 25 Prizes Three winners will be selected by a panel of judges and will receive: 1. An official MAL T-shirt of their choice ✨ 2. One year of MAL supporter Winning designs will be added to the available templates on the list style design, along with the creator's username and design title! Getting started This contest is open to all skill levels! If you need tips or points on where to start, check the posts below. |
KinetaSep 10, 2022 4:47 PM
| In the following posts I'll give you a beginner's explanation of how to use CSS if you need it, and I also posted many snippets of code you can add to your list to change features easily- colors, width, and images! Using these, you can makeover your list even if you are new to CSS! Short video examples are provided to help with understanding as well! If you have a question you can ask in this thread. |
Shishio-kunAug 4, 2022 11:44 AM
How does custom CSS work? (for beginners!) Custom CSS is codes you can add to your list page to restyle it. These codes only change visual stuff- colors, font type, width and height, etc. Also in CSS, every part of your list has a name (called a selector). To start a CSS code, you name a part of your list, for example, the main part of your list containing the background is known by body- and then you follow up with codes like background-color: black; to (as you probably guessed) make the background a black color! After you save custom CSS codes to the list style you're currently using on the list style page, you’ll see visual changes on your list after refreshing the page (if the codes entered were correct). See a quick video example of using the background color code: https://vimeo.com/735244393 How to use custom CSS If you want to try it yourself, click here to go to your list style page. Click the style where you have shaded the bubble next to anime (or manga if customizing the mangalist). After clicking your style, you are taken to the list customization page- click Add Custom CSS on this page to reveal the edit box. If it doesn't appear, refresh the page or close it and try clicking your style again. Copy and paste the codes below into the box. You can also change the color black to another color like red to see how it changes the background. Don't forget to save when done to see the changes! See the video example above if you need a guide. body{
background-color: black;}That’s a simple example. All the individual parts of your list have their own selector and you can add codes to them to change your list’s entire visual style in a huge variety of ways (size, position, border, opacity, etc). I'll give you some useful but simple codes to customize your list in the following sections! Also, keep in mind CSS is very different from the BBcode you might have already also used on MAL. |
| Changing List Colors You can pick the colors! I’ll give you some easy CSS snippets you can recolor a several parts of your list with! The codes have the selector for different parts of your list, and I’ll tell you what part of the list the selector changes. Click the Show buttons for the snippets and codes. Video examples are provided to help if needed. |
Shishio-kunAug 4, 2022 11:32 AM
| Changing and Adding List Images You can pick the images! Here are some simple CSS snippets to add new images on your list! The codes have the selector for different parts of your list, and I’ll tell you what part of the list the selector changes. Click the Show buttons for the snippets and codes. Video examples are provided to help if needed. |
Shishio-kunAug 4, 2022 11:33 AM
| Changing List Width You can pick the width!  |
Shishio-kunAug 4, 2022 11:34 AM
How to do more? Where do you get all these codes? If you want do more with your list and see other snippets, I'd suggest looking at my custom CSS extensions and our premade layouts donated by list designers. You can do a lot of cool changes to your list from there and even add completely new layouts (and edit them further!). https://myanimelist.net/forum/?topicid=1499059 https://myanimelist.net/forum/?topicid=1499058 For example, I have a topic on some requested ways to customize the tags on your list: https://myanimelist.net/forum/?topicid=1862308 You can see all the CSS codes that exist on the website W3schools (they have a list of all the codes you can style with). And using Inspect Element in any browser (right click the page) you can find selectors for any part of the list or page. For users who feel they have a grasp of things and want to make high-end original layouts with CSS, you should look at advanced tutorials on (1) making your own original layout, (2) seeing how Inspect Element and (3) a full detail of CSS works. https://myanimelist.net/forum/?topicid=1499059#msg63378307 |
Shishio-kunAug 4, 2022 11:50 AM
More topics from this board
» Design Contest Winners! 🎉Maki-kun - Sep 25, 2023 |
27 |
by orosan
»»
Nov 12, 2023 4:42 PM |
|
» ☀️CSS Contest w/ Custom Wallpapers 🎁 DELIVERIES COMPLETE! ( 1 2 3 4 5 ... Last Page )Shishio-kun - Sep 21, 2023 |
420 |
by Shishio-kun
»»
Nov 1, 2023 9:57 PM |
|
» ✅ Bunkasai 2023 Wrap-up: Deliveries, Feedback, and Honor Roll submissions ( 1 2 )Shishio-kun - Sep 25, 2023 |
58 |
by Shishio-kun
»»
Oct 23, 2023 7:21 PM |
|
» ⭐️Image Swap w/ Custom Signatures 🎁 DELIVERIES COMPLETE! ( 1 2 3 4 5 ... Last Page )Shishio-kun - Sep 20, 2023 |
1097 |
by HenaChuu
»»
Oct 22, 2023 2:20 PM |
|
» Seiyuu Scramble: Female Edition ( 1 2 )Maki-kun - Sep 18, 2023 |
87 |
by sosu3
»»
Oct 3, 2023 6:04 PM |