💎 Show off your latest design!!

Offline

Jan 2012

1578

AngelicXI said:
Well.About time me shared with you all,tho Shishio knows 'lready how my AnimeList looks. XD

Try to add

.table_header {
background-color: rgba(122, 65, 154, 0.9);
border-top: 2px outset #9966CC !important;
font-family: 'Julius Sans One',sans-serif;
padding: 8px 0;
z-index: 10;
}

because top border at the first column has not the same width as others

Dec 19, 2012 5:29 AM

#253

Offline

Jan 2012

1578

Do you like horizontal scrolling list?

Dec 19, 2012 3:02 PM

#254

Livin in the 90s

Offline

Jan 2011

75

Hahaido said:
Do you like horizontal scrolling list?

I've always wondered if that was possible, its pretty incredible. Love the Iori pic btw, fits right in with that background.

Dec 19, 2012 6:09 PM

#255

Offline

Feb 2010

12676

Hahaido said:
Do you like horizontal scrolling list?

So nice, will be really good for manga lists!

Dec 21, 2012 10:17 PM

#256

Offline

Jan 2012

1578

LordSilen said:

Love the Iori pic btw, fits right in with that background.

Hmmm, and you don't like Inaba-san >:( ?

Shishio-kun said:

So nice, will be really good for manga lists!

Well, if somebody wants to use this layout for manga list I'll make the customisation!

Dec 21, 2012 10:31 PM

#257

Livin in the 90s

Offline

Jan 2011

75

Hahaido said:

LordSilen said:

Love the Iori pic btw, fits right in with that background.

Hmmm, and you don't like Inaba-san >:( ?

Wow, I did not notice that. I should have expected it though, since random backgrounds are growing popular, I just didn't refresh enough for her to pop up. Inaba-san also fits very well, lol.
Nice job as always Hahaido :]

Dec 22, 2012 10:00 AM

#258

LegendGoldDark

Offline

Jul 2012

9027

Shishio-kun said:

Hahaido said:
Do you like horizontal scrolling list?

So nice, will be really good for manga lists!

I wish it can work in IE :(

Dec 22, 2012 10:10 PM

#259

Offline

Jan 2012

1578

GoldenBRS said:

I wish it can work in IE :(

It works with IE! But you need version 10 of the browser!

Dec 27, 2012 12:24 AM

#260

Offline

Jan 2012

1578

How does it look in your browser?

Dec 27, 2012 1:04 AM

#261

Offline

Feb 2010

12676

Hahaido said:
How does it look in your browser?

Wow it looks great in Firefox!

Dec 27, 2012 1:13 AM

#262

Offline

Jan 2012

1578

Shishio-kun said:

Wow it looks great in Firefox!

Thanks! But in some browsers red/green circles in the menu at the bottom left are moved down. Do you noticed something like that?

HahaidoDec 27, 2012 1:17 AM

Dec 27, 2012 1:39 AM

#263

Livin in the 90s

Offline

Jan 2011

75

Hahaido said:

Shishio-kun said:

Wow it looks great in Firefox!

Thanks! But in some browsers red/green circles in the menu at the bottom left are moved down. Do you noticed something like that?

Works for me as well with Firefox Nightly. The circles appear perfectly centered and matches the image. Love the GITS theme, especially that bottom left menu.

Dec 30, 2012 9:38 PM

#264

Offline

Nov 2011

30

here's mine:

Dec 30, 2012 10:09 PM

#265

Offline

Jan 2012

1578

Compiler said:
here's mine

When I hover the list line, the color of a corresponding cell is changing. What if the color of an entire row will change?

Dec 30, 2012 10:50 PM

#266

Offline

Nov 2011

30

Hahaido said:

Compiler said:
here's mine

When I hover the list line, the color of a corresponding cell is changing. What if the color of an entire row will change?

I google'd it and I found I shoulduse tr:hover but when I used it the background when hovering overlaps with the original background. How do I fix it?

CompilerDec 30, 2012 11:09 PM

Dec 30, 2012 11:22 PM

#267

Offline

Jan 2012

1578

Compiler said:

I google'd it and I found I shoulduse tr:hover but when I used it the background when hovering overlaps with the original background. How do I fix it?

The changes are marked with a bold font:

@import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css";
@import url(http://dl.dropbox.com/u/78192465/MyAnimeList/CSS/AnimeBase_more_before.css);
@import url(http://fonts.googleapis.com/css?family=Russo+One);
@import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSS.css";
@import url(http://fonts.googleapis.com/css?family=Handlee);

body {
background-attachment: fixed;
background-clip: border-box;
background-color: #000000;
background-image: url("http://i48.tinypic.com/2z6au7b.jpg");
background-size:cover;
background-position: center;
background-repeat: no-repeat;
color: #FFEBCD;
font-family: Tempus Sans ITC;
font-size: 14px;
}

.hide {
background-color: #000;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
border-color: #000;
border-radius: 7px 7px 7px 7px;
border-style: solid;
border-width: 1px;
display: inline-block !important;
height: 37px;
margin-left: 30px;
margin-top: -42px;
position: absolute;
vertical-align: middle;
width: 27px;
z-index: 20;
}

.hide:hover {
}

.hide:hover:before {
content: '';
width: 246px !important;
height: 283px !important;
right: 737px;
bottom: 83px;
position: fixed;
background-repeat: no-repeat !important;
background-size: cover;
border-style: solid;
border-width: 2px;
border-color: brown;
border-radius: 4px 4px 4px 4px;
z-index: -10;
}

.hide:hover:after {
content: '';
bottom: 0;
right: 0;
right: 710px;
bottom: 15px;
height: 100%;
width: 100%;
margin-bottom: 0;
position: fixed;
background-image: url(http://i50.tinypic.com/vws4cy.jpg);
background-repeat: no-repeat !important;
background-position:right bottom, right bottom;
background-size: cover;
width: 300px !important;
height: 448px !important;
z-index: -15;
}

div#list_surround {
background-repeat: no-repeat;
margin-top: 0px;
position: absolute;
right: 10px;
width: 700px;
}

.td1 {
background: transparent;
/* background-image: url("http://i48.tinypic.com/2ccui6t.png"); */
background-image: url("http://i50.tinypic.com/2m7azqq.png");
background-repeat:repeat-y;
font-family: 'Handlee', cursive;
font-size: 14px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 5px;
padding-right: 5px;
opacity: 1;
}
.td2 {
background: transparent;
background-image: url("http://i50.tinypic.com/2m7azqq.png");
background-repeat:repeat-y;
font-family: 'Handlee', cursive;
font-size: 14px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 5px;
padding-right: 5px;
opacity: 1;
}

.animetitle {
display: block;
padding-left: 20px;
}

.animetitle + small {
display: none;
}

#list_surround .header_title .thickbox { display:none; }

tr:HOVER .td1, tr:HOVER .td2 {
background: transparent;
background-image: url("http://i48.tinypic.com/2ccui6t.png");
border-top: solid 2px #000000;
border-bottom: solid 2px #000000;
text-align: center;
border-top-width: 2px !important;
padding:11px;
padding-left: 5px;
opacity: 1;
}

td[class^='td']:first-child { border-left: solid 2px #000000 !important; }

td[class^='td']:last-child { border-right: solid 2px #000000 !important; }

.header_cw {
background-image: url("http://i46.tinypic.com/r10a3b.png");
background-repeat: no-repeat;
height: 287px;
}
.header_completed {
background-image: url("http://i50.tinypic.com/14no45k.png");
background-repeat: no-repeat;
height: 287px;
}
.header_onhold {
background-image: url("http://i45.tinypic.com/2wqcvte.png");
background-repeat: no-repeat;
height: 287px;
}
.header_dropped {
background-image: url("http://i47.tinypic.com/34pb1qr.png");
background-repeat: no-repeat;
height: 287px;
}
.header_ptw {
background-image: url("http://i47.tinypic.com/2qkqud4.png");
background-repeat: no-repeat;
height: 287px;
}

#list_surround .status_selected {
background: url("http://i50.tinypic.com/2rz3qqb.jpg") no-repeat scroll 0 0 transparent;
background-repeat: no-repeat;
display: block;
width:100%;
height:100%;
height: 143px;
width: 100px;
top: 30px;
left: 3px;
position: fixed;
padding: 0;

transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
}

#list_surround .status_selected a {
color: #FFEBCD;
display: block;
font-size: 1px;
height: 2px;
padding: 130px 0 0 0;
width: 100px;
}
#list_surround .status_not_selected {
background: url("http://i50.tinypic.com/2rz3qqb.jpg") no-repeat scroll 0 0 transparent;
background-repeat: no-repeat;
width:100%;
height:100%;
display: block;
height: 143px;
width: 100px;
top: 30px;
left: 3px;
position: fixed;
padding: 0;

transform:rotate(355deg);
-ms-transform:rotate(355deg); /* IE 9 */
-moz-transform:rotate(355deg); /* Firefox */
-webkit-transform:rotate(355deg); /* Safari and Chrome */
-o-transform:rotate(355deg); /* Opera */

}

#list_surround .status_not_selected a {
color: #FFEBCD;
display: block;
font-size: 1px;
height: 2px;
padding: 130px 0 0 0;
width: 100px;
}
#list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected {
background: url("http://i45.tinypic.com/106d64g.jpg") no-repeat scroll 0 0 white;
display: block;
top: 30px;
left: 106px;

transform:rotate(3deg);
-ms-transform:rotate(3deg); /* IE 9 */
-moz-transform:rotate(3deg); /* Firefox */
-webkit-transform:rotate(3deg); /* Safari and Chrome */
-o-transform:rotate(3deg); /* Opera */
}

#list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected {
background: url("http://i46.tinypic.com/2i2ap07.jpg") repeat scroll 0 0 transparent;
display: block;
top: 30px;
left: 209px;
transform:rotate(10deg);
-ms-transform:rotate(10deg); /* IE 9 */
-moz-transform:rotate(10deg); /* Firefox */
-webkit-transform:rotate(10deg); /* Safari and Chrome */
-o-transform:rotate(10deg); /* Opera */
}

#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
background: url("http://i49.tinypic.com/21lr4g4.jpg") no-repeat scroll 0 0 transparent;
display: block;
top: 180px;
left: 3px;

transform:rotate(9deg);
-ms-transform:rotate(9deg); /* IE 9 */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari and Chrome */
-o-transform:rotate(9deg); /* Opera */
}

#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
background: url("http://i49.tinypic.com/34fcv4k.jpg") no-repeat scroll 0 0 transparent;
display: block;
top: 180px;
left: 106px;

transform:rotate(2deg);
-ms-transform:rotate(2deg); /* IE 9 */
-moz-transform:rotate(2deg); /* Firefox */
-webkit-transform:rotate(2deg); /* Safari and Chrome */
-o-transform:rotate(2deg); /* Opera */
}

#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
background: url("http://i50.tinypic.com/2008sk6.jpg") no-repeat scroll 0 0 transparent;
display: block;
top: 180px;
left: 209px;

transform:rotate(357deg);
-ms-transform:rotate(357deg); /* IE 9 */
-moz-transform:rotate(357deg); /* Firefox */
-webkit-transform:rotate(357deg); /* Safari and Chrome */
-o-transform:rotate(357deg); /* Opera */
}

/* Disables menu titles */
.status_not_selected a, .status_selected a {
content: none !important;
color: transparent !important;
letter-spacing: -5px !important;
}

/* Enlarging animation */
.status_not_selected {
transform: scale(1, 1);
-o-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transition: all .3s linear;
-o-transition: all .3s linear;
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
}

/* Changing position */
.status_selected {
transform: scale(1, 1);
-o-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transition: all .3s linear;
-o-transition: all .3s linear;
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
}

.status_not_selected:hover, .status_selected:hover { z-index: 100; }

/* End point of animation */
.status_not_selected:hover, .status_selected:hover {
transform: scale(1.5, 1.5) !important;
-o-transform: scale(1.5, 1.5) !important;
-ms-transform: scale(1.5, 1.5) !important;
-moz-transform: scale(1.5, 1.5) !important;
-webkit-transform: scale(1.5, 1.5) !important;
}

.animetitle {
color: #ffff33;
}
a {
color: #ffff33;
text-decoration: none;
padding-left: 15px;
}
a:hover{
color: white;
text-decoration: none;
padding-left: 15px;
}
.table_headerLink {
color: #FFEBCD;
}
.table_headerLink:visited {
color: #FFEBCD;
}
.table_headerLink:hover {
color: #FFEBCD;
}

#list_surround .animetitle + small {
color: #FFEBCD;
font-family: Tempus Sans ITC;
font-size: 11px;
}

/*
PARTS, COPYRIGHT AND TOTALS
*/

.table_header {
background: #000;
padding: 5px;
}

.table_header {
background: #000;
color: #FFEBCD;
font-family: Tempus Sans ITC;
font-size: 12px;
padding: 5px;
}

.category_totals {
background: #000;
color: #FFEBCD;
height: 25px;
text-align: center;
background-repeat: no-repeat;
padding-bottom: 20px;
}
#grand_totals {
background: #000;
height: 25px;
color: #FFEBCD;
}
#copyright {
background: #000;
color: #FFEBCD;
font-family: verdana;
font-size: 9px;
font-weight: normal;
height: 86px;
right: 20px;
padding: 5px;
text-align: left;
text-shadow: 0 0 15px #181818;
top: 500px;
width: 280px;
}
#copyright a{
text-decoration: none;
}
#copyright:after{
content: "Thanks to Shishio-kun and Hahaido for the help, css templates and tutorials";
}

/*
OTHER CODES
*/
.header_title {
display: none;
}
.status_selected {
color: #FFF;
font-family: 'Russo One';
padding: 2px;
text-decoration: none;
}
.status_not_selected {
color: #FFF;
font-family: 'Russo One';
padding: 2px;
}

[/spolier]

Dec 30, 2012 11:49 PM

#268

Offline

Nov 2011

30

Thank you. Do you have other suggestions to improve my list?

CompilerDec 30, 2012 11:54 PM

Dec 31, 2012 12:41 AM

#269

Offline

Jan 2012

1578

Compiler said:
Thank you. Do you have other suggestions to improve my list?

Yes, I have some:

@import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css";
@import url(http://dl.dropbox.com/u/78192465/MyAnimeList/CSS/AnimeBase_more_before.css);
@import url(http://fonts.googleapis.com/css?family=Russo+One);
@import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSS.css";
@import url(http://fonts.googleapis.com/css?family=Handlee);

body {
background-attachment: fixed;
background-clip: border-box;
background-color: #000000;
background-image: url("http://i48.tinypic.com/2z6au7b.jpg");
background-size:cover;
background-position: center;
background-repeat: no-repeat;
color: #FFEBCD;
font-family: Tempus Sans ITC;
font-size: 14px;
}

.hide {
background-color: #000;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
border-color: #000;
border-radius: 7px 7px 7px 7px;
border-style: solid;
border-width: 1px;
display: inline-block !important;
height: 37px;
margin-left: 30px;
margin-top: -42px;
position: absolute;
vertical-align: middle;
width: 27px;
z-index: 20;
}

.hide:hover {
}

.hide:hover:before {
content: '';
width: 246px !important;
height: 283px !important;
right: 737px;
bottom: 83px;
position: fixed;
background-repeat: no-repeat !important;
background-size: cover;
border-style: solid;
border-width: 2px;
border-color: brown;
border-radius: 4px 4px 4px 4px;
z-index: -10;
}

.hide:hover:after {
content: '';
bottom: 0;
right: 0;
right: 710px;
bottom: 15px;
height: 100%;
width: 100%;
margin-bottom: 0;
position: fixed;
background-image: url(http://i50.tinypic.com/vws4cy.jpg);
background-repeat: no-repeat !important;
background-position:right bottom, right bottom;
background-size: cover;
width: 300px !important;
height: 448px !important;
z-index: -15;
}

div#list_surround {
background-repeat: no-repeat;
margin-top: 0px;
position: absolute;
right: 10px;
width: 700px;
}

.td1 {
background: transparent;
/* background-image: url("http://i48.tinypic.com/2ccui6t.png"); */
background-image: url("http://i50.tinypic.com/2m7azqq.png");
background-repeat:repeat-y;
font-family: 'Handlee', cursive;
font-size: 14px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 5px;
padding-right: 5px;
opacity: 1;
}
.td2 {
background: transparent;
background-image: url("http://i50.tinypic.com/2m7azqq.png");
background-repeat:repeat-y;
font-family: 'Handlee', cursive;
font-size: 14px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 5px;
padding-right: 5px;
opacity: 1;
}

.animetitle {
display: block;
padding-left: 20px;
}

.animetitle + small {
display: none;
}

#list_surround .header_title .thickbox { display:none; }

tr:hover .td1, tr:hover .td2 {
background: transparent;
background-image: url("http://i48.tinypic.com/2ccui6t.png");
border-top: solid 2px #000000;
border-bottom: solid 2px #000000;
border-top-width: 2px !important;
}

#list_surround table:nth-of-type(n+4) tbody:hover .animetitle { text-align: center !important; }

td[class^='td']:first-child { border-left: solid 2px #000000 !important; }

td[class^='td']:last-child { border-right: solid 2px #000000 !important; }

.header_cw {
background-image: url("http://i46.tinypic.com/r10a3b.png");
background-repeat: no-repeat;
height: 287px;
}
.header_completed {
background-image: url("http://i50.tinypic.com/14no45k.png");
background-repeat: no-repeat;
height: 287px;
}
.header_onhold {
background-image: url("http://i45.tinypic.com/2wqcvte.png");
background-repeat: no-repeat;
height: 287px;
}
.header_dropped {
background-image: url("http://i47.tinypic.com/34pb1qr.png");
background-repeat: no-repeat;
height: 287px;
}
.header_ptw {
background-image: url("http://i47.tinypic.com/2qkqud4.png");
background-repeat: no-repeat;
height: 287px;
}

#list_surround .status_selected {
background: url("http://i50.tinypic.com/2rz3qqb.jpg") no-repeat scroll 0 0 transparent;
background-repeat: no-repeat;
display: block;
width:100%;
height:100%;
height: 143px;
width: 100px;
top: 30px;
left: 3px;
position: fixed;
padding: 0;

transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
}

#list_surround .status_selected a {
color: #FFEBCD;
display: block;
font-size: 1px;
height: 2px;
padding: 130px 0 0 0;
width: 100px;
}
#list_surround .status_not_selected {
background: url("http://i50.tinypic.com/2rz3qqb.jpg") no-repeat scroll 0 0 transparent;
background-repeat: no-repeat;
width:100%;
height:100%;
display: block;
height: 143px;
width: 100px;
top: 30px;
left: 3px;
position: fixed;
padding: 0;

transform:rotate(355deg);
-ms-transform:rotate(355deg); /* IE 9 */
-moz-transform:rotate(355deg); /* Firefox */
-webkit-transform:rotate(355deg); /* Safari and Chrome */
-o-transform:rotate(355deg); /* Opera */

}

#list_surround .status_not_selected a {
color: #FFEBCD;
display: block;
font-size: 1px;
height: 2px;
padding: 130px 0 0 0;
width: 100px;
}
#list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected {
background: url("http://i45.tinypic.com/106d64g.jpg") no-repeat scroll 0 0 white;
display: block;
top: 30px;
left: 106px;

transform:rotate(3deg);
-ms-transform:rotate(3deg); /* IE 9 */
-moz-transform:rotate(3deg); /* Firefox */
-webkit-transform:rotate(3deg); /* Safari and Chrome */
-o-transform:rotate(3deg); /* Opera */
}

#list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected {
background: url("http://i46.tinypic.com/2i2ap07.jpg") repeat scroll 0 0 transparent;
display: block;
top: 30px;
left: 209px;
transform:rotate(10deg);
-ms-transform:rotate(10deg); /* IE 9 */
-moz-transform:rotate(10deg); /* Firefox */
-webkit-transform:rotate(10deg); /* Safari and Chrome */
-o-transform:rotate(10deg); /* Opera */
}

#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
background: url("http://i49.tinypic.com/21lr4g4.jpg") no-repeat scroll 0 0 transparent;
display: block;
top: 180px;
left: 3px;

transform:rotate(9deg);
-ms-transform:rotate(9deg); /* IE 9 */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari and Chrome */
-o-transform:rotate(9deg); /* Opera */
}

#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
background: url("http://i49.tinypic.com/34fcv4k.jpg") no-repeat scroll 0 0 transparent;
display: block;
top: 180px;
left: 106px;

transform:rotate(2deg);
-ms-transform:rotate(2deg); /* IE 9 */
-moz-transform:rotate(2deg); /* Firefox */
-webkit-transform:rotate(2deg); /* Safari and Chrome */
-o-transform:rotate(2deg); /* Opera */
}

#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
background: url("http://i50.tinypic.com/2008sk6.jpg") no-repeat scroll 0 0 transparent;
display: block;
top: 180px;
left: 209px;

transform:rotate(357deg);
-ms-transform:rotate(357deg); /* IE 9 */
-moz-transform:rotate(357deg); /* Firefox */
-webkit-transform:rotate(357deg); /* Safari and Chrome */
-o-transform:rotate(357deg); /* Opera */
}

/* Disables menu titles */
.status_not_selected a, .status_selected a {
content: none !important;
color: transparent !important;
letter-spacing: -5px !important;
}

/* Enlarging animation */
.status_not_selected {
transform: scale(1, 1);
-o-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transition: all .3s linear;
-o-transition: all .3s linear;
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
}

/* Changing position */
.status_selected {
transform: scale(1, 1);
-o-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transition: all .3s linear;
-o-transition: all .3s linear;
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
}

.status_not_selected:hover, .status_selected:hover { z-index: 100; }

/* End point of animation */
.status_not_selected:hover, .status_selected:hover {
transform: scale(1.5, 1.5) !important;
-o-transform: scale(1.5, 1.5) !important;
-ms-transform: scale(1.5, 1.5) !important;
-moz-transform: scale(1.5, 1.5) !important;
-webkit-transform: scale(1.5, 1.5) !important;
}

.animetitle {
color: #ffff33;
}
a {
color: #ffff33;
text-decoration: none;
padding-left: 15px;
}
a:hover{
color: white;
text-decoration: none;
padding-left: 15px;
}
.table_headerLink {
color: #FFEBCD;
}
.table_headerLink:visited {
color: #FFEBCD;
}
.table_headerLink:hover {
color: #FFEBCD;
}

#list_surround .animetitle + small {
color: #FFEBCD;
font-family: Tempus Sans ITC;
font-size: 11px;
}

/*
PARTS, COPYRIGHT AND TOTALS
*/

.table_header {
background: #000;
padding: 5px;
}

.table_header {
background: #000;
color: #FFEBCD;
font-family: Tempus Sans ITC;
font-size: 12px;
padding: 5px;
}

.category_totals, #grand_totals {
background: #000;
color: #FFEBCD;
line-height: 36px;
text-align: center;
}

.category_totals {
border-radius: 0 0 8px;
-o-border-radius: 0 0 8px;
-moz-border-radius: 0 0 8px;
-webkit-border-radius: 0 0 8px;
}

#grand_totals {
border-radius: 8px 8px 8px 0;
-o-border-radius: 8px 8px 8px 0;
-moz-border-radius: 8px 8px 8px 0;
-webkit-border-radius: 8px 8px 8px 0;
}

#copyright {
position: relative !important;
display: inline-block !important;
margin-top: 0 !important;
background: #000;
color: #FFEBCD;
font-family: verdana;
font-size: 9px;
font-weight: normal;
float: left;
padding: 5px;
text-align: center;
text-shadow: 0 0 15px #181818;
width: 280px;
border-radius: 0 0 8px 8px;
-o-border-radius: 0 0 8px 8px;
-moz-border-radius: 0 0 8px 8px;
-webkit-border-radius: 0 0 8px 8px;
}

#copyright a{
text-decoration: none;
}
#copyright:after{
content: "Thanks to Shishio-kun and Hahaido for the help, css templates and tutorials";
}

/*
OTHER CODES
*/
.header_title {
display: none;
}
.status_selected {
color: #FFF;
font-family: 'Russo One';
padding: 2px;
text-decoration: none;
}
.status_not_selected {
color: #FFF;
font-family: 'Russo One';
padding: 2px;
}

Dec 31, 2012 1:02 AM

#270

Offline

Nov 2011

30

Hahaido said:

Compiler said:
Thank you. Do you have other suggestions to improve my list?

Yes, I have some:

Thank you.

Jan 1, 2013 6:05 AM

#271

Akiroz

Offline

Nov 2010

18

Hi everyone, I've been using MAL as a list for quite a while but this is the first time I've entered the forums! Minna, yoroshiku~

Here's my latest list design, simple and minimalistic.
(Thanks to shishio-kun for the top bar)
http://myanimelist.net/animelist/b1o2r3i4s5

AkirozJan 2, 2013 4:15 AM

Jan 1, 2013 1:34 PM

#272

Offline

Feb 2010

12676

b1o2r3i4s5 said:
Hi everyone, I've been using MAL as a list for quite a while but this is the first time I've entered the forums! Minna, yoroshiku~

Here's my latest list design, simple and minimalistic.
(Thanks to shishio-kun for the top bar)
[url]http://myanimelist.net/animelist/b1o2r3i4s5[/url]

EDIT: Can someone tell me what I did wrong with the URL tag?? I've rarely used BBCodes :S

Thanks but the top bar was originally Kyouhansha's and Al_Exs added the Menu button. I just cleaned them up and made them more compatible with other browsers.

That said I really like your easy to read and look at list, what is the background from??

Jan 1, 2013 10:17 PM

#273

Akiroz

Offline

Nov 2010

18

Shishio-kun said:

Thanks but the top bar was originally Kyouhansha's and Al_Exs added the Menu button. I just cleaned them up and made them more compatible with other browsers.

That said I really like your easy to read and look at list, what is the background from??

Thanks, I just edited the credits.
The background is a fan art of vocaloid IA, found it in google images.

Jan 3, 2013 7:39 AM

#274

Akiroz

Offline

Nov 2010

18

Just created a new layout from scratch, this is kinda like a hybrid between list types and cover types.
Decided to make this because cover types makes my already long list EVEN LONGER!

The Layout is done, though I still haven't decided what to put in the black spaces in the hover pop-up.
and also the empty space behind when the curser is not hovering over any anime....
but I'm been hammering at my keyboard for the past 16 hours nearly non-stop so I figured it's time to call it a day.

More of my ranting:

Another thing is that the layout only works on Anime (not manga) Lists with:
Number, Score, Type, Episodes, and Rating Rows.

Screen:

Code:
https://dl.dropbox.com/s/vjo1y0jyxn4cp4l/MAL_Miku_Style_2.css

Hope you guys like my layout. :D
Oh and suggestions for improvement plz?

PS:
I should mention that Aired shows will show up as "Aired" in the status box XD

AkirozJan 3, 2013 8:29 AM

Jan 4, 2013 2:02 AM

#275

DaxHim

Offline

Mar 2012

9

Here my latest Animelist :

However i think the css code is a little bit poor.

DaxHimJan 4, 2013 4:01 AM

I speak the google translate English so please excuse me.

Jan 4, 2013 2:03 PM

#276

Offline

Feb 2010

12676

DaxHim said:
Here my latest Animelist :

However i think the css code is a little bit poor.

Poor? Its amazing. Its not visible on your anime list atm but on the manga list wow. The top banner design is so smooth and hires I love that. If you mean the compatibility or cleanliness of the code is poor, most of us very easy going when it comes to that lol...

Jan 4, 2013 3:52 PM

#277

Livin in the 90s

Offline

Jan 2011

75

Finally updated my profile design, Now with buttons, yay!
went sparkle crazy...

_SilenJan 4, 2013 10:23 PM

Jan 4, 2013 9:18 PM

#278

Offline

Feb 2010

12676

LordSilen said:
Finally updated my profile design, Now with buttons, yay!
went sparkle crazy...

omg awesome dude, its really fun to read the text on your layout. You even did that insert thing hahhah. This is something a lot of people don't have. Oftentimes I quit reading text early on. Anyways this is fantastic best thing you made since the Persona layout.

Jan 5, 2013 3:04 AM

#279

Nakuke

Offline

Dec 2012

89

Hello everyone! I just finished making my first profile design and would really appreciate it if you could take a look at it and let me know what you think. I'm kind of iffy about keeping the little box around the welcome message, so let me know what you think about that. Thanks!

iSignature

Jan 5, 2013 11:15 PM

#280

Offline

Feb 2010

12676

Asukafag said:
Hello everyone! I just finished making my first profile design and would really appreciate it if you could take a look at it and let me know what you think. I'm kind of iffy about keeping the little box around the welcome message, so let me know what you think about that. Thanks!

Good job really matches Nerve style. Its nice to see you're a huge fan of Asuka.

Jan 6, 2013 11:57 PM

#281

Complx

Offline

Dec 2012

236

http://myanimelist.net/profile/Complx
It's my first Profile i have made :P
Please let me know if you like or things I can improve on :P

Thankyou

Jan 13, 2013 4:05 AM

#282

Hero_

Offline

Jan 2013

237

http://myanimelist.net/profile/Iori_K
http://myanimelist.net/animelist/Iori_K
http://myanimelist.net/mangalist/Iori_K
Without the help i didnt think i couldve finished so quickly

Hero_Jan 13, 2013 5:18 AM

Jan 14, 2013 11:11 AM

#283

Ayame__

Offline

Nov 2012

1

That's my list, it's a very simple one, the theme is the Lord of The Rings.

Jan 14, 2013 2:24 PM

#284

Offline

Feb 2010

12676

Iori_K said:
http://myanimelist.net/profile/Iori_K
http://myanimelist.net/animelist/Iori_K
http://myanimelist.net/mangalist/Iori_K
Without the help i didnt think i couldve finished so quickly

You have good taste in images. Love the pic on the profile and manga list, I think I'll use that render too! Who is this character?
http://i5.minus.com/ioDBU87HUrG7w.png

Melime said:
That's my list, it's a very simple one, the theme is the Lord of The Rings.

Oh what an awesome toolbar icon set!

Jan 14, 2013 5:47 PM

#285

Hero_

Offline

Jan 2013

237

You have good taste in images. Love the pic on the profile and manga list, I think I'll use that render too! Who is this character?
http://i5.minus.com/ioDBU87HUrG7w.png

It's an original artwork by : http://www.pixiv.net/member_illust.php?id=36

Jan 15, 2013 9:21 AM

#286

Asilva

Offline

Nov 2009

910

Hi there .... just wanted to show my first Profile Layout :)

Made by me, so tell me what do you think :)

AsilvaJan 16, 2013 7:30 PM

Jan 16, 2013 12:01 PM

#287

Joobie

Offline

May 2012

408

from following your video tut, this was what I was able to create

Thanks for the video tut btw, very helpful =)

Jan 23, 2013 2:34 PM

#288

Looboer

Offline

Aug 2010

11

Here is my latest Animelist:

http://myanimelist.net/animelist/Looboer

Code:
http://notepad.cc/share/D43MXx3WIZ

I got the basic from: (My thanks to: u531355 )
http://myanimelist.net/forum/?topicid=459189

LooboerJan 23, 2013 2:42 PM

Techno, TRANCE, Dance Music?
Http://www.youtube.com/ossatb

Jan 23, 2013 11:46 PM

#289

Offline

Feb 2010

12676

Asilva said:
Hi there .... just wanted to show my first Profile Layout :)

Made by me, so tell me what do you think :)

Great design, the only thing is the blue text with the white borders is a little uncomfortable to read over the links parts. Also the links don't work yet. If you don't know how to do that you can use my new tutorial video. If you don't know spoken English well you can always follow along the video to see what I do!

Jan 23, 2013 11:48 PM

#290

Offline

Feb 2010

12676

Joobie said:

from following your video tut, this was what I was able to create

Thanks for the video tut btw, very helpful =)

Oh man I'm so happy to see people finally pulling this off thanks to that vid, was very hard to make and sure is worth it to see it succeeded for you! Also Mugi pic is really cute and text is a very nice touch!

Jan 23, 2013 11:51 PM

#291

Offline

Feb 2010

12676

Looboer said:
Here is my latest Animelist:

http://myanimelist.net/animelist/Looboer

Code:
http://notepad.cc/share/D43MXx3WIZ

I got the basic from: (My thanks to: u531355 )
http://myanimelist.net/forum/?topicid=459189

Thats cool putting a background behind that list and moving the whole thing up, I like that a lot! I'd like to use that code in the future if its ok with you.

Jan 24, 2013 9:59 AM

#292

Asilva

Offline

Nov 2009

910

Shishio-kun said:

Great design, the only thing is the blue text with the white borders is a little uncomfortable to read over the links parts. Also the links don't work yet. If you don't know how to do that you can use my new tutorial video. If you don't know spoken English well you can always follow along the video to see what I do!

I know The link don't work :) i made it like that just to show here, i didn't see the point to cut the images and link the links to show here :)

But for the letter from the links ... i think that are those your are talking, What do you sugest i do ???

I tried to do those letter to match the Entire desing of the Profile, but now that you have metioned it ... it realy is a bit hard to read :)

Jan 24, 2013 12:57 PM

#293