List layout for displaying anime scans, with scroll effect! Jigoku Shoujo and Ecchi themes!

Jun 9, 2010 1:41 PM

Offline

Feb 2010

11294

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[/b]

Here are layouts specifically made to use scans. "Scans" are very big anime images, often longer vertically than horizontally. You can get scans from sites like Danbooru (search Absurdres), Konachan (search bigger images), Minitokyo, or Google Image when you specify larger images with the options on the left.

The background will scroll as you move down the page and show you the full image! Be sure to use it on your medium sized lists (like a manga list) to see the full effect!

Jigoku Shoujo scan Layout

Switch the scan out with your own if you want! Use the repositing options in the code notes to set your scan just right!

The code, make sure you copy the entire thing in the spoiler tag from the first /* to the last } at the end.

/*
BACKGROUND IMAGE
This is the main background image for the whole page.
Change the image link to the background you want!
For more help see here:
http://myanimelist.net/forum/?topicid=419405&show=0#post1
*/

body {
background-image: url(http://i.imgur.com/RR6FhUy.jpg);
background-attachment: scroll;
}

/*
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 'left' and 'top' 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 "left" 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 top to a % to change the amount you want to start it from the top or bottom.
*/

body{
background-position: left top;}

/*
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:midnightblue;
font-family:english111 vivace bt;
font-size:38px;
}

/*
SUB-HEADERS BACKGROUND COLOR COLOR
Below each main header is the sub-header which says Score, Episodes, Tags, etc.
*/

.table_header {
background-color:PaleVioletRed;
}

/*
LIST TABLE COLOR
Change color of the table here. Learn how to use RGBA colors here: http://myanimelist.net/forum/?topicid=440525
*/

.category_totals,
.td1,
.td2,
#grand_totals,
#copyright {
background-color: rgba(55, 55, 55, 0.6);
border-width:0;
padding:2px;
}

.category_totals:HOVER,
.td1:HOVER,
.td2:HOVER,
#grand_totals:HOVER,
#copyright:HOVER {background-color:black;
border-width:0;
padding:2px;
}

/*
ANIME/MANGA TITLE FONTS
This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc.
*/

.animetitle, .animetitle:visited {
color:white;
font-family:fantasy;
font-size:12px;
}

/*
LIST FONTS
This is the type and color for more of the numbers, links, and words on the list itself!
*/

.td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright {
color:wheat;
font-family:fantasy;
font-size:13px;
}

/*
LIST WIDTH
Use this to increase the width of your list!
*/

#list_surround {
width: 600px;
}

/*
LIST POSITION
Change left to right to set it on the right side. Add to the px amount (5px by default) to change how far from the side it is. To center a list, see this tutorial:
http://myanimelist.net/forum/?topicid=393437&show=0#post1
*/
#list_surround {
position: absolute !important;
left: 5px !important;}

/*OTHER CODES
Important codes for the layout's setup. Please don't mess with these. If you want to customize more on the page, come to my group and ask or move on to a more advanced layout.
*/

body {
font-weight: light;
background-repeat: no-repeat;
background-color: black;
}
#list_surround {
background-image:url();
left:2px;
position:absolute;
}
a {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover, a:visited:hover {
color:red;
text-decoration:underline;
}

#copyright:after {
content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info.";
}
.status_selected {
background-color:black;
padding:2px;
color:white;
text-decoration: blink;
}
.status_not_selected {
background-color:black;
padding:2px;
color:white;
}
.status_selected a{
color:blue;
}
.status_not_selected a{
color:white;
}
.thickbox {
color:cyan;
font-family:fantasy;
font-size:12px;
}
.header_title {
height:32px;
padding:2px;
}
.table_header {
border-width:0;
font-weight:bold;
padding:2px;
}
.category_totals {
height:30px;
}
#copyright, #grand_totals {
text-align: center;
margin:0 auto;
}

Ecchi beach Layout

Here's the original scan layout I used, the wallpaper was reported before once tho and deleted, so it may not always be available!

The code, make sure you copy the entire thing in the spoiler tag from the first /* to the last } at the end.

/*
BACKGROUND IMAGE
This is the main background image for the whole page.
Change the image link to the background you want!
For more help see here:
http://myanimelist.net/forum/?topicid=419405&show=0#post1
*/

body {
background-image: url(http://i.imgur.com/QDzvJI8.jpg);
background-attachment: scroll;
}

/*
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 'left' and 'top' 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 "left" 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 top to a % to change the amount you want to start it from the top or bottom.
*/

body{
background-position: left top;}

/*
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:midnightblue;
font-family:english111 vivace bt;
font-size:38px;
}

/*
SUB-HEADERS BACKGROUND COLOR COLOR
Below each main header is the sub-header which says Score, Episodes, Tags, etc.
*/

.table_header {
background-color:PaleVioletRed;
}

/*
LIST TABLE COLOR
Change color of the table here. Learn how to use RGBA colors here: http://myanimelist.net/forum/?topicid=440525
*/

.category_totals,
.td1,
.td2,
#grand_totals,
#copyright {
background-color: rgba(55, 55, 55, 0.6);
border-width:0;
padding:2px;
}

.category_totals:HOVER,
.td1:HOVER,
.td2:HOVER,
#grand_totals:HOVER,
#copyright:HOVER {background-color:black;
border-width:0;
padding:2px;
}

/*
ANIME/MANGA TITLE FONTS
This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc.
*/

.animetitle, .animetitle:visited {
color:white;
font-family:fantasy;
font-size:12px;
}

/*
LIST FONTS
This is the type and color for more of the numbers, links, and words on the list itself!
*/

.td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright {
color:wheat;
font-family:fantasy;
font-size:13px;
}

/*
LIST WIDTH
Use this to increase the width of your list!
*/

#list_surround {
width: 600px;
}

/*
LIST POSITION
Change left to right to set it on the right side. Add to the px amount (5px by default) to change how far from the side it is. To center a list, see this tutorial:
http://myanimelist.net/forum/?topicid=393437&show=0#post1
*/
#list_surround {
position: absolute !important;
left: 5px !important;}

/*OTHER CODES
Important codes for the layout's setup. Please don't mess with these. If you want to customize more on the page, come to my group and ask or move on to a more advanced layout.
*/

body {
font-weight: light;
background-repeat: no-repeat;
background-color: #FBFDE8;
}
#list_surround {
background-image:url();
left:2px;
position:absolute;
}
a {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover, a:visited:hover {
color:red;
text-decoration:underline;
}

#copyright:after {
content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info.";
}
.status_selected {
background-color:black;
padding:2px;
color:white;
text-decoration: blink;
}
.status_not_selected {
background-color:black;
padding:2px;
color:white;
}
.status_selected a{
color:blue;
}
.status_not_selected a{
color:white;
}
.thickbox {
color:cyan;
font-family:fantasy;
font-size:12px;
}
.header_title {
height:32px;
padding:2px;
}
.table_header {
border-width:0;
font-weight:bold;
padding:2px;
}
.category_totals {
height:30px;
}
#copyright, #grand_totals {
text-align: center;
margin:0 auto;
}

Shishio-kunJun 30, 2014 5:37 AM

Mar 13, 2011 1:10 PM

Apocaly

Offline

Mar 2008

I liked this style, but I wanted it for a manga list :(

Sing a song ♪♫

Mar 19, 2011 11:06 PM

Shishio-kun

Offline

Feb 2010

11294

Apocaly said:
I liked this style, but I wanted it for a manga list :(

? You can use this code on a manga list.

Mar 21, 2011 12:19 PM

Apocaly

Offline

Mar 2008

heh, but it'll come with the "anime" words, like currently "watching", and "anime title", no?

Sing a song ♪♫

Mar 21, 2011 9:34 PM

Shishio-kun

Offline

Feb 2010

11294

Apocaly said:
heh, but it'll come with the "anime" words, like currently "watching", and "anime title", no?

No. It only changes the main background and font colors/types, not the actual words.

Mar 24, 2011 1:32 PM

Rodness

Offline

Aug 2009

281

Hm, this one looks pretty nice. Good job. I like the picture that you picked as standard. xD

Mar 28, 2011 10:49 AM

Shishio-kun

Offline

Feb 2010

11294

Rodness said:
Hm, this one looks pretty nice. Good job. I like the picture that you picked as standard. xD

GANZAGAS

Apr 20, 2012 10:11 PM

Shishio-kun

Offline

Feb 2010

11294

Someone reported the ecchi scan in the beach layout and it was deleted, but I reuploaded it. I've also added a Jigoku Shojo style layout and some extra notes and codes to improve using scans for this kinda layout!

Aug 9, 2012 5:40 AM

Toxicwolf

Offline

Jun 2011

102

Erhm, if i may ask this: I have the Jigoku shojo layout on my manga list. But when i had it on the anime list i had so many animes that when the picture had been passed it was just light brown (Or something around that) For the rest of the page...

Is there anyway to fix that? or make the picture scroll with you? (:

(Sorry if i sound like a noob or anything, but im just clueless when it comes to CSS xD)

ToxicwolfAug 9, 2012 5:48 AM

Aug 11, 2012 12:06 PM

#10

Shishio-kun

Offline

Feb 2010

11294

The only alternative is to find background-attachment: scroll; near the top and change scroll; to fixed; then it stays in place.

Aug 12, 2012 4:17 PM

#11

Toxicwolf

Offline

Jun 2011

102

Great, thank you very much :)

May 21, 2014 2:05 PM

#12

SoneAnna

Offline

Feb 2009

281

Ooops sorry to bump this old topic, but the background of the list (the image hosted on imageshack) has gone missing! Again? I'm not sure if it's the same issue as before since I can't see the example image either, whoops.

Do you guys have a backup of the image used in the code? I wouldn't mind uploading it to my own server if so.

EDIT: Ah, right, I had been using the Jigoku Shoujo version with my own background image, if that matters!

Jun 30, 2014 5:34 AM

#13

Shishio-kun

Offline

Feb 2010

11294

I've reuploaded the backgrounds for these layouts that Imageshack deleted when they made their stupid fucking change, and restored the example pics in the first post. I also made it a little clearer in the codes how to change the colors for the list.

SoneAnna said:
Ooops sorry to bump this old topic, but the background of the list (the image hosted on imageshack) has gone missing! Again? I'm not sure if it's the same issue as before since I can't see the example image either, whoops.

Do you guys have a backup of the image used in the code? I wouldn't mind uploading it to my own server if so.

EDIT: Ah, right, I had been using the Jigoku Shoujo version with my own background image, if that matters!

Sorry for long delay, I've reuploaded the background to Imgur. you can get the image link from the first post or recopy the code

See All Discussions

» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page ) Shishio-kun - Apr 15, 2010	7812	by mtsRhea »» Apr 21, 5:25 AM
» [CSS- MODERN] ⭐ Minimal Dashboard layout by 5cm ~ Compact and convenient! ( 1 2 3 ) Shishio-kun - Sep 4, 2020	121	by Pokitaru »» Apr 21, 3:25 AM
» [CSS-MODERN] Change list text/font colors on any list layout Shishio-kun - May 4, 2021	3	by hideso »» Apr 20, 4:33 PM
» [CSS] [VIDEO GUIDE] ⭐️ How to change fonts on a list layout Shishio-kun - Jul 15, 2019	17	by hideso »» Apr 20, 4:03 PM
» [CSS][Modern] ☀️ Endless Summer Layout by Cateinya ( 1 2 3 4 5 ... Last Page ) Cateinya - Aug 18, 2016	309	by hideso »» Apr 20, 3:56 PM

List layout for displaying anime scans, with scroll effect! Jigoku Shoujo and Ecchi themes!

More topics from this board

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

» [CSS- MODERN] ⭐ Minimal Dashboard layout by 5cm ~ Compact and convenient! ( 1 2 3 )

» [CSS-MODERN] Change list text/font colors on any list layout

» [CSS] [VIDEO GUIDE] ⭐️ How to change fonts on a list layout

» [CSS][Modern] ☀️ Endless Summer Layout by Cateinya ( 1 2 3 4 5 ... Last Page )

MoreTop Anime

MoreTop Airing Anime

MoreMost Popular Characters