Talon's Blog

• those scripts made for copy and paste, so for lazy people.
  
• Orange text is the script to be copied.
  
• there are notes between /* and */ wich can be left within the script or be removed, they don't do anything.
  
• [blue textboxes must be replaced with own values]
  
• Those are easy and the most common, speak nothing special.
  
• Never ask me about how to change the black bar above your list, can't touch that!

lately in my comment box: I see,i guessing thats why you know css so well.

I've been learning CSS again and over again since I've joined MAL. Every time I make a new list design I learn CSS as a new code where I just know the basis and in wich direction I should write. I'm good with making CSS stuff but that isn't something I can give CSS the credit for. It's just that I think about my design and then search my crap together (mostly google for "selfhtml css" or go to css3.info) and try to make that what I thought of.

Making ideas, build up a concept and then searching a way to realize this is something I've learned at school and my job. first make an Idea, collect material and at the last step think about how you put it together.

making concepts is the fun part, I mostly don't work out my ideas into something CSS like and it never makes it to a final product wich would meet the public.

Maybe something I can give everyone as an advice:
just think about what you want to make out of your list without knowing an thinking if it's posible or not. After that, use the internet to find a way to make it posible.

It might be hard at the beginning not to do things cross over and you might wanna just check if its posible but that just puts borders around the creativity and your ideas. It Blocks "posible" things away, things you would never think of when you know what is imposible.

hope this helps some people being better with designing their lists.
Good luck with the css-crap and the list designs :D

[18:35] It_Aint_Eazy: talon~
[18:35] It_Aint_Eazy: can you teach me your magic?
[18:35] Talon: Teazy
[18:36] Talon: I'm no magic, I'm a cheater
[18:36] It_Aint_Eazy: teach me to cheat~
[18:36] Talon: wich cheat would you like to have?
[18:36] Talon: inv. live? inv money?
[18:36] It_Aint_Eazy: the pic in the list cheat
[18:36] Talon: oh, high class
[18:37] Talon: moment, I'll blog it right away how it's done

So here how it's done! Look at your advanced CSS editor and scroll down to:

LOOK BELOW, UPDATE DUE CHANGES ON SOURCE

/*
Header classes for Currently Watching, Completed, Dropped, etc...
*/

after that you'll find some classes like .header_cw
add here (fill int he italic parts):

.header_cw
{
z-index:-6;
overflow:visible;
height:[the number of pixels with wich the image will be over the list];
}
.header_cw div
{
background-image:url([your url of the image]);
position:absolute;
font-size:0px;
height:[the actual height of the image];
width:[the actual width of the image or your list];
z-index:-6;
padding-top:20px;
color:#ffffff;
}

How does this work?
the trick here is we're using the div wich holds the text "Currently watching" and put an image into this. we use this one because this div is in another div wich has a class. we have 2 important functions, Position:absolute; and Overflow:visible;.

the position absolute says "I'm here, just accept that and don't push me away, ignore me anyway..". quite emo.. but it makes it posibe that the Div with the class ignores his oversize and just keeps his own size.

but we're saying that this classed div still should show everything with the overflow:visible; command.

the last thing is the (negative) z-index wich makes it posible to give the divs a depth. (x=horizontal, y=vertical, z=depth)

ofcouse you'll have to do the same with the other headerclasses and just play a little with the give script...

Additional:
U'm kinda curious about it but it seems like you'll have to add this at the div#list_surround class.

filter:alpha(opacity=99);
-moz-opacity:0.99;
opacity: 0.99;

Update!!

Since the css got some limits and the source an update, following methode should be used now!

ehm, yea, i'm at school at the very moment and can't enter IRC.
Wich header do you want where?
I assume you mean those headers per categorie. My blog is not up to date, sorry for that.

actually you can snach the code from my anime listdesign because that's the working version of the changes plus additions to let everything work with IE too.
this is what you need to know:

As described in blog, didn't change_
#list_surround{
filter:alpha(opacity=99);
-moz-opacity:0.99;
opacity: 0.99;
}

and here with some changes_
.header_cw
{
z-index:-7; //negative depth to make it posible to put image behind the list
overflow:visible;
height:0px;
position:relative;
bottom:61px; //distance of the image wich is above the actual list
margin-top:60px; //distance of the image wich is above the actual list (I did -1px due the buildin at the grafics itself
}
.header_cw .header_title //instead of speaking to the div, we speak to the .header_title inside every header
{
background:url(your image url); //url of the list
background-repeat: no-repeat;
position:absolute;
font-size:0px;
height:200px; //height of the image itself
width:600px; //width of the image itself
z-index:-6;
padding-top:42px; //don't know what these are ^^'
padding-left:3px; //feel free to try what these do...
}

Yaaay, Finally a Part 2 is coming up here. this will be more intresting because this time we won't just look at our list but change something too. Now move your ass to the Advanced CSS editor and look at the pre given classes.

Color
one of the most important things are the Colors you choose.
Most colors are showen with HEX code like #000000. HEX code is a little difficult to understand, you can also write down somthing like "yellow" or "blue" wich makes you not being able too choose between a great span of colors. Another option is using google to find one of thousands Hexadecimal Color Charts and use these to choose your color

you can Color following things:

• - Text - color:#000000; (would make your text black)
• - Background - background-color:black; (would make your background black)
  
• - Border - border-color:#FFFFFF; (will make your border white)
  

Borders
Most just don't use them but you can do great things with those little freaks. You can fancy the flow of the line up by setting a style. following could be used like border-style:solid; wich makes a solid line. other methodes are:

• None - border did never existed
  
• Hidden - won't show the border but leaves the space
• Dotted - well.. dots I suppose...
• Dashed - you can guess..
• Double - makes 2 borderlines with some space beween them.
• Groove - makes a bevel effect
• Ridge - sameas groove butupside down
• Inset - kinda shadow-border effect
• Outset - Inset but then outset >_>'

besides A style your border can be different width. Example for a 12pixel wide border would be: border-width:12px;

I'll skip the Outline chapter but before I end this border part another good thing to know about borders. You can give every side of the border his own style, like:

border-left-style:dotted;
border-top-style:double;
border-right-width:2px;
border-color:#33FF00 #5522BB;

Yes the last one is strange. The border color has 2 colors...
CCS make with 2 colors, style, width or whatever given the two attributes to one attribute for the horizontal borders (top and bottom) and one for the vertical ones (left and right). It goes much further but that maybe in an other tutorial (part 3 maybe).

Position of your list
Oh many are waiting for this chapter. I should finally write it.

The whole list we got here on MAL is one DIV wich has not a class but a ID. it's called in your CSS editor div#list_surround. actually you can dropp the div in front.. it doesn't change something and is just unnessesary.
As you can see we're editing a Div and unfortunaly Div hasn't the align within it.
an other solution to move you list to the center is made by Xinil by giving the horizontal margin an auto attribute. this makes the margin on both sides to max wich centers the list.

margin:0px auto ; in the script

To align it left you can just drop the auto.
To align it right you must change it to margin-left: auto;

I prefend to leave it in the middle and just place from the middle the list in one direction.
For this we gonna use the power of moving divs. to Activate this we just have to add to our ID a Position mode. you can Choose between Absolute, Relative, Fixed and Static. normal it's always Static. We need Relative because we want to move our list from the current position.

position:relative;

and then.. how to move? ha easy just say left or right and give it something like 100 pixel.

left: 100px; // will move you list 100px to the left from the center
right: 100px; // will move you list 100px to the right from the center

ah damn that is easy like copy and pasting this..

div#list_surround
{
margin:0px auto ;
position:relative;
right:100px;
}

okay next chapter..

Adding External Images
You may have seen some list mit individual headers for the Watching, complete, etc headers. Those are Images wich are background of every div holding them.

scroll down in your CSS editor and you will find the classes for the headers of every cathegories. you can simply add in those classes: background-image:url(http:www.yourdomain.com/youimage.jpg); and it will add you image to it.
to get some more controll over them you can give other atributes to the background like background-repeat:no-repeat; or align it with background-position:center top; I think you can figur things out yourself..

Little Tricks
Some people say I cheat.. well true... but you can cheat too!~ tehehe..

those are my little tricks to get some effects:

1. to get a windowed list add a height and overflow:auto; to #list_surround.

   #list_surround
   {
   margin:0px auto;
   width:600px;
   height:400px;
   overflow:auto;
   }

2. to rip out your list header and links give it simply a position:fixed; won't work for IE6.0 but screw IE...

   .header_al
   {
   position:fixed;
   margin:0px auto;
   }
   .header_al_links
   {
   position:fixed;
   margin:0px auto;
   top:20px;
   }
   

3. Use for Images PNG with tranparency.
   It just looks better and I'll make another blog to tell how those are made.
4. When I think about more tips I can add them, currently working on a system to place external Images begin a table~

Okay I'm to confused now to sort the text, maybe layer but comments about everything that is unclear or just wrong are wecome.

Talon

Introduction
Some people might know, I planned to use this Blog to make Tutorials.
Many where asking me about how to use CSS for they list styling. That's why I start of with some CSS training. I'm really going for the fact you are dumb and explain every step in the fullest detail it would need!
There are 3 things you can do:

• Saying, "okay, I'm dumb, I'll listen carefully, Sensei!!"
• Saying, "Baka ya nai! (I'm not dumb!)" and skip some steps (but please use firefox first after reading further)
• Close this blog, write my name in your death note

CSS?
CSS is a way to write code and can only change apperience, nothing more, nothing less. The best thing about CSS is that it overwrites HTML styling.
But to understand CSS you'll have to understand the html source first.

HTML?
Welcome to the internet!
Nearly every website you visit is build with HTML and every website has his source code.
And know what?
you can see this source code! just by pressing you right mouse key and select view source!
C'mon try it! Don't be shy!
leaving the jokes aside, there are many internet users who don't know this and some wish they never learned about it.
Some users Don't even know what IE, Firefox, Opera, etc is because they are just using "the internet" and laugh about the Stupid mistake that Microsoft didn't fix the Blue E wich should be a blue I. Stupid mistake, isn't it? Enough of the lauching matter, we're here to style some lists!

Understand the HTML source
Some might know this for some HTML is new. HTML pretty easy build, it can't even be called a scripting code. If you wan't to do something just open a tag and if you're done just close it:

Konichiwa!

would make the text like this:

Konichiwa!

Everything is between tags, even tags are in tags.
Some of those tags have attributes:

This opening tag would make a table wich has a width of 600 pixels. 
Let's add CSS to the story!
I'd say somewhere CSS overwrites HTML, didn't I?
CSS can give tags attributes to HTML tags, let's start another table:
<style type="text/css">
	Table{ width:600px;}

omg! I'd add width="700" to my table but it will be 600 pixel wide! That's because CSS says Tables should be 600 pixel no matter what. 
I love it, because this will really make ALL you tables in your HTML 600 pixel wide and it really will end up in a mess. 
Anyway, for our list styling we only need to look at the next 4 tags: 
 
 
 
and we need to look at something else, some attributes called class!
Again some code:
<style type="text/css">
	Table{ width:600px;}
	.yay{ width:500px;}

To cut it down, the table will be 500 pixel wide! I did gave the table a class wich referent to the in css given class.
If within the CSS code is a dot in front of a tag, it means it's a class.
Homework
This is the very basic of html and CSS and if you accepted me as a Sensei you'll get some homework from me! (you're free too choose to do them)
This homework will be
"go to you list and look at the source" 
at the top is the CSS defined and some lower you'll find most of the 4 nessasary styling tags. look at some classes and how those work with your CSS
this gives me time to write a part 2 wich will be about.
Colors 
Borders
Position of your list
Adding external images
Being creative
Comments are welcome
Corrections are also welcome (I'm human o_o) 
Saying what you want to learn is welcome