MyAnimeList.net

February 5th, 2012

♔sillyker0nian's list design tutorial

So, you want help to make a design for your Anime and Manga lists, huh? You don't want to go with the same ol' red or black text and a black, white or single background (which MAL only has these options available, unfortunately) similar to this, right? Wanting your list styles to look something more like this? Great! I'm going to help you as best as I can with the knowledge I have. Let's get going!

So, as with everything - it's not as easy as deciding one thing and finishing it minutes later. The technique that everyone uses (including myself) to make their lists and list designs stand out from the rest is a coding process called "CSS", or, "Cascading Style Sheets". It's a lot like BBCcode, which is the codes you use to bold text or embed YouTube videos on forums, and uses such codes as as an example. However, CSS uses codes such as and . It can be very tricky and difficult and even frustrating to use at first if you've never worked with it before, since it's a lot more complex then BBCcode, but if you've used HTML code before it's a lot similar to that so you shouldn't have a problem. Unfortunately, it's not so easy to explain it myself as I find it's better to figure it out for yourself because it's an amazing technique to learn and have but I will try to help you with it as best as I can. It's not easy by any means, as I had a difficult time making my first ever CSS-coded list design, but it's extremely rewarding and it'll be worth it in the end. Trust me.

Now, not only is there CSS coding to be done - there's also graphics you have to do, as well. You must create headers for your 'watching' and other list categories (unless you want just plain text), the #list surround image (unless you don't want a "main" image), and anything else you want: the copyright area, graphics for the actual list where your series names and scores are located, the MAL control bar (if you wish to manipulate it), and possibly even the entire background for the list that sprawls from edge to edge.

I'm not going to lie - you're in for a ton of work to be able to create a beautiful list from scratch. However, like I already said, if you do everything correctly and really learn how to do it then it will be all worth it in the end.

I would also love feedback on this tutorial because I would like to know if it really did help people to make list designs, so, if it helped you - write in the comments about it. If you think I need to add something more - write in the comments. And, of course, share your list designs after you make them. I would love to see your work.

Thanks for reading!

Before we even get into anything else, you must grasp at least the basics to CSS code. There are many, many tutorials around the site already that will help you to begin learning CSS code and I have some listed below. Of course, there is advanced CSS coding help in there as well if you want a more detailed list design. You can also use Google Sensei to find CSS tutorials, help forums, people already asking for help, CSS tips, etc. Another excellent resource for CSS code tutorials is a website called W3Schools.com.

I would also suggest asking other members here at MyAnimeList.net by going to these links and asking questions and discussing with other people about list designs and CSS and more. It would also help reading everything in the tutorials above and also reading everything in the topics below before asking a question first. There's always a possibility that your question has already come up before and even answered.

As well, you will need to have a clean code with nothing done to it whatsoever so you can edit it to your heart's content. Here it is!
**also contains helpful tips throughout the code - you don't need them so you can erase them from the code, however you can keep them in there since they shouldn't hurt your list design whatsoever**

There is also an alternative and completely blank code under the spoiler here. However, this one offers no tips whatsoever - just straight code for you to start designing and editing your list designs right now.

You can also manipulate your MAL Control Strip ("You are viewing "sillyker0nian"s Anime List, Logout, etc) manually by inputting this code at the bottom of your CSS code. The code is under this spoiler.

You can even add a cursor to your list, unfortunately NO .gifs, by adding this code to your list. It's very important you put it in every section, though. That means in your copyright area, image at the top - EVERYWHERE.

cursor: url(PUT IMAGE URL HERE) [0] [0], auto;
color: #FFFFFF;
text-decoration: none;
}

You may be stumped right now, but - it's completely normal. There is a toooooooooon to CSS and you're definitely not going to get the hang of it within minutes. It's going to take possibly days or even weeks to get the feel for it. But, you will get it. If you can't get everything you need from this section in terms of CSS to create an awesome list design, I would higgggggggggghly suggest you read this (all the links and what's in them and such, what I put, what other people have to say, etc) still and then search on Google and get extra help from there as well as visiting the website W3Schools.com or talking to people on other forums or making an account specifically for coding on a site or whatever, too. I would also suggest purchasing a 'Dummies Guide to CSS' or any other CSS book or guide to help you. You can also ask me questions right in the comments below or ask the three MAL members I listed above for help. Now, here are some quick references to CSS code within the blank codes above for you to look back at.

>>Divisions and Tables

>>Manipulation and Creation

Now that you've studied up on CSS code, it's time to design! First of all, you have to think of what you want to go into your design(s):

Do I want it to match my profile/blog/etc?
What do I want it to generally look like? Artistic, contemporary, grunge, etc?
What image(s) am I going to use on it?
Do I want a streamlined list or have it in sections?
Do I want an Anime and/or Manga themed design?
Do I want headers or just text for my "Watching", "Plan To Watch", etc?
Am I going to have it for both my Anime&Manga lists or am I going to create separate ones? Am I going to have the same design but have separate headers or text for them?
Am I going to have my MAL control bar at the bottom, leave it the same, manipulate it, or completely take it out?
Am I going to have a repeating background or a single one? Am I going to make sure it's for multiple resolutions?
Am I going to keep it up for a long time?
What colors do I want to have in my design?
Anything else I need to think about?

After you have all these questions answered, you need to have these resources available for you to create and design your lists.

1) Image Source

It's kind of hard to design anything graphics related without -- well -- graphics, right? Yeah. Anyways, I suggest these sites to search for your images: Photobucket, Konachan.com, Anime Paper, TinyPic, Zerochan.net, Pixiv, and any other sites you use to look for images. As well, don't be discouraged as looking for the perfect images to use for anything graphic design related will be be the longest part of it all - it's almost 80% of the entire process.

2) Imaging Program

Now that you have your images, you need to edit them so you can design your lists. That's obviously where your image program comes into play. I use Adobe Photoshop CS5, however, not everyone will be able to have access to that. If you don't have access to Photoshop, I suggest GIMP. It's the closet you can get to Photoshop that's free, easy to download, legal and way better than paint or any other program you get on your computer from the manufacturer.

3) Image Hosting Site

After you get your graphics done, you need to host them online for the world to see. I suggest Photobucket, however, for your larger images (i.e single background) I would go for ImageShack since Photobucket automatically resizes images over 1,000 pixels. Of course, there's other sites such as TinyPic as well.

4) Online Color Wheel

In order for you to be able to edit the colors for your text, borders, links, and anything else you absolutely have to be able to know the values of all the colors for the Internet. All color values online are hexadecimal, so, they're 6 letters and numbers combined. I suggest using Visabone's Webmaster's Color Wheel. All you do is click on a color you want and it gives you the value of it - simple!

5) CSS code references/notes to refer back to

That's super easy - just keep this page, or any of the links above, open and refer back to it if need be.

Congratulations! You've finished all of the steps so far and now you're really designing your list(s).

There's a multitude of tutorials here on MAL just like with CSS to help you with your imaging program. The two programs I'm going to help on is Photoshop and Gimp. There is all kinds of help below, yes, some are for signatures but they don't matter - because, you just apply it to bigger images. Simple!

Gimp

Photoshop

Now that you've designed your list, made all the graphics, coded your list design with CSS - it's finally time to put it all unto your MAL account so you can have the world look at your work! Now, I have done all this already so things are not going to be the same between you and me. However, I'm going to be explaining them as best as I can. I also highly suggest going to your list settings and making your lists private while you're installing your CSS code. Just, remember to change them back to public when you're done.

The first thing you do is go to the top left corner of your control panel here at MAL and go to profile > profile > edit > My List Design. After you've done that, you want to go to "Advanced Style CSS Editor" and it will ask you to create a new CSS Style sheet - make one, please.

[center]

After you've done that, it will give your new CSS code a numbered ID (in which we'll use later) and a small window that says "Edit Advanced CSS File". Go ahead and input all of your CSS code into it and make sure you hit the "Update CSS" button once you're done.

Once your done with both your list styles (or, just one) you're still not done yet with installing your CSS code - now, you have to tell MAL which CSS file goes to which list. Is it your Anime or Manga list that it goes to?

To do this, go back to "My List Style" under "Profile" and there will be a link that says "Change My List Style".

Now, this is where the numbered ID comes into play. You need to remember, or go back to the list style and find it either by editing it (not really though!) or it's in the URL of the window where your editing your CSS files.

Once you've located the numbered ID for your list design (or, individual ones) you need to go to the "Change My List Design" window and select which list designs go to which lists then select "Change List Designs". An example of mine is below:

[center]

Now, go check back to your lists and if everything has been done correctly - Congratulations! You now have a totally unique and awesome list design! You should be proud.

[center]

Thanks so much to Shishio-kun and his wonderful club and tutorials there. Thanks so much to Rukayex for coding my current list design. Thanks so much to Talon, MajorJoseph, Tithen-Firion, ScrumYummy and Ranivus for their amazing tutorials that are featured here.

Now, remember what I said? That Rukayex coded my current list design? Well, if you notice the hover effect over the Anime titles in my list and that I have a sidebar instead of a control bar - I did NOT code those. Rukayex coded them for me, so, you'll have to ask her to code your list design(s) for you.

She will need:

So, have those ready and ask her if she can code it for you. Don't assume she'll do it! Then, if she says 'yes', give her everything you have and wait patiently for he to be done. Everything else will be discussed between the two of you and such. Thanks for understanding.
[/center][/center][/center]

Posted by sillyker0nian | Feb 5, 2012 8:30 PM | 0 comments

September 7th, 2011

♔Reviews - Next Series&Manga To Be Reviewed

With the recent and slight so far success of my 'Usagi Drop' (Manga) review, I decided to start really reviewing series and Manga from now on. So, why don't you take a look below to see them~! ♥

::Already Reviewed::

1) Keroro Gunso Movie 5: Tanjou! Kyuukyoku Keroro, Kiseki no Jikuu-jima, de arimasu!!
2) Usagi Drop (Manga)

::Next Up To Review::

-Kannagi: Crazy Shrine Maidens
-RomeoXJuliet
-Mahou Shoujo Madoka★Magica
-Ano Hi Mita Hana no Namae wo Bokutachi wa Mada Shiranai
-AKIRA
-Kuroshitsuji
-Ao No Exorcist (Anime)
-Ao No Exorcist (Manga)
-Solanin
-Panty & Stocking With Garterbelt

I also do Anime figure reviews - since, well, that is my newest hobby and I love figures now.

::Already Reviewd::

-1/7th Scale Tsumugi Kotobuki: Waitress Ver. by Max Factory

::Next Up To Review::

-1/7th Scale Hatsune Miku: Tony Ver. by Max Factory
-figma Hatsune Miku: Append Ver. by Max Factory

Posted by sillyker0nian | Sep 7, 2011 1:14 PM | 0 comments

September 4th, 2011

♔Past Graphics

Hello! And, thanks for stopping by my past graphics. These are graphics I've created for my account over the two years I've been here and they've even been nominated for "Best In Month" before. So, thank you very much for that! I'm glad they've been recognized as being able to go into the competitions and I'm flattered for it. Anyways, take a look around and enjoy.

As well, this is a work in progress as I am trying to collect every graphic I've created for my account from profiles to even forum signatures. So, please bear with me as this is a living blog entry. Thanks again!

Posted by sillyker0nian | Sep 4, 2011 3:37 PM | 1 comments

August 26th, 2010

♔Watching Limbo

These are the Anime Series that don't really have a place in my list, unfortunately ^^;

They are the series that I have put up there on my main list but now they are doing nothing and the Anime series I stay watching for a while come and go pretty quickly. So, they are ones that I maaaay come back to, but I have no idea if I will. It doesn't mean that I will never come back to them....but they are in limbo. So...yes. I just don't feel that they should be on my list because I may watch one episode or a few [due to my old high school Anime Club most likely...], but I haven't watched it in a verrrrrrrrrrrrrrrrry long time.

-Big O [3/26 watched]
-Futakoi Alternative [2/13 watched]
-Macross Frontier [1/25 watched]
-Sakura Taisen [4/25 watched]
-Ergo Proxy [1/23 watched]
-Haibane Renmei [1/13 watched]
-Pumpkin Scissors [1/24 watched]
-Sayonara Zetsubou Sensei [1/13 watched]
-School Rumble [1/26 watched]
-Seirei no Moribito [1/26 watched]
-Monster [2/74 watched]
-Now and Then, Here and There [3/13 watched]
-World Destruction [2/13 watched]

Posted by sillyker0nian | Aug 26, 2010 12:03 AM | 0 comments

May 7th, 2010

♔Claims

Anime Relations: Keroro Gunsou, Mahou Shoujo Madoka★Magica, Ao no Exorcist

Posted by sillyker0nian | May 7, 2010 9:28 AM | 0 comments

March 2nd, 2010

♔Miscellaneous

[My Anime and Manga Goals]

[How I rate Anime]

[spoiler]10-It's great! It is very heartfelt and well worth watching plus memorable. And or; it makes me have many different emotions [laugh, cry, etc], makes me think deeply, or it has lost of action and a good plot. Also, it can possibly be just competely random.
9-It's still really good. It most likely is still worth watching as well. But, it might not make me think deeply or it is not that random. Still has a pretty good plot.
8-Probably still entertaining. Not very thought provoking. Probably has random spots or action to redeem it more. Still like to watch it anyways.
7-Slightly memorable. The plot might be there, but it feels incomplete or it's very cliche.
6-Meh. It's entertaining. It's most likely a good story, but it's very cliche. Or, I might not remember the Anime so I give it an "okay" rating.
5-Entertaining. Yay.
4-Why am I watching it? Oh, yeah. Bored.
3-Oh my god. I don't want to watch this.
2-It might be a good story and or it can be improved, but the art is really bad. It might be too vulgar. Or, I just am not interested in it.
1- Don't really want to watch this again.

sillyker0nian's Blog

MoreTop Anime

MoreTop Airing Anime

MoreMost Popular Characters