MyAnimeList.net

Back to Talon's BlogTalon's Blog

05-20-08, 12:43 PM
Lets make together a summary of the most common tricks wich can be applied on the list with CSS! please help out with comments about other tricks and common things wich are still frequently asked how they are done.

  • 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!



Headerimages
make your own header images, those images have to be uploaded somewhere on the internet (like imageshack).

.header_title{
display:none;/* let the text disappear above every categorie*/
}
.header_cw{
background-image: url(
[imageurl currently watching]);
width:
[imagewidth]px;
height:
[imageheight]px;
}
.header_completed{
background-image: url(
[imageurl completed]);
width:
[imagewidth]px;
height:
[imageheight]px;
}
.header_onhold{
background-image: url(
[imageurl on hold]);
width:
[imagewidth]px;
height:
[imageheight]px;
}
.header_ptw{
background-image: url(
[imageurl plan to watch]);
width:
[imagewidth]px;
height:
[imageheight]px;
}
.header_dropped{
background-image: url(
[imageurl dropped]);
width:
[imagewidth]px;
height:
[imageheight]px;
}



change cursor
adding a custom cursor as your list cursor, this cursor must be uploaded on the internet and must be .jpg, .gif or .png

a{
cursor: url(
[imageurl]) [x] [y], auto;
/* X and Y are the clickpoint of the cursor, default is 0 0 (left top) corner of the image. ,auto is that he changes back to the standard cursor if he can't load the image*/
}


Align the list
Since the list is in a DIV object you can't just say "align:left" or something like that. It's a little more tricky but not that hard to understand.

align to left
#list_surround{
margin-left:
[offset]px; /* your offset from the left of your browser*/
margin-right:auto;
width:600px;
}


align to center
#list_surround{
margin: 0 auto;
width:600px;
}


align to right
#list_surround{
margin-right:
[offset]px; /* your offset from the right of your browser*/
margin-left:auto;
}


align from center to a side (if you want it not in the exact center because of the wallpaper)
#list_surround{
margin: 0 auto;
position: relative;
left:
[offset]px; /* set the amount pixel you want to shift to the left, if you want to go to the right this must be 0 or deleted */
right:
[offset]px; /* set the amount pixel you want to shift to the right, if you want to go to the left this must be 0 or deleted */
width:600px;
}


example images will follow.
so please help me with building this up.
Posted by Talon | 05-20-08, 12:43 PM | 13 comments
froscawelcot | 10-03-11, 6:23 AM
Classroom management is one of the most important aspects for the teaching faculty. Here are some classroom management strategies which will help you to effectively curb the indiscipline in the classroom and create an environment ideal for learning.
pacquiao vs marquez
pacquiao vs marquez 3
pacquiao vs marquez streaming
 
pyroserpent | 06-02-11, 1:17 AM
where do you add the change cursor values??? do you add it to *
// All links on your list ???
 
Davyu | 03-13-10, 11:17 AM
Need some help please =/, my cursor won't show up for some reason o_O. I put it in like this:

a
{
cursor: url(http://i39.tinypic.com/3fndw.jpg) [0] [0], auto;
color: #FFFFFF;
text-decoration: none;
}

Thank you =).
 
missy115 | 03-11-10, 3:40 AM
what to do with the blue texts?!
[OMG!]
 
Ririka | 12-23-09, 6:39 AM
Something I used for the control strip of my list:

#mal\_control_strip {
position:scroll;
top:0; z-index:80; height: 52px;
background: transparent url() repeat top left !important;
}
#mal\_control_strip a {
color: #ffffff !important;
font: bold 1em 'trebuchet ms', arial, helvetica !important;
}
#mal\_control_strip a:hover {color: #ffffff !important;
}
#mal\_control_strip a:link,
#mal\_control_strip a:visited {
text-decoration: none;
text-transform: lowercase;
}
#mal\_control_strip {
border-bottom: 0px solid #ffffff !important;
}
#mal\_cs_pic,
#mal\_cs_listinfo,
#mal\_cs_links {
border-right: 1px solid #ffffff !important;
}
#mal\_cs_otherlinks,
#mal\_cs_otherlinks div,
#mal\_cs_otherlinks span,
#mal\_cs_otherlinks strong {
color: #ffffff !important;
font-family: 'trebuchet ms', arial, helvetica !important;
font-size: 1em !important;
text-transform: lowercase;
}
#mal_cs_powered {
position:fixed !important;
}
#mal_cs_powered a:hover {
background-color:transparent !important;
}

#mal_cs_powered{
top:auto !important;
right: 0px !important;
}
#mal\_cs_pic,
#mal\_cs_listinfo,
#mal\_cs_links {
border-right:0px solid #ffffff !important;
}
 
-Hysteria- | 12-07-09, 6:56 AM
You're so cool^^
Thank you =)
 
Chibikko | 11-26-09, 11:02 AM
thanks for the cursor css :D much appreciated
 
Moonfrost | 09-09-09, 5:20 PM
Wow nice. Thank you for this. :D
 
Logax | 07-15-08, 10:30 AM
Holy cow, awesome stuff, nice off you to share this. Thanks alot.
 
rainbow_heart | 07-13-08, 6:06 AM
Thanks a lot for this. ^_^
 
KimimaroKenshin | 06-10-08, 1:03 PM
Tite stuff...
 
StarlitRiot | 05-24-08, 7:04 PM
Haha no! But I must change the black bar to make my theme look right! But seriously I wonder how you do that..

But all joking aside, I really like this tutorial the best out of them all so far. This one is very easy to understand because of the text being colored.

Example images would be really helpful also for some people. What you really should make is some tutorials on graphics in photoshop because yours are amazing. I can't believe you actually added a whole extra sock to that picture of yours.
 
De-JaY | 05-24-08, 4:38 PM
Talon said:
Never ask me about how to change the black bar above your list, can't touch that!

rofl...
"U can't touch me!"
 
Help     FAQ     About     Contact     Terms     Privacy     AdChoices