Here's a Beginner's layout which features the trick that turns your titles into their DVD covers when you put your cursor on their row! Normally, turning the titles into pics is a high level technique but we've made it so even a beginner can have this and be able to learn and customize your layout easily like with the other beginner's layouts.
How to customize the layout
There's notes in the code for customizing the layout's background colors and fonts, similar to other beginner's layouts. You can ask here if you have a question. Also there's a darker version for manga lists at the bottom and instructions on how to put the manga version's style on the anime list if you want that one.
Customizing the cover pic transition
You'll see the pics for your titles when you put your cursor over the rows on your list, as in the example pic above.
You can change the timing of the transition with the notes in the layout. Scroll to TABLE ROWS TRANSITION in the code. You can change the time it takes for the window with the pic to fully "open" (first number) and the time it takes to start to open (second number). For example, settings of .5s ease 2s; would mean it takes a half second for the anime to pic to fully open and 2 seconds after you put your cursor on the row for it to start opening. You can play around with the timing by editing your CSS (you'll have to change each row).
What to do if some of your covers don't show up
If you're missing covers, you'll need to use a CSS cover generator for an #animetitle CSS. This is different than a #more CSS from other layouts. You can make one for yourself with a CSS generator (use Blink! or Genku), or look for solutions to other problems: http://myanimelist.net/forum/?topicid=1162203
If you're getting the wrong covers on your list, like anime covers on a manga list, see problems 3 and 4.
Ask below if you have questions on anything.
Code for copying the layout
These are the codes for the layout. Just copy and paste it into your CSS edit box. One is for anime lists and the other for manga lists. Get the code from the spoilers below each pic.
Anime list code
A light background and clear table color with green tinted overlays when you point to the list. Code:
/*
BACKGROUND IMAGE
This is the main background image for the whole page.
Change the image link to the background you want!
If you're not seeing a background, make sure you are copied the
entire CSS code or added any new background image codes correctly.
Also your image link may be broken, try uploading a new background then!
*/
/*
HEADER COLOR AND FONT
These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc).
*/
/*
LIST WIDTH
Use this to increase the width of your list!
*/
#list_surround {
width: 700px;
}
/*
LIST POSITION
Change "left" to "right" to switch the list side, or vice versa.
*/
#list_surround {
left: 15px;
margin-top: 10px;
position: absolute;
}
/*
TABLE ROWS TRANSITION
This controls the part where pics appear on your table rows.
It controls the timing. You can change the numbers.
The first number in each row by default is .5s, this is a half second.
It controls how fast the pic window "opens".
The second number is the time it takes the window to begin opening.
By default its set to .1s, a tenth of a second.
If you changed it to 2s, it would take two seconds for the window to open.
You'll need to change all the rows timings!
They change different browser's timings.
*/
.td1, .td2 {
transition: line-height .5s ease .1s;
}
/*
LIST ROWS HEIGHT ON HOVER
This is the height of the table rows when you put your cursor on them.
*/
tr:hover .td1, tr:hover .td2 {
line-height: 340px;
transition: .2s linear;
}
/*
COLOR OF SPOT ON LIST
Change the color of your list table.
*/
/*
REPOSITION MAIN BACKGROUND
Change the position your background starts on your screen from with the two properties after "background-position" below.
For example, the default code starts it from the left and top corner of the screen. You change 'center' and '10%' with other properties, they can be any of the following: left, top, bottom, right, or center.
So if you want your background to start from the center of the screen, use "center center".
If you want it to start from the top and center, use "top center".
If you want it to start from the right and top, use "right top"
If you want it to start from the right and bottom, use "right bottom"
and so forth...
Additionally, you can change "center" to a % to determine how far left or right the background starts from. For example "30% top" will start the background from the top but 30% of the pic's width from the left of the layout. You can also change 10% to a % to change the amount you want to start it from the top or bottom.
*/
body{
background-position: left 0%;}
/*OTHER CODES
Important codes for the layout's setup. Please don't mess with these unless you know what you're doing. If you want to customize more on the page, come look around for new tricks or ask questions in my club! http://myanimelist.net/clubs.php?cid=19736
*/
Manga list version Here's the version for manga lists. Its darker. If you want this darker version for your anime list, just use this CSS below for your anime list but switch the top line of the anime list CSS above with this one. Code
/*
BACKGROUND IMAGE
This is the main background image for the whole page.
Change the image link to the background you want!
If you're not seeing a background, make sure you are copied the
entire CSS code or added any new background image codes correctly.
Also your image link may be broken, try uploading a new background then!
*/
/*
HEADER COLOR AND FONT
These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc).
*/
.header_title {
background-color:transparent;
color: white;
font-family: times new roman;
font-size: 52px;
}
/*
SUB-HEADERS BACKGROUND COLOR COLOR
Below each main header is the sub-header which says Score, Episodes, Tags, etc.
*/
/*
LIST WIDTH
Use this to increase the width of your list!
*/
#list_surround {
width: 700px;
}
/*
LIST POSITION
Change "left" to "right" to switch the list side, or vice versa.
*/
#list_surround {
left: 15px;
margin-top: 10px;
position: absolute;
}
/*
TABLE ROWS TRANSITION
This controls the part where pics appear on your table rows.
It controls the timing. You can change the numbers.
The first number in each row by default is .5s, this is a half second.
It controls how fast the pic window "opens".
The second number is the time it takes the window to begin opening.
By default its set to .1s, a tenth of a second.
If you changed it to 2s, it would take two seconds for the window to open.
You'll need to change all the rows timings!
They change different browser's timings.
*/
.td1, .td2 {
transition: line-height .5s ease .1s;
}
/*
LIST ROWS HEIGHT ON HOVER
This is the height of the table rows when you put your cursor on them.
*/
tr:hover .td1, tr:hover .td2 {
line-height: 340px;
transition: .2s linear;
}
/*
COLOR OF SPOT ON LIST
Change the color of your list table.
*/
/*
REPOSITION MAIN BACKGROUND
Change the position your background starts on your screen from with the two properties after "background-position" below.
For example, the default code starts it from the left and top corner of the screen. You change 'center' and '10%' with other properties, they can be any of the following: left, top, bottom, right, or center.
So if you want your background to start from the center of the screen, use "center center".
If you want it to start from the top and center, use "top center".
If you want it to start from the right and top, use "right top"
If you want it to start from the right and bottom, use "right bottom"
and so forth...
Additionally, you can change "center" to a % to determine how far left or right the background starts from. For example "30% top" will start the background from the top but 30% of the pic's width from the left of the layout. You can also change 10% to a % to change the amount you want to start it from the top or bottom.
*/
body{
background-position: left 0%;}
/*OTHER CODES
Important codes for the layout's setup. Please don't mess with these unless you know what you're doing. If you want to customize more on the page, come look around for new tricks or ask questions in my club! http://myanimelist.net/clubs.php?cid=19736
*/
How difficult would this be to implement on my existing list? (I'm using two backgrounds a main and a gif over the main)
Would I need any additional codes or could I just drop in the DVD cover codes into my existing CSS code?
Yes, you can implement this, but you need to know a little of CSS to know what part have to change or delete from your existing list to avoid some declarations crashproblems, like the line height(in my list I got this crashproblem, so I change a little the code to fit in my list).
How difficult would this be to implement on my existing list? (I'm using two backgrounds a main and a gif over the main)
Would I need any additional codes or could I just drop in the DVD cover codes into my existing CSS code?
I can't think how to gauge the difficulty for that. But you can just add the codes from this layout with yours and reproduce the effect on it, yes. However the text in the tags will make them really wide on hover. You can add this code to probably remove that problem:
td:nth-of-type(4) {
line-height: 20px !important;
}
