Back to Ranivus's Blog

Ranivus's Blog

Sep 8, 2008 3:13 PM
Any anime list maker can tell you, that you will be spending most of your time finding images and using your artistic skills to make headers and other pieces for your list. That is where the most fun is going to be. The anime list is just your canvas of your artistic expression. So im here to alleviate the supposed 'easy' part.

For this excercise, we will be using my MAL Cascading Style Sheet #8: C.C. anime list ^_^
From: To:

/////STEP1: Image Verification/////
Before even thinking about posting your images, first you need to make sure you have the met the minimum dimension requirements to keep your list from looking nice.

Minimum Requirements:
  • Background image - 800 x 600
  • Header image - 20x600

    Recommended Requirements:
  • Background image - 1920 x 1024
  • Header image - between 20 x 600 and 200 x 600

    /////STEP 2: Uploading images to image host/////
    Once the selected images are verified upload them to your photobucket (or equivalent). I keep all my list images in a separate folder for easy access.
    For this tutorial we will be using the following items:

    Side note: just use a stock photo and crop out c.c. add some custom downloaded text with it and you have a simple yet very nice anime header :)

    /////STEP3: Applying the images to the list/////
    Don't be intimidated! It's a very easy and painless task. First, we'll start with the image background for the whole list.

    Now we are going to look at the Header section, i'll only show you one header but its exactly the same with all 5 header traits.

    ~~~~~~~~~~~~~This is how the body and header area should look like ~~~~~~~~~~~
    ~~~~~~~~~~~~~Don't look unless you think you're completely finished ~~~~~~~~~~~
    ~~~~~~~~~~~~~Or unless youre completely stumped ~~~~~~~~~~~~~~~~~~~~~~

    /////STEP 4: Verifying how it looks/////
    If you noticed... all we did was adjust the background position and image in the body section and adjusted the height and added the image in the Header section. If you did the background and at least the currently watching header, it should look like this:

    i know you see what i see... the list is overlapping our beautiful C.C. and KALLEN! This can not be tolerated. If you have not done so already, go ahead and finish the other images to their corresponding headers. Once you have put them all on, we can go ahead and proceed to the next step....

    /////STEP5: Moving the List/////
    if you dont like that grid look on you're anime list this would be a good time to remove it. Just delete anything that says border in .td1 and .td2. On the contrary, if you like it and want to experiment it, this would also be a good time to play with the border colors and thickness. Check AdvCSS for Dummies part 1 or the bottom of the CSS for notations about borders.
    For all intents and purposes, I'm going to remove the border to just avoid confusion.

    If you have read anything in the manipulation and creation section in my last entry, you should at least have a good understanding about how things move in CSS format. All that is going to apply to this next table, including the background position information....

    This is your bread and butter of the anime list, once you master movement, you can master most other things in list making fairly easily. Without my help, i want you to make the list move from its current position to the left of the girls to the point of at least staying clear from the girls faces AND I want that huge gap between the top black bar and currently watching header cut in HALF.

    when you thinik you're done or COMPLETELY stuck click the spoiler tag to verify.

  • Posted by Ranivus | Sep 8, 2008 3:13 PM | 13 comments
    Lirina | May 7, 2011 10:10 AM
    Thanks! This was really helpful ^^
    Daizu | May 30, 2010 9:55 PM
    PhotoBucket keeps resizing my image, what can I do to make it stay the original size?
    acornbutt | Aug 23, 2009 11:50 AM
    Hii ^^
    Your tutorial is amazing ^^ !
    But I have a question how do you delete those links?
    I mean, on my header I still have "currently watching" & "Add anime to my list"

    reply asap pleaseee ! ;3.
    SixFlags | Aug 1, 2009 3:14 AM
    thanks for your hard work for this tutorial!
    Tsubaki_Rose | Jul 15, 2009 8:32 AM
    um i have a question~
    on ur anime list how do you get the part that goes along with ur anime list as it scrolls transparent?
    spineslayer | Jun 15, 2009 2:40 PM
    Wanted to say thanks....This was a very useful tutorial.
    huyyy | Apr 1, 2009 11:37 PM
    THANK YOU VERY MUCH before i found this blog i was messing around css to get it to my liking but with this guide i know what every tag is awsomee!
    Maharet | Jan 20, 2009 11:32 AM
    thanks, this is very usefull!
    bluebrainfreezy | Jan 19, 2009 6:37 AM
    Wow thank you very much for posting this, I've been able to make myself a decent looking list. (With a lot of help from a friend as well lol)
    soul4soul | Nov 9, 2008 5:01 PM
    :o thanks its sorta easy to figure it would with common sense but this defiantly simplified everything for me.

    thanks for taking your time to write it
    viper3k | Oct 18, 2008 6:43 AM
    thx man , i really apreciate ure work , thx for sharing it dude
    DaBigD | Sep 19, 2008 3:07 PM
    Wow. Thanks so much for this tutorial. I was able to make a decent-looking list for myself thanks to you (and hopefully learned some CSS.) Waiting for the last part.
    Ranivus | Sep 9, 2008 1:33 PM


    Well since im here im gonna make a note: Make sure you get familiar with Style ID numbers and the my list settings!!

    Currently theres a bug that doesnt show the grand totals if you have the tabs turned off and hopefully that will be fixed in due time. ^_^