Ranivus's Blog

Back to Ranivus's Blog

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 ^_^



/////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.

BODY ~this should look very familiar.
{
background-repeat: no-repeat; ~this is to keep the background image to repeat itself
background-color: #000000; ~this is the color of the list when the image is broken
background-image:url(); ~this is where you paste your image link
background-position: bottom right; ~try to keep the faces of the girls in view.
background-attachment: fixed; ~scroll or fixed


color: #ffffff; ~general color of fonts
font-size: 12.00px; ~general size of fonts
font-family: Verdana, Arial; ~general font type ...fonttester.com will help with all of it
}

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.

.header_cw
{
height: 100px; ~this is where you put the general height of the image
background-image:url(); ~this is where the CURRENTLY WATCHING header goes
}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~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 ~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

BODY
{
background-repeat: no-repeat;
background-color: #000000;
background-image:url(http://i41.photobucket.com/albums/e289/ranivus/Headers/MAL%20CSS%208/BackgroundC.jpg);
background-position: top right;
background-attachment: fixed;

color: #ffffff;
font-size: 12.00px;
font-family: Verdana, Arial;
}

.header_cw
{
height: 250px;
background-image:url(http://i41.photobucket.com/albums/e289/ranivus/Headers/MAL%20CSS%208/8CurrentlyWatching.png);
}

/////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....

#list_surround
{
margin: 0 auto;
width: 600px;
padding-top: 200px;
}

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.

Are you sure you're finished?

If you're stuck you can always restart at margin: 0 auto;

Is the list touching any of the girls faces?

Remember 0 0 is the top left of the browser.

Percentage is also a good way to do this as well.

Okay, you've clicked enough and verified you've worked enough the next one will be the correct code

Don't worry if the numbers aren't spot on, just as long as they're pretty close

#list_surround
{
margin: 0px 50px;
width: 600px;
padding-top: 100px;
}

it should look like this:

Don't worry if the list is overlapping the loli and you have the margin set at 0px 0px... that just means you have a much smaller screen resolution than the average anime watcher.

Okay so we did alot and im sure it took long than 15 minutes, but based on what you have learned from this lesson, try to start from scratch and time yourself and see how long it takes for you to put on images and adjusting the list position. Experiment with percentages, borders, and COLORS! The green i used was #b1d333 for reference.

If there are any more questions please refer to the CSS quick reference in part 1 and then feel free to consult me . Part 3 will deal with text stylings, colors, custom images in other areas, etc. I hope you will look forward to it!