These are custom layouts for modern template lists. If you don't know how to install the codes, click here to view the Beginner's Tutorial. If there are problems: install the latest version, or check the Repair Thread for patches and updates (found here). All premade modern layouts can be found in the gallery by clicking here, more ways to customize your list can be found here. What is this? We've edited Takana_no_Hana, Valario_Lyndon, and 5cm's layouts so they're easy as possible for you to convert to any custom anime theme! For example, I took Grid Style 1 and replaced the default pictures with One Piece pictures to build a One Piece layout in minutes (example in video below). The video will explain everything if you don't know how to replace pics. You can also use the default Kimi no Na wa and Seiren themes if you don't want to change them. How to install a layout and make a custom theme Settings You can use any settings you want with the grid layouts, but you must check the Images box at least or else it will appear broken. Adjust settings for your anime and manga list on this page, and make sure the Images boxes are checked: https://myanimelist.net/editprofile.php?go=listpreferences  TAKANA GRID-STYLE LAYOUTS All these grid styles are based on Takana_No_Hana's original design with many updates and changes. Takana Grid Style 1 * 1 Wallpaper * 1 Banner * 6 Customized category buttons with their own pics * 1 Render on the right side (removable) * Custom Quote on top of the banner  Source Code: Click here After you paste the code to your CSS edit box, you should change "USERNAME" in the first two imports to your username. This sharpens the quality of our preview pics. Alternate Source Takana Grid Style 2 * 1 Wallpaper * 6 Banners (one for each category page) * 6 Customized category buttons with their own pics * 1 Render on the right side (removable) * Custom Quote on top of the banner Source Code: Click here After you paste the code to your CSS edit box, you should change "USERNAME" in the first two imports to your username. This sharpens the quality of our preview pics. Alternate Source Takana Grid Style 3 * 6 Wallpapers (one for each category page) * 6 Banners (one for each category page) * 6 Customized category buttons with their own pics * 1 Render on the right side (removable) * Custom Quote on top of the banner Source Code: Click here After you paste the code to your CSS edit box, you should change "USERNAME" in the first two imports to your username. This sharpens the quality of our preview pics. Alternate Source Takana Grid Style 4 * 6 Wallpapers (one for each category page) * 6 Banners (one for each category page) * 6 Customized category buttons with their own pics * 2 Renders on the sides (removable) * Custom Quote on top of the banner Source Code: Click here After you paste the code to your CSS edit box, you should change "USERNAME" in the first two imports to your username. This sharpens the quality of our preview pics. Alternate Source Takana Grid Style 5 * 6 Wallpapers (one for each category page) * 6 Banners (one for each category page) * 6 Customized category buttons with their own pics * 12 Renders on the sides (two for each page, removable) * Custom Quote on top of the banner Source Code: Click here After you paste the code to your CSS edit box, you should change "USERNAME" in the first two imports to your username. This sharpens the quality of our preview pics. Alternate Source Backup and Legacy Codes Customizing Takana Grid-style Layouts More features for Grid-style layouts  Add the codes for the extensions you want to the bottom of the CSS. |
Shishio-kunMar 20, 2023 8:49 PM
CLARITY LAYOUTS I've modded Valerio_Lyndon's popular Clarity layout so you could quickly change the background and banner images for each page, use side renders, and change the banner text, including on every individual category (use the 6 themes for that). Plus, you can change the colors with the codes at the bottom. You can add extensions from the bottom of this post, or the official Clarity page (which has more extensions!). Clarity (Light, 1 Theme) * 1 Wallpaper (off by default) * 1 Banner * 2 Renders on the sides (removable) * Custom Text on the banner  Source Code : Click here Important, Read: Change "Username" in the top two imports to your username for preview pics on hover. Clarity (Light, 6 Themes) * 6 Wallpapers (off by default, one for each category page) * 6 Banners (one for each category page) * 12 Renders on the sides (removable, two per category page) * Custom Text on each banner Source Code : Click here Important, Read: Change "Username" in the top two imports to your username for preview pics on hover. Clarity (Dark, 1 Theme) * 1 Wallpaper (off by default) * 1 Banner * 2 Renders on the sides (removable) * Custom Text on each banner  Source Code : Click here Important, Read: Change "Username" in the top two imports to your username for preview pics on hover. Clarity (Dark, 6 Themes) * 6 Wallpapers (off by default, one for each category page) * 6 Banners (one for each category page) * 12 Renders on the sides (removable, two per category page) * Custom Text on each banner Source Code : Click here Clarity (Dark and Transparent, 1 Theme) * 1 Wallpaper * 1 Banner * 2 Renders on the sides (off by default) * Custom Text on each banner  Source Code : Click here Important, Read: Change "Username" in the top two imports to your username for preview pics on hover. Clarity (Dark and Transparent, 6 Themes) * 6 Wallpapers (one for each category page) * 6 Banners (one for each category page) * 12 Renders on the sides (off by default, two per category page) * Custom Text on each banner Source Code : Click here Important, Read: Change "Username" in the top two imports to your username for preview pics on hover. How to customize Clarity layouts Extensions and more list customization  Add the codes for the extensions you want to the bottom of the CSS. |
Shishio-kunMar 25, 2023 9:50 AM
5cm GRID-STYLE LAYOUTS Originally made by the genius designer 5cm. I've added many new features, updates, and animations. This layout has a banner like Clarity but shows anime info when you point to the preview pics as in the example below: You can change the background images in the banners/wallpapers/animation same as in other layouts. Colors and quotes can be changed too. Shinobu Layout  Source Code Attack on Titan Layout  Source Code Hisoka Layout (Opera GX Colors)  Source Code Ecchi Beach Layouts Source Codes Water and Sun Breathing Layout  Source Code Default Layouts  Source Codes Customizing the Layout and Animations after installing How to Add Decimal Scores Extensions and more list customization  Add the codes for the extensions you want to the bottom of the CSS. |
Shishio-kunMar 14, 2023 6:52 PM
TAKANA LINE-STYLE LAYOUTS These are based on line-style designs originally by Takana_no_Hana. Takana Line Style Simple * 1 Wallpaper * Custom Quote on top of the banner * Custom table and row hover color * Big preview pic on row hover  Source Code Click here for the code Alternate Link Important, Read: Change "Username" in the top two imports to your username for preview pics on hover. Takana Line Style 2 * 1 Wallpaper * 1 Banner * Custom Quote on top of the banner * Custom table and row hover color * Big preview pic on row hover Source Code Click here for the code Alternate Link Important, Read: Change "Username" in the top two imports to your username for preview pics on hover. Takana Line Style 3 * 6 Wallpapers (one for each category page) * Custom Quote on top of the banner * Custom table and row hover color * Big preview pic on row hover Source Code Click here for the code Alternate Link Important, Read: Change "Username" in the top two imports to your username for preview pics on hover. Takana Line Style 4 * 6 Wallpapers (one for each category page) * 1 Banner * Custom Quote on top of the banner * Custom table and row hover color * Big preview pic on row hover Source Code Click here for the code Alternate Link Important, Read: Change "Username" in the top two imports to your username for preview pics on hover. Takana Line Style 5 * 6 Wallpapers (one for each category page) * 6 Banners (one for each category page) * Custom Quote on top of the banner * Custom table and row hover color * Big preview pic on row hover Source Code Click here for the code Alternate Link Important, Read: Change "Username" in the top two imports to your username for preview pics on hover. How to customize Adding a render to the Line-Style layouts Simply add this code to the bottom of the CSS. You can change the image the same as the banners and backgrounds. Height and width are the size. Change fonts See my fonts video. You probably just need the first two minutes :D https://www.youtube.com/watch?v=5IGsUjxjwnk |
Shishio-kunMar 10, 2023 12:06 PM
Shishio-kunJun 4, 2021 1:55 PM
| Thanks you guys so much, appreciate the help and fantastic work you guys have put in, have a good one :) |
| Signature removed. Please follow the signature rules, as defined in the Site & Forum Guidelines. |
| Two new layouts added, two versions of Valerio_lyndon's Clarity layout! These are super simple to change the pics for and the table colors too. |
| Awesome Video BTW |
 |
ParadiseSukai said: Awesome Video BTW Thanks! I appreciate that a lot!!! |
| I just found this thread yesterday and started playing around with the Grid Style Layout, pretty happy how it turned out so big thanks for the contribution and also the video explaining it. Just a note for people who want to use the Layout, there is another picture that is not mentioned in the video I think, and that is the background image for the "Filters" Window (top right on your list). To change that you have to scroll down a bit in the CSS code and find the background-image link in the very first #advanced-options block. |
 |
GreeenSponge said: I just found this thread yesterday and started playing around with the Grid Style Layout, pretty happy how it turned out so big thanks for the contribution and also the video explaining it. Just a note for people who want to use the Layout, there is another picture that is not mentioned in the video I think, and that is the background image for the "Filters" Window (top right on your list). To change that you have to scroll down a bit in the CSS code and find the background-image link in the very first #advanced-options block. Thank you! And nice sig :D |
| I viewed the coding of grid style 3.......and i saw you added gif images in those banners... So did you reduce the size of the gif or was it the same..... Sorry i didnt watch the complete video cuz am in a hurry.....sorry if i missed something. |
 |
SMDG said: I viewed the coding of grid style 3.......and i saw you added gif images in those banners... So did you reduce the size of the gif or was it the same..... Sorry i didnt watch the complete video cuz am in a hurry.....sorry if i missed something. I don't really follow what you're saying- but you should be able to do what I did with a GIF in the video to use GIFs on yours. I think the layout resizes them automatically with codes but you can also lower the size with EZGif |
Shishio-kun said: SMDG said: I viewed the coding of grid style 3.......and i saw you added gif images in those banners... So did you reduce the size of the gif or was it the same..... Sorry i didnt watch the complete video cuz am in a hurry.....sorry if i missed something. I don't really follow what you're saying- but you should be able to do what I did with a GIF in the video to use GIFs on yours. I think the layout resizes them automatically with codes but you can also lower the size with EZGif Oh sorry English is not my native language, But thanks i got what u just said!! Ill try this. |
|
| Just wanted to note that for the Grid Style that has 2 renders on one page, if you have a render image that is tall, like this one, then it doesn't work correctly and shows up like this in your layout. The solution is to manually crop the render/or increase canvas size in photoshop or similar program, so it has some space around your image on the sides. After that, it shows up correctly in the layout! Just to make sure it works I had it cropped in the same aspect ratio as the example renders in the layout, which is 9:7. Here is how to do it the easiest way in photoshop! If you do it this way, the picture will be in the center and you won't have to change it's position in the layout code! Hope it saves time for anyone having this problem! |
Narushisto said: Just wanted to note that for the Grid Style that has 2 renders on one page, if you have a render image that is tall, like this one, then it doesn't work correctly and shows up like this in your layout. The solution is to manually crop the render/or increase canvas size in photoshop or similar program, so it has some space around your image on the sides. After that, it shows up correctly in the layout! Just to make sure it works I had it cropped in the same aspect ratio as the example renders in the layout, which is 9:7. Here is how to do it the easiest way in photoshop! If you do it this way, the picture will be in the center and you won't have to change it's position in the layout code! Hope it saves time for anyone having this problem! Thanks for using our edits and the info :D I wonder if I can fix that problem in the original code somehow D: |
| So I copied the code of Grid 5 of kimi no na wa style list , I dont know why but it looks a bit different when compared to the layout you posted Here's what it looks like for me https://imgur.com/yaaraH2 Kurisu's figure is coming in front of the anime posters pics , how to reduce the size of the layout so that the anime characters and the layout dont overlap? Or maybe a way to reduce the poster sizes? |
ccbestgirl1411Apr 9, 2019 6:42 AM
 |
Steiner1411 said: To change the render's width, look through your CSS and find the "RENDERS" section. It should be near the top. You can then modify the various lines that say "width: 50%" to different numbers. 40%, for instance. The reason there are so many different values is for all the separate renders on each category page.So I copied the code of Grid 5 of kimi no na wa style list , I dont know why but it looks a bit different when compared to the layout you posted Here's what it looks like for me https://imgur.com/yaaraH2 Kurisu's figure is coming in front of the anime posters pics , how to reduce the size of the layout so that the anime characters and the layout dont overlap? Or maybe a way to reduce the poster sizes? To change the list width, add this to the bottom of your code then change the "width: 60vw" number underneath each respective label same as you did the renders. It can be anything from 0vw to 100vw. /* PATCH for render overlap */
.list-table .list-table-header {
left: 2px;
top: 80px;
margin: 0;
}
.list-table {
display: block;
min-width: calc(196px * 2);
max-width: 100%;
text-align: center;
font-size: 0;
}
.list-table > tbody {
font-size: 11px;
}
.list-item {
display: inline-block;
float: none;
}
/* Currently Watching Width */
[data-query*='status":1'] .list-table {
width: 60vw;
}
/* Completed Width */
[data-query*='status":2'] .list-table {
width: 60vw;
}
/* On Hold Width */
[data-query*='status":3'] .list-table {
width: 60vw;
}
/* Dropped Width */
[data-query*='status":4'] .list-table {
width: 60vw;
}
/* Planned Width */
[data-query*='status":6'] .list-table {
width: 60vw;
}
/* All Anime Width */
[data-query*='status":7'] .list-table {
width: 60vw;
} |
Valerio_LyndonApr 9, 2019 5:57 PM
Valerio_Lyndon said: Steiner1411 said: To change the render's width, look through your CSS and find the "RENDERS" section. It should be near the top. You can then modify the various lines that say "width: 50%" to different numbers. 40%, for instance. The reason there are so many different values is for all the separate renders on each category page.So I copied the code of Grid 5 of kimi no na wa style list , I dont know why but it looks a bit different when compared to the layout you posted Here's what it looks like for me https://imgur.com/yaaraH2 Kurisu's figure is coming in front of the anime posters pics , how to reduce the size of the layout so that the anime characters and the layout dont overlap? Or maybe a way to reduce the poster sizes? To change the list width, add this to the bottom of your code then change the "width: 60vw" number underneath each respective label same as you did the renders. It can be anything from 0vw to 100vw. /* PATCH for render overlap */
.list-table .list-table-header {
left: 2px;
top: 80px;
margin: 0;
}
.list-table {
display: block;
min-width: calc(196px * 2);
max-width: 100%;
text-align: center;
font-size: 0;
}
.list-table > tbody {
font-size: 11px;
}
.list-item {
display: inline-block;
float: none;
}
/* Currently Watching Width */
[data-query*='status":1'] .list-table {
width: 60vw;
}
/* Completed Width */
[data-query*='status":2'] .list-table {
width: 60vw;
}
/* On Hold Width */
[data-query*='status":3'] .list-table {
width: 60vw;
}
/* Dropped Width */
[data-query*='status":4'] .list-table {
width: 60vw;
}
/* Planned Width */
[data-query*='status":6'] .list-table {
width: 60vw;
}
/* All Anime Width */
[data-query*='status":7'] .list-table {
width: 60vw;
}Thank you so much! It's perfect now! |
|
BhonnaGaming said: Sorry for the late response, which layout are you referring to and which font(s) were you thinking? It's perfectly possible to change the fonts, it just takes a little bit of tweaking the CSS. I could describe the entire process if you are interested in acquiring the knowledge to do it yourself, or if it's a one-off change you wish to have made then I could just do it for you to save some time?Hello! I've been wondering a thing for a long time, is possible to change the font of all the texts that appear in this layouts? |
| Thanks for the layout! It was really easy to customize and it looks amazing. |
Shaysei said: Thanks for the layout! It was really easy to customize and it looks amazing. Thanks for letting us know :D |
KenSmiley said: It's a code priority issue. Can be fixed by either moving the theme colour section to the bottom of the code or by changing the beginning ":root" text of the colour section to "body".The video helped alot, thanks so much!! But I got a problem for the Clarity Style. I tried messing around with the rgb colors but the colors dont really seem to change. https://i.imgur.com/pCJkwG1.png What change am I expected to see from changing the Status Colors and the other ones? You may also find it useful to add the code from this spoiler to the bottom of your code. It will enable the status colours on list items to change, instead of only the header colours. |
LukPhoenix said: Hello, what do I need to do to activate start/end dates ?? Did you check it on this page and save? https://myanimelist.net/editprofile.php?go=listpreferences |
LukPhoenix said: You can add this code to the bottom of your CSS to make them work a little better. Started is now on the bottom-left, and finished is on the bottom-right.Yes, but only the start day appears and in some cases it gets overlapping numbers http://imgur.com/kHtiYja |
Valerio_Lyndon said: LukPhoenix said: You can add this code to the bottom of your CSS to make them work a little better. Started is now on the bottom-left, and finished is on the bottom-right.Yes, but only the start day appears and in some cases it gets overlapping numbers http://imgur.com/kHtiYja Cool, thanks, I'll add this to the main post! |
Valerio_Lyndon said: You can add this code to the bottom of your CSS to make them work a little better. Started is now on the bottom-left, and finished is on the bottom-right. Thanks, you help a lot |
Nashy said: How can i put render in bottom left corner if it's even possible? And can i put 2 render's in? i took the second template but i cant add another render at the left There's versions of grid with 2 renders at the bottom, but you can add these codes for a left render. You have to adjust the width and height after tho. footer:before{ left: -15%; background-image: url(http://imgur.com/gAgIkGM.png); } footer:before{ width: 50%; height: 100%; position: fixed; background-repeat: no-repeat; background-size: 100% !important; background-position:center bottom;} footer::after, footer::before { content: ""; display: block; position: fixed; bottom: 0px; background-size: 100%; pointer-events: none; z-index: 3; } |
silverzoro said: The grid layout is great but there is a problem for me. So I enabled the studio names and the start to end date but they both kind of keep overlapping on each other. Is there any way to fix that? If there is one, I'd be happy but if not I will still be fine with it though. Thanks. Pic of problem Moving your post over here. Try adding this to the bottom .list-item .data.studio { height: 53px !important; top: 172px;} |
FayZew said: Hi man ! I followed your tutorial for the anime list profile and tried with a Charlotte's theme. But it doesn't work :(. Here is the final code that I c/p in the custom CSS : https://pastebin.com/fwFPgxY1 That's what it looks in the page of customizing : http://prntscr.com/ooc2jx and That's when I upload to my anime list xd : http://prntscr.com/ooc2ui could you help me please I spent 3 hours to make that and this is not working properly :( You set your list to Classic. It has to be saved to Modern and installed there. Switch it here. https://myanimelist.net/ownlist/style These layouts won't work on classic list settings. See here in the video how I install the CSS to a modern list template https://youtu.be/cA0g4HkNLic?t=75 |
FayZew said: Much thanks it works! Nice tutorial btw now my anime list looks good thanks to you Cool it looks awesome!! :D |
Positivetech said: Hi I followed your youtube video and really loved it. I'm having 1 problem and thats the background I cant seem to figure out how to make my img's fit and not have these empty spaces. Just asking for help since its really bothering my eyes css: https://pastebin.com/FR9NHCXV the problem: https://i.imgur.com/iSmMkWk.jpg add to the bottom /* CURRENTLY WATCHING BANNER BACKGROUND */ .list-unit.watching .list-status-title:after, .list-unit.reading .list-status-title:after { background-size: cover !important; background-image: url(https://i.imgur.com/8gvAhck.jpg); height: 500px !important; } /* COMPLETED BANNER BACKGROUND */ .list-unit.completed .list-status-title:after { background-size: cover !important; background-image: url(https://i.imgur.com/C9KjowA.jpg); height: 500px !important; } /* ON-HOLD BANNER BACKGROUND */ .list-unit.onhold .list-status-title:after { background-size: cover !important; background-image: url(https://i.imgur.com/uWAj8BZ.jpg); height: 500px !important; } /* DROPPED BANNER BACKGROUND */ .list-unit.dropped .list-status-title:after { background-size: cover !important; background-image: url(https://i.imgur.com/xjVGStj.jpg); height: 500px !important; } /* PLAN TO BANNER BACKGROUND */ .list-unit.plantowatch .list-status-title:after, .list-unit.plantoread .list-status-title:after { background-size: cover !important; background-image: url(https://i.imgur.com/fN2L4U5.jpg); height: 500px !important; } /* ALL ANIME/MANGA BANNER BACKGROUND */ .list-unit.all_anime .list-status-title:after{ background-size: cover !important; background-image: url(https://i.imgur.com/8gvAhck.jpg); height: 500px !important; } |
| Some new codes were added to the original post to help you resize the banner, and also to move the preview pics down. |
| Hey there, I would like to ask if the Clarity Theme (no. 2) could be edited to remove the commas in tag sections creating a new tag bubble-function? Additionally I'd like to know if the spaces for specific elements could be widened and narrowed etc. I've made this helpful info graph to illustrate what I would like to be able to change about it. https://i.imgur.com/JrTkC3K.png Thank you -Bang. |
PoisonBang said: This will change the tag box to how you describe. You can modify the width of it by changing the number within. Add this CSS below everything else.Hey there, I would like to ask if the Clarity Theme (no. 2) could be edited to remove the commas in tag sections creating a new tag bubble-function? /* "Clarity" by Valerio Lyndon / Review Tags Modification / Revision 0.1 */
/* Raise or lower this number to change how wide the box is. Make sure not to remove the "px" at the end. */
.data.tags { width: 240px; }
.data.tags div:not(:empty){padding:2px 8px;background:var(--btn-bg);border-radius:8.5px}.data.tags span{display:inline;font-size:11px!important;cursor:text}.data.tags a:not(.edit){display:inline;padding:0;background:0 0;pointer-events:none}PoisonBang said: I can't think of why not, just let me know which ones in particular (even if it's all of them).Additionally I'd like to know if the spaces for specific elements could be widened and narrowed etc. |
| Thank you Valerio. There is still two things I'd like to ask about concerning the Clarity 2 theme, again. I would like to be able to change the color and opacity of the element that contains each anime's specific details (the image, score, tags etc.) as well as the background color for the tags which you previously assisted me with. Once again I've made a little info graph for better illustration: https://i.imgur.com/4FPXLXj.png Additionally the 2 Side Renders which are by default turned off, fail to appear for me. What I did was simply change the url(NONE) within the premade code to replace the NONE with the link for the desired png Image. Thank you for your time. - Bang |
PoisonBang said: There are a couple of ways to do this. The easiest way is to simply change the background colour of the list items. Add this to the bottom of your CSS:I would like to be able to change the color and opacity of the element that contains each anime's specific details (the image, score, tags etc.) as well as the background color for the tags which you previously assisted me with. Once again I've made a little info graph for better illustration: https://i.imgur.com/4FPXLXj.png .list-item {
background: rgba(255,255,255,0.8) !important;
} You could change it to the same colour as tags with this code: .data.number {
background: var(--btn-bg);
}Since you've figured out how to change the colour of the tags and the like, you can just add a transparency value to the colour. So for instance, #f985ff could become "#f985ff88" (half transparency) or "rgba(249,133,255,0.5)" (which is the same colour but as an RGB value). PoisonBang said: Ah, I see the issue. Add this code to fix it:Additionally the 2 Side Renders which are by default turned off, fail to appear for me. What I did was simply change the url(NONE) within the premade code to replace the NONE with the link for the desired png Image. /* ====================
Render Display Patch */
body::before {
z-index: -1;
} |
| Thank you Valerio, works like a charm. |
CubeMage said: Good question, you can change it using this code:Hi, I am using your Grid Style 4 and really like it! When changing the backgrounds, renders, and banners, I realized that I the filter window also has a custom background. However, no matter how much I searched the code, I couldn't find the appropriate code to change that background. Any help will be much appreciated /* FILTER MENU BACKGROUND */
#advanced-options {
background-image: url(https://i.imgur.com/06BJudE.jpg) !important;
} |
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 |