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.

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).

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 Densetsu 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 page.