Snapshots-style list layout

Jan 22, 2012 6:44 AM

Online

Feb 2010

12663

This layout is custom CSS. If you don't know how to install it, use the easy Beginner's Tutorial in this section:
http://myanimelist.net/forum/?topicid=419405

The design works for both anime and manga lists. For more layouts check the full list of Premade Layouts:
http://myanimelist.net/forum/?topicid=318587

This is a beautiful list design originally made by http://myanimelist.net/profile/Drize who also made the channel style layout. Its been through a little refurbishing as images have been lost but its easy to switch the images with your own and adjust!

Note: For the best look, once its installed go to this page: http://myanimelist.net/editprofile.php?go=listpreferences, go to Show Collumns under the settings for what list you changed and uncheck everything but Numbers.

The code:

/*
BULLETIN BACKGROUND
These two parts have the bulletin background in them.
*/
body {
background: url("http://i39.tinypic.com/1znrkhe.jpg") repeat fixed 0 0 transparent !important;
}
#mal_cs_listinfo, #mal_cs_otherlinks, #mal_cs_powered {
background: url("http://i39.tinypic.com/1znrkhe.jpg") repeat fixed 0 0 transparent !important;
}

/*
NOTEBOOK PAPER BACKGROUND
*/
#list_surround {
background: url("http://i39.tinypic.com/35i8xns.jpg") repeat scroll 0 0 orange !important;
left: 0 !important;
margin: 0 auto;
min-height: 100% !important;
position: absolute !important;
right: 0 !important;
top: -5px !important;
width: 556px !important;
}

/*
PHOTOS IN BACKGROUND
*/
#mal_cs_links {
background: url("http://img831.imageshack.us/img831/3324/photosredone.png") no-repeat scroll 50% 0 transparent !important;
display: inline-block !important;
height: 900px !important;
left: 50% !important;
margin: 0 0 0 -600px !important;
position: fixed !important;
top: 0 !important;
width: 1248px !important;
}

/*
PAPER AT BOTTOM
*/
#copyright {
background: url("http://i39.tinypic.com/2qmiszd.jpg") repeat scroll 0 0 transparent !important;
bottom: -11px !important;
font-style: italic;
height: 41px !important;
left: 50% !important;
margin: 0 0 0 -306px !important;
padding: 31px 0 0 !important;
position: fixed !important;
width: 612px !important;
}

#copyright:after {
content: " Google 'Shishio's Custom Lists' for more designs and info.";
}

/*
FONT SETTINGS
*/
* {
border: 0 none !important;
color: #515151 !important;
cursor: default !important;
font-family: Tahoma !important;
font-size: 8pt !important;
font-weight: normal !important;
list-style: none outside none !important;
text-decoration: none !important;
vertical-align: middle !important;
}

/*
OTHER CODES
*/
#mal_cs_powered {
display: inline-block !important;
height: 1px !important;
position: fixed !important;
right: 50% !important;
top: 0 !important;
width: 1px !important;
}
#list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_dropped, #list_surround .header_ptw {
display: inline-block !important;
}
.td1, .td2 {
font-size: 14px !important;
padding: 0 0 0 15px !important;
text-align: left !important;
width: 35px !important;
}
.td1 + .td1, .td2 + .td2 {
padding: 0 !important;
width: 506px !important;
}
.td1 + .td1 + .td1, .td2 + .td2 + .td2 {
display: none !important;
}
.animetitle span {
font-size: 14px !important;
}
.header_title span {
display: inline-block !important;
font-size: 17px !important;
height: 22px !important;
padding: 2px 0 0 !important;
}
.animetitle + small {
color: #5A7A1A !important;
font-size: 10px !important;
vertical-align: top !important;
}
.category_totals {
font-size: 13px !important;
padding-top: 4px;
text-align: center !important;
width: 100% !important;
}
.category_totals span {
font-size: 10px !important;
vertical-align: baseline !important;
}
#copyright a {
display: none !important;
}

#mal_cs_listinfo a {
background: none repeat scroll 0 0 yellow !important;
color: yellowGreen !important;
left: 0 !important;
margin: auto !important;
position: absolute;
right: 0 !important;
top: -16px !important;
width: 100px;
z-index: 200 !important;
}
#mal_cs_listinfo a strong {
background: none repeat scroll 0 0 transparent;
font-size: 18px !important;
left: -456px !important;
margin: auto !important;
position: absolute !important;
right: 0 !important;
top: 47px !important;
width: 100px;
z-index: 200 !important;
}

#mal_cs_pic, #mal_cs_listinfo, #mal_cs_links {
border-right: 0 none !important;
}
#mal_cs_listinfo {
background: none repeat scroll 0 0 teal;
}
#mal_cs_listinfo a {
background: none repeat scroll 0 0 yellow !important;
color: yellowGreen !important;
}
#mal_cs_listinfo a strong {
color: red;
}
#mal_cs_links {
background: none repeat scroll 0 0 orange;
}
#mal_cs_links a {
background: none repeat scroll 0 0 yellow !important;
display: none;
}
#mal_cs_otherlinks {
}
#mal_cs_otherlinks a {
color: blue !important;
display: none;
}
#mal_cs_otherlinks strong {
display: none;
}
#mal_cs_otherlinks strong a {
background: none repeat scroll 0 0 black !important;
color: cyan !important;
}
#mal_cs_powered {
}
#mal_cs_powered a {
display: none !important;
}
#mal_cs_powered #search {
display: none !important;
}
#searchListButton {
background: none repeat scroll 0 0 violet !important;
}
#mal_cs_pic {
background: url("http://img831.imageshack.us/img831/3324/photosredone.png") no-repeat scroll 0 0 red !important;
display: inline-block !important;
height: 900px !important;
left: 50% !important;
margin: 0 0 0 -600px !important;
position: fixed !important;
top: 0 !important;
width: 1248px !important;
}

.status_selected, .status_not_selected {
padding-top: 5px;
padding-bottom: 15px;
}

Shishio-kunNov 19, 2012 1:07 PM

Apr 15, 2012 12:45 AM

Shishio-kun

Online

Feb 2010

12663

OK this layouts been updated since the original images were lost, special thanks to Veriti for remaking the photos that were in the background! I also added some notes to make it easy to find where to replace the pics. They're all near the top.

Apr 20, 2012 10:45 PM

VeriTi

Offline

Nov 2011

304

Can you please reupload the snapshots pic somewhere 'cause I'm gonna re-arrange & clean my dropbox folder in few days?

Apr 20, 2012 10:53 PM

Shishio-kun

Online

Feb 2010

12663

Thanks for warning me, yeah I'll do that right now!

Finished!

Shishio-kunApr 20, 2012 11:36 PM

May 9, 2012 1:50 AM

Rakoria

Offline

Nov 2011

Hi my screen is 1920x1080 and the paper seems to be shifted more to the right. How do I fix it so that it shows in the middle between the photos? The right photos are being blocked So I cant see them

May 9, 2012 2:11 AM

Rakoria

Offline

Nov 2011

Rakoria said:
Hi my screen is 1920x1080 and the paper seems to be shifted more to the right. How do I fix it so that it shows in the middle between the photos? The right photos are being blocked So I cant see them

Never mind lol I got it

May 9, 2012 12:50 PM

Shishio-kun

Online

Feb 2010

12663

Thanks for telling me, I fixed the original code so the paper would be centered on most lists.

Oct 1, 2012 9:16 AM

Ayacchii

Offline

Sep 2012

555

Shishio-kun said:

How do I make an original anime list Gintama layout? Please help me. Thanks ;)

Oct 4, 2012 12:09 AM

Shishio-kun

Online

Feb 2010

12663

Fire11ize said:

Shishio-kun said:

How do I make an original anime list Gintama layout? Please help me. Thanks ;)

Depends on what you mean by original, you can just go to the beginners link on the front page of this club and use the beginner's list tutorial and use a Gintama bg. And after that if you want something truly original like made from scratch (very hard) you can use the CSS tutorials, learn techniques, then make your own with what you learn.

See All Discussions

» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page ) Shishio-kun - Apr 15, 2010	7919	by Nillwas »» 3 hours ago
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page ) Shishio-kun - Jul 21, 2017	381	by KabukiChouNights »» Sep 13, 10:56 AM
» theme help threat - Jul 5	5	by Zaryf »» Aug 21, 5:46 AM
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page ) Valerio_Lyndon - Apr 19, 2018	1261	by KiranaStarr »» Aug 16, 5:48 PM
» [CSS] ⭐️ Customize your List Cursor + Cursor Fixes Shishio-kun - Mar 8, 2021	30	by Shishio-kun »» Jul 28, 3:17 AM

Snapshots-style list layout

More topics from this board

» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )

» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )

» theme help

» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )

» [CSS] ⭐️ Customize your List Cursor + Cursor Fixes

MoreTop Anime

MoreTop Airing Anime

MoreMost Popular Characters