Guide
This website is intended to be used by users who wish to add cover images to Classic list designs. If you are using a Modern list design, then you do not need this service. You can learn more about the differences here.
1. Sign In
You first need to sign in with your MyAnimeList account. This website then periodically scans your profile and updates the global stylesheets to include your anime and manga entries.
For privacy reasons, MyAnimeList does not share NSFW entries from your lists. As a result, the generated CSS will not contain CSS rules to add their cover images.
2. Link to a Generated Stylesheet
It may take a few hours after registration before your profile is scanned. Once your anime and manga list has been scanned, you can then import one of the following stylesheets in your list design.
If you are using a list design that someone else has created, please consult the original developer. If you are creating your own list design, read the next section for more information.
/* Both anime and manga covers */
@\import 'https://malcovercss.link/generated/all-before.css';
@\import 'https://malcovercss.link/generated/all-after.css';
@\import 'https://malcovercss.link/generated/all-self.css';
/* Only anime covers */
@\import 'https://malcovercss.link/generated/anime-before.css';
@\import 'https://malcovercss.link/generated/anime-after.css';
@\import 'https://malcovercss.link/generated/anime-self.css';
@\import 'https://malcovercss.link/generated/anime-more.css';
/* Only manga covers */
@\import 'https://malcovercss.link/generated/manga-before.css';
@\import 'https://malcovercss.link/generated/manga-after.css';
@\import 'https://malcovercss.link/generated/manga-self.css';
@\import 'https://malcovercss.link/generated/manga-more.css';
/*
*-before.css contains rules for a.animetitle:before
*-after.css contains rules for a.animetitle:after
*-self.css contains rules for a.animetitle
*-more.css contains rules for div#more{ID}
Note: all-more.css does not exist because different anime and manga can have the same id
*/
Important Note on CSS Imports
Since MyAnimeList only allows external images URLs in CSS, you will need to use an invalid import syntax in order to import the file (web browsers will still be able to parse the import).
/* Do NOT use this in your list design */
@import url('https://malcovercss.link/generated/all-before.css');
/* Add a slash in your list design's @import and remove the url() */
@\import 'https://malcovercss.link/generated/all-before.css';
How This Works
Every anime and manga entry in your lists will contain HTML elements with unique identifiers. You can style these uniquely identifiable elements to display the corresponding anime's or manga's cover image in their backgrounds.
For example, the anime Ginga Eiyuu Densetsuopen_in_new has an id of 820 on MyAnimeList. If you have this anime in your list, then your list page will contain the following HTML.
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="td1" style="border-left-width: 1px;">
<div style="float: right;">
<small>
<a href="/ownlist/anime/820/edit?hideLayout" class="List_LightBox">Edit</a>
-
<a href="javascript:void(0);" id="xmenu820" onclick="getExpand(820, 1);" title="View More Information">More</a>
</small>
</div>
<!-- We can create a unique selector for this <a> tag thanks to its unique href URL -->
<a href="/anime/820/Ginga_Eiyuu_Densetsu" target="_blank" class="animetitle" title="Anime Information">
<span>Ginga Eiyuu Densetsu</span>
</a>
</td>
<td class="td1" align="center" width="45">
<a href="javascript:void(0);" onclick="anime_scoreDisplay(820);" title="Click to bring up a text box to edit your current score">
<span id="scoreval820">
10
</span>
</a>
<div id="scorediv820" style="display: none;">
<input type="text" onkeydown="anime_checkScoreEnter(event,820);" id="scoretext820" size="2">
<input type="button" value="Go" onclick="anime_updateScore(820);">
</div>
</td>
</tr>
</table>
<!-- We can also create a unique selector for this <div> tag thanks to its unique id -->
<div id="more820" class="hide" style="width:100%px"></div>
Example Usage
The Example list design makes use of the generated stylesheets. You can see this example in action on my profile pageopen_in_new.
/* This is a snippet from https://malcovercss.link/example-covers.css */
/*
1. Import a generated stylesheet
Your CSS will now contain rules for adding background images to a.animetitle:before
For example:
.animetitle[href^="/anime/820/"]:before{background-image:url(https://api-cdn.myanimelist.net/images/anime/13/13225.jpg);}
Don't forget to include the slash to escape the import
*/
@\import 'https://malcovercss.link/generated/all-before.css';
/*
2. Style the parent container to make room for the cover image
*/
#list_surround table:not(:first-of-type) td a.animetitle {
color: #fff;
font-weight: bold;
text-decoration: none;
box-sizing: border-box;
display: block;
padding: 20px;
padding-bottom: 0px;
padding-top: 190px;
width: 180px; height: auto;
position: absolute;
bottom: 75px; left: 10px;
}
/*
3. Style this pseudoelement to display the corresponding anime's cover image in its background
*/
#list_surround table:not(:first-of-type) td a.animetitle:before {
content: '';
display: block;
width: 180px; height: 250px;
z-index: 0;
position: absolute;
bottom: -35px; left: 0;
background-color: #333;
background-position: center;
background-repeat: no-repeat;
background-size: 100% auto;
}