This expert-level topic is part of our CSS Tutorials and Add-ons section: http://myanimelist.net/forum/?topicid=419405 You can individually customize every anime title on your list! This is really cool. Examples in use You can do simple stuff like this- I just changed the title Bleach a different color here on my manga list:  Here's an example on my own anime list- I added a custom pic to Bleach- the pic that says "recommended anime". Now people who go to my huge list can just scroll down to the titles with this pic on it and know what I recommend!  But you can also add pics to each title as on this list: Another great example, on this list all the title text has been made transparent and the individual pic represents the anime title now: So as you can see you get a whole new level of customization and can get really creative with this. This is kind of complicated but I'll make it simple as I could find. How to customize an individual title's link with pics and colors First, start with this code at the bottom of your CSS: td a[href=""]{ background-image: url(http://i44.tinypic.com/qswhkz.jpg); background-repeat: no-repeat; background-attachment: scroll; background-position: right top; background-color: transparent; padding-bottom: 50px; padding-right: 300px !important; color: !important; } Look at the top line; in between the two " in red you'll enter (what I'll call) the reference link of the anime title. The link for a title varies from list to list and anime to anime and is the link/address of the anime itself on this site from your list. For example, this is the link to Bleach on my list: http://myanimelist.net/anime/269/Bleach It will be different for every individual anime and manga title. The link to Bleach may be different as well! To find the link to your anime or manga title you want to change, just click on the title and copy the address from the page it links you to. It should look similar to the one I posted above. You can also just right click on the title and choose Copy Link Location. You put the link in between those parenthesis in red. With the reference link to Bleach from my list, the code ends up looking like this, I put the reference link in blue and left the parenthesis in red: td a[href="http://myanimelist.net/anime/269/Bleach"] { background-image: url("http://i44.tinypic.com/qswhkz.jpg"); background-repeat: no-repeat; background-attachment: scroll; background-position: right top; background-color: transparent; padding-bottom: 50px; padding-right: 300px !important; color: !important; } NEW: Now cut the http://myanimelist.net part out, as below: td a[href="/anime/269/Bleach"] { background-image: url("http://i44.tinypic.com/qswhkz.jpg"); background-repeat: no-repeat; background-attachment: scroll; background-position: right top; background-color: transparent; padding-bottom: 50px; padding-right: 300px !important; color: !important; } Now with this code set right and in the CSS, you can go ahead and add your own customizations to the title Bleach! You can see how this one looks on my list in the example below. My example code from above had an image already in it but you can replace it with your own. - Color (affects the color of the title's text) was left undefined but you can set it to whatever you want, you have to leave !important at the end after the color name (Scroll down below to Extra Tips see examples of how to customize color if you don't understand). - Background-position determines where the background will be set relative to the title, for example, right top moves it to the right of the title. - If you want to customize more titles you'll need to add a new code for every individual title you want to customize, and get the reference links for those as well. Extra tips: Its best to change the position of the image with the background-positioning and padding-right, imo. You won't need other positional codes like margin, I believe. You don't have to use a pic either, you can just change the color as well (like in the very first image in this tread). I left color undefined in the code so you can change it to whatever you want, just put the name of the color before !important and leave spaces between them. For example: color: gold !important; Making all your favorite, highest scored, or recommended animes a different color then the rest is a good way to filter than out for people viewing your list- and get many more views! This is cool way to use images and color. If you change the color to transparent you can then use the background positioning to move an image with a custom title over the original title. Lets say I want to use this custom title:  This is the code to do this, notice I changed the color to transparent and repositioned the background to the top left to cover the space where the title was! td a[href="/anime/269/Bleach"] { background-image: url(http://i39.tinypic.com/11v7j8j.jpg); background-attachment: scroll; background-color: transparent; background-position: left top; background-repeat: no-repeat; padding-bottom: 50px; padding-right: 300px !important; color: transparent !important; } This is the result!  Giving a anime title more space (also known as padding) You'll probably want to give your anime title more vertical room so you can have a bigger picture. Or else you might end up with something like this after you add a pic to your anime/manga title. In this example I am customizing Bleach on my manga list (I used the anime list in above examples):  Notice the pic ends up behind the other titles. The title's line needs more padding. A simple way to give a title more padding is to fill in the tags section as I did with Bleach on my anime list above. But you can also use codes for padding if you don't want to use tags. This is easy too, first just add this code: .hide { display: inline-block !important; } You'll only need this code above in your CSS once! Now you can use these codes to individually give your anime/manga titles padding (space): #more{ padding-top: 55px !important; } After #more, add the reference number of the title you want to give spacing (padding) too. The reference number is the number found in your title's reference link. As an example, these are the links to Bleach on my anime list and manga list (they may be different on yours even for the same anime or manga). I show the reference number in red: anime list http://myanimelist.net/anime/269/Bleach manga list http://myanimelist.net/manga/12/Bleach The reference number for Bleach on my manga list is 12. So I add 12 to the #more code and its ready to give that title padding on my list. The code ends up like this: #more12{ padding-top: 55px !important; } After I put this in, it gives the line with the title Bleach an extra 55px of spacing so a pic fits better. You can add as many codes like this as you need! This is the result:  Alternate method to customize an anime/manga title For advanced users.. [spoiler] Some people use the #more to customize anime titles instead of the link. Because you're not using the link, your anime/manga title pic won't link to the anime/manga. This is more for advanced users. I don't have an easy way to explain this, but this code will get you started if you want to customize this way: #list_surround { position: relative !important; } .hide { display: inline-block !important; left: 0px !important; position: absolute !important; } #more{ background: url() no-repeat scroll 0 0 red; margin-left: 0px; margin-top: -0px !important; padding-top: 100px !important; width: 100px; } Make sure you add your reference number to the #more. A red box should appear on your list, you need to position it into place and change it to transparent color. It varies from list to list I've noticed. Having a CSS editor like Firebug will make things so much easier for this method. Also if your #list_surround had absolute positioning before, then you can remove that code from this section, although you'll need to change the positioning under .hide to relative. If this seems complicated, its because something like this is more for advanced users. |
Shishio-kunSep 1, 2016 9:06 PM
| Interesting, thanks for the tut, can't wait to start workin with this code I'm just a novice =3 but is #more just a shorter ver of the link? |
| I'm not done editing the tutorial, don't use it just yet. Sorry I didn't think anyone would respond so fast lol |
| oh lolz, a friend of mine requested me to redo his list, and here i am lurkin about tryin to find inspiration lol |
| ok this tutorial is good to go, I tested the codes out on many different layouts and made it simple as I could without leaving anything important out. ClearSinz said: oh lolz, a friend of mine requested me to redo his list, and here i am lurkin about tryin to find inspiration lol Hope it didn't inconvenience you next time I'll put an "under construction" at the top. This would be a doozy to use for a friend's list, but would look awesome so good luck with that. I guess you could give cool pics to their top 10 animes on their list. |
Shishio-kun said: ok this tutorial is good to go, I tested the codes out on many different layouts and made it simple as I could without leaving anything important out. ClearSinz said: oh lolz, a friend of mine requested me to redo his list, and here i am lurkin about tryin to find inspiration lol Hope it didn't inconvenience you next time I'll put an "under construction" at the top. This would be a doozy to use for a friend's list, but would look awesome so good luck with that. I guess you could give cool pics to their top 10 animes on their list. nono its fine, i just happen to get home just as you were in the process of writing it lol ah sure if ill need anytime ill send ya a msg, whoo time to sit down and read the wall of text =3 also there's a spoiler inside the last spoiler was something suppose to go there? |
| Yeah this is pretty long but its a lot easier than it seems. No that spoiler is a mistake! Thanks for pointing it out to me. |
RyanSharp said: Any chance you could help me alter this code in order to replace the "+" in the progress cells of the table? I would love to create myself a completely touch friendly list, which this tutorial would bring me helluva long way towards that goal, however my stodgy fingers will never be able to accurately tap such a small character in order to add to the number of watched episodes. Thanks for reading, and I hope you have the information I require. I am excited about beginning this project. =] You're not altering any code, its just a separate part from the anime title: td:nth-of-type(3) a:nth-of-type(2) { background: none repeat scroll 0 0 black !important; color: cyan !important; } This is the code I would use for the "+". Depending on the user, they may have to change the first number in parenthesis. Its has to be the same number as the order the collumn appears after the more/edit part. For example on your list progress is the third collumn after edit/more. Good luck with that please let me know how your project goes. |
| @ RyanSharp You can try display:inline-block with width & height properties |
 |
RyanSharp said: @VeriTi That is magic! Thank you! I had actually tried that before but with no success. Thinking back, I may have misspelled it.... >.< Just for future references, where should I go if I have more problems? This is my first time messing around with CSS. I have some background knowledge in very basic HTML and PHP so I understand a little that I can grasp what people are saying, but I still need extensive help. CSS tutorials http://myanimelist.net/forum/?topicid=419405&show=0#post1 ask questions here http://myanimelist.net/forum/?topicid=200323 the table under information has all the other important club links like premade layouts |
OppaiLord said: Who's list are in the first and second spoilers? Because i'm really curious how to make it like his/her.Thanks. First list is Covered-in-mist, second is 1nz3ru. I modified Mist's a little for the example so that the titles would stand out more. I don't know if they still have these lists up. |
I was trying to use this for my list to use a pictures this one  beside each of my 10s possibly 9s if I liked how it looked. And as you can see on my list, my three 10s are One Piece, Cross Game, and Fullmetal Alchemist Brotherhood I have used the code for them. For both One Piece and Cross Game it looks good but it won't work for FMAB no matter what I do, I've tried multiple things to the link including putting a / at the end http://myanimelist.net/anime/5114/Fulll_Alchemist:_Brotherhood/ Tried deleting the name. http://myanimelist.net/anime/5114/ Tried deleting the name and the / http://myanimelist.net/anime/5114 and none of it works. I've also tried setting the backgrond as a color and that doesn't work either, either does changing the right padding. Here's my code if it helps. |
     Short of the day: Monotonous Purgatory(MAL) ✰Public Domain Club | One Piece Club✰ |
IntroverTurtle said: I was trying to use this for my list to use a pictures this one beside each of my 10s possibly 9s if I liked how it looked. And as you can see on my list, my three 10s are One Piece, Cross Game, and Fullmetal Alchemist Brotherhood I have used the code for them. For both One Piece and Cross Game it looks good but it won't work for FMAB no matter what I do, I've tried multiple things to the link including putting a / at the end http://myanimelist.net/anime/5114/Fulll_Alchemist:_Brotherhood/ Tried deleting the name. http://myanimelist.net/anime/5114/ Tried deleting the name and the / http://myanimelist.net/anime/5114 and none of it works. I've also tried setting the backgrond as a color and that doesn't work either, either does changing the right padding. Here's my code if it helps. try this dude. i modified ur code. gudluck. .animetitle{ background-repeat: no-repeat; background-attachment: scroll; background-position: right top; background-color: transparent; padding-bottom: 50px; padding-right: 300px !important; color: !important; } .animetitle[href*="anime/5114/"]{background-image: url(link goes here);} <--FMA .animetitle[href*="anime/21/"]{background-image: url(link goes here);} <-- onepiece .animetitle[href*="anime/5941/"]{background-image: url(link goes here);} <--cross game |
FactSheetNov 3, 2012 6:14 AM
Apocalyptic said: Thank you but it didn't work, it didn't put the pictures next to the text and it made all the statuses move down below the anime name making the list longer.try this dude. i modified ur code. gudluck. .animetitle{ background-repeat: no-repeat; background-attachment: scroll; background-position: right top; background-color: transparent; padding-bottom: 50px; padding-right: 300px !important; color: !important; } .animetitle[href*="anime/5114/"]{background-image: url(link goes here);} <--FMA .animetitle[href*="anime/21/"]{background-image: url(link goes here);} <-- onepiece .animetitle[href*="anime/5941/"]{background-image: url(link goes here);} <--cross game |
Short of the day: Monotonous Purgatory(MAL) ✰Public Domain Club | One Piece Club✰ |
IntroverTurtle said: I was trying to use this for my list to use a pictures this one beside each of my 10s possibly 9s if I liked how it looked. And as you can see on my list, my three 10s are One Piece, Cross Game, and Fullmetal Alchemist Brotherhood I have used the code for them. For both One Piece and Cross Game it looks good but it won't work for FMAB no matter what I do, I've tried multiple things to the link including putting a / at the end http://myanimelist.net/anime/5114/Fulll_Alchemist:_Brotherhood/ Tried deleting the name. http://myanimelist.net/anime/5114/ Tried deleting the name and the / http://myanimelist.net/anime/5114 and none of it works. I've also tried setting the backgrond as a color and that doesn't work either, either does changing the right padding. The spelling of the anime is wrong, you have an extra "l" plus the name isn't complete. I've done similar mistakes so I always copy the name from the address bar, as mentioned in the tutorial. When I add this to the bottom of your code in Firebug it seems to add gold in preview so try it out. a[href="http://myanimelist.net/anime/5114/Fullmetal_Alchemist:_Brotherhood"] { background-attachment: scroll; background-color: transparent; background-image: url("http://i183.photobucket.com/albums/x314/Crow009/gold2.png"); background-position: right top; background-repeat: no-repeat; padding-bottom: 50px; padding-right: 300px !important; } |
Shishio-kun said: Well I did copy it from the address bar the first time, idk how it changed. But that didn't work either, and isn't it as long as the address from http to after the number 5114 is right then anything will work. I don't know if there is anything in my list's code that would interfere with it.The spelling of the anime is wrong, you have an extra "l" plus the name isn't complete. I've done similar mistakes so I always copy the name from the address bar, as mentioned in the tutorial. When I add this to the bottom of your code in Firebug it seems to add gold in preview so try it out. a[href="http://myanimelist.net/anime/5114/Fullmetal_Alchemist:_Brotherhood"] { background-attachment: scroll; background-color: transparent; background-image: url("http://i183.photobucket.com/albums/x314/Crow009/gold2.png"); background-position: right top; background-repeat: no-repeat; padding-bottom: 50px; padding-right: 300px !important; } |
Short of the day: Monotonous Purgatory(MAL) ✰Public Domain Club | One Piece Club✰ |
IntroverTurtle said: Well I did copy it from the address bar the first time, idk how it changed. But that didn't work either, and isn't it as long as the address from http to after the number 5114 is right then anything will work. I don't know if there is anything in my list's code that would interfere with it. Ah alright, I see. What happens is MAL CSS edit box filters out this particular anime for some reason and misspells it against your will. I would just import this particular title to bypass that, its not hard at all. |
Shishio-kun said: And how would I do that?IntroverTurtle said: Well I did copy it from the address bar the first time, idk how it changed. But that didn't work either, and isn't it as long as the address from http to after the number 5114 is right then anything will work. I don't know if there is anything in my list's code that would interfere with it. Ah alright, I see. What happens is MAL CSS edit box filters out this particular anime for some reason and misspells it against your will. I would just import this particular title to bypass that, its not hard at all. |
Short of the day: Monotonous Purgatory(MAL) ✰Public Domain Club | One Piece Club✰ |
| http://myanimelist.net/forum/?topicid=419405 Import tutorials are under Expert along with this one we're in now. Basically you just put your CSS you need to import into Notepad, then save it as something with .css at the end (like animelist.css), then upload it to a site like Dropbox then use its direct streaming link as an import link (in the same format as the DVD cover's import link). |
Shishio-kun said: Ok I will do that when I have the time.http://myanimelist.net/forum/?topicid=419405 Import tutorials are under Expert along with this one we're in now. Basically you just put your CSS you need to import into Notepad, then save it as something with .css at the end (like animelist.css), then upload it to a site like Dropbox then use its direct streaming link as an import link (in the same format as the DVD cover's import link). |
Short of the day: Monotonous Purgatory(MAL) ✰Public Domain Club | One Piece Club✰ |
| Is it possible to do the same with text? (Insert it behind the anime title). |
| This is totaly not working for me so impossible i think i try everything even import from DropBox just not working if anyone can go to my list and see if it is because of the style of my list that dosen't allow things like this or what the problem is then? |
cupcakedreams said: Is it possible to do the same with text? (Insert it behind the anime title). You can use custom text image instead of image I guess. Or use CSS content property with :before/:after selectors MadLane said: This is totaly not working for me so impossible i think i try everything even import from DropBox just not working if anyone can go to my list and see if it is because of the style of my list that dosen't allow things like this or what the problem is then? MAL has made retarded changes to its site code since I wrote this tutorial, you need to cut http://myanimelist.net/ out of codes that use MAL links (like in this topic) from now on. For example for aldonah zero anime you'd use this code: td a[href="/anime/22729/Aldnoah.Zero"] { background-attachment: scroll; background-color: transparent; background-image: url("http://i44.tinypic.com/qswhkz.jpg"); background-position: right top; background-repeat: no-repeat; padding-bottom: 50px; padding-right: 300px ! important; } Also for your list style, the #more padding trick won't work I don't think |
| it worked thx so much Shishio-sensei ^_^. btw i went to you'r Premade List and profile layouts and you didn't had Moecraft with a link, can you post it or you don't want ppl to use it(if it that is ok then ;) ) |
MadLane said: it worked thx so much Shishio-sensei ^_^. btw i went to you'r Premade List and profile layouts and you didn't had Moecraft with a link, can you post it or you don't want ppl to use it(if it that is ok then ;) ) The Moecraft CSS code is available in a spoiler under my profile blog under "Past list designs" for anyone to use. You don't need a link since the CSS can be copied from there. I'm happy you want to try it but I don't know if it even works on this site anymore. I believe it wouldn't work then for another user without some heavy tweaking too, this is probably why I never released it here. I would like to update it for modern times but I will probably never get around to it. |
Shishio-kunJul 12, 2014 8:01 AM
| sorry if im mistaken but i just can't see it XD it shows like this: Hellgirl: http://myanimelist.net/forum/?topicid=393503#msg13401563 Dating Sim: http://myanimelist.net/forum/?topicid=315825 unfinished: http://myanimelist.net/forum/?topicid=393503#msg13269069 Sena: http://myanimelist.net/forum/?topicid=421865 Touhou: http://myanimelist.net/forum/?topicid=450489 Poster: http://myanimelist.net/forum/?topicid=443533 Moecraft: (no link or spoiler or nothing here) |
MadLane said: sorry if im mistaken but i just can't see it XD it shows like this: Hellgirl: http://myanimelist.net/forum/?topicid=393503#msg13401563 Dating Sim: http://myanimelist.net/forum/?topicid=315825 unfinished: http://myanimelist.net/forum/?topicid=393503#msg13269069 Sena: http://myanimelist.net/forum/?topicid=421865 Touhou: http://myanimelist.net/forum/?topicid=450489 Poster: http://myanimelist.net/forum/?topicid=443533 Moecraft: (no link or spoiler or nothing here) Can you see the spoiler I circled in red? The code is there. I can but if you cannot, it must be a problem with your browser or MAL so I can move it to a Dropbox link later (remind me if I forget). Also I see a few images are missing on that layout.  |
| thx alot i was with firefox today, i went to chrome and saw it now thx man ;) if it isen't asking to much can i add you as friend ^_^ in case i need to ask you something(i promiss i will not bother you XD) |
Shishio-kun said: cupcakedreams said: Is it possible to do the same with text? (Insert it behind the anime title). You can use custom text image instead of image I guess. Or use CSS content property with :before/:after selectors Could you show me an example of how that would be? Would I use it like this: a[href="/anime/idnumber/animetitle"]:after? I'm planning on writing mini reviews for each and every entry. |
cupcakedreams said: Shishio-kun said: You can use custom text image instead of image I guess. Or use CSS content property with :before/:after selectors Could you show me an example of how that would be? Would I use it like this: a[href="/anime/idnumber/animetitle"]:after? I'm planning on writing mini reviews for each and every entry. close but needs to be very specific, used first anime on your list cw td a[href="/anime/21995/Ao_Haru_Ride"]:after { margin-top: 20px; position: absolute; left: 50%; margin-left: -365px; content: " 43343 43434343 43434343434 434343"; color: black; font-weight: lighter; } |
| Thanks so much, I've been trying to figure this out for some time :) |
More topics from this board
» [CSS - MODERN] ⭐️ All ways to customize individual anime and individual list rows (mark your favorites!)Shishio-kun - Sep 4, 2020 |
12 |
by takkun_
»»
Yesterday, 12:00 AM |
|
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2023 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
359 |
by CLModerno
»»
May 5, 7:50 PM |
|
» [CSS - MODERN] Add side renders to list layouts (including for each category!)Shishio-kun - May 15, 2021 |
3 |
by gwynsyl
»»
May 5, 1:41 PM |
|
» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7819 |
by Nunphell
»»
May 5, 12:35 PM |
|
» [HALL OF LEGENDS] Hacker09, MyAnimeList's #1 coder!Shishio-kun - Dec 10, 2023 |
9 |
by hacker09
»»
May 2, 9:29 PM |