New
Jul 4, 2013 8:47 PM
#1
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 only some of your titles were customized, then the #more CSS links didn't have all the titles on your list. You can either manually update the missing ones, or you'll need to make a #more CSS for your list with a generator and make an import link from it for your own list. See my tutorial for more info: http://myanimelist.net/forum/?topicid=443333 If none of your titles are customized, or the covers suddenly disappear There's a possibility your CSS had (or you added) a code thats blocking or conflicting the ones you entered. Make sure there aren't any codes without closing brackets before the codes you put in from step 2 and 3, and make sure there aren't any leftover links or text at the bottom that wasn't part of the code (they may start with "Read more at" If you made changes recently and the covers were suddenly gone, then try to undo the changes and see if it brings the covers back. Double check you added the link right and have the Hide code in your CSS. 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
Jul 31, 2013 3:37 AM
#2
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? |
Jul 31, 2013 4:37 AM
#3
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. |
Sep 28, 2013 11:14 AM
#5
How can i set image to the right of my list ? (Image are curently on the left) |
Sep 28, 2013 11:21 AM
#6
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 |
Sep 28, 2013 12:07 PM
#7
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 ? |
Sep 28, 2013 12:14 PM
#8
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. |
Nov 9, 2013 4:24 PM
#9
How often are the preview updated? |
Nov 10, 2013 3:34 AM
#10
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 |
Nov 10, 2013 9:43 PM
#11
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. |
Nov 26, 2013 5:26 PM
#12
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. |
Nov 26, 2013 5:45 PM
#13
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. |
Nov 28, 2013 6:20 AM
#14
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 ^^") @import "http://fonts.googleapis.com/css?family=Varela+Round"; @import "http://fonts.googleapis.com/css?family=Margarine"; @import "https://dl.dropboxusercontent.com/u/78340470/anime.css"; @import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css"; @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixedwithCategory.css"; body { background-attachment: fixed; background-image: url("http://i751.photobucket.com/albums/xx160/alextasha/MAL/anime/MALanime_zpse358aff2.jpg"); background-size: cover; } body { background-position: 0px 15%; } .table_header { background-image: url("https://dl.dropbox.com/u/57348187/MAL/PROZ.png"); } .animetitle, .animetitle:visited { color: white; font-family: 'calibri',sans-serif; font-size: 14px; text-shadow: 0 2px 1px #000000; } .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color: white; font-family: 'calibri',sans-serif; font-size: 12px; text-shadow: 0 2px 1px #000000; } #list_surround { width: 700px; } #list_surround { position: absolute !important; right: 100px !important;} #list_surround { margin: inherit !important; left: inherit !important; } #list_surround { position: absolute !important; top: -30px;} body { background-color: #FBFDE8; background-repeat: no-repeat; } #list_surround { background-image: url(""); left: 2px; position: absolute; } a { text-decoration: none; } a:visited { text-decoration: none; } a:hover, a:visited:hover { color: #D3D3D3; text-decoration: underline; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-image: url("https://dl.dropbox.com/u/57348187/MAL/PROZ.png"); border-width: 0; padding: 2px; } .category_totals:hover, .td1:hover, .td2:hover, #grand_totals:hover, #copyright:hover { background-image: url("https://dl.dropbox.com/u/57348187/MAL/PROZ2.png"); border-width: 0; padding: 2px; } #copyright:after { content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info."; } .status_selected { background-color: black; color: white; display: none; padding: 2px; text-decoration: blink; } .status_not_selected { background-color: black; color: white; display: none; padding: 2px; } .status_selected a { color: blue; display: none; } .status_not_selected a { color: white; display: none; } .thickbox { color: cyan; font-family: 'Happy Monkey',cursive; font-size: 12px; text-shadow: 2px 2px 2px #000000; } .table_header { border-width: 0; font-weight: bold; padding: 2px; } .category_totals { height: 30px; text-align: center; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } #copyright, #grand_totals { margin: 0 auto; text-align: center; border-radius: 20px; } .header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw { height: 282px; background-position: center top; background-repeat: no-repeat; } /* Anime List only CURRENTLY WATCHING/READING HEADER This is the header above currently watching/reading. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_cw { background-image:url(http://i751.photobucket.com/albums/xx160/alextasha/MAL/anime/anime-watching_zps0f939a0a.png); } /* COMPLETED HEADER This is the header above completed animes and manga. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_completed { background-image:url(http://i751.photobucket.com/albums/xx160/alextasha/MAL/anime/anime-completed_zpscee96f57.png); } /* ON-HOLD HEADER This is the header above your animes/mangas on-hold. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_onhold { background-image:url(http://i751.photobucket.com/albums/xx160/alextasha/MAL/anime/anime-onhold_zps3916d6d6.png); } /* DROPPED HEADER This is the header above your dropped animes/mangas. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_dropped { background-image:url(http://i751.photobucket.com/albums/xx160/alextasha/MAL/anime/anime-droped_zps243197cc.png); } /* PLAN TO WATCH/READ HEADER This is the header above the anime/manga you plan to see or read on your list. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_ptw { background-image:url(http://i751.photobucket.com/albums/xx160/alextasha/MAL/anime/anime-plan_zps1d06766a.png); } /* REMOVE HEADER COLOR You need this code to remove the default background colors from the header and override any related codes. You're supposed to use your own images or the default ones for the header, so this color is set to transparent so it won't get in the way. If you want the color back for some reason, remove this section. */ .header_title { margin-top: 250px; height: 32px; padding: 2px; color: white; font-family: 'calibri',cursive; font-size: 26px; text-align: center; text-shadow: 3px 3px 3px #000000; border-radius: 20px 20px 0 0; background-color: transparent; background-image: url("https://dl.dropbox.com/u/57348187/MAL/PROZ.png"); } |
AlextashaNov 30, 2013 4:30 PM
Nov 30, 2013 4:32 PM
#15
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. |
Nov 30, 2013 6:50 PM
#16
@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 |
Dec 1, 2013 2:21 AM
#17
Wow! Thank you guys!!! It's fantastic :D It's look amazing and everything is working!! :D |
Dec 2, 2013 3:15 PM
#18
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? |
Dec 2, 2013 8:21 PM
#19
Jan 15, 2014 6:29 AM
#20
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 @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; @import "https://dl.dropboxusercontent.com/u/78340470/anime.css"; @import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css"; /* 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; 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; } body { color:#51819f; text-shadow:-1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000; font-size:11px; font-family:Verdana, Arial; background-image:url('http://i.imgur.com/fE9NE.jpg'); background-color:#000; background-repeat:no-repeat; background-position:center top; background-attachment:fixed; } /* // Determines the positioning of your list*/ #list_surround { width:900px; margin:0 auto; } /* // All links on your list*/ a { color:#F60; text-decoration:none; } a:visited { color:#F60; text-decoration:none; } a:hover { color:#F60; text-decoration:underline; } /* // Alternating row color 1 */ .td1 { background:rgba(0, 0, 0, 0.75); color:#999; border-color:#333; border-style:solid; border-width:0 1px 1px 0; padding:2px; } /* // Alternating row color 2 */ .td2 { background:rgba(0, 0, 0, 0.75); color:#999; border-color:#333; border-style:solid; border-width:0 1px 1px 0; padding:2px; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { color:#999; background:rgba(0, 0, 0, 0.75); border-color:#333; border-style:solid; border-width:1px 1px 1px 0; padding:2px; } /* // Controls the select form decoration (the drop down select box)*/ .form { color:#999; font-size:11px; font-family:Verdana, Arial; border-color:#333; border-style:solid; border-width:1px; padding:2px; } /* Which 'status' up top is selected? */ .status_selected { color:#000; background:rgba(0, 0, 0, 0.75); font-weight:700; text-decoration:underline; border-color:#333; border-style:solid; border-width:0 1px 1px 0; padding:2px; } .status_selected a { text-decoration:underline; } .status_not_selected { color:#000; background:rgba(0, 0, 0, 0.75); border-color:#333; border-style:solid; border-width:0 1px 1px 0; padding:2px; } /* Header classes for Currently Watching, Completed, Dropped, etc...*/ .header_title { font-size:20px; font-weight:700; text-align:center; text-shadow:-1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000; } .category_totals { text-align:center; background:rgba(0, 0, 0, 0.75); border-color:#333; border-style:solid; border-width:0 1px 1px; } #grand_totals { text-align:center; background:rgba(0, 0, 0, 0.75); border-color:#333; border-style:solid; border-width:0 1px 1px; } /* header_al is thesurrounding "User's Anime List" at the top */ .header_al { font-weight:700; font-size:16px; } /* header_al_links is thewith your "Profile" and "MyAnimeList home" links controls what styles you can give to all the anime titles in your list */ .animetitle { font-weight:700; } /* copyright contains the "Producted by Garrett Gyssler" text DO NOT REMOVE OR HIDE THIS DIV IF FOUND TO BE REMOVED, YOUR LIST WILL BE REMOVED TOO*/ #copyright { padding-top:6px; text-align:center; width:900px; margin:0 auto; } any help would be appreciated, thanks :D |
Jan 15, 2014 7:32 AM
#21
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. |
Jan 15, 2014 7:41 AM
#22
it worked :D thanks a lot!!!! |
Jan 27, 2014 1:02 AM
#23
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 .hide:hover:after { background: red; content: " "; height: 88px; left: 10; margin-top: 80px; margin-left: 50px; position: absolute; top: 90px; width: 270px; /z-index: 0; And this is all my code @import "http://dl.dropboxusercontent.com/u/97168413/CSS%20for%20MAL/CSS%20for%20Foxgirls%20MK.css"; @import "http://dl.dropboxusercontent.com/u/97168413/CSS%20for%20MAL/google%20family%20fonts%20MK.css"; @import "http://dl.dropboxusercontent.com/u/97168413/CSS%20for%20MAL/Icon%20style%20menu%20bar%20MK.css"; @import "http://dl.dropboxusercontent.com/u/97168413/CSS%20for%20MAL/Premade%20anime%20MK.css"; *{ text-decoration: none; } body { background-attachment: fixed; background-clip: border-box; background-color: transparent; background-image: url("http://i43.tinypic.com/2wf5ksj.jpg"); background-position: 24% 8%; background-repeat: no-repeat no-repeat; background-size: cover; font-family: calibri; } #inlineContent { background-image: url("http://i41.tinypic.com/vncx7l.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; display: inline-block !important; height: 188px; margin: auto !important; position: absolute; top: 0 !important; width: 700px !important; z-index: 4 !important; } #list_surround { background-attachment: fixed; background-position: 24% 0; background-repeat: no-repeat no-repeat; font-size: 15px; height: 250px; left: 15% !important; line-height: 1; margin: 0 auto; padding-bottom: 13px; padding-top: 133px; position: absolute; width: 700px; z-index: 0; } a { color: white; text-shadow: none; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: red; font-weight: bold; transition: all 0.4s ease 0s; } a:hover { color: #3167A9; text-shadow: 0 1px rgba(255, 255, 255, 0.15); } .borderRBL { border-width: 0 1px 1px 1px; } .table_header { } .table_header:first-of-type { border-radius: 20px 0 0 0; } .table_header:nth-of-type(2) { text-align: left; font-family: cursive; font-style: italic; } .table_header:nth-of-type(5) { border-bottom-right-radius: 0; border-top-left-radius: 0; border-top-right-radius: 20px; } .table_header, .category_totals { background-color: #000000; border: 0 none; opacity: 1; padding: 4px; padding-bottom: 10px; text-align: center; vertical-align: top; } .td1, .td2 { background-image: url("http://i40.tinypic.com/opuveu.png"); padding: 4px; padding-bottom: 10px; padding-top: 10px; } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } .table_header:nth-of-type(6) { display: none; width: 0; } small { color: purple; font-weight: bold; } .table_header, .td1, .td2, .category_totals { color: grey; } .borderRBL { line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } .category_totals { background-color: black; border-radius: 0 0 12px 12px; text-align: center; } .category_totals:hover { background-color: #C41E0E; color: #FFFFFF; } [class^="header_"] * { background-repeat: no-repeat no-repeat; font-size: 0; height: 200px; line-height: 24px; padding-bottom: 0; text-align: right; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: #FFFFFF; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } #grand_totals { background-image: url("http://i40.tinypic.com/opuveu.png"); border: 0 none; border-color: rgb(255, 255, 255); border-radius: 20px 20px 20px 20px; color: rgb(233, 13, 13); line-height: 3; min-height: 20px; padding: 8px; text-align: center; vertical-align: top; } .status_not_selected { opacity: 0.7; right: -183px !important; transition: all 0.4s ease 0s; } .status_not_selected:hover { color: transparent; opacity: 1; right: 3px !important; transition: all 0.4s ease 0s; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color: transparent; display: block; height: 100px; opacity: 0; width: 271px; } .status_selected { display: block; } .status_not_selected { display: block; } .header_cw { background-color: transparent; background-image: url("http://i41.tinypic.com/qp4ewj.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; } .header_completed { background-color: transparent; background-image: url("http://i41.tinypic.com/2iha269.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; z-index: 0; } .header_onhold { background-color: transparent; background-image: url("http://i39.tinypic.com/5fhwkz.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; } .header_dropped { background-color: transparent; background-image: url("http://i42.tinypic.com/f2n50y.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; } .header_ptw { background-color: transparent; background-image: url("http://i39.tinypic.com/2ahh7t.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; } #list_surround .status_selected, #list_surround .status_not_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i41.tinypic.com/2vxnkhh.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border: 2px solid black !important; border-radius: 20px 0 0 0; display: block; height: 83px; padding: 0; position: fixed; right: -3px; top: 274px; width: 271px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i42.tinypic.com/m7coxw.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border-top-left-radius: 0; border-top-right-radius: 0; top: 360px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i41.tinypic.com/10pww9e.png"); background-position: 0 0; background-repeat: repeat repeat; top: 446px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i40.tinypic.com/2mh96c6.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; top: 531px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i43.tinypic.com/33nvsjo.png"); background-position: 0 0; background-repeat: repeat repeat; top: 617px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i41.tinypic.com/2r2q7ue.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 20px !important; top: 702px; width: 271px; } /:hover + .hide { background-color: rgba(200, 5, 200, 0.75); background-position: center 50% !important; background-repeat: no-repeat !important; background-size: cover; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: block !important; height: 280px; left: 1%; padding-bottom: 0; position: fixed; top: 160px; width: 181px; } .hide:before { background: none repeat scroll 0 0 transparent; border-radius: 25px 25px 0 0; color: white; content: ""; padding-bottom: 5px; position: absolute; text-align: center; top: -25px; width: 225px; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-color: rgba(20, 30, 255, 0.85) !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: none; height: auto; left: 0; padding: 12px 17px 16px 23px; position: fixed; top: 462px; width: 184px; z-index: 1; } #copyright, #copyright:hover { background-color: #C41E0E; border-radius: 5px 5px 5px 5px; bottom: 0; color: white; padding: 2px; width: 100%; } #copyright:hover { } #copyright:before { color: white; content: " Design by SylakentH_, got the idea from Stark700s layout. Greets!"; font-size: 12px; padding-right: 10px; } #copyright:after { color: gold; content: " "; padding-left: 20px; } #copyright a { } a[href=""], [href=""] { background-attachment: scroll; background-color: transparent; background-image: url("http://i41.tinypic.com/jsejw1.png"); background-position: left top; background-repeat: no-repeat; padding-bottom: 5px !important; padding-left: 29px; } /* 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:7px; 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:-200px; margin-top: -160px; 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: red; content: " "; height: 88px; left: 10; margin-top: 80px; margin-left: 50px; position: absolute; top: 90px; width: 270px; /z-index: 0; /*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; } My Anime List |
Jan 27, 2014 2:29 AM
#24
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 .hide:hover:after { background: red; content: " "; height: 88px; left: 10; margin-top: 80px; margin-left: 50px; position: absolute; top: 90px; width: 270px; /z-index: 0; And this is all my code @import "http://dl.dropboxusercontent.com/u/97168413/CSS%20for%20MAL/CSS%20for%20Foxgirls%20MK.css"; @import "http://dl.dropboxusercontent.com/u/97168413/CSS%20for%20MAL/google%20family%20fonts%20MK.css"; @import "http://dl.dropboxusercontent.com/u/97168413/CSS%20for%20MAL/Icon%20style%20menu%20bar%20MK.css"; @import "http://dl.dropboxusercontent.com/u/97168413/CSS%20for%20MAL/Premade%20anime%20MK.css"; *{ text-decoration: none; } body { background-attachment: fixed; background-clip: border-box; background-color: transparent; background-image: url("http://i43.tinypic.com/2wf5ksj.jpg"); background-position: 24% 8%; background-repeat: no-repeat no-repeat; background-size: cover; font-family: calibri; } #inlineContent { background-image: url("http://i41.tinypic.com/vncx7l.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; display: inline-block !important; height: 188px; margin: auto !important; position: absolute; top: 0 !important; width: 700px !important; z-index: 4 !important; } #list_surround { background-attachment: fixed; background-position: 24% 0; background-repeat: no-repeat no-repeat; font-size: 15px; height: 250px; left: 15% !important; line-height: 1; margin: 0 auto; padding-bottom: 13px; padding-top: 133px; position: absolute; width: 700px; z-index: 0; } a { color: white; text-shadow: none; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: red; font-weight: bold; transition: all 0.4s ease 0s; } a:hover { color: #3167A9; text-shadow: 0 1px rgba(255, 255, 255, 0.15); } .borderRBL { border-width: 0 1px 1px 1px; } .table_header { } .table_header:first-of-type { border-radius: 20px 0 0 0; } .table_header:nth-of-type(2) { text-align: left; font-family: cursive; font-style: italic; } .table_header:nth-of-type(5) { border-bottom-right-radius: 0; border-top-left-radius: 0; border-top-right-radius: 20px; } .table_header, .category_totals { background-color: #000000; border: 0 none; opacity: 1; padding: 4px; padding-bottom: 10px; text-align: center; vertical-align: top; } .td1, .td2 { background-image: url("http://i40.tinypic.com/opuveu.png"); padding: 4px; padding-bottom: 10px; padding-top: 10px; } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } .table_header:nth-of-type(6) { display: none; width: 0; } small { color: purple; font-weight: bold; } .table_header, .td1, .td2, .category_totals { color: grey; } .borderRBL { line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } .category_totals { background-color: black; border-radius: 0 0 12px 12px; text-align: center; } .category_totals:hover { background-color: #C41E0E; color: #FFFFFF; } [class^="header_"] * { background-repeat: no-repeat no-repeat; font-size: 0; height: 200px; line-height: 24px; padding-bottom: 0; text-align: right; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: #FFFFFF; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } #grand_totals { background-image: url("http://i40.tinypic.com/opuveu.png"); border: 0 none; border-color: rgb(255, 255, 255); border-radius: 20px 20px 20px 20px; color: rgb(233, 13, 13); line-height: 3; min-height: 20px; padding: 8px; text-align: center; vertical-align: top; } .status_not_selected { opacity: 0.7; right: -183px !important; transition: all 0.4s ease 0s; } .status_not_selected:hover { color: transparent; opacity: 1; right: 3px !important; transition: all 0.4s ease 0s; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color: transparent; display: block; height: 100px; opacity: 0; width: 271px; } .status_selected { display: block; } .status_not_selected { display: block; } .header_cw { background-color: transparent; background-image: url("http://i41.tinypic.com/qp4ewj.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; } .header_completed { background-color: transparent; background-image: url("http://i41.tinypic.com/2iha269.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; z-index: 0; } .header_onhold { background-color: transparent; background-image: url("http://i39.tinypic.com/5fhwkz.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; } .header_dropped { background-color: transparent; background-image: url("http://i42.tinypic.com/f2n50y.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; } .header_ptw { background-color: transparent; background-image: url("http://i39.tinypic.com/2ahh7t.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; } #list_surround .status_selected, #list_surround .status_not_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i41.tinypic.com/2vxnkhh.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border: 2px solid black !important; border-radius: 20px 0 0 0; display: block; height: 83px; padding: 0; position: fixed; right: -3px; top: 274px; width: 271px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i42.tinypic.com/m7coxw.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border-top-left-radius: 0; border-top-right-radius: 0; top: 360px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i41.tinypic.com/10pww9e.png"); background-position: 0 0; background-repeat: repeat repeat; top: 446px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i40.tinypic.com/2mh96c6.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; top: 531px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i43.tinypic.com/33nvsjo.png"); background-position: 0 0; background-repeat: repeat repeat; top: 617px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i41.tinypic.com/2r2q7ue.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 20px !important; top: 702px; width: 271px; } /:hover + .hide { background-color: rgba(200, 5, 200, 0.75); background-position: center 50% !important; background-repeat: no-repeat !important; background-size: cover; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: block !important; height: 280px; left: 1%; padding-bottom: 0; position: fixed; top: 160px; width: 181px; } .hide:before { background: none repeat scroll 0 0 transparent; border-radius: 25px 25px 0 0; color: white; content: ""; padding-bottom: 5px; position: absolute; text-align: center; top: -25px; width: 225px; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-color: rgba(20, 30, 255, 0.85) !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: none; height: auto; left: 0; padding: 12px 17px 16px 23px; position: fixed; top: 462px; width: 184px; z-index: 1; } #copyright, #copyright:hover { background-color: #C41E0E; border-radius: 5px 5px 5px 5px; bottom: 0; color: white; padding: 2px; width: 100%; } #copyright:hover { } #copyright:before { color: white; content: " Design by SylakentH_, got the idea from Stark700s layout. Greets!"; font-size: 12px; padding-right: 10px; } #copyright:after { color: gold; content: " "; padding-left: 20px; } #copyright a { } a[href=""], [href=""] { background-attachment: scroll; background-color: transparent; background-image: url("http://i41.tinypic.com/jsejw1.png"); background-position: left top; background-repeat: no-repeat; padding-bottom: 5px !important; padding-left: 29px; } /* 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:7px; 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:-200px; margin-top: -160px; 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: red; content: " "; height: 88px; left: 10; margin-top: 80px; margin-left: 50px; position: absolute; top: 90px; width: 270px; /z-index: 0; /*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; } 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. |
Jan 27, 2014 8:57 PM
#25
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 |
Jan 27, 2014 9:24 PM
#26
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 |
Jan 27, 2014 10:20 PM
#27
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. |
Aug 17, 2014 8:48 AM
#28
Aug 19, 2014 7:14 AM
#29
Aug 22, 2014 2:00 AM
#30
Aug 22, 2014 2:17 AM
#31
Aug 25, 2014 6:08 AM
#32
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 |
Aug 27, 2014 4:38 AM
#33
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) |
Aug 27, 2014 6:21 AM
#34
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 |
Aug 28, 2014 3:58 PM
#35
Ok, but now all covers back :D |
Sep 26, 2014 11:57 AM
#36
Am i suposed to just copy and paste these codes in step 3? |
Sep 26, 2014 12:09 PM
#37
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 |
Nov 6, 2014 1:01 AM
#38
This topics been updated to working again. Install the new codes from the first post to get this effect back. |
Mar 10, 2015 4:23 AM
#39
This is also updated with a better anime import, if you were using the old one you should change to this one |
Apr 2, 2015 10:56 PM
#40
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 body { background-attachment:fixed; background-clip:border-box; background-color:transparent; background-image:url(http://puu.sh/gYlLB/0b2da11fd4.png); background-position:0 0%, 0 0; background-repeat:no-repeat no-repeat; background-size:cover; font-family:calibri; } #inlineContent { display:inline-block !important; height:1200px !important; left:0 !important; margin:auto !important; position:fixed !important; right:0 !important; top:0 !important; width:1200px !important; z-index:-1 !important; } #list_surround { background-color:transparent; font-size:125%; line-height:1; margin:0 auto; padding-bottom:10px; padding-top:0px; position:absolute; right:20px !important; width:950px; margin-bottom:-200px; margin-top:-50px; } a { color:#FFFFFF; text-decoration:none; text-shadow:none; } a:hover { text-decoration:underline; font-weight:normal; color:silver; } a:active { color:black; } .table_header { background-color:rgba(0, 0, 0, 0.75); } .table_header:first-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:6px; border-top-right-radius:0px; } .table_header:nth-of-type(2) { padding-left:35px; text-align:left; } .table_header:last-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:0; border-top-right-radius:6px; } .td1 { background-color:rgba(70, 70, 70, 0.498039); height:65px; } .td2 { background-color:rgba(50, 50, 50, 0.498039); height:65px; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border:0 none; padding:4px; text-align:center; vertical-align:top; } .table_header, .td1, .td2, .category_totals { color:white; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:17px; } .category_totals { background-color:rgba(184, 184, 184, 0.498039); border-bottom-left-radius:6px; border-bottom-right-radius:6px; border-top-left-radius:0; border-top-right-radius:0; color:black; text-align:center; } [class^="header_"] * { background-repeat:no-repeat no-repeat; font-size:0; height:200px; line-height:24px; padding-bottom:4px; text-align:right; vertical-align:bottom; } .header_title { border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#000000; display:inline-block; font-style:italic; height:auto; padding:0 8px 0 0; text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px; } #grand_totals { background-color:rgba(255, 255, 102, 0.6); border:0 none; border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#000099; line-height:20px; min-height:20px; padding:8px; text-align:center; vertical-align:middle; } #copyright { background-color:rgba(180, 32, 48, 0.6); border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#EEEEEE; line-height:17px; margin-top:10px; padding:8px; text-align:center; } #copyright::after { } .hide { background-color:rgba(248, 162, 200, 0.701961); background-position:50% 50%; background-repeat:no-repeat no-repeat; background-size:cover; border:1px solid #FFFFFF; border-bottom-left-radius:7px; border-bottom-right-radius:7px; border-top-left-radius:7px; border-top-right-radius:0; display:inline-block !important; height:55px; margin-left:33px; margin-top:-65px; position:absolute; width:35px; } .hide:hover { 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.54902) 0 0 8px 8px; margin-left:-140px; padding-right:150px; padding-top:220px !important; position:absolute; z-index:1; } .td1:nth-of-type(2), .td2:nth-of-type(2) { padding-left:35px; text-align:left; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-attachment:scroll; background-color:transparent; background-image:none; background-position:0 0; background-repeat:repeat repeat; border-bottom-style:none !important; border-bottom-width:medium !important; display:inline-block; font-size:87%; height:0 !important; left:70px; line-height:16px !important; margin-top:16px; position:absolute; text-align:justify !important; width:720px; z-index:2; } .table_header:nth-of-type(6) { display:none; } span[id*="tagRow"] { display:block !important; } span[id*="tagLinks"] { display:none !important; } a, .td1, .td2, .category_totals { -webkit-transition:all 0.25s ease-in-out 0s; transition:all 0.25s ease-in-out 0s; } #list_surround .status_selected, #list_surround .status_not_selected { -webkit-background-clip:padding-box !important; background-clip:padding-box !important; background-color:transparent; background-image:url(http://i45.tinypic.com/1ftxza.png); background-position:100% 0; background-repeat:no-repeat no-repeat; background-size:contain; border:1px solid transparent; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; display:block; left:50px; padding:0; position:fixed; top:30px; width:350px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-image:url(http://i49.tinypic.com/2pqvu2u.png); background-position:100% 0; top:130px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i49.tinypic.com/vgt2w.png); background-position:0 0; top:230px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i46.tinypic.com/fc8aqg.png); background-position:100% 0; top:330px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i50.tinypic.com/wvnwo7.png); background-position:0 0; top:430px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i50.tinypic.com/14uz8d3.png); background-position:100% 0; top:530px; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color:transparent; display:block; font-size:0; height:80px; width:350px; } .header_cw { background-color:transparent; background-image:url(http://img43.imageshack.us/img43/8229/yxsb.png); background-position:0 150px; background-repeat:no-repeat no-repeat; height:525px; margin-bottom:0; margin-top:-150px; } .header_completed { background-color:transparent; background-image:url(http://img835.imageshack.us/img835/4703/wg1k.png); background-position:0 150px; background-repeat:no-repeat no-repeat; height:525px; margin-bottom:0; margin-top:-150px; } .header_onhold { background-color:transparent; background-image:url(http://img834.imageshack.us/img834/2109/7ad3.png); background-position:0 150px; background-repeat:no-repeat no-repeat; height:525px; margin-bottom:0; margin-top:-150px; } .header_ptw { background-color:transparent; background-image:url(http://img404.imageshack.us/img404/2928/pye7.png); background-position:0 150px; background-repeat:no-repeat no-repeat; height:525px; margin-bottom:0; margin-top:-150px; } .header_dropped { background-color:transparent; background-image:url(http://img43.imageshack.us/img43/1271/nd81.png); background-position:0 150px; background-repeat:no-repeat no-repeat; height:525px; margin-bottom:0; margin-top:-150px; } /* 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: 64px; padding-left: 100px; } #list_surround table:nth-of-type(n+4):hover td:nth-of-type(3), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(4), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(5), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(6), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(7), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(8) { display: table-cell; } #list_surround small a:last-of-type { display: none !important; } .animetitle + small { visibility: visible !important; } #list_surround a[href*="http://myanimelist.net/panel.php?go=edit"], #list_surround a[href*="http://myanimelist.net/editlist.php?type="], #list_surround a[href*="http://myanimelist.net/panel.php?go=add"] { visibility: visible !important; margin-right: 10px } .td1:nth-of-type(6) small, .td2:nth-of-type(6) small, .td1:nth-of-type(5) small, .td2:nth-of-type(5) small, .td1:nth-of-type(4) small, .td2:nth-of-type(4) small { visibility: visible !important; } .td1:nth-of-type(6) small:hover, .td2:nth-of-type(6) small:hover, .td1:nth-of-type(5) small:hover, .td2:nth-of-type(5) small:hover, .td1:nth-of-type(4) small:hover, .td2:nth-of-type(4) small:hover{ text-decoration: underline; } Thanks in advance! |
Apr 12, 2015 4:45 AM
#41
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! |
Apr 14, 2015 6:49 PM
#42
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 body { background-attachment:fixed; background-clip:border-box; background-color:transparent; background-image:url(http://puu.sh/gYlLB/0b2da11fd4.png); background-position:0 0%, 0 0; background-repeat:no-repeat no-repeat; background-size:cover; font-family:calibri; } #inlineContent { display:inline-block !important; height:1200px !important; left:0 !important; margin:auto !important; position:fixed !important; right:0 !important; top:0 !important; width:1200px !important; z-index:-1 !important; } #list_surround { background-color:transparent; font-size:125%; line-height:1; margin:0 auto; padding-bottom:10px; padding-top:0px; position:absolute; right:20px !important; width:950px; margin-bottom:-200px; margin-top:-50px; } a { color:#FFFFFF; text-decoration:none; text-shadow:none; } a:hover { text-decoration:underline; font-weight:normal; color:silver; } a:active { color:black; } .table_header { background-color:rgba(0, 0, 0, 0.75); } .table_header:first-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:6px; border-top-right-radius:0px; } .table_header:nth-of-type(2) { padding-left:35px; text-align:left; } .table_header:last-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:0; border-top-right-radius:6px; } .td1 { background-color:rgba(70, 70, 70, 0.498039); height:65px; } .td2 { background-color:rgba(50, 50, 50, 0.498039); height:65px; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border:0 none; padding:4px; text-align:center; vertical-align:top; } .table_header, .td1, .td2, .category_totals { color:white; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:17px; } .category_totals { background-color:rgba(184, 184, 184, 0.498039); border-bottom-left-radius:6px; border-bottom-right-radius:6px; border-top-left-radius:0; border-top-right-radius:0; color:black; text-align:center; } [class^="header_"] * { background-repeat:no-repeat no-repeat; font-size:0; height:200px; line-height:24px; padding-bottom:4px; text-align:right; vertical-align:bottom; } .header_title { border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#000000; display:inline-block; font-style:italic; height:auto; padding:0 8px 0 0; text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px; } #grand_totals { background-color:rgba(255, 255, 102, 0.6); border:0 none; border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#000099; line-height:20px; min-height:20px; padding:8px; text-align:center; vertical-align:middle; } #copyright { background-color:rgba(180, 32, 48, 0.6); border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#EEEEEE; line-height:17px; margin-top:10px; padding:8px; text-align:center; } #copyright::after { } .hide { background-color:rgba(248, 162, 200, 0.701961); background-position:50% 50%; background-repeat:no-repeat no-repeat; background-size:cover; border:1px solid #FFFFFF; border-bottom-left-radius:7px; border-bottom-right-radius:7px; border-top-left-radius:7px; border-top-right-radius:0; display:inline-block !important; height:55px; margin-left:33px; margin-top:-65px; position:absolute; width:35px; } .hide:hover { 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.54902) 0 0 8px 8px; margin-left:-140px; padding-right:150px; padding-top:220px !important; position:absolute; z-index:1; } .td1:nth-of-type(2), .td2:nth-of-type(2) { padding-left:35px; text-align:left; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-attachment:scroll; background-color:transparent; background-image:none; background-position:0 0; background-repeat:repeat repeat; border-bottom-style:none !important; border-bottom-width:medium !important; display:inline-block; font-size:87%; height:0 !important; left:70px; line-height:16px !important; margin-top:16px; position:absolute; text-align:justify !important; width:720px; z-index:2; } .table_header:nth-of-type(6) { display:none; } span[id*="tagRow"] { display:block !important; } span[id*="tagLinks"] { display:none !important; } a, .td1, .td2, .category_totals { -webkit-transition:all 0.25s ease-in-out 0s; transition:all 0.25s ease-in-out 0s; } #list_surround .status_selected, #list_surround .status_not_selected { -webkit-background-clip:padding-box !important; background-clip:padding-box !important; background-color:transparent; background-image:url(http://i45.tinypic.com/1ftxza.png); background-position:100% 0; background-repeat:no-repeat no-repeat; background-size:contain; border:1px solid transparent; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; display:block; left:50px; padding:0; position:fixed; top:30px; width:350px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-image:url(http://i49.tinypic.com/2pqvu2u.png); background-position:100% 0; top:130px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i49.tinypic.com/vgt2w.png); background-position:0 0; top:230px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i46.tinypic.com/fc8aqg.png); background-position:100% 0; top:330px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i50.tinypic.com/wvnwo7.png); background-position:0 0; top:430px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i50.tinypic.com/14uz8d3.png); background-position:100% 0; top:530px; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color:transparent; display:block; font-size:0; height:80px; width:350px; } .header_cw { background-color:transparent; background-image:url(http://img43.imageshack.us/img43/8229/yxsb.png); background-position:0 150px; background-repeat:no-repeat no-repeat; height:525px; margin-bottom:0; margin-top:-150px; } .header_completed { background-color:transparent; background-image:url(http://img835.imageshack.us/img835/4703/wg1k.png); background-position:0 150px; background-repeat:no-repeat no-repeat; height:525px; margin-bottom:0; margin-top:-150px; } .header_onhold { background-color:transparent; background-image:url(http://img834.imageshack.us/img834/2109/7ad3.png); background-position:0 150px; background-repeat:no-repeat no-repeat; height:525px; margin-bottom:0; margin-top:-150px; } .header_ptw { background-color:transparent; background-image:url(http://img404.imageshack.us/img404/2928/pye7.png); background-position:0 150px; background-repeat:no-repeat no-repeat; height:525px; margin-bottom:0; margin-top:-150px; } .header_dropped { background-color:transparent; background-image:url(http://img43.imageshack.us/img43/1271/nd81.png); background-position:0 150px; background-repeat:no-repeat no-repeat; height:525px; margin-bottom:0; margin-top:-150px; } /* 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: 64px; padding-left: 100px; } #list_surround table:nth-of-type(n+4):hover td:nth-of-type(3), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(4), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(5), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(6), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(7), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(8) { display: table-cell; } #list_surround small a:last-of-type { display: none !important; } .animetitle + small { visibility: visible !important; } #list_surround a[href*="http://myanimelist.net/panel.php?go=edit"], #list_surround a[href*="http://myanimelist.net/editlist.php?type="], #list_surround a[href*="http://myanimelist.net/panel.php?go=add"] { visibility: visible !important; margin-right: 10px } .td1:nth-of-type(6) small, .td2:nth-of-type(6) small, .td1:nth-of-type(5) small, .td2:nth-of-type(5) small, .td1:nth-of-type(4) small, .td2:nth-of-type(4) small { visibility: visible !important; } .td1:nth-of-type(6) small:hover, .td2:nth-of-type(6) small:hover, .td1:nth-of-type(5) small:hover, .td2:nth-of-type(5) small:hover, .td1:nth-of-type(4) small:hover, .td2:nth-of-type(4) small:hover{ text-decoration: underline; } 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 |
Jul 21, 2015 9:04 PM
#43
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. @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); /* Got a question or want to learn more? Try this link: http://myanimelist.net/forum/?topicid=419405&show=0#post1 */ /* BACKGROUND IMAGE This is the main background image for the whole page. Change the image link to the background you want! If you're not seeing a background, make sure you are copied the entire CSS code or added any new background image codes correctly. Also your image link may be broken, try uploading a new background then! */ body { background-image: url(https://i.imgur.com/aUEVAph.png); background-size: cover; background-attachment: fixed; } /* HEADER COLOR AND FONT These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc). */ .header_title { background-color: DimGray; color:white; font-family:courier; font-size:30px; } /* SUB-HEADERS BACKGROUND COLOR COLOR Below each main header is the sub-header which says Score, Episodes, Tags, etc. */ .table_header { background-color: DarkGray; font-size:15px; } /* ANIME/MANGA TITLE FONTS This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc. */ .animetitle, .animetitle:visited { color:white; font-family:courier; font-size:15px; } /* LIST FONTS This is the type and color for more of the numbers, links, and words on the list itself! */ .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color:white; font-family:courier; font-size:12px; } /* LIST WIDTH Use this to increase the width of your list! */ #list_surround { width: 800px; } /* LIST COLOR The numbers in parenthesis below control the color of your list background itself. The first number is the amount of red, the second amount of green, third blue, and each can be set to a maximum of 255 and minimum of 0. The 4th number in parenthesis is the opacity amount, which can be set from .0 (invisible) to 1 (completely opaque). For more info on RGBA color see this tutorial: http://myanimelist.net/forum/?topicid=440525 */ .category_totals, .td1, .td2, #grand_totals, #copyright { background-color: rgba(0,0,0,1); } /* ROW HOVER COLOR Change the color you see on a row only when you put your cursor over it with this code, you use the same color change style as in the above code. */ tr:hover [class^=td] { background-color: rgba(224, 224, 224, 0.5) !important; } /* LIST POSITION Change "left" to "right" to switch the list side, or vice versa. */ #list_surround { left: 75px; position: absolute; } /* REPOSITION MAIN BACKGROUND Change the position your background starts on your screen from with the two properties after "background-position" below. For example, the default code starts it from the left and top corner of the screen. You change 'right' and 'top' with two properties, they can be any of the following: left, top, bottom, right, or center. So if you want your background to start from the center of the screen, use "center center". If you want it to start from the top and left, use "top left". If you want it to start from the top and center, use "top center". If you want it to start from the right and top, use "right top" If you want it to start from the right and bottom, use "right bottom" and so forth... Additionally, you can change "left" to a % to determine how far left or right the background starts from. For example "30% top" will start the background from the top but 30% of the pic's width from the left of the layout. You can also change top to a % to change the amount you want to start it from the top or bottom. */ body { background-position: top right;} /* 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(0,0,0,1); background-position:50% 50%; background-repeat:no-repeat no-repeat; background-size:cover; display:inline-block !important; position: absolute; } /*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; } /*OTHER CODES Important codes for the layout's setup. Please don't mess with these unless you know what you're doing! To learn more, use the link at the top of this CSS. */ body { font-weight: light; background-repeat: no-repeat; background-color: #FBFDE8; } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:red; text-decoration:underline; } .category_totals, .td1, .td2, #grand_totals, #copyright { border-width:0; padding:2px; } .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER { border-width:0; padding:2px; } .status_selected { background-color:black; padding:2px; color:white; text-decoration: blink; } .status_not_selected { background-color:black; padding:2px; color:white; } #copyright:after { content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs or info."; } .status_selected a{ color:blue; } .status_not_selected a{ color:white; } .thickbox { color:cyan; font-family:fantasy; font-size:12px; } .header_title { height:52px; padding:2px; } .table_header { border-width:0; font-weight:bold; padding:2px; } .category_totals { height:30px; } #copyright, #grand_totals { text-align: center; margin:0 auto; } tr:hover [class^="td"] { transition: all 0.2s linear 0s; } /* CODES (REPLACEMENT FOR "CSS FOR FOXGIRLS" IMPORT) Used to remove the more button (which no longer works after using the code above to show covers). Also helps with settings for the tag hover option if you use that. */ #list_surround table:nth-of-type(n+4):hover td:nth-of-type(3), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(4), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(5), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(6), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(7), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(8) { display: table-cell; } #list_surround small a:last-of-type { display: none !important; } .animetitle + small { visibility: visible !important; } #list_surround a[href*="http://myanimelist.net/panel.php?go=edit"], #list_surround a[href*="http://myanimelist.net/editlist.php?type="], #list_surround a[href*="http://myanimelist.net/panel.php?go=add"] { visibility: visible !important; margin-right: 10px } .td1:nth-of-type(6) small, .td2:nth-of-type(6) small, .td1:nth-of-type(5) small, .td2:nth-of-type(5) small, .td1:nth-of-type(4) small, .td2:nth-of-type(4) small { visibility: visible !important; } .td1:nth-of-type(6) small:hover, .td2:nth-of-type(6) small:hover, .td1:nth-of-type(5) small:hover, .td2:nth-of-type(5) small:hover, .td1:nth-of-type(4) small:hover, .td2:nth-of-type(4) small:hover{ text-decoration: underline; } |
Jul 21, 2015 9:48 PM
#44
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
Jul 21, 2015 11:16 PM
#45
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!!! |
Jan 2, 2016 5:42 PM
#46
hey, this is great but some images are broken/missing such as: noragami: #20507 one punch man specials: #31772 here is how they appear on anime lists : https://gyazo.com/3f0a1eef919e68b3e70b222a740d09cb i'm sure there are other broken images, could you please them? once again thanks for the great share. EDIT: Just found out about Genku, works great |
HecargJan 3, 2016 9:45 AM
Jan 12, 2016 2:35 PM
#47
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? |
Jan 17, 2016 7:24 AM
#48
Feb 4, 2016 3:13 PM
#49
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! |
More topics from this board
» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7822 |
by Thereisnoonehere
»»
May 27, 4:04 PM |
|
Sticky: » [ BBCODE ] All 2023 BBcodes, Guides, and TemplatesShishio-kun - Feb 16, 2023 |
41 |
by ohpishhposh
»»
May 25, 5:04 PM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1207 |
by laBelphe
»»
May 23, 7:30 PM |
|
» [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 |