This layout is custom CSS. If you don't know how to install it, use the easy Beginner's Tutorial in this section: http://myanimelist.net/forum/?topicid=419405 The design has a version for anime and another for manga lists. For more layouts check the full list of Premade Layouts: http://myanimelist.net/forum/?topicid=318587[/b] My most ambitious original design yet! Click for a full screen preview  How to install (READ THIS!): Just click the links at the bottom of the post to find the source code which you'll install to your CSS. If you have problems or want to make changes, see the information below. How to customize the pictures or topbar: What to do if some of your titles don't turn into DVD covers Customizing and changing the bottom pic The layout CSS code and proper settings (IMPORTANT!): Questions? If you're having trouble, see if the information above resolves your problem or post your questions here in this topic please! Anime List version: Manga List version: |
Shishio-kunOct 31, 2018 11:30 PM
| Looks so great! But I think there might be a bug in the layout because "select order" looks like this I bet that's easily fixable tho. |
  |
| I think it's because you need to display the column Numbers in your list settings: http://myanimelist.net/editprofile.php?go=listpreferences |
u531355 said: I think it's because you need to display the column Numbers in your list settings: http://myanimelist.net/editprofile.php?go=listpreferences Oh now it works :D A big thank you! |
|
| Can't find which code i shall change to edit the picture sizes... |
AkiYuuki said: Can't find which code i shall change to edit the picture sizes... Pretty much all of it .. |
| Hello! I recently found this new poster-style premade layout and I was enamored by it that I didn't hesitate to try it! It looks visually amazing in my list! Thank you for sharing this layout. I looked at the code over and over again but I couldn't find/locate the line that customizes the layout's header image. I'd like to change the image where the 2 white arrows are pointing at from the screenshot inside the spoiler: It was a little tough identifying some of the URLs of the images from the code because I'm having trouble viewing the images uploaded from Imageshack. Something like a picture of a frozen frog shows up with the message "Domain Unregistered" written on it. Y U DO THIS 2 ME IMAGESHACK?! Thank you in advance! o/ |
| @LunyRed I'd really suggest you to install Firebug (here are also various tutorials for it) - it is super useful if you're looking for a specific code of your List. The URL of the header image is http://img7.imageshack.us/img7/5158/header21z.png |
| I don't plan to notes to this code anytime soon, so if you got questions its best to ask here or use Firebug as FUN suggested. How can you go wrong with a suggestion from someone named FUN? LunyRed said: Hello! I recently found this new poster-style premade layout and I was enamored by it that I didn't hesitate to try it! It looks visually amazing in my list! Thank you for sharing this layout. I looked at the code over and over again but I couldn't find/locate the line that customizes the layout's header image. I'd like to change the image where the 2 white arrows are pointing at from the screenshot inside the spoiler: It was a little tough identifying some of the URLs of the images from the code because I'm having trouble viewing the images uploaded from Imageshack. Something like a picture of a frozen frog shows up with the message "Domain Unregistered" written on it. Y U DO THIS 2 ME IMAGESHACK?! Thank you in advance! o/ Scroll down in your CSS to find codes starting with ".header" .header_cw for example. There's five of these. Under all 5 you'll see background: and on that line you'll see two image URLs. The second one should be the Hatsune image in the header. Its the same Miku one in all five, so you can customize all five category pages headers differently. I was going to add a different image to each page but put if off till later. btw if you find .header_title, disregard that one. AkiYuuki said: Can't find which code i shall change to edit the picture sizes... For now, I guess you could lower the width and height of .hide which is near the top. You might also want to change background-size to 'contain' instead of 'cover', and add background no repeat as well. |
FUN said: @LunyRed I'd really suggest you to install Firebug (here are also various tutorials for it) - it is super useful if you're looking for a specific code of your List. The URL of the header image is http://img7.imageshack.us/img7/5158/header21z.png I've read your reply a couple of hours ago then I went ahead to try out Firebug. This add-on is great! I'm still trying to get the hang of it. I found some of the elements that I'm planning to change from the layout. Thank you so much! Shishio-kun said: Scroll down in your CSS to find codes starting with ".header" .header_cw for example. There's five of these. Under all 5 you'll see background: and on that line you'll see two image URLs. The second one should be the Hatsune image in the header. Its the same Miku one in all five, so you can customize all five category pages headers differently. I was going to add a different image to each page but put if off till later. btw if you find .header_title, disregard that one. That was amazing! It is as you said. With this, I can have unique header images for each category. Thanks for all the help! :D I hope I'm not missing any images. I'm still using all the premade pictures because I don't have my replacements ready yet. I'm a little worried that some of the images hosted from Imageshack won't show up. =S |
LunyRed said: I hope I'm not missing any images. I'm still using all the premade pictures because I don't have my replacements ready yet. I'm a little worried that some of the images hosted from Imageshack won't show up. =S Why would you be missing images? If they don't show up on your list just reupload them. |
Shishio-kunMay 31, 2012 1:59 AM
Shishio-kun said: Why would you be missing images? If they don't show up on your list just reupload them. From the code itself and from the layout's output, I still can't tell among some of the image URLs which is which. For example: Here. I pointed an arrow to where the missing image was replaced by the ugly picture of the frozen frog thanks to Imageshack. Looks like it's the partner of the rollover image for the user icon just on the left of the home icon? If I'm lucky enough to see the images from Imageshack, I immediately save them in my laptop to study the image dimensions later. If I copy the image URLs and paste them in my browser's address bar, all I get is this! I'll definitely re-host the images myself if I can get a copy of all those icons. Thank you... =< |
LunyRed said: From the code itself and from the layout's output, I still can't tell among some of the image URLs which is which. For example: Here. I pointed an arrow to where the missing image was replaced by the ugly picture of the frozen frog thanks to Imageshack. Ok, you're trying to replace the icons in the top bar, I thought you were only replacing the headers. Its best to do this from the code itself. If you scroll down in it you'll find this part: #mal_cs_listinfo { background-image: url("http://img18.imageshack.us/img18/2899/icon1db.png"); right: 106px; } #mal_cs_listinfo:hover { background-image: url("http://img809.imageshack.us/img809/9025/icon1over.png"); } #mal_cs_links { background-image: url("http://img822.imageshack.us/img822/7759/icon2wx.png"); right: 72px !important; z-index: 9; } #mal_cs_links:hover { background-image: url("http://img834.imageshack.us/img834/5844/icon2over.png"); } #mal_cs_otherlinks { background-image: url("http://img18.imageshack.us/img18/246/icon3tt.png"); right: 38px !important; z-index: 8; } #mal_cs_otherlinks:hover { background-image: url("http://img716.imageshack.us/img716/6956/icon3over.png"); } #mal_cs_powered { background-image: url("http://img821.imageshack.us/img821/1820/icon4i.png"); right: 4px !important; z-index: 7; } #mal_cs_powered:hover { background-image: url("http://img696.imageshack.us/img696/1994/icon4over.png"); } The images are right there, just copy the URL and paste it in the address bar, no parenthesis or quotations. It takes me to the image for copying even when I wasn't logged into my imageshack account. It might be different for you since you're in another country but other countries seem to have no problem with Imageshack hosted pics so far. You can replace the icons on the layout through these codes too. The parts that say "hover" are what you see on rollover. If you still can't see the direct links from here then I can move them to a tinypic folder, I was going to do a "Customize the Icon-style toolbar" tutorial later too if you want to wait for that. I think you're supposed to get that frozen msg when you try to view a direct link as an unregistered user, or do similar stuff. Cuz I am pretty sure MAL is registered on Imageshack. So maybe you need to register as a user to do what you were gonna do. Are you getting this screen on the default layout, or after you tried to change images out: http://i925.photobucket.com/albums/ad94/4udonge/test/frozen_frog_victimmm.jpg |
Shishio-kunMay 31, 2012 12:38 PM
| I don't have an Imageshack account. I copied the URLs of the images from your post and I was able to grab some of the icons from the top bar while 3 of the URLs led me to a dead end, in other words, the frozen frog. Anyway, 5 out of 8 images would already be helpful, so thanks a lot!! Shishio-kun said: Are you getting this screen on the default layout, or after you tried to change images out: http://i925.photobucket.com/albums/ad94/4udonge/test/frozen_frog_victimmm.jpg I got that from the default layout. :S Even now, I haven't replaced any of the icons from the top bar. Either way, I mentioned that I was able to view at least 5 of the icons so that means they're enough for me to use as templates. |
LunyRed said: I don't have an Imageshack account. I copied the URLs of the images from your post and I was able to grab some of the icons from the top bar while 3 of the URLs led me to a dead end, in other words, the frozen frog. Anyway, 5 out of 8 images would already be helpful, so thanks a lot!! Shishio-kun said: Are you getting this screen on the default layout, or after you tried to change images out: http://i925.photobucket.com/albums/ad94/4udonge/test/frozen_frog_victimmm.jpg I got that from the default layout. :S Even now, I haven't replaced any of the icons from the top bar. OK. Its cuz you live in the Phillipines and I suppose MAL did not register with Imageshack, so some image links won't show for you. It should be all of them tho, I wonder why its only a few. That sucks a lot since Tinypic deletes images, Photobucket has a strict bandwith limit, and none of the other image hosting sites are fast or reliable.. I told a moderator about registering MAL on Imageshack. I'll move the icon bar to my Dropbox later too so it won't happen to any other countries later lol. |
| Yeah, I'm from the Philippines and it would be very inconvenient for users like me to have difficulty in accessing images from Imageshack. No idea what's up with their country-blocking thing, lol. Oh well. Hope it all goes well and thanks again! |
| OK this layouts been updated a lot, now you don't need to make your own #more CSS like before (so it installs easy as hell) plus there is a manga version! Also the icon style toolbar is hosted on Dropbox so it shouldn't be blocked in other countries. |
| Well I'm satisfied with my current layout. :) I already have 3 different header banners and I only need 2 more to complete all 5 categories. I manually changed some of the fonts from my codes from Times New Roman to Verdana and also switched a few font colors from cyan to red. Gotta thank Firebug for helping me out~ The only image that I haven't re-hosted yet is the copyright footer at the very bottom of the layout where the names of the creators of this layout can be seen. It's still in Imageshack. I should get right to it, haha... Also, has anyone noticed this? Apparently, there's a double slash sign "//" right behind the "On-hold" link at the middle-top area of the layout. You can easily find it the first time you visit your list if you're using this layout. Like I said, it's located at the middle-top area. Is it really part of the code? Is it okay to remove them in any case you can track those floating characters from the code? And lastly, the line where the URL of the "Category Total" image is: url("http://i741.photobucket.com/albums/xx54/44udonge/MAL/Category_Total.png") Will the URL of an image rotator work with it? You know, stuff like this or this! If it's possible, then you can do the same for all the header banners of your poster layout, huh? @ω@ |
LunyRed said: ... And lastly, the line where the URL of the "Category Total" image is: url("http://i741.photobucket.com/albums/xx54/44udonge/MAL/Category_Total.png") Will the URL of an image rotator work with it? You know, stuff like this or this! If it's possible, then you can do the same for all the header banners of your poster layout, huh? @ω@ Oh, interesting, this pages should work, cuz my forum firm in php that I put in the background to test work fine, change the image every reload. |
| This list layout looks sweet in application. This club is awesome as always! |
| Harems don't exist in America. If one guy is constantly surrounded by beautiful girls, then he's probably the gay friend. |
LunyRed said: Also, has anyone noticed this? Apparently, there's a double slash sign "//" right behind the "On-hold" link at the middle-top area of the layout. You can easily find it the first time you visit your list if you're using this layout. Like I said, it's located at the middle-top area. Is it really part of the code? Is it okay to remove them in any case you can track those floating characters from the code? I don't see what you're talking about, please provide a screenshot if its still a problem. |
| I updated this topic with some notes in the code so it'd be easier to know where to change the backgrounds out. |
czerah said: ne~ is it possible to change the 'tags" into "comments"? sankyuu~ :) Do you want to change the word "tag" on the layout to "comment" or just put comments where the tags are? If the second, yeah you can. Just click the Edit command next to Tags when you put your cursor on the poster. There's enough room for the maximum allotted comment space, and the font I updated it with today is very clear! |
czerah said: uhm, no.. what i mean is that instead of tags, the section for comments would appear.. Don't know what you mean by comments. The only place comments can appear is on your profile or the anime's info page. Maybe someone could find a way to implement that into the list tho. |
Shishio-kun said: LunyRed said: Also, has anyone noticed this? Apparently, there's a double slash sign "//" right behind the "On-hold" link at the middle-top area of the layout. You can easily find it the first time you visit your list if you're using this layout. Like I said, it's located at the middle-top area. Is it really part of the code? Is it okay to remove them in any case you can track those floating characters from the code? I don't see what you're talking about, please provide a screenshot if its still a problem. The moment I clicked on my list, I instantly took a screenshot of it. The floating signs are right there on the top-middle section of the page. Even if the list finishes loading, the double slash sign is still there. Here's a zoomed in screenshot of what I'm talking about. |
Shishio-kun said: Don't know what you mean by comments. The only place comments can appear is on your profile or the anime's info page. Maybe someone could find a way to implement that into the list tho. uhm, it's like this.. when you edit the info of an anime on your list, there's a box for comments at the bottom.. |
LunyRed said: Shishio-kun said: LunyRed said: Also, has anyone noticed this? Apparently, there's a double slash sign "//" right behind the "On-hold" link at the middle-top area of the layout. You can easily find it the first time you visit your list if you're using this layout. Like I said, it's located at the middle-top area. Is it really part of the code? Is it okay to remove them in any case you can track those floating characters from the code? I don't see what you're talking about, please provide a screenshot if its still a problem. The moment I clicked on my list, I instantly took a screenshot of it. The floating signs are right there on the top-middle section of the page. Even if the list finishes loading, the double slash sign is still there. Here's a zoomed in screenshot of what I'm talking about. Wow never noticed that, this should take care of it. td.table_header:nth-of-type(1) { color: transparent; } |
czerah said: Shishio-kun said: Don't know what you mean by comments. The only place comments can appear is on your profile or the anime's info page. Maybe someone could find a way to implement that into the list tho. uhm, it's like this.. when you edit the info of an anime on your list, there's a box for comments at the bottom.. Oh I forgot all about those. Since you left the request here maybe someone else will provide a code to switch the tags and comments for you but I don't plan to anytime soon. |
Shishio-kun said: Wow never noticed that, this should take care of it. td.table_header:nth-of-type(1) { color: transparent; } Alright, man. I'll try that. :) Should I add that in the very bottom of the code? |
LunyRed said: Shishio-kun said: Wow never noticed that, this should take care of it. td.table_header:nth-of-type(1) { color: transparent; } Alright, man. I'll try that. :) Should I add that in the very bottom of the code? Yes the bottom, why don't you add this as well since I've made changes to the original since you customized it. They'll move the "airing" text up a little and make your tag text easier to read! .td1:nth-of-type(6) a, .td2:nth-of-type(6) a { background: none repeat scroll 0 0 transparent; color: White; font-family: Verdana; font-size: 11px; text-decoration: none; } .animetitle + small { color: white; left: 197px !important; top: 161px !important; font-size: 12px !important; } |
Shishio-kunJun 22, 2012 12:34 PM
| I've made a couple of changes to the imported CSS, which means the change will be seen no matter when you got the layout since it updates automatically. When you put your cursor on the pics, it will be a little darker so the text will be easier to read. I've also made some changes to the box CSS in the original post which you can add to the bottom if you want they make some of the text easier to read and move the airing out of the way of the tags: .td1:nth-of-type(6) a, .td2:nth-of-type(6) a { background: none repeat scroll 0 0 transparent; color: White; font-family: Verdana; font-size: 11px; text-decoration: none; } .animetitle + small { color: white; left: 197px !important; top: 161px !important; font-size: 12px !important; } td.table_header:nth-of-type(1) { color: transparent; } |
| Sweet! It really works! :D Cool updates and thanks a lot! ^_^ You're awesome. I hope everyone using this layout would be aware of the latest updates. :3 |
czerah said: so i was wondering if the comments can be placed instead of tags.. That is hardly possible. But there is another way based on not MAL comments system:  Are you interested? |
HahaidoJun 24, 2012 12:50 AM
 |
| I've put in a note to customize the bottom banner in the first post. You need to use something with equal dimensions and you do this through using an image editor but its a simple image editor skill. |
I found some great pics on my com for the banners on this layout. Now all the banners in the top have different header pics now for each individual category, and the manga list has its own particular banners! You can reinstall the code to see the different banners on your own list:    |
| There's no poster for Dororo to Hyakkimaru :( http://myanimelist.net/anime/5760/Dororo_to_Hyakkimaru |
RulezMac said: There's no poster for Dororo to Hyakkimaru :( http://myanimelist.net/anime/5760/Dororo_to_Hyakkimaru Covered in the first post under this... What to do if some of your titles don't turn into DVD covers ..always check a top post where you got the code from for frequently encountered issues and asked questions. |
| You have a <pre> in front of your CSS thats not supposed to be there. Also the import you made doesn't seem correct so do the tutorial over again and make sure yours looks like the one in the tutorial. Plus its for manga lists. |
Maheredeemer said: Hello. I'm new here. I love the style of this layout but in my anime list, unlike the screenshots, the text (number, score, rating...etc) appears on ALL the posters, not just the ones I highlight with the cursor. It doesn't look good. Is there a way I can fix that? The only thing I changed in the CSS code is the header image URLs. thx in advance I'm not seeing the same thing at the moment, are you still having the problem? |
| I am having trouble with getting it to work on my system. Not sure what I am doing wrong, but any help would be greatly appericated. Mine currently looks like this:  |
Pokemai11 said: I am having trouble with getting it to work on my system. Not sure what I am doing wrong, but any help would be greatly appericated. Mine currently looks like this: I'm not seeing that atm, are you still having the problem? I do know that it was caused by not having the imports correctly pasted to the top of the CSS, so if anyone gets this problem recopy the code exactly into a clean CSS edit box the same way you see it in the first post and make sure to the include the imports as they are, don't put anything above them or below them. Wow I repeated some of the same as my last post in this thread, maybe this user will have the courtesy to answer back lol |
| i really lke this layout .i copied and paste the layout code i dont know whats wrong with my manga list , title and DVD cover r not the same so messed up and some of the DVD cover dont show up in manga list and anime list also  |
animelovinggirl said: i dont know whats wrong with my manga list , title and DVD cover r not the same so messed up and some of the DVD cover dont show up in manga list and anime list also In that case Shishio-kun would say: What to do if some of your titles don't turn into DVD covers Normally, this layout will turn the top 4500 titles into their covers. So 99% of the time all the titles on someone's list get converted. If its not for you, give it a moment to load and then refresh the page. If still not, you can use my tutorial to make a #more CSS specifically for your list and its import link. When you use this, every title on your list is guaranteed to have its own pic! You can also learn to update it easily later when you add new titles in the future. It will take about five to ten minutes to make your own. http://myanimelist.net/forum/?topicid=443333 |
|
More topics from this board
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
381 |
by KabukiChouNights
»»
Today, 10:56 AM |
|
» theme helpthreat - Jul 5 |
5 |
by Zaryf
»»
Aug 21, 5:46 AM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1261 |
by KiranaStarr
»»
Aug 16, 5:48 PM |
|
» [CSS] ⭐️ Customize your List Cursor + Cursor FixesShishio-kun - Mar 8, 2021 |
30 |
by Shishio-kun
»»
Jul 28, 3:17 AM |
|
» How To Have Different Banner/Cover image & Background Image For Manga & Anime ListsYasminaRegina - Jul 25 |
2 |
by YasminaRegina
»»
Jul 26, 1:02 AM |