MyAnimeList.net

May 9, 2015 1:21 PM

Anime List Full-Card Layout

This design is featured in Shishio's Custom Lists & Profiles (club).

If you came here from CSS How to fill in the missing or broken covers on your layout, my Tags and Covers CSS generator tool is only briefly mentioned in this blog post. (just click the link to go to the web page for it)

Features:
* Works with MAL's advanced CSS editor
* Hover the anime title or half-cover image to expand the cover image to full
* "More" works

* The theme is matched for my own list. Most of the background and border colors are marked with comments. Change them to match your own background image.

CSS (copy/paste into the MAL advanced CSS editor):

@import "https://mal-image.appspot.com/anime/PutYourUserNameHere/?code=%5Bhref%2A%3D%22%2F%5BID%5D%2F%22%5D%3Aafter%7B+background%3A+url%28%5BIMG%5D%29%3B+%7D"; /* anime covers css file */

/******************************************************************************

Anime list card layout for the MAL advanced css editor.
2015-05-09 by BurntJelly

Cover css format:
[href*="/24833/"]:after { background: url(http://cdn.myanimelist.net/images/anime/3/69857.jpg); }

******************************************************************************/

body
{
	background: url(your background image url goes here) no-repeat top center; /* window background image */
	background-attachment: fixed;
	background-size: cover;					
	color: #FFE8FF; /* default text color */
	font-size: 11px;
	font-family: Verdana, Arial;
	background-color: #000000; /* window background color */
}

#list_surround
{
	margin: 0 auto;
	width: 80%;
	text-align: center;
}

a
{
	color: #00FFFF; /* link color */
	text-decoration: none;
}

a:hover
{
	text-decoration: underline;
}

small a,
a small
{
    color: #88BBFF; /* small link color (edit, more, tag edit) */
}

/* anime list tables (cards) */
[width="100%"]
{
	margin: 50px 20px; /* spacing between cards */
	padding: 14px;
	display: inline-block;
	height: 350px;
	position: relative;
	width: 250px;
	background: rgba(11, 0, 22, 0.8); /* background color */
	border: 1px solid #8e4eFe; /* border color */
	border-radius: 10px;
	color: #FFE8FF; /* text color */
}

/* number */
.td1:nth-of-type(1),
.td2:nth-of-type(1)
{
	display: none;
}

/* anime title */
.td1:nth-of-type(2),
.td2:nth-of-type(2)
{
    display: block;
	text-align: center;
}
/* card (anime) title */
.animetitle span
{
    background: rgba(11, 0, 22, 0.8); /* background color */
    border: 1px solid #8e4eFe; /* border color */
    border-radius: 10px;
    left: -1px;
    overflow: hidden;
    padding: 2px 6px;
    position: absolute;
    top: -30px;
    white-space: nowrap;
    width: 236px;
	font-weight: bold;
	color: #00ffff; /* title link color */
}
.animetitle:hover span
{
	text-decoration: underline;
}
/* cover image */
.animetitle:after
{
	content: "";
	display: block;
	height: 160px;
	width: 225px;
	margin: 6px 6px 0px 6px;
	background-repeat: no-repeat !important;
	background-color: rgba(11, 0, 22, 0.8) !important; /* background color */
	border-radius: 8px;
	position: absolute;
	top: 6px;
	left: 6px;
	right: 6px;
	transition: height 400ms ease 200ms;
	z-index: 10;
}
.animetitle:hover:after
{
	height: 322px;
}
/* airing */
.td1:nth-of-type(2) small,
.td2:nth-of-type(2) small
{
	left: 14px;
	position: absolute;
	top: 176px;
	font-size: 9px;
}
/* edit more links */
.td1:nth-of-type(2) div[style="float: right;"],
.td2:nth-of-type(2) div[style="float: right;"]
{
	left: 14px;
	position: absolute;
	right: 14px;
	top: 176px;
}
.td1:nth-of-type(2) div[style="float: right;"] small,
.td2:nth-of-type(2) div[style="float: right;"] small
{
	position: static;
	font-size: 9px;
}

/* score */
.td1:nth-of-type(3):before,
.td2:nth-of-type(3):before
{
    content: "Score: ";
}
.td1:nth-of-type(3),
.td2:nth-of-type(3)
{
    position: absolute;
    top: 190px;
    width: auto !important;
	text-align: left;
}

/* type */
.td1:nth-of-type(4):before,
.td2:nth-of-type(4):before
{
    content: "Type: ";
}
.td1:nth-of-type(4),
.td2:nth-of-type(4)
{
    position: absolute;
    top: 210px;
    width: auto !important;
}

/* episodes */
.td1:nth-of-type(5):before,
.td2:nth-of-type(5):before
{
    content: "Episodes: ";
}
.td1:nth-of-type(5),
.td2:nth-of-type(5)
{
    position: absolute;
    top: 190px;
	right: 14px;
    width: auto !important;
}

/* edit score/episodes */
[id^="scorediv"],
[id^="epLayer"]
{
    background: rgba(22, 0, 11, 0.8); /* background color */
	border: 1px solid #ffbbff; /* border color */
	border-radius: 4px;
    position: absolute;
    width: 100%;
    z-index: 5;
	padding: 2px;
	text-align: center;
}

/* tags */
.td1:nth-of-type(6),
.td2:nth-of-type(6)
{
    position: absolute;
    top: 230px;
	left: 14px;
	right: 14px;
	bottom: 14px;
    width: auto !important;
	overflow: auto;
	line-height: 14px;
}

/* rating */
.td1:nth-of-type(7):before,
.td2:nth-of-type(7):before
{
    content: "Rating: ";
}
.td1:nth-of-type(7),
.td2:nth-of-type(7)
{
    position: absolute;
    top: 210px;
	right: 14px;
    width: auto !important;
}

/* priority */
.td1:nth-of-type(8):before,
.td2:nth-of-type(8):before
{
    content: "Priority: ";
}
.td1:nth-of-type(8),
.td2:nth-of-type(8)
{
    position: absolute;
    top: 176px;
	right: 14px;
    width: auto !important;
	font-size: 9px;
}

/* more */
.hide
{
    margin-left: 30px;
    margin-top: -215px;
    padding: 4px;
    position: absolute;
    z-index: 15;
	width: 80%;
	min-width: 250px;
	text-align: left;
}
.hide *
{
    display: block;
    height: auto;
    width: auto;
	margin: 0px;
}
.hide a,
.hide span
{
	display: inline;
}
.hide .td1:nth-of-type(1),
.hide .td2:nth-of-type(1)
{
	display: block;
}

/* table headers */
.header_cw + [width="100%"],
.header_completed + [width="100%"],
.header_onhold + [width="100%"],
.header_dropped + [width="100%"],
.header_ptw + [width="100%"]
{
	display: block;
	width: 250px;
	height: auto;
	padding: 4px;
	margin: 0px auto;
	font-size: 9px;
}
.header_cw + [width="100%"]:before,
.header_completed + [width="100%"]:before,
.header_onhold + [width="100%"]:before,
.header_dropped + [width="100%"]:before,
.header_ptw + [width="100%"]:before
{
	content: "Sort";
	display: block;
}
.table_header:nth-of-type(1),
.table_header:nth-of-type(6)
{
    display: none;
}
.table_header
{
	display: inline-block;
	margin: 0px 4px;
	width: auto;
}
.table_header strong
{
	font-weight: normal;
}

/* status links */
[width="100%"][align="center"]
{
    height: 40px;
    margin: 7px 0px;
    padding: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: auto;
    z-index: 25;
	background: transparent;
	border: none;
	border-radius: 0px;
}
.status_selected, .status_not_selected
{
    display: inline-block;
    margin: 0 10px;
    width: auto;
}
.status_not_selected a
{
	color: #ffbbff; /* link color (current, completed, ptw, etc.) */
}
.status_selected a
{
	color: #00ffff; /* link color of selected list (current, completed, ptw, etc.) */
	font-weight: bold;
	text-decoration: underline;
}
.status_selected:nth-child(1), .status_not_selected:nth-child(1) { right: 500px; width: 130px; }
.status_selected:nth-child(2), .status_not_selected:nth-child(2) { right: 400px; width: 65px; }
.status_selected:nth-child(3), .status_not_selected:nth-child(3) { right: 300px; }
.status_selected:nth-child(4), .status_not_selected:nth-child(4) { right: 200px; }
.status_selected:nth-child(5), .status_not_selected:nth-child(5) { right: 100px; }
.status_selected:nth-child(6), .status_not_selected:nth-child(6) { right: 0px; }

/* watching completed headers */
.header_cw,
.header_completed,
.header_onhold,
.header_dropped,
.header_ptw
{
    border: 1px solid #8e4eFe !important; /* border color */
	border-radius: 10px !important;
	background: rgba(11, 0, 22, 0.8) !important; /* background color */
    display: block !important;
    height: auto !important;
    margin: 10px auto !important;
    width: 250px !important;
	text-align: center;
	position: relative !important;
}
.header_cw *,
.header_completed *,
.header_onhold *,
.header_dropped *,
.header_ptw *
{
	text-align: center;
	display: block;
	font-size: 30px;
}

/* page header */
#mal_cs_pic,
#mal_cs_listinfo,
#mal_cs_links,
#mal_cs_otherlinks
{
	position: fixed !important;
	top: 0px !important;
	background: rgba(11, 0, 22, 0.8); /* background color */
	padding: 0px 10px !important;
	border-bottom: 1px solid #8e4eFe; /* border color */
	z-index: 20;
	height: 30px !important;
	line-height: 9px;
}
#mal_cs_pic div,
#mal_cs_listinfo div,
#mal_cs_links div,
#mal_cs_otherlinks div
{
	color: #FFE8FF !important; /* text color */
}
#mal_cs_pic a,
#mal_cs_listinfo a,
#mal_cs_links a,
#mal_cs_otherlinks a
{
	color: #FFBBFF !important; /* link color */
}
#mal_cs_pic { left: 0px; width: 321px !important; }
#mal_cs_listinfo { left: 0px; width: 150px !important; border-right: 1px solid #8e4eFe !important; }
#mal_cs_links { left: 171px; border-right: 1px solid #8e4eFe !important; }
#mal_cs_otherlinks { left: 342px; right: 0px; border-right: 1px solid #8e4eFe !important; }
#mal_cs_powered { display: none; }

/* bottom stuff */
#copyright,
#grand_totals
{
	text-align: center;
	border-radius: 10px;
	background: rgba(11, 0, 22, 0.8); /* background color */
	border: 1px solid #8e4eFe; /* border color */
	margin: 2em auto !important;
	display: block;
	padding: 4px;
	width: 250px;
}
#grand_totals:before
{
	content: "Grand Totals";
	display: block;
}
#copyright:after
{
	content: "List style by BurntJelly";
	display: block;
}

MAL Tool templates:
CSS Template: "[href*="/[ID]/"]:after{ background: url([IMGURL]); }" (without quotes)
Line Matching Template: "/[ID]/" (without quotes)

Or just use this (make sure to put in YOUR user name):
https://mal-image.appspot.com/anime/BurntJelly/?code=%5Bhref%2A%3D%22%2F%5BID%5D%2F%22%5D%3Aafter%7B+background%3A+url%28%5BIMG%5D%29%3B+%7D

Alternative (simple) version:
* Works in MAL advanced CSS editor
* "More" does not work
* Blue/orange theme
* Uses more common #more* cover CSS

@import "your cover CSS url goes here";

/*
Cover CSS must be formatted as follows:
#more24833 { background-image: url(http://cdn.myanimelist.net/images/anime/3/69857.jpg); }
*/

body
{
	background: url("http://all4desktop.com/data_images/original/4222626-magic-of-universe.jpg") no-repeat top center;
	background-attachment: fixed;
	background-size: cover;					
	color: #FFFFFF;
	font-size: 11.00px;
	font-family: Verdana, Arial;
	background-color: #000000;
}

#list_surround
{
	margin: 0 auto;
	width: 80%;
	text-align: center;
}

a
{
	color: #00DDFF;
	text-decoration: none;
}

a:hover
{
	text-decoration: underline;
}

/* anime list tables */
[width="100%"]
{
	margin: 50px 50px;
	padding: 14px;
	display: inline-block;
	height: 350px;
	position: relative;
	width: 250px;
	background: rgba(0, 11, 22, 0.75);
	border: 1px solid #AA8040;
	border-radius: 10px;
	color: #ffc070;
}

/* number */
.td1:nth-of-type(1),
.td2:nth-of-type(1)
{
	display: none;
}

/* anime title */
.td1:nth-of-type(2),
.td2:nth-of-type(2)
{
	display: block;
	text-align: center;
}
.animetitle span
{
	background: rgba(0, 11, 22, 0.75);
	border: 1px solid #AA8040;
	border-radius: 10px;
	left: -1px;
	overflow: hidden;
	padding: 2px 6px;
	position: absolute;
	top: -30px;
	white-space: nowrap;
	width: 236px;
	font-weight: bold;
}
.animetitle:hover span
{
	text-decoration: underline;
}
/* airing */
.td1:nth-of-type(2) small,
.td2:nth-of-type(2) small
{
	left: 14px;
	position: absolute;
	top: 176px;
	font-size: 9px;
}
/* edit more links */
.td1:nth-of-type(2) div[style="float: right;"],
.td2:nth-of-type(2) div[style="float: right;"]
{
	left: 14px;
	position: absolute;
	right: 14px;
	top: 176px;
	color: transparent;
}
.td1:nth-of-type(2) div[style="float: right;"] small,
.td2:nth-of-type(2) div[style="float: right;"] small
{
	position: static;
	font-size: 9px;
}
[id^="xmenu"]
{
	display: none;
}

/* score */
.td1:nth-of-type(3):before,
.td2:nth-of-type(3):before
{
	content: "Score: ";
}
.td1:nth-of-type(3),
.td2:nth-of-type(3)
{
	position: absolute;
	top: 190px;
	width: auto !important;
}

/* type */
.td1:nth-of-type(4):before,
.td2:nth-of-type(4):before
{
	content: "Type: ";
}
.td1:nth-of-type(4),
.td2:nth-of-type(4)
{
	position: absolute;
	top: 210px;
	width: auto !important;
}

/* episodes */
.td1:nth-of-type(5):before,
.td2:nth-of-type(5):before
{
	content: "Episodes: ";
}
.td1:nth-of-type(5),
.td2:nth-of-type(5)
{
	position: absolute;
	top: 190px;
	right: 14px;
	width: auto !important;
}

/* tags */
.td1:nth-of-type(6),
.td2:nth-of-type(6)
{
	position: absolute;
	top: 230px;
	left: 14px;
	right: 14px;
	bottom: 14px;
	width: auto !important;
	overflow: auto;
}

/* rating */
.td1:nth-of-type(7):before,
.td2:nth-of-type(7):before
{
	content: "Rating: ";
}
.td1:nth-of-type(7),
.td2:nth-of-type(7)
{
	position: absolute;
	top: 210px;
	right: 14px;
	width: auto !important;
}

/* priority */
.td1:nth-of-type(8):before,
.td2:nth-of-type(8):before
{
	content: "Priority: ";
}
.td1:nth-of-type(8),
.td2:nth-of-type(8)
{
	position: absolute;
	top: 176px;
	right: 14px;
	width: auto !important;
	font-size: 9px;
}

/* more */
.hide
{
	border-radius: 8px;
	display: inline-block !important;
	height: 160px;
	margin-left: -291px; /* why is this off in the last column? */
	margin-top: 62px;
	position: absolute;
	text-align: left;
	width: 225px;
	z-index: 15;
	background-color: rgba(22, 22, 22, 0.75);
	background-repeat: no-repeat;
	transition: height 400ms ease 200ms;
}
.hide:hover
{
	height: 322px;
}

/* table headers */
.header_cw + [width="100%"],
.header_completed + [width="100%"],
.header_onhold + [width="100%"],
.header_dropped + [width="100%"],
.header_ptw + [width="100%"]
{
	display: block;
	width: 250px;
	height: auto;
	padding: 4px;
	margin: 0px auto;
	font-size: 9px;
}
.header_cw + [width="100%"]:before,
.header_completed + [width="100%"]:before,
.header_onhold + [width="100%"]:before,
.header_dropped + [width="100%"]:before,
.header_ptw + [width="100%"]:before
{
	content: "Sort";
	display: block;
}
.table_header:nth-of-type(1),
.table_header:nth-of-type(6)
{
	display: none;
}
.table_header
{
	display: inline-block;
	margin: 0px 4px;
	width: auto;
}
.table_header strong
{
	font-weight: normal;
}

/* status links */
[width="100%"][align="center"]
{
	height: 40px;
	margin: 7px 0px;
	padding: 0;
	position: fixed;
	right: 0;
	top: 0;
	width: auto;
	z-index: 25;
	background: transparent;
	border: none;
	border-radius: 0px;
}
.status_selected, .status_not_selected
{
	display: inline-block;
	margin: 0 10px;
	width: auto;
}
.status_selected
{
}
.status_selected a
{
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: underline;
}
.status_selected:nth-child(1), .status_not_selected:nth-child(1) { right: 500px; width: 130px; }
.status_selected:nth-child(2), .status_not_selected:nth-child(2) { right: 400px; width: 65px; }
.status_selected:nth-child(3), .status_not_selected:nth-child(3) { right: 300px; }
.status_selected:nth-child(4), .status_not_selected:nth-child(4) { right: 200px; }
.status_selected:nth-child(5), .status_not_selected:nth-child(5) { right: 100px; }
.status_selected:nth-child(6), .status_not_selected:nth-child(6) { right: 0px; }

/* watching completed headers */
.header_cw,
.header_completed,
.header_onhold,
.header_dropped,
.header_ptw
{
	border: 1px solid #AA8040 !important;
	border-radius: 10px !important;
	background: rgba(0, 11, 22, 0.75) !important;
	display: block !important;
	height: auto !important;
	margin: 10px auto !important;
	width: 250px !important;
	text-align: center;
	position: relative !important;
}
.header_cw *,
.header_completed *,
.header_onhold *,
.header_dropped *,
.header_ptw *
{
	text-align: center;
	display: block;
	font-size: 30px;
}

/* page header */
#mal_cs_pic,
#mal_cs_listinfo,
#mal_cs_links,
#mal_cs_otherlinks
{
	position: fixed !important;
	top: 0px !important;
	background: rgba(22, 22, 22, 0.85);
	padding: 0px 10px !important;
	border-bottom: 1px solid #7E7E7E;
	z-index: 20;
	height: 30px !important;
	line-height: 9px;
}
#mal_cs_pic { left: 0px; width: 321px !important; }
#mal_cs_listinfo { left: 0px; width: 150px !important; }
#mal_cs_links { left: 171px; }
#mal_cs_otherlinks { left: 342px; right: 0px; border-right: 1px solid #7E7E7E; }
#mal_cs_powered { display: none; }

/* bottom stuff */
#copyright,
#grand_totals
{
	text-align: center;
	border-radius: 10px;
	background: rgba(0, 11, 22, 0.75);
	border: 1px solid #AA8040;
	margin: 2em auto !important;
	display: block;
	padding: 4px;
	width: 250px;
}
#grand_totals:before
{
	content: "Grand Totals";
	display: block;
}
#copyright:after
{
	content: "List style by BurntJelly";
	display: block;
}

MAL Tool templates:
CSS Template: "#more[ID] {background-image: url([IMGURL]);}" (without quotes)
Line Matching Template: "#more[ID] " (without quotes, the space after is important)

Posted by BurntJelly | May 9, 2015 1:21 PM | 10 comments

	LeonhartAugust \| Mar 3, 2019 3:48 PM Hi. I'd like to use the tags but how do I add it to my CSS? (see my list design) Blog - Comment

	BurntJelly \| Mar 13, 2018 7:02 PM mal-image.appspot.com was over bandwidth and shutdown temporarily... if that's what you were referring to. Blog - Comment

	Dragoniro \| Mar 11, 2018 10:44 AM Is it still working? Mine just stopped... Blog - Comment

	Supplementum \| Dec 19, 2016 3:55 PM Just worked fine. Thanks! Blog - Comment

	BurntJelly \| Nov 14, 2016 6:09 PM They're tags. Technically you can use them for a short description. Blog - Comment

	Thorgar1502 \| Nov 14, 2016 10:04 AM Oh that worked perfectly! The only other thing I wanted to ask is the text underneath each anime on your image, is that a description of the anime/is this possible to do? Blog - Comment

	BurntJelly \| Nov 13, 2016 7:14 PM I added an example using mal-image. Just swap in your user name and put the URL in at the top of the CSS in the MAL editor. Blog - Comment

	Thorgar1502 \| Nov 13, 2016 8:46 AM I can't get cover images to work with your top layout, what would you recommend to do to get it working? Blog - Comment

	BurntJelly \| May 20, 2016 3:33 PM "Comments" are only shown under in the "More" section. You would need to move your comments to Tags for them to show on the list/layout. Blog - Comment

	SodainBouken \| May 20, 2016 1:32 PM Hello, thank you for this job is great! :D, i have a problem, i did a mini-review but it didnt show it in the list :/ Blog - Comment

BurntJelly's Blog
Back to BurntJelly's Blog

MoreTop Anime

MoreTop Airing Anime

MoreMost Popular Characters

BurntJelly's Blog Back to BurntJelly's Blog

MoreTop Anime

MoreTop Airing Anime

MoreMost Popular Characters

BurntJelly's Blog
Back to BurntJelly's Blog