Designed after the windows apps (videos, groove music, etc.), I think it looks very professional :P
Image:
Code:
@import "@charset "utf-8";
/* CSS Document */
/* Math part of the layout, don't change unless you know what you're doing */
@import "https://dl.dropboxusercontent.com/u/41845835/MAL%20css%20extra.css";
body{
/*
Set up a background images:
*/
background: url(https://dl.dropboxusercontent.com/u/41845835/grey1920.png ), #fff;
width: 100%;
font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
font-size: 15px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 20px;
}
/*
LIST HOVER COLOR
*/
tr:hover [class^=td] {
background-color: #e6e6e6;
}
/*
TABLE HEADER & SORTING LINKS
*/
/* Table header & sort links */
.table_headerLink:visited{
color: #000;
}
.table_headerLink:hover{
background-color: #e6e6e6;
text-shadow: 0.5px 0.5px #fff
}
.table_headerLink{
color: #000;
text-decoration: none;
font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
font-size: 15px;
padding: 16px 20px 16px 16px;
font-weight: lighter;
margin-right:8px;
left: 5px;
position:relative;
bottom: 17px;
}
/*
* Configures background, border and text color for non-links
*/
.td1, .td2{
background-color: rgba(102,102,102,0.0);
color: #000;
font-size:15px;
}
/* This is for the links */
.td1 a, .td2 a{
text-decoration: none; /* Removes underline for these */
color: #000; /* Paints links */
}
/*
HEADER TITLES (Currently Watching, Completed, Dropped, etc...)
*/
.header_title{
font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
font-size: 28px;
font-weight: normal;
font-variant: normal;
text-transform: capitalize;
color: #000;
margin-bottom: 70px;
margin-top: 80px;
letter-spacing: 0em;
text-align: left;
}
/*
CATEGORY TOTALS
*/
.category_totals{
font-weight: lighter;
padding: 20px;
padding-bottom: 0px;
border-top: #d3d3d3 1px solid;
background-image: url("https://dl.dropboxusercontent.com/u/41845835/graph%20icon.png" );
background-repeat: no-repeat;
background-position: -3px 24px;
}
/* Text displaying global totals */
#grand_totals{
color: #000;
font-size: larger;
font-weight: lighter;
padding: 20px;
border-top: #d3d3d3 solid 1px;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("https://dl.dropboxusercontent.com/u/41845835/graph%20icon.png" );
background-repeat: no-repeat;
background-position: -3px 24px;
}
/* Modifying copyright section. */
#copyright{
background-color: rgba(0,0,0,0.0);
padding: 20px;
padding-top: 10px;
text-align: left;
}
/* Modifying the text color in copyright section */
#copyright, #copyright a{
color: #000;
}
/* MINIMIZED LIST TABLE
Right and top control the position of the table on the page. The percentage after is how far the list goes across the page from the right or top of the page. For example, right: 50%; moves the list 50% across the page from the right. You can change "right" to "left" to position it from the right instead of the left. Width and height control the width and height of your list, keep it smaller than your screen so the table stays minimal.
*/
#list_surround {
left: 362px;
top: -66px;
width: 75%;
height: 100%;
position: relative;
overflow-y: auto;
}
#inlineContent {
background-image: url("https://dl.dropboxusercontent.com/u/41845835/myanimelist%20banner%20windows%2010.png" );
top: 00px;
background-position: 0px 0px;
display: block !important;
height: 130px;
left: 0px;
position: absolute;
width: 100%;
z-index: 1 !important;
background-repeat: no-repeat;
margin-bottom: 40px;
}
";
DVD covers image :
Code:
@charset "utf-8";
/* CSS Document */
/* Math part of the layout, don't change unless you know what you're doing */
@import "https://dl.dropboxusercontent.com/u/41845835/MAL%20css%20extradvd.css";
@import "https://dl.dropboxusercontent.com/u/41845835/windows%20themed%20MALdvdfix.css";
@import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM );
body{
/*
Set up a background images:
*/
background: url(https://dl.dropboxusercontent.com/u/41845835/grey320.png ), #fff;
background-repeat: repeat-y;
width: 100%;
font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
font-size: 15px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 20px;
}
/*
TABLE HEADER & SORTING LINKS
*/
/* Table header & sort links */
.table_headerLink strong { font-weight: none !important; }
.table_headerLink:hover{
color: #2e51a1;
}
.table_headerLink{
color: #000;
text-decoration: none;
font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
font-size: 15px;
margin-right: 0px; !important
font-weight: lighter;
position:fixed;
top: 75px;
display:inline-block;
z-index:50 !important
}
/* SORT */
.table_header span { display: none !important; }
/* Disable Tags in the Sort Options */
.table_header[width="125"] { display: none !important; }
/* Override MAL parameters */
#mal_control_strip, #mal_control_strip td {
background: transparent !important;
height: 0 !important;
}
#mal_cs_pic, #mal_cs_listinfo, #mal_cs_links {
border: none !important;
}
#mal_cs_pic img {
display: none;
}
/* Box parameters */
#list_surround > table:first-of-type, {
display: fixed;
position: relative !important;
padding: 8px;
margin-left: 20px;
border: 5px !important;
overflow: hidden;
z-index: 13;
text-align: left;
float: left;
}
#list_surround > .table {
display: fixed;
position: relative !important;
padding: 16px;
margin-left: 20px; !important
border: 5px !important;
overflow: hidden;
z-index: 13;
text-align: left;
float: left;
background: orange;
width: 500px;
}
/*anime title*/
.table_header:nth-of-type(2) {
width: 100px;
margin-left: 80px;
font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
font-size: 15px;
font-weight: lighter;
}
/*score*/
.table_header:nth-of-type(3) {
width: 200px;
margin-left: 75px;
font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
font-size: 15px;
font-weight: lighter;
}
/*progress*/
.table_header:nth-of-type(5) {
width: 300px;
margin-left: 80px;
font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
font-size: 15px;
font-weight: lighter;
}
/*type*/
.table_header:nth-of-type(4) {
width: 300px;
margin-left: 150px;
font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
font-size: 15px;
font-weight: lighter;
}
#list_surround > table:first-of-type, .header_cw + table, .header_completed + table,
.header_onhold + table, .header_dropped + table, .header_ptw + table {
}
/* Hide header when All Anime displayed */
#list_surround > table:nth-of-type(n+4) ~ .header_cw + table,
#list_surround > table:nth-of-type(n+4) ~ .header_completed + table,
#list_surround > table:nth-of-type(n+4) ~ .header_onhold + table,
#list_surround > table:nth-of-type(n+4) ~ .header_dropped + table,
#list_surround > table:nth-of-type(n+4) ~ .header_ptw + table {
display: none;
}
.table_header {
display: block;
width: 100%;
}
/* MINIMIZED LIST TABLE
Right and top control the position of the table on the page. The percentage after is how far the list goes across the page from the right or top of the page. For example, right: 50%; moves the list 50% across the page from the right. You can change "right" to "left" to position it from the right instead of the left. Width and height control the width and height of your list, keep it smaller than your screen so the table stays minimal.
*/
#list_surround {
left: 350px;
top: -66px;
width: 81%;
height: 100%;
position: relative;
overflow-y: hidden;
float: left;
overflow-x: hidden;
}
/*#inlineContent {
background-image: url("https://dl.dropboxusercontent.com/u/41845835/myanimelist%20banner%20windows%2010.png" );
top: 00px;
background-position: 0px 0px;
display: block !important;
height: 130px;
left: 0px;
position: absolute;
width: 100%;
z-index: 1 !important;
background-repeat: no-repeat;
margin-bottom: 40px;
}
*/
.hide {
background-image: url("https://dl.dropboxusercontent.com/u/41845835/blankcover.png" );
background: transparent;
background-size: 100% 100%;
display: inline-block !important;
float: left;
height: 160px !important;
margin-left: -152px;
position: relative;
visibility: visible !important;
width: 132px;
z-index: 0;
margin-bottom: 50px; !important
top: 4px !important;
}
.hide:hover {
}
/*############################COLUMNS#####################*/
.td1, .td2 {
background-size: 140px;
width: 136px;
z-index: 15; !important
}
.td1 a, .td2 a {
color: #000;
}
td[class^="td"]:nth-of-type(2) {}
.animetitle {
color: #000 !important;
font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
font-size: 15px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 20px;
left: 30px;
max-width: 140px;
overflow: hidden;
position: absolute;
text-align: left;
text-decoration: none;
top: 160px;
max-height: 40px;
margin-left: -24px; !important
top: 20px; !important
}
td[class^="td"]:nth-of-type(3) {
background: transparent;
color: #000;
display: inline !important;
font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 20px;
left: 20px !important;
position: relative;
text-align: left !important;
text-decoration: none;
background: url("https://dl.dropboxusercontent.com/u/41845835/indent2.png" ) no-repeat;
background-size: 100% 100%;
padding-left: 4px;
padding-right: 18px;
top: 140px !important;
width: 30px !important;
padding-right: 0px ;
z-index: 5;
margin-left: -20px; !important
}
td[class^="td"]:nth-of-type(3) a {
color: #000; !important;
font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
font-size: 15px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 20px;
text-decoration: none;
}
td[class^="td"]:nth-of-type(4) {
font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
font-size: 15px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 20px;
left: 30px !important;
position: relative;
top: 239px !important;
margin-left: -20px; !important
}
td[class^="td"]:nth-of-type(5) {
color: #000;
font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
font-size: 15px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 20px;
height: 0px;
left: 3px;
margin-left: -3px;
padding-bottom: 3px;
padding-left: 10px;
padding-top: 34px;
position: absolute;
top: 211px;
width: 128px;
background: transparent;
z-index: -1;
}
td[class^="td"]:nth-of-type(5) a {
font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
font-size: 15px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 20px;
text-decoration: none;
}
td[class^="td"]:nth-of-type(6) {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.65);
font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
font-size: 15px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 20px;
height: 141px !important;
margin-left: -3px; !important
opacity: 0;
padding-left: 12px;
padding-top: 40px;
position: absolute;
text-align: left;
top: 1px !important;
width: 128px;
border-radius: 2px 2px 0 0;
background: orange;
}
td[class^="td"]:nth-of-type(6) a {
color: #000;
font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
font-size: 15px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 20px;
text-decoration: none;
}
td[class^="td"]:nth-of-type(6) a:hover {
color: #000 !important;
}
td[class^="td"]:nth-of-type(1) {
background: url("https://dl.dropboxusercontent.com/u/41845835/indent.png" ) no-repeat;
background-size: 100% 100%;
display: inline;
width:20px; !important
height: 28px; !important
font-size: 0;
left: 30px;
padding-left: 6px;
padding-right: 20px;
margin-left: 0px; !important
position: relative !important;
top: 50px; !important
z-index: 5;
}
td[class^="td"]:nth-of-type(7) {
display: none
}
td[class^="td"]:nth-of-type(8) {
display: none;
}
/*############################BANNER CELLS######################*/
/*
HEADER TITLES (Currently Watching, Completed, Dropped, etc...)
*/
.header_completed {
width: 1800px !important;
top: 90px !important;
height: 110px !important;
color: #2e51a1;
font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
font-size: 15px;
font-weight: normal;
font-variant: normal;
text-transform: capitalize;
text-shadow: 0px 0px 0.05em #2e51a1;
position: relative;
padding-left:12px;
padding-top: 40px;
padding-bottom: 0px !important;
background: url("https://dl.dropboxusercontent.com/u/41845835/%21%21%21Windows%2010%20homepage/images/completed.png" );
background-position: 8px -80px;
z-index: 0;
display: table;
}
.header_cw {
color: #2e51a1;
font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
font-size: 15px;
font-weight: normal;
font-variant: normal;
text-transform: capitalize;
text-shadow: 0px 0px 0.05em #2e51a1;
position: relative;
padding-left:24px;
padding-top: 40px;
padding-bottom: 8px;
display: block;
width: 1800px;
}
.header_onhold {
width: 1800px !important;
top: 90px !important;
height: 110px !important;
color: #2e51a1;
font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
font-size: 15px;
font-weight: normal;
font-variant: normal;
text-transform: capitalize;
text-shadow: 0px 0px 0.05em #2e51a1;
position: relative;
padding-left:12px;
padding-top: 40px;
padding-bottom: 0px !important;
background: url("https://dl.dropboxusercontent.com/u/41845835/%21%21%21Windows%2010%20homepage/images/onhold.png" );
background-position: 8px -80px;
z-index: 0;
display: table;
}
.header_dropped {
width: 1800px !important;
top: 90px !important;
height: 110px !important;
color: #2e51a1;
font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
font-size: 15px;
font-weight: normal;
font-variant: normal;
text-transform: capitalize;
text-shadow: 0px 0px 0.05em #2e51a1;
position: relative;
padding-left:12px;
padding-top: 40px;
padding-bottom: 0px !important;
background: url("https://dl.dropboxusercontent.com/u/41845835/%21%21%21Windows%2010%20homepage/images/dropped.png" );
background-position: 8px -80px;
z-index: 0;
display: table;
}
.header_ptw {
width: 1800px !important;
top: 90px !important;
height: 110px !important;
color: #2e51a1;
font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
font-size: 15px;
font-weight: normal;
font-variant: normal;
text-transform: capitalize;
text-shadow: 0px 0px 0.05em #2e51a1;
position: relative;
padding-left:12px;
padding-top: 40px;
padding-bottom: 0px !important;
background: url("https://dl.dropboxusercontent.com/u/41845835/%21%21%21Windows%2010%20homepage/images/ptw.png" );
background-position: 8px -80px;
z-index: 0;
display: table;
}
/*#####################EDIT################*/
#list_surround small {
background: transparent;
font-size: 10;
text-decoration: none;
visibility: hidden;
margin-left: -24px; !important
}
.td1 a.List_LightBox, .td2 a.List_LightBox {
color: #000;
text-shadow: 1px 1px 1px #FFFFFF;
font-size: 14px !important;
font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
font-weight: lighter;
font-variant: normal;
text-transform: capitalize;
left: 126px;
position: absolute;
text-decoration: none;
top: 0px;
visibility: visible !important;
width: 24px;
z-index: 5;
margin-left: -24px; !important
}
#list_surround small a {
font-size: 40px;
background: url("https://dl.dropboxusercontent.com/u/41845835/indent3.png" ) no-repeat;
background-size: 100% 100%;
padding-right: 28px;
padding-left: 4px;
width: 28px !important;
background-position: -28px 0px;
}
/*### RELATED TO SCORE ###*/
.td1[align="center"][width="45"], .td2[align="center"][width="45"] {
position: absolute;
}
/*### TYPE ###*/
.td1[align="center"][width="50"], .td2[align="center"][width="50"] {
color: #6e6e6e;
position: absolute;
text-align: left;
top: 200px !important;
font-size: 16px;
margin-left: -26px; !important
z-index: 5;
background: transparent;
}
.td1[align="center"][width="50"]:before, .td2[align="center"][width="50"]:before {
color: #6e6e6e;
content: " Type: ";
position: relative;
text-shadow: 0 0 0 !important;
}
/*### PROGRESS ###*/
.td1[width="70"], .td2[width="70"] {
text-align: left;
margin-left: -6px; !important
position: absolute;
margin-top: -24px; !important
}
.td1[width="70"] a, .td2[width="70"] a {
color: #6e6e6e !important;
font-size: 16px;
margin-top: -12px; !important
}
.td1[width="70"]:before, .td2[width="70"]:before {
color: #6e6e6e;
font-size: 16px;
content: " Progress: ";
margin-left: -6px; !important
margin-top: -12px; !important
text-shadow: 0 0 0 !important;
}
/*### AIRING ###*/
.animetitle + small {
color: #000;
font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
font-size: 13px;
font-weight: lighter;
font-variant: normal;
text-transform: capitalize;
left: 90px !important;
letter-spacing: 0.3px;
opacity: 1;
padding: 0 3px 2px 22px;
position: absolute;
text-align: center;
text-shadow: 1px 1px 1px #FFFFFF;
top: 138px !important;
visibility: visible !important;
z-index: 0;
border-bottom-style: none;
}
/*### COPYRIGHT ###*/
#copyright:before {
content: 'Design by Lirina. Topbar by Luxiamimi. ';
display: block;
font-size: 10px;
color: lightyellow !important;
text-align: right;
font-style: normal;
}
#copyright {
display: none;
}
/* Text displaying global totals */
#grand_totals{
color: #000;
font-size: 15px;
font-weight: lighter;
top: 75px;
right: 48px;
position: fixed;
background-image: url("https://dl.dropboxusercontent.com/u/41845835/graph%20icon.png" );
background-repeat: no-repeat;
background-position: -20px 24px;
z-index: 50;
}
#copyright a {
color: #FFFFFF;
text-decoration: none;
}
#copyright:before {
color: #FFFFFF;
}
input.inputtext, textarea.textarea, textarea.inputtext {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.6) !important;
border-color: #000000;
border-radius: 3px !important;
border-style: solid;
border-width: 1px;
height: 125px;
margin-left: 2px !important;
padding: 3px 5px 5px !important;
transition: box-shadow 0.2s linear 0s !important;
width: 150px !important;
}
#inlineContent {
background: url("https://dl.dropboxusercontent.com/u/41845835/banner.png" );
top: 00px;
background-position: fixed;
display: block !important;
height: 116px;
left: 320px;
position: fixed;
width: 100%;
z-index: 1 !important;
background-repeat: no-repeat;
margin-bottom: 40px;
}
In anime list setting tick off (under show columns): numbers, score, type, episodes or it will probably not work.
Used this topic to learn about the DVD-style layouts: http://myanimelist.net/forum/?topicid=1071911
I also used plenty of tutorials found in this club, mostly to help me locate elements such as the sorting links etc.
Both layouts are made with a the resolution of 1920x1080 in mind. You might experience some minor bugs if you're using higher resolutions.