[CSS] Hosting your own import CSS with all anime and manga preview pics

This topic is part of our CSS Tutorials and Add-ons section: https://myanimelist.net/forum/?topicid=2077862

First you need to find what type of cover type (preset) your layout uses.

There should be Malscraper import near the top of your CSS code, which is part of the default layout code (visit the topic or source for it). There might be a Dropbox import too or instead of Malscraper. Find what it says at the end of the URL as in the example below. In the example, the end of the URL says "dataimagelinkbefore".


Your Malscraper or Dropbox import will probably say one of the following at the end:
dataimagelinkbefore
dataimagelink
dataimagelinkafter
datatitlebefore
datatitleafter
more
animetitle
animetitlebefore

Whatever type is at the end of the Malscraper or Dropbox import is your layout's cover type (Preset).

Go to this page and go to Generate For Offline Use. Under Preset choose the cover type your layout needs. Then click the Submit button.
https://malscraper.azurewebsites.net/covers

It will generate a CSS file for ALL preview pics/covers on MAL in a format for your layout.

You can also generate a file for your manga list. Remember your manga list might have a different layout and need a different cover type, so check the source code for it.

Go to Dropbox and make an account there.
https://www.dropbox.com/login

Drag the CSS file for your anime covers CSS into the Dropbox folder on your Home page and choose Upload. You can also use Upload File. The page or folder you put the file into really doesn't matter, but Home is just easiest and the default.

Find the CSS file in your home folder, or under Recents.

Click the More at the end of the location of your file and click Share.

Now click Copy Link. This link you copy is the link to your CSS file. But it's not a true direct link to the CSS yet, you need to edit it into an @import line so your CSS can use it.

I recommend pasting the Dropbox share link to somewhere you can edit it, like Notepad, the top of your CSS, or even replying to this topic.

Delete these parts in your link which I've colored in red:
https://www.dropbox.com/s/f35r8jvdsjpbg5p/covers_anime_dataimagelinkbefore.css?dl=0


The result for my import:
/s/f35r8jvdsjpbg5p/covers_anime_dataimagelinkbefore.css


Paste this to the start:
@import "https://dl.dropboxusercontent.com

Paste this to the end:
";

The result:


The import is complete! Paste it to the top of your CSS to link your covers CSS. You can do the same for your manga list with the manga cover CSS. In my example, the preview pics have been restored.

When you notice missing preview pics, you can update the file. Simply go back to the generator here:

https://malscraper.azurewebsites.net/covers

And create another CSS file under Generate for Offline Use as you did in step 2. Remember, it must be the correct cover type (Preset) for your list type.

After it's downloaded, replace the old CSS file in your Dropbox with the new file. You can just drag it in and let it replace the old file.

It should automatically update your covers if you generated the correct CSS type for your list. Otherwise try another type and check the original source code for your layout to make sure you are generating the correct type (see step 1).