This cover style uses #more CSS. This topic is part of our CSS Tutorials and Add-ons section: http://myanimelist.net/forum/?topicid=419405 Here's another way to display covers! It will put a thumbnail for the cover on a line of your layout, which you can move, and you can zoom in on it when you put your cursor on it. It uses a #more CSS import to show the covers. The normal look- convenient thumbnail covers next to each title!  Step 1: Add one of these imports to the top of your CSS If you're using this for an anime list, add this to the top: If you're using this for a manga list, add this to the top: Note: Don't add both imports to one layout code! You need to use the anime import only on an anime list and manga import only on the manga one. You will need two separate layouts for your anime and manga list, see making a separate layout for your manga list here: http://myanimelist.net/forum/?topicid=200320 Step 2: Put this code at the bottom of your CSS too, whether or not its a anime list or manga list. Everything in bold below also needs to be put at the bottom of your CSS. It is the settings for this thumbnail style zoom. /* THUMBNAIL SETTINGS Settings for the thumbnails of covers seen on your list. Height and width control the size, while margin-left and top can be added or taken away to change the position. Change the border size, type, or color, with the first border code.*/ .hide { height:55px; width:35px; margin-left:33px; margin-top:-65px; border:1px solid #FFFFFF; background-color:rgba(248, 162, 200, 0.7); background-position:50% 50%; background-repeat:no-repeat no-repeat; background-size:cover; border-bottom-left-radius:7px; border-bottom-right-radius:7px; border-top-left-radius:7px; border-top-right-radius:0; display:inline-block !important; position: absolute; } /*THUMBNAIL HOVER SETTING This is the setting for the cover when you point to a thumbnail. Move the cover's position with the margin codes. Change its size with the padding codes. */ .hide:hover { margin-left:-140px; padding-right:150px; padding-top:220px !important; background-color:transparent; background-repeat:no-repeat no-repeat; background-size:cover; border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:20px; border-top-right-radius:20px; box-shadow:rgba(63, 52, 60, 0.55) 0 0 8px 8px; position:absolute; z-index:1; } /*THUMBNAIL HOVER FLICKER FIX If you reposition your covers, and notice flickering, color this red, then reload your layout. Notice where the red bar appears when you point to your covers. Move that box with this code, over the parts where you point and see flickering. Then change it back to transparent! */ .hide:hover:after { background: transparent; content: " "; height: 75px; left: 0; position: absolute; top: 0; width: 210px; z-index: 20; } /*ANIMATION FOR ZOOM Change the timing of how long it takes for it zoom out here! Its set to .25 seconds by default. */ * { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; } /*ROW WIDTH AND SPACING This will increase the height of your rows and move the anime title to the left. It might look funny on some layouts so you'll have to adjust it or ask for help! Height is the height, padding left is the space the anime title moves from the left. */ .td1:nth-of-type(2), .td2:nth-of-type(2) { height: 62px; padding-left: 42px; } Step 3: Add the CSS from this link to the bottom of your CSS as well. The codes from the link will remove the more button from your list which becomes unusable after you apply the cover style from this topic. The edit and add links will stay the same tho! You don't have to add this code if you want to keep your More button visible, but it will still be unusable. I have to paste these on a separate site since MAL removes backslashes when posted in the forum. When you save, you're done! You can ask questions in this topic about this. FAQ What to do if some but not all, of your title pics don't show up If none of your titles are customized, or the covers suddenly disappear If those tips don't bring the covers back, then the import link probably no longer works. If you're sure you entered everything right, use a generator to make your own #more CSS import (replacing the one from step 1): https://myanimelist.net/forum/?topicid=443333 |
Shishio-kunNov 5, 2018 8:28 PM
X-X-X-X-X-X-X-X said: thx a lot , and sorry about my bad eng but i having a problem with margin-left:33px; margin-top:-65px; in the step 3 its somehow disappears every time i upload it i guess thats what make the covers in mylist in the wrong place isn't? I'm not sure why margin-top is disappearing on random layouts atm. Try adding those step 3 codes to the bottom and see if it works out. I know another fix if that doesn't work but I'd rather that you try that first. |
| How can i set image to the right of my list ? (Image are curently on the left) |
hatomike said: How can i set image to the right of my list ? (Image are curently on the left) Your list doesn't use thumbnail style, it uses hover display http://myanimelist.net/forum/?topicid=563993 For your list you adjust the left amount in this code https://dl.dropboxusercontent.com/s/lfs7ckwu6zuzmc1/hatomikeanimecovers.css |
Shishio-kun said: hatomike said: How can i set image to the right of my list ? (Image are curently on the left) Your list doesn't use thumbnail style, it uses hover display http://myanimelist.net/forum/?topicid=563993 For your list you adjust the left amount in this code https://dl.dropboxusercontent.com/s/lfs7ckwu6zuzmc1/hatomikeanimecovers.css I already know it but i want to change to something more awesome ^^' Can i change it with the style of this page in first case ? |
hatomike said: Shishio-kun said: hatomike said: How can i set image to the right of my list ? (Image are curently on the left) Your list doesn't use thumbnail style, it uses hover display http://myanimelist.net/forum/?topicid=563993 For your list you adjust the left amount in this code https://dl.dropboxusercontent.com/s/lfs7ckwu6zuzmc1/hatomikeanimecovers.css I already know it but i want to change to something more awesome ^^' Can i change it with the style of this page in first case ? You can take out the cover display CSS you don't want and use this one instead and see how it looks. This works from the start for many layouts but not all. If it doesn't work perfectly for your layout you can post back and ask us whats wrong or how to adjust it. Just leave the CSS in so we can look and fix it. |
| Some of your preview pictures don't show up? You can update them yourself just download and use following app http://myanimelist.net/forum/?topicid=442261 |
 |
snapturtle said: How often are the preview updated? I can't update it atm due to MAL changes blocking off the generator I use for that, I'll see if I can use the other for it (not sure if its a available feature). When I find a way I'll update it right away since its been a few months since last update. |
| Can you make an animation but without this small covers near titles? When I move a cursor to title I want this "zoomed effect" coming from title/near cursor. |
Alextasha said: Can you make an animation but without this small covers near titles? When I move a cursor to title I want this "zoomed effect" coming from title/near cursor. Yeah you just make the nomal .hide unseen but still there. There's alot of ways to do this, I think easiest way would be to set background size to 0px and remove borders. Keep in mind the way to make it unseen can also be dependent on customizations the user made. |
| Ok I tried diffrent things and I can't make this like I want to xD 1. I don't want miniature covers (they unnecessarily make list loooong) 2. I want animation effect when you move cursor to anime title (when it get underline) and bigger cover show up in distance from list like before Something like this http://i751.photobucket.com/albums/xx160/alextasha/things/rozne/04_zps5dbe5ac9.jpg (but ofc without miniature covers) Could you help me ^^? My currently code: (I deleted everything about THUMBNAIL because it was totally mess now ^^") |
AlextashaNov 30, 2013 4:30 PM
Alextasha said: Ok I tried diffrent things and I can't make this like I want to xD 1. I don't want miniature covers (they unnecessarily make list loooong) 2. I want animation effect when you move cursor to anime title (when it get underline) and bigger cover show up in distance from list like before Something like this https://dl.dropboxusercontent.com/u/55985962/04.jpg (but ofc without miniature covers) Could you help me ^^? Well for the way I would do that, I wouldn't use the #more CSS in the topic since animetitle and that are unrelated. So I made a new kinda cover CSS for this trick. You need this import instead of the one you have. @import "https://dl.dropboxusercontent.com/u/78340470/beforecss.css"; With that in these codes will create the effect: .animetitle:before { content: ""; height: 0px; width: 0px; margin-left:0; margin-top:10px; display:inline-block !important; position: absolute; background-size: contain; transition: all 0.4s ease-in-out; } .animetitle:hover:before { content: ""; margin-left:-300px; margin-top: 10px; padding-right:150px; padding-top:220px !important; background-color:transparent; background-repeat:no-repeat no-repeat; background-size:cover; position:absolute; z-index:1; } Unfortunately that cover CSS is based on an outdated one so it won't load all covers- Myanimelist made changes that broke our cover generators- so I can't update it till one is working fine again (maybe later this week). But it will automatically update when that happens! I plan to make a proper tutorial later for this too and maybe make some adjustments but won't be able so start till I have a working generator and IMG tags to use again (IMG has been off for 3 months and delayed turning back on for one month -_-). So I guess to learn about adjustments you'd ask here. |
| @Alextasha: Al_exs was kind enough to use Hahaido's generator (which works for him and not me or others at atm, we don't know why) and make a cover CSS specifically for your list! Its imported here after I modded it (the generators don't produce this "before CSS" atm, it must be modded from "after CSS"). It will show all the cover you have on your list! Use this instead of the import I gave you in last post, that import wasn't updated for your list or the fall's new anime. https://dl.dropboxusercontent.com/u/78340470/Club%20layouts/Users/Alextashabefore.css |
| Wow! Thank you guys!!! It's fantastic :D It's look amazing and everything is working!! :D |
| Ok I have one more question ^^ that covers will be automatically update? (when I added new anime it doesn't have cover) Or I have to upload them somehow? |
| You have to regenerate covers all the time you're adding a new entry. But there is a way to import all covers to your list at once |
|
| i need your help :c i'm a beginner in css and don't know what to do here http://puu.sh/6lM08.jpg the thumbnails are not in their right position, instead they're all 1 row lower i can't find a way to fix this here's the code any help would be appreciated, thanks :D |
| Under "thumbnail settings" it should have margin-left:33px; margin-top:-65px; but it looks like its missing, I think this is MAL's editor cuz MAL's editor eats them in this case; first recopy and paste the codes from this topic again but on the bottom instead of the top and see if it still eats the text, otherwise have to do something else. |
| it worked :D thanks a lot!!!! |
| Hi there, first off, thank you for this awesome feature. I have been customizing it a little bit (im no expert in css) and would like some help with the zoom/hover feature, specifically where the mouse pointer is. Under the ".hide:hover:after" section, I am trying to get the "red" block to stay in-line with the anime title. At the moment when I hover over the thumbnail, the red box starts it's transition from about 1 line down and moves in a 'bottom to top left' motion. This in turn causes the thumbnail to flicker. I understand how to fix it, but I dont know how to make the "red" box stay in-line with the title on the anime whos thumbnail Im hovering over. This is my current code for that section And this is all my code My Anime List |
moodkiller03 said: Hi there, first off, thank you for this awesome feature. I have been customizing it a little bit (im no expert in css) and would like some help with the zoom/hover feature, specifically where the mouse pointer is. Under the ".hide:hover:after" section, I am trying to get the "red" block to stay in-line with the anime title. At the moment when I hover over the thumbnail, the red box starts it's transition from about 1 line down and moves in a 'bottom to top left' motion. This in turn causes the thumbnail to flicker. I understand how to fix it, but I dont know how to make the "red" box stay in-line with the title on the anime whos thumbnail Im hovering over. This is my current code for that section And this is all my code My Anime List hmm can't you just move it in place with top? It seems that way in preview. If I make it 0, it is in line with the anime title. |
Shishio-kun said: hmm can't you just move it in place with top? It seems that way in preview. If I make it 0, it is in line with the anime title. You are right! Thats works... although I seem to have lost the animation of it zooming in and out when you hover over the thumbnail, not because of what we changed. I noticed it last night after posting my question here. Thanks for the help Shishio-kun so far |
moodkiller03 said: Shishio-kun said: hmm can't you just move it in place with top? It seems that way in preview. If I make it 0, it is in line with the anime title. You are right! Thats works... although I seem to have lost the animation of it zooming in and out when you hover over the thumbnail, not because of what we changed. I noticed it last night after posting my question here. Thanks for the help Shishio-kun so far No zoom animation because you are missing the bracket on the CSS before it |
Shishio-kun said: No zoom animation because you are missing the bracket on the CSS before it HA! LOL only I would miss that -__-. thank you once again (sorry for all the amateur mistakes), ok now you may go check and see what happens with the red block, its going from the bottom up to the top left when I hover over a thumbnail. |
| Here I wrote more to anime cover list you can add: |
   |
Tsiox said: Here I wrote more to anime cover list you can add: ? For who or what |
| It might be worth mentioning that most people, including shishio, are using programs to generate the code for the covers. |
         |
Tsiox said: Shishio-kun said: ? For who or what Oh sorry, there is some missing anime covers (the newest), I don't know if you're the owner of "This", if this codes could be added it would be great （つω・と） Yes thats mine. We don't write and add things manually like that normally since its tedious, like he said we use generators. There are many other covers and files besides that anyways. I only plan to update them a couple times a year with the complete list of anime covers which takes alot of time for me to make... I want ppl to generate their own covers in between those updates for: (1. more benefit to users/MAL site (faster loading covers) (2. lower the bandwidth costs on my accounts so we don't end up losing the default covers completely in the future (3. improves generators with more users testing them |
vizjerei77 said: Hi, i have a problem with this covers. I've used Your covers on my mal site and its verry great.But today there is some problems with that because all covers is gone(there is a pink background and when i put cursor on cover to increased it,there is blank) front page |
| Am i suposed to just copy and paste these codes in step 3? |
 |
Specialist11 said: Am i suposed to just copy and paste these codes in step 3? Yes copy to the bottom of CSS, you will also need a replacement for the covers link in step 1, which you can get here: http://myanimelist.net/forum/?topicid=731665 |
| This topics been updated to working again. Install the new codes from the first post to get this effect back. |
| This is also updated with a better anime import, if you were using the old one you should change to this one |
| Hey, I'm too much of an amateur to figure this out myself. I could use some help. Screenshot for reference: I have 3 problems, 1. Why are my images on the title instead of the cover placeholder on the side? 2. Why are my anime titles offset to the right? 3. Is there a way to get rid of the dash next to the "Edit" Button? This is my code Thanks in advance! |
| Thank you this was extremely helpful and my list is now fixed! Initially it was missing Fate/Zero, Steins;Gate and One Piece but then I proceeded to follow your other tutorial on manually updating images and now that's solved too! |
 |
Lansiq said: Hey, I'm too much of an amateur to figure this out myself. I could use some help. Screenshot for reference: I have 3 problems, 1. Why are my images on the title instead of the cover placeholder on the side? 2. Why are my anime titles offset to the right? 3. Is there a way to get rid of the dash next to the "Edit" Button? This is my code Thanks in advance! The CSS in the push import is the wrong type. Need one like in step 1 of the tutorial, which you can generate (#more CSS type). You should also get rid of the hide codes that aren't the same one from this tutorial, but its probably not needed |
| Hello, I'm having a bit of a problem with this. I wanted the thumbnails but without zooming because once your list reaches a certain size it starts crashing browsers if you try to zoom anything. I don't know CSS and I can't tell which element is responsible for the animation on the TEXT upon highlight. I even tried deleting nearly each individual element, testing it, then resetting when it didn't work, and not one had an effect. Is there any way to get the text to stop sliding to the LEFT when I highlight the title? I removed all the zoom-related sections and it still moves whenever I highlight it, thus sliding the first word or two of the title beneath the thumbnail. I would appreciate any help. |
| You take out the "ANIMATION FOR ZOOM" codes to stop the zooming animation: http://pasted.co/4049ff4b For the second problem, add the "ROW WIDTH AND SPACING" code to the very bottom of the CSS something is conflicting with it from the "OTHER CODES" part of an original layout. All these extra add-on codes are always supposed to go on the bottom |
Shishio-kunJul 21, 2015 9:55 PM
Shishio-kun said: You take out the "ANIMATION FOR ZOOM" codes to stop the zooming animation: http://pasted.co/4049ff4b For the second problem, add the "ROW WIDTH AND SPACING" code to the very bottom of the CSS something is conflicting with it from the "OTHER CODES" part of an original layout. All these extra add-on codes are always supposed to go on the bottom Thank you so much!!! This was driving me crazy trying to figure out what was causing it. I didn't even think to consider that the block order was important as long as they were all standalone blocks of code. Shows how much I know. Thank you for your fast reply!!! |
| when I add some text in the tag section the cover go's down. is there a way to have it stay in the center? |
 |
VHBornhiati said: Hello! Shishio-kun, I wonder if there's any way to enable the mini-reviews on the right side of the cover. Could you help me with this? GodspeedK said: when I add some text in the tag section the cover go's down. is there a way to have it stay in the center? I have to wait until I can fully repair my main com before I can look into these (waiting for parts in the mail), so I will get back to you both later. Sorry for delays! |
| thanks a lot!! |
 |
More topics from this board
» [CSS - MODERN] ⭐️ All ways to customize individual anime and individual list rows (mark your favorites!)Shishio-kun - Sep 4, 2020 |
12 |
by takkun_
»»
May 12, 12:00 AM |
|
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2023 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
359 |
by CLModerno
»»
May 5, 7:50 PM |
|
» [CSS - MODERN] Add side renders to list layouts (including for each category!)Shishio-kun - May 15, 2021 |
3 |
by gwynsyl
»»
May 5, 1:41 PM |
|
» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7819 |
by Nunphell
»»
May 5, 12:35 PM |
|
» [HALL OF LEGENDS] Hacker09, MyAnimeList's #1 coder!Shishio-kun - Dec 10, 2023 |
9 |
by hacker09
»»
May 2, 9:29 PM |