This layout is custom CSS. If you don't know how to install it, use the easy starter tutorial: Beginner's Tutorial For more layouts check the Full list of Premade Layouts. More useful topics: All CSS tutorials * Fixing or changing covers * Changing headers This easy-to-use layout by Veriti is one of the most popular premade layouts on MAL! The code for each layout type is linked below. Itsuka Tenma no Kuro Usagi (manga lists) An edited version by Miketsukami-kun.  Code: http://pasted.co/c83dd061 Fixes for broken 2015 layouts  Changing the color of the topbar or list tables You can change the color under TOP BAR SETTINGS and ROW COLORS and change the settings after background-color. If the color codes are unfamiliar to you, you can easily pick new colors here: http://www.css3maker.com/css-3-rgba. Using the anime list style on a manga list .status_not_selected a, .status_selected a { background-image: url("http://i.imgur.com/4rtZb.png"); } .header_title { background-image: url("http://i.imgur.com/qNxEE.png"); } You can add these codes to the bottom of your CSS to add the manga headers and bottom bar to the anime list style layout, making it manga-appropriate. If the headers are too dark for your layout style, you can try this re-colored headers by Andun: .status_not_selected a, .status_selected a { background-image: url("http://i.imgur.com/4rtZb.png"); } .header_title { background-image: url("http://i.imgur.com/O3wuXFA.png"); } |
Shishio-kunDec 31, 2015 6:55 PM
| Nice Layout! |
| It's really cool layout. I made manga list based on this anime list layout althought I still have to do a new image for the links since it says watching and not reading. This is how it looks like, the background is from Itsuka Tenma no Kuro Usagi.  |
 |
| @ Miketsukami You can use one I made: http://s006.radikal.ru/i215/1203/3d/e55cca9f51ff.png I was just too lazy to adjust headers 'cause I forgot to save PSD of 'em lol |
 |
| Wow this layout really brings out background colors. |
| A manga version has been added! |
| I have also made a manga version a while ago, preserving my original style and theme: http://pastebin.com/QbgKta17 |
|
| Alright, added to the top post! |
| Nice list decided to use it for my manga list as well but ran into a few problems while editing it. I changed the background and refitted the list to the the right side and changed the width to 550px. The first problem i got is that the headers at the bottom need to be adjusted in width as well. How do i change it and is it even possible? The second problem is that when i scroll up the list goes over the menu bar at the top. I think i put the code for changing the list size at the wrong place which is at the bottom of the CCS code. |
| @ Aversa The second problem can be fixed just by: #mal\_control\_strip{z-index:100} The first one is much worse to deal with. The problem is that my layout was designed with centered 950px width block in mind and this is specified in "math part" so you have to make a lot of changes here and re-import this part. Also you'll probably have to make a navigation pane sprite for these specs by yourself because mine is, yes, 1000px wide |
|
VeriTi said: The second problem is solved thank you for the help.@ Aversa The second problem can be fixed just by: #mal_control_strip{z-index:100} The first one is much worse to deal with. The problem is that my layout was designed with centered 950px width block in mind and this is specified in "math part" so you have to make a lot of changes here and re-import this part. Also you'll probably have to make a navigation pane sprite for these specs by yourself because mine is, yes, 1000px wide The first one sounds pretty hard but i noticed a link from you with a explanation about sprite and also a link to a page called Spriteme. Which had a add-on for sprites and a demo on how it works. So i will try making my own or try editing yours. Thank you for your reaction. |
| Maybe you can just add this: #list_surround br + :nth-child(2) {left: 50px;} or this: #list_surround br + :nth-child(2) {right: 25px;} So you don't resize the headers but still see all of it |
u531355May 28, 2012 12:01 PM
| Thank you. Modded it so it has an Eureka Seven bg. :D |
| Beautiful! I want to use the Steins Gate style, But i have a problem :(. When i clic On Hold, Watching, etc. the page reloads again. :( Same problem with the Mahou one :( |
Maguita said: Beautiful! I want to use the Steins Gate style, But i have a problem :(. When i clic On Hold, Watching, etc. the page reloads again. :( Same problem with the Mahou one :( Hmm I can't think of any reason but if you put the Steins Gate layout back up on your list we can look at it. I'm sure it'll be fixable! |
| Ok, i´ll put it back now. Thank You! |
MaguitaJul 17, 2012 2:42 PM
Maguita said: Ok, i´ll put it back now. Thank You! Sorry but when I click on the links I didn't see it reloading, so it must be something only you're seeing. Does it reload just once or multiple times or go back to the page it was just on? Do any other layouts do this? Maybe log in and out, or mess around with your http://myanimelist.net/editprofile.php?go=listpreferences settings and see if anything clears it up! Also it might be something to do with your browser or computer. Sorry its hard to know! |
| Just once and it happens with the other layouts too :(. Only the classic Miku Style works good :(. Thanks anyway Shishio!! :) I´ll see what i can do :) By the way, i was going to ask you how to add borders to my actual list and found that info in the Customize Your List post! Thank You for all your tutorials and all! great job Shishio! Now let´s see if i can do something with my super ugly headers :P |
MaguitaJul 18, 2012 6:09 AM
Maguita said: Just once and it happens with the other layouts too :(. Only the classic Miku Style works good :(. Thanks anyway Shishio!! :) I´ll see what i can do :) By the way, i was going to ask you how to add borders to my actual list and found that info in the Customize Your List post! Thank You for all your tutorials and all! great job Shishio! Now let´s see if i can do something with my super ugly headers :P Hmm I wish I knew why it reloads, the layouts are not supposed to do that. Does it reload back to the previous page or stay on the right category? Maybe you can try to narrow it down by shutting off programs on your com temporally like the MAL updater to see if that causes it, if you can't narrow it down to a browser doing the problem. Restart your com after you do that tho, cuz it can cause funny issues.. |
| The list takes about 4 or 5 seconds to load due to the import. Is there any way to speed it up? |
AzureBlues said: The list takes about 4 or 5 seconds to load due to the import. Is there any way to speed it up? There are slow and down times, plus it depends on your internet speed and distance from where the import is hosted. Did you try to make your own import for it? Then you can load it from your own Dropbox or something. |
Shishio-kun said: AzureBlues said: The list takes about 4 or 5 seconds to load due to the import. Is there any way to speed it up? There are slow and down times, plus it depends on your internet speed and distance from where the import is hosted. Did you try to make your own import for it? Then you can load it from your own Dropbox or something. I ended up doing that and the wait time dropped considerably, thanks! Although there is still a brief delay, do you have any other tips for optimizing the code? I made very little modifications to the original. I was also thinking of making the list itself wider, as I want to keep the drop down images but they clip with the titles. I tried increasing the width of the list but I was not able to expand the bar on the bottom so it looked asymmetrical. |
AzureBluesJul 24, 2012 1:39 AM
AzureBlues said: Shishio-kun said: AzureBlues said: The list takes about 4 or 5 seconds to load due to the import. Is there any way to speed it up? There are slow and down times, plus it depends on your internet speed and distance from where the import is hosted. Did you try to make your own import for it? Then you can load it from your own Dropbox or something. I ended up doing that and the wait time dropped considerably, thanks! Although there is still a brief delay, do you have any other tips for optimizing the code? I made very little modifications to the original. I was also thinking of making the list itself wider, as I want to keep the drop down images but they clip with the titles. I tried increasing the width of the list but I was not able to expand the bar on the bottom so it looked asymmetrical. I don't have any tips for that except to host it yourself as you did, I think its perfect how it is. You could mess around with the transition time and type on the DVD display to make it look smoother if thats something youre after. |
| @ AzureBlues Merge all @imports (except for anime titles) and current code into a single CSS file and then use service like http://www.csscompressor.com/ or http://www.generateit.net/css-optimize/ for compressing CSS. It should help (the results will depend on internet speed a lot though) |
|
| Hello! I am new here and my list changed a lot thanks to you guys. I have a question. In the CSS of this layout header titles are one picture. .header_title { background-image: url("http://i.imgur.com/GZWCk.png"); } Where are you define what part of picture should be used. I want to make my own titles so can you tell me somethink more about it. |
Delanov said: Hello! I am new here and my list changed a lot thanks to you guys. I have a question. In the CSS of this layout header titles are one picture. .header_title { background-image: url("http://i.imgur.com/GZWCk.png"); } Where are you define what part of picture should be used. I want to make my own titles so can you tell me somethink more about it. well there are 2 ways one would be spliting up the headers and linking individually or using the provided and add this into ur code /* This is the MATH part of the layout. Don't touch it unless you know what you're doing */ @import url(http://veriti.opendrive.com/files/OV81MjgxODZfN0NiSlU/mal_general.css); inside is the stuff defines what to parts to use zZz correct me if im wrong , im bad @ this |
| I really really appreciate this, but I just have one question. At the bottom of the list where it says "tv: 10 ONA: 3" and on, is there a way to change the color scheme or something on that, it makes me feel like i'm watching a 3d movie without glasses, haha. |
 |
Arakura said: I really really appreciate this, but I just have one question. At the bottom of the list where it says "tv: 10 ONA: 3" and on, is there a way to change the color scheme or something on that, it makes me feel like i'm watching a 3d movie without glasses, haha. Its a text shadow effect. This should remove it (add to the bottom of your CSS edit box): .category_totals { text-shadow: none !important; } |
| Ok thanks so much |
|
| Hello Shishio, thanks for this awesome CSS layout. Could I have your help? I used this layout for a while, but some hours ago, as you can see from this link, it stopped working and not it's a mess: http://myanimelist.net/animelist/Wallace93 The buttons don't show anymore, and the background image is bugged. How can I solve this? I didn't touch nothing in the CCS menu.. Thanks for the help. |
| Is the import of the VeriTi's open drive, 'cause not only your list but all with the top bar and the category menu bar import. |
| Yea, this is broken (Is that the word...?) You are probably right abou the open drive because nothing else changed about the code, it just messed up, so it must have been an external sourcing issue |
|
xXl337KiLLeRX said: Is there an easy way to do this? I have great internet speed yet it takes me like 15 seconds to load up my list. I wrote a dropbox tutorial, it's here, so use it to import all of your stylesheet. Then look at it and find two lines: @import url(http://veriti.opendrive.com/files/OV81MjgxODZfN0NiSlU/mal_general.css); @import url(http://veriti.opendrive.com/files/OV81MjgxODdfcXZZMkg/mal_top_bar.css); Replace each of these lines with contents of the text file you'll find when you open each link. |
|
| @xXl337KiLLeRX Works for me 100% good, what's the issue you have? |
|
| using it and love it:) thank you! |
 |
| It seems the import links at the top died for some reason. They may come back in the future but for now replace those top four lines of code (seen here).. Delete and replace those lines of code with these, and keep them at the top too: /* Math part of the layout, don't change unless you know what you're doing */ @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/MahouCSS.css"; /* Top bar */ @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css"; It should fix it plus it will have less lag issues, since its Dropbox not Opendrive which tends to have some downtime now and then. The fix is for people using the manga list version as well! |
| Is there any way to shift the list to left without making the links on the top bar unusable. I already made the list width smaller but every time I try to shift the list to left the links on the top bar become unusable. Edit: Never mind just saw one of the earlier post on the first page. |
StardustCharismaJan 6, 2013 1:07 AM
| The line in bold below was edited from what it originally was and is now interfering with your background-image code, so just delete it. Should work after that. taken from the top of your css /* Math part of the layout, don't change unless you know what you're doing */ @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/MahouLayoutCSS/MahouCSS.css"; /* Top bar */ @import "https://dl.dropbox.com/s/8vjos6cpj8yo4ek/RedTopBar.css"; @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css"; body{ /Set up a background image: background-image: url(http://i.imgur.com/YmsakKF.jpg); /* Set up a point of transformation. This is the point * of image that should always be at the top and * preserve it's location at these offsets. * If you don't understand how it works, 50% 50% should * be ok in most cases. Default: point to Okabe's face. */ background-position: 60% 18%; |
Ladyfingers said: Just wanted to inform you that your dropbox account got temporarily disabled due to high traffic on your public files, so the layout looks pretty weird now. ^^ Should be fixed now. I changed the links and they un-suspended my account (you're allowed only once tho..) I hope MAL no longer makes any more site changes and gets the spambots under control, or else I will no longer be able to host these files for free |
| Thanks for a great layout :D |
| Signature removed. Please follow the signature rules, as defined in the Site & Forum Guidelines. |
More topics from this board
» [CSS - Modern] ⭐️ Brink by V.L -- Cover-style theme! ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Mar 16, 2019 |
443 |
by bubbla
»»
4 hours ago |
|
Sticky: » [ LIST TUTORIALS ] All CSS guides and extensions for listsShishio-kun - Feb 20, 2023 |
26 |
by Shishio-kun
»»
Apr 15, 11:42 AM |
|
Sticky: » [ LIST LAYOUTS ] All premade CSS layouts for listsShishio-kun - Feb 20, 2023 |
31 |
by PinkDucky
»»
Apr 15, 11:42 AM |
|
Sticky: » 💚 [REPAIR STICKY] Repair/speed up layouts + Request layout fixes ( 1 2 )Shishio-kun - Nov 17, 2023 |
50 |
by Shishio-kun
»»
Apr 14, 10:40 PM |
|
» [CSS - Modern] 🍰 Clarified by V.L — a responsive table-based design ( 1 2 3 )Valerio_Lyndon - Aug 1, 2022 |
115 |
by Shishio-kun
»»
Apr 11, 4:19 PM |