Forum Settings
Forums
Must be a Club Member to Reply 
#1
Nov 16, 2018 2:41 AM

Offline
Joined: Feb 2010
Posts: 5954
This topic is part of our CSS Tutorials and Add-ons section: https://myanimelist.net/forum/?topicid=1499059


Thanks for @Cateinya for inspiration and codes I borrowed from Endless Summer!

Make your preview pics huge on the modern list templates!



Step 1. First of all, Image must be checked on this page: https://myanimelist.net/editprofile.php?go=listpreferences


Step 2. Save after. Then you must add this to the top of your CSS.
@\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore";


Step 3. Add these codes to the bottom of your CSS.
If the preview pics ever become blurry or missing, consult this topic: https://myanimelist.net/forum/?topicid=439897



/* COVER AREA
The area taken up by covers.
*/
.list-block {
/* variables used in calc (explicit names) */
--height-img: 250px !important;
--width-img: 178px !important;
}


/* HD COVER SIZE
The size of covers seen.
*/ 
.data.image a:before{
background-size: cover !important;
height: 250px !important;
width: 178px !important;
background-position: center center !important;
}


/* LOW RES COVER SIZE
You only see this if the import for high res covers goes down.
*/ 
a img{
background-size: cover !important;
height: 250px !important;
width: 178px !important;
}

/* OTHER CODES*/

.data.image .image{
display: inherit !important;
background-repeat: no-repeat !important;
}

a img{
display: block !important;
border: none !important;
background-repeat: no-repeat !important;
}

.data.image a:before{
display: block;
content: "";
position: absolute;
background-repeat: no-repeat !important;
}

Modified by Shishio-kun, Nov 17, 2018 2:15 AM
 
#2
Jan 13, 8:57 PM
Offline
Joined: Apr 2015
Posts: 1
I applied it on endlesss summer layouts and it worked just fine.
Thanka a lot brother.
 
Top