Black Rock Shooter
@import "http://dl.dropbox.com/u/78340470/Past%20Stuff/bottommenuimport.css";
/*thin top bar*/
@import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css";
/*Fonts*/
@import url("http://fonts.googleapis.com/css?family=Tangerine");
@import url("http://fonts.googleapis.com/css?family=Lemon");
@import url("http://fonts.googleapis.com/css?family=Nova+Slim");
@import url(http://fonts.googleapis.com/css?family=Handlee );
/*
Got a question or want to learn more? Try this link:
http://myanimelist.net/forum/?topicid=419405&show=0#post1
*/
/*
Theme for Suzune-chan by Al_eXs
*/
/*
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!
*/
body {
background-image: url(http://i1232.photobucket.com/albums/ff367/coolspot21/Konachancom-133052black_hairblack_rock_shooterguninsane_black_rock_shooterkuroi_matolong_hairshortsswordweapon_zps062bdd70.jpg );
background-attachment: fixed;
background-size: cover;
}
/*
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: rgba(14, 18, 29, 0.450);
color: #FFFFFF;
font-family: 'Handlee', cursive;
font-size:20px;
border-radius: 20px 20px 0px 0px;
font-weight: 700;
text-align: center;
text-shadow: 3px -1px 5px #0C0C0C;
}
/*
SUB-HEADERS BACKGROUND COLOR COLOR
Below each main header is the sub-header which says Score, Episodes, Tags, etc.
*/
.table_header {
background-color: rgba(14, 18, 29, 0.450);
}
/*
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: "Nova Slim";
font-size:14px;
text-shadow: 4px -1px 5px #0C0C0C;
}
.animetitle + small {
color:#B6B6C5;
font-family: "Nova Slim";
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:white;
font-size:13px;
font-family: "Nova Slim";
text-shadow: 4px -1px 5px #0C0C0C;
}
/*
LIST WIDTH
Use this to increase the width of your list!
*/
#list_surround {
margin: -25px auto 0;
width:950px;
}
/*
LIST POSITION
Change "left" to "right" to switch the list side, or vice versa.
*/
#list_surround {
position: relative;
}
/*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, use the link at the top of this CSS or ask in my club!
*/
body {
font-weight: light;
background-repeat: no-repeat;
background-color: #FFFFFF;
}
a {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover, a:visited:hover {
color:#A6A6C7;
text-decoration:none;
}
.category_totals,
.td1,
.td2,
#grand_totals,
#copyright {
background-color: rgba(14, 18, 29, 0.500);
border-width:0;
transition: all .8s ease 0s;/* CSS3 reference */
-o-transition: all .8s ease 0s; /* for Opera compatibility */
-ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */
-moz-transition: all .8s ease 0s; /* for Firefox compatibility */
-webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */
}
.category_totals a,
.td1 a,
.td2 a,
#grand_totals a,
#copyright a {
transition: all .8s ease 0s;/* CSS3 reference */
-o-transition: all .8s ease 0s; /* for Opera compatibility */
-ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */
-moz-transition: all .8s ease 0s; /* for Firefox compatibility */
-webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */
}
.category_totals:HOVER,
.td1:HOVER,
.td2:HOVER,
#grand_totals:HOVER,
#copyright:HOVER {background-color:rgba(14, 18, 29, 0.700);
border-width:0;
}
#copyright:after {
content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info. Theme by Al_eXs.";
}
#copyright {
margin-bottom: 30px !important;
border-radius: 20px;
padding: 10px;
}
.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 {
padding:2px;
}
.table_header {
border-width:0;
font-weight:bold;
padding:2px;
}
.category_totals {
border-radius: 0px 0px 20px 20px;
height: 40px;
text-align: center;
}
#grand_totals {
text-align: center;
margin:0 auto;
border-radius: 20px;
padding: 10px 20px;
width: 600px;
}
Umineko no Naku Koro Ni - Berncastel and Lambdadelta
/*thin top bar*/
@import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixedwithCategory.css";
/*Fonts*/
@import url("http://fonts.googleapis.com/css?family=Tangerine");
@import url("http://fonts.googleapis.com/css?family=Lemon");
@import url("http://fonts.googleapis.com/css?family=Nova+Slim");
@import url(http://fonts.googleapis.com/css?family=Handlee );
@import url(http://fonts.googleapis.com/css?family=Petit+Formal+ );
/*
Got a question or want to learn more? Try this link:
http://myanimelist.net/forum/?topicid=419405&show=0#post1
*/
/*
Theme for Suzune-chan by Al_eXs
*/
/*
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!
*/
body {
background-image: url(http://i52.fastpic.ru/big/2012/1225/ed/3dbc548953e65ca6d0056572eb5a68ed.jpg );
background-attachment: fixed;
background-size: cover;
}
/*
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: rgba(40, 6, 56, 0.440);
color: #FFFFFF;
font-family: 'Handlee', cursive;
font-size:20px;
border-radius: 20px 20px 0px 0px;
font-weight: 700;
text-align: center;
text-shadow: 3px -1px 5px #0C0C0C;
}
/*
SUB-HEADERS BACKGROUND COLOR COLOR
Below each main header is the sub-header which says Score, Episodes, Tags, etc.
*/
.table_header {
background-color: rgba(40, 6, 56, 0.450);
}
/*
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: 'Petit Formal ', cursive;
font-size:14px;
text-shadow: 2px 1px 2px #000000;
}
.animetitle + small {
color:#ACBAE3;
font-family: "Nova Slim";
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:white;
font-size:13px;
font-family: 'Petit Formal ', cursive;
text-shadow: 2px 1px 2px #000000;
}
/*
LIST WIDTH
Use this to increase the width of your list!
*/
#list_surround {
margin: -25px auto 0;
width:950px;
}
/*
LIST POSITION
Change "left" to "right" to switch the list side, or vice versa.
*/
#list_surround {
position: relative;
}
/*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, use the link at the top of this CSS or ask in my club!
*/
body {
font-weight: light;
background-repeat: no-repeat;
background-color: #FFFFFF;
}
a {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover, a:visited:hover {
color:#95A7DB;
text-decoration:none;
}
.category_totals,
.td1,
.td2,
#grand_totals,
#copyright {
background-color: rgba(40, 6, 56, 0.450);
border-width:0;
transition: all .8s ease 0s;/* CSS3 reference */
-o-transition: all .8s ease 0s; /* for Opera compatibility */
-ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */
-moz-transition: all .8s ease 0s; /* for Firefox compatibility */
-webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */
}
.category_totals a,
.td1 a,
.td2 a,
#grand_totals a,
#copyright a {
transition: all .8s ease 0s;/* CSS3 reference */
-o-transition: all .8s ease 0s; /* for Opera compatibility */
-ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */
-moz-transition: all .8s ease 0s; /* for Firefox compatibility */
-webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */
}
.category_totals:HOVER,
.td1:HOVER,
.td2:HOVER,
#grand_totals:HOVER,
#copyright:HOVER {background-color:rgba(40, 6, 56, 0.600);
border-width:0;
}
#copyright:after {
content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info. Theme by Al_eXs.";
}
#copyright {
margin-bottom: 30px !important;
border-radius: 20px;
padding: 10px;
}
.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 {
padding:2px;
}
.table_header {
border-width:0;
font-weight:bold;
padding:2px;
}
.category_totals {
border-radius: 0px 0px 20px 20px;
height: 40px;
text-align: center;
}
#grand_totals {
text-align: center;
margin:0 auto;
border-radius: 20px;
padding: 10px 20px;
width: 600px;
}
Chuunibyou demo Koi ga Shitai - Rikka Takanashi
/*thin top bar*/
@import "https://dl.dropbox.com/u/57348187/MAL/IconStyleCSSFixedwithCategoryTrans.css";
/*Fonts*/
@import url("http://fonts.googleapis.com/css?family=Nova+Slim");
@import url(http://fonts.googleapis.com/css?family=Carrois+Gothic+SC );
/*
Got a question or want to learn more? Try this link:
http://myanimelist.net/forum/?topicid=419405&show=0#post1
*/
/*
Theme for Suzune-chan by Al_eXs
*/
/*
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!
*/
body {
background-image: url(https://dl.dropbox.com/u/57348187/MAL/Images/Konachan.com%20-%20147147%20sample.jpg );
background-attachment: fixed;
background-size: cover;
}
/*
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: rgba(15, 15, 25, 0.575);
color: #FFFFFF;
font-family: 'Carrois Gothic SC', sans-serif;
font-size:20px;
border-radius: 20px 20px 0px 0px;
font-weight: 700;
text-align: center;
text-shadow: 1px 1px 1px #000000;
}
/*
SUB-HEADERS BACKGROUND COLOR COLOR
Below each main header is the sub-header which says Score, Episodes, Tags, etc.
*/
.table_header {
background-color: rgba(15, 15, 25, 0.575);
}
/*
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: 'Carrois Gothic SC', sans-serif;
font-size:14px;
text-shadow: 2px 1px 1px #000000;
}
.animetitle + small {
color:#c2cae2;
font-family: "Carrois Gothic SC";
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:white;
font-size:13px;
font-family: 'Carrois Gothic SC', sans-serif;
text-shadow: 2px 1px 2px #000000;
}
/*
LIST WIDTH
Use this to increase the width of your list!
*/
#list_surround {
width:950px
}
/*
LIST POSITION
Change "left" to "right" to switch the list side, or vice versa.
*/
#list_surround {
left: 300px;
position: relative;
}
/*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, use the link at the top of this CSS or ask in my club!
*/
body {
font-weight: light;
background-repeat: no-repeat;
background-color: #FFFFFF;
}
a {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover, a:visited:hover {
color:#b1bbda;
text-decoration:none;
}
.category_totals,
.td1,
.td2,
#grand_totals,
#copyright {
background-color: rgba(15, 15, 25, 0.550);
border-width:0;
transition: all .8s ease 0s;/* CSS3 reference */
-o-transition: all .8s ease 0s; /* for Opera compatibility */
-ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */
-moz-transition: all .8s ease 0s; /* for Firefox compatibility */
-webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */
}
.category_totals a,
.td1 a,
.td2 a,
#grand_totals a,
#copyright a {
transition: all .8s ease 0s;/* CSS3 reference */
-o-transition: all .8s ease 0s; /* for Opera compatibility */
-ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */
-moz-transition: all .8s ease 0s; /* for Firefox compatibility */
-webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */
}
.category_totals:HOVER,
.td1:HOVER,
.td2:HOVER,
#grand_totals:HOVER,
#copyright:HOVER {background-color:rgba(15, 15, 25, 0.725);
border-width:0;
}
#copyright:after {
content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info. Theme by Al_eXs, edited by Teffycom.";
}
#copyright {
margin-bottom: 30px !important;
border-radius: 20px;
padding: 10px;
}
.thickbox {
color:cyan;
font-family:fantasy;
font-size:12px;
}
.header_title {
padding:2px;
}
.table_header {
border-width:0;
font-weight:bold;
padding:2px;
}
.category_totals {
border-radius: 0px 0px 20px 20px;
height: 40px;
text-align: center;
}
#grand_totals {
text-align: center;
margin:0 auto;
border-radius: 20px;
padding: 10px 20px;
width: 600px;
}
Kami nomi zo Shiru Sekai
@import "http://dl.dropbox.com/u/78340470/Past%20Stuff/bottommenuimport.css";
/*thin top bar*/
@import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css";
/*Fonts*/
@import url("http://fonts.googleapis.com/css?family=Tangerine");
@import url("http://fonts.googleapis.com/css?family=Lemon");
@import url("http://fonts.googleapis.com/css?family=Nova+Slim");
@import url(http://fonts.googleapis.com/css?family=Handlee );
@import url(http://fonts.googleapis.com/css?family=Petit+Formal+ );
/*
Got a question or want to learn more? Try this link:
http://myanimelist.net/forum/?topicid=419405&show=0#post1
*/
/*
Theme for Suzune-chan by Al_eXs
*/
/*
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!
*/
body {
background-image: url(http://i1232.photobucket.com/albums/ff367/coolspot21/Konachancom-115679ayukawa_tenribraidsred_eyesthe_world_god_only_knowswakaki_tamik1080i.jpg );
background-attachment: fixed;
background-size: cover;
}
/*
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: rgba(25, 56, 76, 0.440);
color: #FFFFFF;
font-family: 'Handlee', cursive;
font-size:20px;
border-radius: 20px 20px 0px 0px;
font-weight: 700;
text-align: center;
text-shadow: 3px -1px 5px #0C0C0C;
}
/*
SUB-HEADERS BACKGROUND COLOR COLOR
Below each main header is the sub-header which says Score, Episodes, Tags, etc.
*/
.table_header {
background-color: rgba(25, 56, 76, 0.450);
}
/*
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: 'Petit Formal ', cursive;
font-size:14px;
text-shadow: 2px 1px 2px #000000;
}
.animetitle + small {
color:#B5D3D3;
font-family: "Nova Slim";
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:white;
font-size:13px;
font-family: 'Petit Formal ', cursive;
text-shadow: 2px 1px 2px #000000;
}
/*
LIST WIDTH
Use this to increase the width of your list!
*/
#list_surround {
margin: -25px auto 0;
width:950px;
}
/*
LIST POSITION
Change "left" to "right" to switch the list side, or vice versa.
*/
#list_surround {
position: relative;
}
/*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, use the link at the top of this CSS or ask in my club!
*/
body {
font-weight: light;
background-repeat: no-repeat;
background-color: #FFFFFF;
}
a {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover, a:visited:hover {
color:#98C1C1;
text-decoration:none;
}
.category_totals,
.td1,
.td2,
#grand_totals,
#copyright {
background-color: rgba(25, 56, 76, 0.450);
border-width:0;
transition: all .8s ease 0s;/* CSS3 reference */
-o-transition: all .8s ease 0s; /* for Opera compatibility */
-ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */
-moz-transition: all .8s ease 0s; /* for Firefox compatibility */
-webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */
}
.category_totals a,
.td1 a,
.td2 a,
#grand_totals a,
#copyright a {
transition: all .8s ease 0s;/* CSS3 reference */
-o-transition: all .8s ease 0s; /* for Opera compatibility */
-ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */
-moz-transition: all .8s ease 0s; /* for Firefox compatibility */
-webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */
}
.category_totals:HOVER,
.td1:HOVER,
.td2:HOVER,
#grand_totals:HOVER,
#copyright:HOVER {background-color:rgba(25, 56, 76, 0.600);
border-width:0;
}
#copyright:after {
content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info. Theme by Al_eXs.";
}
#copyright {
margin-bottom: 30px !important;
border-radius: 20px;
padding: 10px;
}
.status_selected {
background-color:black;
padding:2px;
color:white;
visibility: hidden;
text-decoration: blink;
}
.status_not_selected {
background-color:black;
padding:2px;
visibility: hidden;
color:white;
}
.status_selected a{
visibility: hidden;
color:blue;
}
.status_not_selected a{
visibility: hidden;
color:white;
}
.thickbox {
color:cyan;
font-family:fantasy;
font-size:12px;
}
.header_title {
padding:2px;
}
.table_header {
border-width:0;
font-weight:bold;
padding:2px;
}
.category_totals {
border-radius: 0px 0px 20px 20px;
height: 40px;
text-align: center;
}
#grand_totals {
text-align: center;
margin:0 auto;
border-radius: 20px;
padding: 10px 20px;
width: 600px;
}
Ore no Imouto... - Kuroneko
/*thin top bar*/
@import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixedwithCategory.css";
/*Fonts*/
@import url("http://fonts.googleapis.com/css?family=Tangerine");
@import url("http://fonts.googleapis.com/css?family=Lemon");
@import url("http://fonts.googleapis.com/css?family=Nova+Slim");
@import url(http://fonts.googleapis.com/css?family=Handlee );
@import url(http://fonts.googleapis.com/css?family=Petit+Formal+ );
/*
Got a question or want to learn more? Try this link:
http://myanimelist.net/forum/?topicid=419405&show=0#post1
*/
/*
Theme for Suzune-chan by Al_eXs
*/
/*
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!
*/
body {
background-image: url(http://i51.fastpic.ru/big/2012/1225/08/bca69ec0bc35e93c48968edc04d70808.jpg );
background-attachment: fixed;
background-size: cover;
}
/*
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: rgba(40, 12, 61, 0.440);
color: #FFFFFF;
font-family: 'Handlee', cursive;
font-size:20px;
border-radius: 20px 20px 0px 0px;
font-weight: 700;
text-align: center;
text-shadow: 3px -1px 5px #0C0C0C;
}
/*
SUB-HEADERS BACKGROUND COLOR COLOR
Below each main header is the sub-header which says Score, Episodes, Tags, etc.
*/
.table_header {
background-color: rgba(40, 12, 61, 0.450);
}
/*
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: 'Petit Formal ', cursive;
font-size:14px;
text-shadow: 2px 1px 2px #000000;
}
.animetitle + small {
color:#ACBAE3;
font-family: "Nova Slim";
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:white;
font-size:13px;
font-family: 'Petit Formal ', cursive;
text-shadow: 2px 1px 2px #000000;
}
/*
LIST WIDTH
Use this to increase the width of your list!
*/
#list_surround {
width:950px;
}
/*
LIST POSITION
Change "left" to "right" to switch the list side, or vice versa.
*/
#list_surround {
position: relative;
left: 25px;
}
/*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, use the link at the top of this CSS or ask in my club!
*/
body {
font-weight: light;
background-repeat: no-repeat;
background-color: #FFFFFF;
}
a {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover, a:visited:hover {
color:#95A7DB;
text-decoration:none;
}
.category_totals,
.td1,
.td2,
#grand_totals,
#copyright {
background-color: rgba(40, 12, 61, 0.450);
border-width:0;
transition: all .8s ease 0s;/* CSS3 reference */
-o-transition: all .8s ease 0s; /* for Opera compatibility */
-ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */
-moz-transition: all .8s ease 0s; /* for Firefox compatibility */
-webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */
}
.category_totals a,
.td1 a,
.td2 a,
#grand_totals a,
#copyright a {
transition: all .8s ease 0s;/* CSS3 reference */
-o-transition: all .8s ease 0s; /* for Opera compatibility */
-ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */
-moz-transition: all .8s ease 0s; /* for Firefox compatibility */
-webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */
}
.category_totals:HOVER,
.td1:HOVER,
.td2:HOVER,
#grand_totals:HOVER,
#copyright:HOVER {background-color:rgba(40, 12, 61, 0.600);
border-width:0;
}
#copyright:after {
content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info. Theme by Al_eXs.";
}
#copyright {
margin-bottom: 30px !important;
border-radius: 20px;
padding: 10px;
}
.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 {
padding:2px;
}
.table_header {
border-width:0;
font-weight:bold;
padding:2px;
}
.category_totals {
border-radius: 0px 0px 20px 20px;
height: 40px;
text-align: center;
}
#grand_totals {
text-align: center;
margin:0 auto;
border-radius: 20px;
padding: 10px 20px;
width: 600px;
}
Ore no Imouto... - Kuroneko Simple
@import url(http://fonts.googleapis.com/css?family=Varela+Round );
@import url(http://fonts.googleapis.com/css?family=Margarine );
@import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixedwithCategory.css";
/*
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://i54.fastpic.ru/big/2012/1223/4f/0f186e1c890888f76f14330596cc504f.jpg );
background-attachment: fixed;
background-size: cover;
}
/*
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 {
color: white;
font-family: 'Margarine', cursive;
font-size: 26px;
text-shadow: 3px 3px 3px #000;
text-align: left;
background-color: transparent;
background-image:
url(https://dl.dropbox.com/u/57348187/MAL/PROZ.png );
}
/*
SUB-HEADERS BACKGROUND COLOR COLOR
Below each main header is the sub-header which says Score, Episodes, Tags, etc.
*/
.table_header {
background-image:
url(https://dl.dropbox.com/u/57348187/MAL/PROZ.png );
}
/*
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: 'Varela Round', sans-serif;
text-shadow: 0px 2px 1px #000;
font-size:13px;
}
/*
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:white;
font-family: 'Varela Round', sans-serif;
text-shadow: 0px 2px 1px #000;
font-size:12px;
}
/*
LIST WIDTH
Use this to increase the width of your list!
*/
#list_surround {
width:900px;
}
/*
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;
margin: auto !important;
right: 0px !important;
padding:-200px;
left: 0px !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:#D3D3D3;
text-decoration:underline;
}
.category_totals,
.td1,
.td2,
#grand_totals,
#copyright {
background-image:url(https://dl.dropbox.com/u/57348187/MAL/PROZ.png );
border-width:0;
padding:2px;
}
.category_totals:HOVER,
.td1:HOVER,
.td2:HOVER,
#grand_totals:HOVER,
#copyright:HOVER {background-image:url(https://dl.dropbox.com/u/57348187/MAL/PROZ2.png );
border-width:0;
padding:2px;
}
#copyright:after {
content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info.";
}
*.status_selected {
display: none;
background-color:black;
padding: 2px;
color:white;
text-decoration: blink;
}
*.status_not_selected {
display: none;
background-color:black;
padding: 2px;
color:white;
}
*.status_selected a{
display: none;
color:blue;
}
*.status_not_selected a{
display: none;
color:white;
}
.thickbox {
color:cyan;
font-family: 'Happy Monkey', cursive;
text-shadow: 2px 2px 2px #000;
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;
}
Ore no Imouto... - Kuroneko Minimal
@import url(http://fonts.googleapis.com/css?family=Monda );
@import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css";
#{
background: url(none) !important;
}
#mal_cs_pic, #mal_cs_listinfo, #mal_cs_links {
border-right: 0 none !important;
}
/*
MAIN BACKGROUND
This is the main background, at the very back of the layout.
To change it change the image link in the parenthesis after "background: url"
To change the position change right/top with other positions, like bottom or left.
To make the background scroll instead of staying in place change the background-attachment from "fixed" to "scroll".
If you need more help, check here: http://myanimelist.net/forum/?topicid=419405&show=0#post1
*/
body {
background-image: url(http://i51.fastpic.ru/big/2012/1223/19/af65c1569d94c7151c3e504acb3c8019.png );
background-size: cover;
background-attachment: fixed;}
/*LIST SETTINGS
You can change the list width here.
To change the position of the list see my tutorial here:
http://myanimelist.net/forum/?topicid=393437&show=0#post1
*/
#list_surround {
width: 850px;
position: absolute !important;
right: 10px !important;}
/*ALTERNATING ROWS, LIST COLORS
You can alter the list colors here, see where it says blue, purple, etc.
The colors here correspond to what colors you see on the list.
Change them here. For example changing black to green here and saving will change the
black colors on the list to green.
Opacity is the degree of how transparent (see-through) the list is. .01 is almost completely clear. .99 is barely see-through.
*/
.status_selected, .header_title, .td1, #grand_totals{
background-color: black;
background-image: url("none") !important;
color: black;
}
/*ALTERNATING ROWS, LIST COLORS ON CURSOR HOVER
This is the same as above, except its the colors you see on the list when you point your cursor on them.
*/
.status_selected:hover, .header_title:hover, .td1:hover, #grand_totals:hover {
background-image: url("none") !important;
}
.status_not_selected:hover, .table_header:hover, .category_totals:hover, .td2:hover, #copyright:hover {
background-image: url("none") !important;
}
/*PADDING
The space around the words in your list.
*/
.status_selected:hover, .header_title:hover, .td1:hover, #grand_totals:hover,
.status_not_selected:hover, .table_header:hover, .category_totals:hover, .td2:hover, #copyright:hover, .status_selected, .header_title, .td1, #grand_totals,
.status_not_selected, .table_header, .category_totals, .td2, #copyright{
padding: 2px;
}
/*ANIME/MANGA TITLE FONT SETTINGS
*/
.animetitle, .animetitle:visited {
color: white;
font-family: 'Monda', sans-serif;
font-size: 14px;
}
/*OTHER FONT SETTINGS
*/
.td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright {
color: white;
font-family: 'Monda', sans-serif;
font-size: 13px;
}
/*BORDERS
*/
.status_selected, #grand_totals,
.status_not_selected, .header_title, #copyright {
}
.td1, .td2, .table_header {
}
.category_totals{
}
/*OTHER CODES
*/
body {
background-color: black;
background-repeat: no-repeat;
}
a {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover, a:visited:hover {
color: white;
text-decoration: underline;
}
.category_totals, .td1, .td2, #grand_totals, #copyright {
}
#copyright:after {
content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs or info.";
}
.thickbox {
color: cyan;
font-family: fantasy;
font-size: 12px;
}
.header_title {
height: 52px;
}
.table_header {
font-weight: bold;
}
.category_totals {
height: 30px;
}
#copyright, #grand_totals {
margin: 0 auto;
text-align: center;
}
#mal\_control\_strip{background-size: 100% 100% !important;
background-image: url(http://s2.hostingkartinok.com/uploads/images/2012/06/242259dd6373d5eaa625c6b1c18bfed2.png ) !important;
}
Ore no Imouto... - Kuroneko [2]
/*thin top bar*/
@import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixedwithCategory.css";
/*Fonts*/
@import url("http://fonts.googleapis.com/css?family=Tangerine");
@import url("http://fonts.googleapis.com/css?family=Lemon");
@import url("http://fonts.googleapis.com/css?family=Nova+Slim");
@import url(http://fonts.googleapis.com/css?family=Handlee );
@import url(http://fonts.googleapis.com/css?family=Petit+Formal+ );
/*
Got a question or want to learn more? Try this link:
http://myanimelist.net/forum/?topicid=419405&show=0#post1
*/
/*
Theme for Suzune-chan by Al_eXs
*/
/*
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!
*/
body {
background-image: url(http://i54.fastpic.ru/big/2012/1225/a6/27d3a0b657c61877fd5614de39b52ba6.jpg );
background-attachment: fixed;
background-size: cover;
}
/*
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: rgba(9, 0, 27, 0.440);
color: #FFFFFF;
font-family: 'Handlee', cursive;
font-size:20px;
border-radius: 20px 20px 0px 0px;
font-weight: 700;
text-align: center;
text-shadow: 3px -1px 5px #0C0C0C;
}
/*
SUB-HEADERS BACKGROUND COLOR COLOR
Below each main header is the sub-header which says Score, Episodes, Tags, etc.
*/
.table_header {
background-color: rgba(9, 0, 27, 0.450);
}
/*
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: 'Petit Formal ', cursive;
font-size:14px;
text-shadow: 2px 1px 2px #000000;
}
.animetitle + small {
color:#ACBAE3;
font-family: "Nova Slim";
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:white;
font-size:13px;
font-family: 'Petit Formal ', cursive;
text-shadow: 2px 1px 2px #000000;
}
/*
LIST WIDTH
Use this to increase the width of your list!
*/
#list_surround {
margin: -25px auto 0;
width:950px;
}
/*
LIST POSITION
Change "left" to "right" to switch the list side, or vice versa.
*/
#list_surround {
position: relative;
}
/*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, use the link at the top of this CSS or ask in my club!
*/
body {
font-weight: light;
background-repeat: no-repeat;
background-color: #FFFFFF;
}
a {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover, a:visited:hover {
color:#95A7DB;
text-decoration:none;
}
.category_totals,
.td1,
.td2,
#grand_totals,
#copyright {
background-color: rgba(9, 0, 27, 0.450);
border-width:0;
transition: all .8s ease 0s;/* CSS3 reference */
-o-transition: all .8s ease 0s; /* for Opera compatibility */
-ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */
-moz-transition: all .8s ease 0s; /* for Firefox compatibility */
-webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */
}
.category_totals a,
.td1 a,
.td2 a,
#grand_totals a,
#copyright a {
transition: all .8s ease 0s;/* CSS3 reference */
-o-transition: all .8s ease 0s; /* for Opera compatibility */
-ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */
-moz-transition: all .8s ease 0s; /* for Firefox compatibility */
-webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */
}
.category_totals:HOVER,
.td1:HOVER,
.td2:HOVER,
#grand_totals:HOVER,
#copyright:HOVER {background-color:rgba(9, 0, 27, 0.600);
border-width:0;
}
#copyright:after {
content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info. Theme by Al_eXs.";
}
#copyright {
margin-bottom: 30px !important;
border-radius: 20px;
padding: 10px;
}
.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 {
padding:2px;
}
.table_header {
border-width:0;
font-weight:bold;
padding:2px;
}
.category_totals {
border-radius: 0px 0px 20px 20px;
height: 40px;
text-align: center;
}
#grand_totals {
text-align: center;
margin:0 auto;
border-radius: 20px;
padding: 10px 20px;
width: 600px;
}
Ore no Imouto... - Kuroneko [3]
/*thin top bar*/
@import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixedwithCategory.css";
/*Fonts*/
@import url("http://fonts.googleapis.com/css?family=Tangerine");
@import url("http://fonts.googleapis.com/css?family=Lemon");
@import url("http://fonts.googleapis.com/css?family=Nova+Slim");
@import url(http://fonts.googleapis.com/css?family=Handlee );
@import url(http://fonts.googleapis.com/css?family=Petit+Formal+ );
/*
Got a question or want to learn more? Try this link:
http://myanimelist.net/forum/?topicid=419405&show=0#post1
*/
/*
Theme for Suzune-chan by Al_eXs
*/
/*
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!
*/
body {
background-image: url(http://i53.fastpic.ru/big/2012/1225/e3/0083f7d8d0b1aa40f415e9f4cde094e3.jpg );
background-attachment: fixed;
background-size: cover;
}
/*
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: rgba(34, 32, 56, 0.440);
color: #FFFFFF;
font-family: 'Handlee', cursive;
font-size:20px;
border-radius: 20px 20px 0px 0px;
font-weight: 700;
text-align: center;
text-shadow: 3px -1px 5px #0C0C0C;
}
/*
SUB-HEADERS BACKGROUND COLOR COLOR
Below each main header is the sub-header which says Score, Episodes, Tags, etc.
*/
.table_header {
background-color: rgba(34, 32, 56, 0.450);
}
/*
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: 'Petit Formal ', cursive;
font-size:14px;
text-shadow: 2px 1px 2px #000000;
}
.animetitle + small {
color:#ACBAE3;
font-family: "Nova Slim";
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:white;
font-size:13px;
font-family: 'Petit Formal ', cursive;
text-shadow: 2px 1px 2px #000000;
}
/*
LIST WIDTH
Use this to increase the width of your list!
*/
#list_surround {
margin: -25px auto 0;
width:950px;
}
/*
LIST POSITION
Change "left" to "right" to switch the list side, or vice versa.
*/
#list_surround {
position: relative;
}
/*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, use the link at the top of this CSS or ask in my club!
*/
body {
font-weight: light;
background-repeat: no-repeat;
background-color: #FFFFFF;
}
a {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover, a:visited:hover {
color:#95A7DB;
text-decoration:none;
}
.category_totals,
.td1,
.td2,
#grand_totals,
#copyright {
background-color: rgba(34, 32, 56, 0.450);
border-width:0;
transition: all .8s ease 0s;/* CSS3 reference */
-o-transition: all .8s ease 0s; /* for Opera compatibility */
-ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */
-moz-transition: all .8s ease 0s; /* for Firefox compatibility */
-webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */
}
.category_totals a,
.td1 a,
.td2 a,
#grand_totals a,
#copyright a {
transition: all .8s ease 0s;/* CSS3 reference */
-o-transition: all .8s ease 0s; /* for Opera compatibility */
-ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */
-moz-transition: all .8s ease 0s; /* for Firefox compatibility */
-webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */
}
.category_totals:HOVER,
.td1:HOVER,
.td2:HOVER,
#grand_totals:HOVER,
#copyright:HOVER {background-color:rgba(34, 32, 56, 0.600);
border-width:0;
}
#copyright:after {
content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info. Theme by Al_eXs.";
}
#copyright {
margin-bottom: 30px !important;
border-radius: 20px;
padding: 10px;
}
.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 {
padding:2px;
}
.table_header {
border-width:0;
font-weight:bold;
padding:2px;
}
.category_totals {
border-radius: 0px 0px 20px 20px;
height: 40px;
text-align: center;
}
#grand_totals {
text-align: center;
margin:0 auto;
border-radius: 20px;
padding: 10px 20px;
width: 600px;
}
Higurashi no Naku Koro Ni - Rika nad Hanyuu
Offline
Jun 2011
31
Chuunibyou Demo Koi ga Shitai - Rikka Takanashi [2]
/*thin top bar*/
@import "https://dl.dropbox.com/u/57348187/MAL/IconStyleCSSFixedwithCategoryTrans.css";
/*Fonts*/
@import url("http://fonts.googleapis.com/css?family=Nova+Slim");
@import url(http://fonts.googleapis.com/css?family=Carrois+Gothic+SC );
/*
Got a question or want to learn more? Try this link:
http://myanimelist.net/forum/?topicid=419405&show=0#post1
*/
/*
Theme for Suzune-chan by Al_eXs
*/
/*
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!
*/
body {
background-image: url(http://i48.fastpic.ru/big/2012/1116/cf/49e290d0ea5294f7f35befc3655d8fcf.jpg );
background-attachment: fixed;
background-size: cover;
}
/*
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: rgba(26, 16, 51, 0.525);
color: #FFFFFF;
font-family: 'Carrois Gothic SC', sans-serif;
font-size:20px;
border-radius: 20px 20px 0px 0px;
font-weight: 700;
text-align: center;
text-shadow: 1px 1px 1px #000000;
}
/*
SUB-HEADERS BACKGROUND COLOR COLOR
Below each main header is the sub-header which says Score, Episodes, Tags, etc.
*/
.table_header {
background-color: rgba(26, 16, 51, 0.525);
}
/*
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: 'Carrois Gothic SC', sans-serif;
font-size:14px;
text-shadow: 2px 1px 1px #000000;
}
.animetitle + small {
color:#c2cae2;
font-family: "Carrois Gothic SC";
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:white;
font-size:13px;
font-family: 'Carrois Gothic SC', sans-serif;
text-shadow: 2px 1px 2px #000000;
}
/*
LIST WIDTH
Use this to increase the width of your list!
*/
#list_surround {
width:950px
}
/*
LIST POSITION
Change "left" to "right" to switch the list side, or vice versa.
*/
#list_surround {
left: 300px;
position: relative;
}
/*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, use the link at the top of this CSS or ask in my club!
*/
body {
font-weight: light;
background-repeat: no-repeat;
background-color: #FFFFFF;
}
a {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover, a:visited:hover {
color:#b1bbda;
text-decoration:none;
}
.category_totals,
.td1,
.td2,
#grand_totals,
#copyright {
background-color: rgba(26, 16, 51, 0.550);
border-width:0;
transition: all .8s ease 0s;/* CSS3 reference */
-o-transition: all .8s ease 0s; /* for Opera compatibility */
-ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */
-moz-transition: all .8s ease 0s; /* for Firefox compatibility */
-webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */
}
.category_totals a,
.td1 a,
.td2 a,
#grand_totals a,
#copyright a {
transition: all .8s ease 0s;/* CSS3 reference */
-o-transition: all .8s ease 0s; /* for Opera compatibility */
-ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */
-moz-transition: all .8s ease 0s; /* for Firefox compatibility */
-webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */
}
.category_totals:HOVER,
.td1:HOVER,
.td2:HOVER,
#grand_totals:HOVER,
#copyright:HOVER {background-color:rgba(26, 16, 51, 0.700);
border-width:0;
}
#copyright:after {
content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info. Theme by Al_eXs, edited by Teffycom.";
}
#copyright {
margin-bottom: 30px !important;
border-radius: 20px;
padding: 10px;
}
.thickbox {
color:cyan;
font-family:fantasy;
font-size:12px;
}
.header_title {
padding:2px;
}
.table_header {
border-width:0;
font-weight:bold;
padding:2px;
}
.category_totals {
border-radius: 0px 0px 20px 20px;
height: 40px;
text-align: center;
}
#grand_totals {
text-align: center;
margin:0 auto;
border-radius: 20px;
padding: 10px 20px;
width: 600px;
}
Offline
Jun 2011
31
Umineko no Naku Koro Ni - Berncastel, Lambdadelta, Erika Furudo
/*thin top bar*/
@import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixedwithCategory.css";
/*Fonts*/
@import url("http://fonts.googleapis.com/css?family=Tangerine");
@import url("http://fonts.googleapis.com/css?family=Lemon");
@import url("http://fonts.googleapis.com/css?family=Nova+Slim");
@import url(http://fonts.googleapis.com/css?family=Handlee );
@import url(http://fonts.googleapis.com/css?family=Petit+Formal+ );
/*
Got a question or want to learn more? Try this link:
http://myanimelist.net/forum/?topicid=419405&show=0#post1
*/
/*
Theme for Suzune-chan by Al_eXs
*/
/*
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!
*/
body {
background-image: url(http://i52.fastpic.ru/big/2012/1225/62/64d696c9ddfeee182ab371a304555f62.png );
background-attachment: fixed;
background-size: cover;
}
/*
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: rgba(4, 29, 52, 0.440);
color: #FFFFFF;
font-family: 'Handlee', cursive;
font-size:20px;
border-radius: 20px 20px 0px 0px;
font-weight: 700;
text-align: center;
text-shadow: 3px -1px 5px #0C0C0C;
}
/*
SUB-HEADERS BACKGROUND COLOR COLOR
Below each main header is the sub-header which says Score, Episodes, Tags, etc.
*/
.table_header {
background-color: rgba(4, 29, 52, 0.450);
}
/*
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: 'Petit Formal ', cursive;
font-size:14px;
text-shadow: 2px 1px 2px #000000;
}
.animetitle + small {
color:#d6e0fb;
font-family: "Nova Slim";
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:white;
font-size:13px;
font-family: 'Petit Formal ', cursive;
text-shadow: 2px 1px 2px #000000;
}
/*
LIST WIDTH
Use this to increase the width of your list!
*/
#list_surround {
margin: -25px auto 0;
width:950px;
}
/*
LIST POSITION
Change "left" to "right" to switch the list side, or vice versa.
*/
#list_surround {
position: relative;
}
/*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, use the link at the top of this CSS or ask in my club!
*/
body {
font-weight: light;
background-repeat: no-repeat;
background-color: #FFFFFF;
}
a {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover, a:visited:hover {
color:#9ab1f5;
text-decoration:none;
}
.category_totals,
.td1,
.td2,
#grand_totals,
#copyright {
background-color: rgba(4, 29, 52, 0.450);
border-width:0;
transition: all .8s ease 0s;/* CSS3 reference */
-o-transition: all .8s ease 0s; /* for Opera compatibility */
-ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */
-moz-transition: all .8s ease 0s; /* for Firefox compatibility */
-webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */
}
.category_totals a,
.td1 a,
.td2 a,
#grand_totals a,
#copyright a {
transition: all .8s ease 0s;/* CSS3 reference */
-o-transition: all .8s ease 0s; /* for Opera compatibility */
-ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */
-moz-transition: all .8s ease 0s; /* for Firefox compatibility */
-webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */
}
.category_totals:HOVER,
.td1:HOVER,
.td2:HOVER,
#grand_totals:HOVER,
#copyright:HOVER {background-color:rgba(4, 29, 52, 0.600);
border-width:0;
}
#copyright:after {
content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info. Theme by Al_eXs.";
}
#copyright {
margin-bottom: 30px !important;
border-radius: 20px;
padding: 10px;
}
.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 {
padding:2px;
}
.table_header {
border-width:0;
font-weight:bold;
padding:2px;
}
.category_totals {
border-radius: 0px 0px 20px 20px;
height: 40px;
text-align: center;
}
#grand_totals {
text-align: center;
margin:0 auto;
border-radius: 20px;
padding: 10px 20px;
width: 600px;
}
Offline
Nov 2010
18
Akiroz Jan 2, 2013 4:13 AM
Offline
Feb 2010
11828
Wow these recently donated lists are good!
Offline
Apr 2012
181
@Teffycom:
you can delete the part
/*
Theme for Suzune-chan by Al_eXs
*/
from your code. XD
Offline
Aug 2012
1199
Here is my Anime List with which I enter the contest with no chance to win haha :)
Anyway I don't care sharing it since Lirina-Senpai made me a Hunter X Hunter one ! (thanks again !)
It's a 'remade' of an anime list already posted in this topic. I made some changes but not so much in the code, only visually ^^
You can let me a comment on my profile if you want some information. I would be really pleased if people who will take it let me a message, but don't feel obliged :)
@import url(http://veriti.opendrive.com/files/OV81MjgxODZfN0NiSlU/mal_general.css );
@import url(http://veriti.opendrive.com/files/OV81MjgxODdfcXZZMkg/mal_top_bar.css );
body{
background-image: url(http://images.alphacoders.com/299/299431.jpg );
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
font-family: 'Segoe UI', 'Century Gothic', sans-serif;
font-size: 11px;
}
.table_header{
background-color: rgba(0,0,0,0.4);
border-color: rgba(255,255,255,0.25);
}
.table_header, .table_headerLink{
color: #FFFF99;
text-decoration: none;
}
.table_headerLink:hover{
text-shadow: rgba(255,255,255,0.4) -1px -1px 3px, rgba(255,255,255,0.4) 1px 1px 3px;
}
.td1, .td2{
background-color: rgba(0,0,0,0.6);
border-color: rgba(255,255,255,0.25);
color: #FFF;
}
.td1 a, .td2 a{
text-decoration: none;
color: #CCFFFF;
}
.td1 a:hover, .td2 a:hover{
text-shadow: #0099FF -1px -1px 3px, #0099FF 1px 1px 3px;
}
tr:hover [class^='td']{
background-color: rgba(45,45,45,0.9) !important;
}
#list_surround td[class^='td']:first-child, #list_surround td[class^='td']:nth-child(n+3), .animetitle{font-weight:bold}
.header_title{
background-image: url(http://i027.radikal.ru/1203/c6/d9bba44c784b.png );
}
.category_totals{
background-color: rgba(0,0,0,0.5);
border-color: rgba(255,255,255,0.25);
color: #fff;
font-weight: bold;
text-shadow: orange 1px 1px 2px,cyan -1px -1px 2px;
}
#grand_totals{
color: #fff;
font-size: larger;
font-weight: bold;
text-shadow: #c51 -1px -1px 3px, #c51 1px 1px 3px, #c51 1px -1px 4px, #c51 -1px 1px 3px;
text-transform: uppercase;
}
#copyright{
background-color: rgba(0,0,0,0.6);
border-color: rgba(255,255,255,0.25);
}
#copyright, #copyright a{
color: #FFF;
}
.status_not_selected a, .status_selected a{
background-image: url('http://i060.radikal.ru/1203/28/2c26e350723d.png ');
}
#copyright:before {
color: gold;
Content: " Anime List made by KlinsK";
text-allign: center;
padding-right: 150px;
font-family: times new roman;
font-size:12px;
}
#list_surround {
background-image: url(http://img825.imageshack.us/img825/2513/sao.png );
background-position: top;
background-repeat: no-repeat;
padding-top: 280px;
td:nth-of-type() {
line-height: 20px !important;
}
Offline
Aug 2011
508
Offline
Jan 2010
18
Donating my current anime list:
Code:
Feel free to change the list as you like.
Offline
Apr 2008
408
Here is a design I recently stopped using. I hope the instructions are clear enough.
# Generate Your Anime Images File
1a . Download the #more CSS generator by u531355 - download it here
1b . Generate your custom .css style sheet and upload it to a file sharing site that allows direct linking (I use google drive)
*you will need to generate separate files for both your anime and manga lists
# Create Your List CSS File
2a . Create a new css file and call it whatever you want (ie. mal.css or list.css)
2b . Copy the code below into the css file
@charset "utf-8";
@import url();
.animetitle {
background: none repeat scroll 0 0 transparent;
border-radius: 0 0 0 0;
color: #121516 !important;
display: block;
font-family: "Trebuchet MS";
font-size: 14px !important;
font-weight: 600;
height: 20px;
left: 0;
margin-top: 199px;
overflow: hidden;
padding: 2px;
position: absolute;
text-align: left;
text-overflow: ellipsis;
visibility: visible !important;
white-space: nowrap;
width: 170px !important;
z-index: 1;
}
.animetitle:visited {
}
.animetitle:hover {
color: #337287 !important;
}
.animetitle + small {
color: #66CCFF;
display: none;
font-family: arial;
font-size: 14px !important;
font-weight: bold;
margin-right: 0;
margin-top: 190px;
position: absolute;
text-align: right;
width: 163px !important;
}
.form {
border-color: #ABABAB;
border-style: solid;
border-width: 1px;
color: #000000;
font-family: Verdana,Arial;
font-size: 11px;
padding: 2px;
}
.header_al {
font-size: 16px;
font-weight: bold;
}
.header_title {
display: none;
}
.status_selected {
background: none repeat scroll 0 0 #E18D43;
display: block;
}
.status_selected a:after {
display: block;
}
.status_Selected a:hover {
color: #FFFFFF;
display: block;
}
.status_not_selected {
color: #337287;
display: block;
}
.status_not_selected:hover {
background: none repeat scroll 0 0 #348AA1;
color: #337287;
display: block;
}
.status_not_selected a:hover {
color: #FFFFFF;
display: block;
}
.status_not_selected a {
color: #337287;
display: block;
}
td.table_header:nth-of-type(1) {
display: none;
}
.td1, .td2 {
color: #000000;
}
.td1[width="70"], .td2[width="70"] {
color: #8C9A88;
line-height: 24px;
margin-left: 2px;
margin-top: 220px;
position: relative;
text-align: left;
z-index: 2;
}
.td1[width="70"] a, .td2[width="70"] a {
color: #8C9A88;
font-size: 12px;
}
.td1[width="70"] a:hover, .td2[width="70"] a:hover {
color: #8C9A88;
}
.td1[width="70"]:before, .td2[width="70"]:before {
}
.td1[width="70"]:after, .td2[width="70"]:after {
content: " episodes";
}
.td1[align="center"][width="20"] a, .td2[align="center"][width="20"] a {
color: #FFFFFF !important;
font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-size: 14px !important;
font-weight: 600;
text-align: left;
text-shadow: 2px 2px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000;
}
.td1[align="center"][width="45"] a:hover, .td2[align="center"][width="45"] a:hover {
}
.td1[width="30"], .td2[width="30"] {
display: none !important;
}
.td1[width="50"], .td2[width="50"] {
display: none !important;
}
.td1[width="125"], .td2[width="125"] {
display: none !important;
}
.td1[width="30"] + .td1 div small, .td2[width="30"] + .td2 div small {
display: none;
}
.td1[width="30"] + .td1 div small a, .td2[width="30"] + .td2 div small a {
color: #FFFFFF;
}
.td1[width="30"] + .td1 div small a:hover, .td2[width="30"] + .td2 div small a:hover {
color: #FF00FF;
}
.td1[align="center"][width="45"], .td2[align="center"][width="45"] {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3);
display: none;
margin-left: 100px;
margin-top: -36px;
position: relative;
width: 20px;
z-index: 2;
}
.table_header {
display: none;
}
.table_header a {
color: #000000;
padding: 5px;
}
.table_header a:hover {
color: #000000;
}
.table_header:nth-of-type(1):after {
display: none;
}
.table_header:nth-of-type(2) {
display: none;
}
.table_header:nth-of-type(3) {
display: none;
}
.table_header:nth-of-type(4) {
display: none;
}
.table_header:nth-of-type(5) {
display: none;
}
.table_header:nth-of-type(6) {
display: none;
}
html {
padding-bottom: 20px;
}
a {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
color: #FFFFFF;
text-decoration: none;
}
body {
background-attachment: fixed;
background-clip: border-box;
background-color: #D4DFD0 !important;
background-image: url("");
background-origin: padding-box;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
color: #000000;
font: 12px/1.4em arial,helvetica,"liberation sans","dejavu sans condensed",sans-serif;
}
body:before
{
background-color: #FFFFFF;
position:absolute;top: 0px;
left: 50%;margin-left: -50%;
background: url();
width: 100%;
height: 50px;
color: #FFF;
content:'';
}
body:after
{
background-color: #FFFFFF;
position:absolute;
top: 0px;left: 50%;
margin-left: -50%;
background: url();
width: 100%;
height: 50px;
color: #FFF;
content:'';
z-index: -2;
}
#copyright
{
text-align: left !important;
display:inline-block !important;
float: left;
margin-left: 20px;
margin-top: 40px !important;
height: 40px;
width: 100%;
color: rgba(140, 154, 136, 0.3) !important;
text-decoration: none !important;
padding-top: 40px;
padding-left: 0px;
background-image: url('http://i.imgur.com/beRIv.png ');
background-repeat: no-repeat;
}
#copyright a
{
text-decoration: none !important;
padding-top: 50px;
color: rgba(140, 154, 136, 0.3) !important;
}
#copyright a:visited
{
color: rgba(140, 154, 136, 0.3) !important;
}
#copyright a:hover
{
color: rgba(140, 154, 136, 0.3) !important;
}
#grand_totals
{
text-align: center;
}
#list_surround
{
margin-top: 0px;
margin-left: 160px;
margin-right: auto;
margin-bottom: auto;
width: 90%;
height: 48px;
}
#list_surround table:first-of-type
{
position: absolute;
top: 40px;
margin-left: -140px;
width: 150px !important;
height: 200px !important;
color:#FFF;
z-index: 4;
padding: 0px;
}
#list_surround table:first-of-type a
{
padding: 0px 0px;
text-align: left;
font-size: 11px;
font-family: Verdana,sans-serif;
}
#list_surround table:first-of-type a:hover
{
display: block;
color: #ffffff;
}
#list_surround table:first-of-type td
{
display: block;
position: absolute;
width: 140px !important;
height: auto !important;
margin-left: 0px;
padding: 5px 5px;
}
#list_surround table:first-of-type td:nth-of-type(1)
{
display: block;
margin-left: -10px;
margin-top: 30px;
text-align: left;
border-radius: 3px 3px 3px 3px;
}
#list_surround table:first-of-type td:nth-of-type(2)
{
display: block;
margin-left: -10px;
margin-top: 59px;
text-align: left;
border-radius: 3px 3px 3px 3px;
}
#list_surround table:first-of-type td:nth-of-type(3)
{
display: block;
margin-left: -10px;
margin-top: 88px;
text-align: left;
border-radius: 3px 3px 3px 3px;
}
#list_surround table:first-of-type td:nth-of-type(4)
{
display: block;margin-left: -10px;margin-top: 117px;text-align: left;border-radius: 3px 3px 3px 3px;}
#list_surround table:first-of-type td:nth-of-type(5)
{
display: block;
margin-left: -10px;
margin-top: 146px;
text-align: left;
border-radius: 3px 3px 3px 3px;
}
#list_surround table:first-of-type td:nth-of-type(6)
{
display:none;
}
#list_surround table:nth-of-type(1n+4)
{
float: left;
position: relative;
width: 173px !important;
height: 230px !important;
margin-bottom: 10px;
margin-top: 60px;
margin-left: 25px;
table-layout:fixed;
}
#list_surround table:last-of-type
{
display: none;
}
#list_surround table:nth-of-type(1n+4) td
{
position: absolute;
width: 120px;
}
#list_surround .hide
{
display:inline-block !important;
float: left;
position: relative;
margin-left: -173px;
margin-top: 20px;
margin-bottom: 10px;
visibility: visible !important;
height: 230px !important;
width: 173px !important;
background-position: center;
border: 0px solid rgba(0,0,0,1.0);
border-radius: 0px 0px 0px 0px;
-webkit-background-size: 180px 240px;
-moz-background-size: 120px 160px;
-o-background-size: 120px 160px;
background-size: 180px 240px;
z-index: -1;
box-shadow: 1px 2px 0px 0px rgba(0,0,0, 0.2);
}
#list_surround table:nth-of-type(1n+4) tbody
{
position: relative;
}
#list_surround table:nth-of-type(1n+4)
{
border-radius: 10px 10px 10px 10px;
}
#list_surround table:nth-of-type(1n+4):hover
{
}
#list_surround table:nth-of-type(1n+4) tbody:hover .td1, #list_surround table:nth-of-type(1n+4) tbody:hover .td2
{
visibility: visible !important;
}
#list_surround table:nth-of-type(1n+4) tbody:hover .animetitle + small
{
visibility: visible !important;
}
/* deviantMAL by jkun @ http://myanimelist.net/profile/jkun */
#mal_control_strip
{
position: absolute;
top: 0px;margin: 0 auto !important;
z-index: 7;
background: url('http://i.imgur.com/dC1Mh.png ') repeat-x scroll 0 0 #CCD9C8 !important;
height: 41px !important;
width: 100% !important;
text-decoration: none !important;
}
#mal_control_strip a
{
text-decoration: none !important;
}
2c . Before you save it you will need to add the url to your image css (the file you created in step 1) to the following line:
@import url( the url to your image css file goes here );
2d . You should now have the code for your MAL list with the line at the top importing your custom anime images.
# Switching Your List Design To deviantANIME
3a . go to Profile > Edit My Profile > My List Style > Advanced > (select your id)
3b . copy the following lines into the edit box and add your own url:
@import url( url to your list design css, NOT your image css file! );
MALrequiresThis{}
3c . click update css and go back to My List Style and make sure the correct list style is selected
3d . you should now have deviantANIME on your list! yay!
Offline
Feb 2010
11828
Very very cool, looks like Deviantart but with none of the MLP pics!
Offline
Sep 2008
209
I'm donating my list as well.
Code (without my own cursor):
@import url(http://dl.dropbox.com/u/78192465/MyAnimeList/Kore%20wa%20Zombie%20Desuka/Covers.css );
@import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css";
@import "https://dl.dropboxusercontent.com/u/142409594/othercodes.css";
#list_surround .status_not_selected {
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
body {
background-attachment:fixed !important;
background-image: url(http://i1302.photobucket.com/albums/ag140/shoutaazuma/header_zps1045dd07.png ), url(http://images.wikia.com/psychopass/images/1/1f/Background.jpg );
background-position:center bottom, center center;
background-repeat:no-repeat;
background-size: 750px 500px, cover;
}
.table_header{
background-color: rgba(0, 0, 0, 0.6);
}
.header_cw {
background-image:url(http://i1302.photobucket.com/albums/ag140/shoutaazuma/watching_zps7419036e.png );
height: 30px;
background-color: transparent;
background-repeat: no-repeat;
}
.header_ptw {
background-image:url(http://i1302.photobucket.com/albums/ag140/shoutaazuma/Plan2watch_zpsa3d2b997.png );
height: 30px;
background-color: transparent;
background-repeat: no-repeat;
}
.header_dropped {
background-image:url(http://i1302.photobucket.com/albums/ag140/shoutaazuma/dropped_zpsb279f84d.png );
height: 30px;
background-color: transparent;
background-repeat: no-repeat;
}
.header_completed {
background-image:url(http://i1302.photobucket.com/albums/ag140/shoutaazuma/completed_zpsf7d9a5f0.png );
height: 30px;
background-color: transparent;
background-repeat: no-repeat;
}
.header_onhold {
background-image:url(http://i1302.photobucket.com/albums/ag140/shoutaazuma/onhold_zpsa72c8d1a.png );
height: 30px;
background-color: transparent;
background-repeat: no-repeat;
}
.header_title {
color: gray !important;
color: transparent !important;
font-size: 1px !important;
font-size: 0px !important;
font-size: 0 !important;
font-size: 0pt !important;
}
#list_surround tbody:hover td[class^='td']:first-child {
border-radius: 5px 0 0 5px;
-o-border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
}
#list_surround tbody:hover td[class^='td']:last-child {
border-radius: 0 5px 5px 0;
-o-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
}
.borderRBL:hover {
font-weight:normal !important;
color:rgb(255,255,255) !important;
}
#list_surround small a {
color: gray !important;
color: transparent !important;
background: url(http://i1302.photobucket.com/albums/ag140/shoutaazuma/more2_zpsd5e9e3eb.png ) no-repeat center;
font-size: 13px;
text-shadow: none !important;
}
a.List_LightBox {
color: gray !important;
color: transparent !important;
background: url(http://i1302.photobucket.com/albums/ag140/shoutaazuma/plus2_zps3678f301.png ) no-repeat center !important;
}
#list_surround tr:hover .animetitle{
display: block;
width: 530px;
}
#list_surround tr:hover .animetitle + small{
display:none;
}
a, .td1, .td2 {
color:#FFFFFF;
font-weight:normal;
overflow:hidden;
}
#list_surround tr:hover .td1, #list_surround tr:hover .td2, #list_surround tr:hover .td1 a, #list_surround tr:hover .td2 a {
font-weight:bold;
text-shadow: -2px -2px 1px #000000;
}
a:hover {
text-decoration:underline;
}
#list_surround .table_headerLink{
color: #FFFFFF;
font-weight: bold;
}
#list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped {
margin-left:0;
padding:0px;
width:750px;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 20px 20px 0px 0px;
}
#list_surround .status_not_selected {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i1302.photobucket.com/albums/ag140/shoutaazuma/allbuttons1_zpsa6a1597a.png );
background-position:0px 0px;
background-repeat:repeat repeat;
display:block;
height:80px;
right:-35px;
padding:0;
position:fixed;
top:60px;
width:250px;
overflow:auto;
}
#list_surround .status_not_selected:hover, #list_surround .status_selected {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i1302.photobucket.com/albums/ag140/shoutaazuma/allbuttons2_zpsa4f0528c.png );
background-position:0px 0px;
background-repeat:repeat repeat;
display:block;
height:80px;
right:-5px;
padding:0;
position:fixed;
top:60px;
width:250px;
border:5px solid rgba(0,0,0,0.6);
border-radius:11px;
transition: right 0.25s ease-in-out 0s ;
-o-transition: all 0.25s ease-in-out 0s ;
-moz-transition: all 0.25s ease-in-out 0s ;
-webkit-transition: all 0.25s ease-in-out 0s ;
overflow:auto;
}
#list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i1302.photobucket.com/albums/ag140/shoutaazuma/allbuttons1_zpsa6a1597a.png );
background-position:0px -80px;
background-repeat:repeat repeat;
top:150px;
}
#list_surround .status_selected + .status_not_selected:hover, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected:hover {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i1302.photobucket.com/albums/ag140/shoutaazuma/allbuttons2_zpsa4f0528c.png );
background-position:0px -80px;
background-repeat:repeat repeat;
top:150px;
}
#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_not_selected {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i1302.photobucket.com/albums/ag140/shoutaazuma/allbuttons1_zpsa6a1597a.png );
background-position:0px -160px;
background-repeat:repeat repeat;
top:240px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected:hover, #list_surround .status_not_selected + .status_selected + .status_not_selected:hover, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected:hover {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i1302.photobucket.com/albums/ag140/shoutaazuma/allbuttons2_zpsa4f0528c.png );
background-position:0px -160px;
background-repeat:repeat repeat;
top:240px;
}
#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_not_selected {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i1302.photobucket.com/albums/ag140/shoutaazuma/allbuttons1_zpsa6a1597a.png );
background-position:0px -240px;
background-repeat:repeat repeat;
top:330px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected:hover, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected:hover, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected:hover, #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:hover {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i1302.photobucket.com/albums/ag140/shoutaazuma/allbuttons2_zpsa4f0528c.png );
background-position:0px -240px;
background-repeat:repeat repeat;
top:330px;
}
#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_not_selected {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i1302.photobucket.com/albums/ag140/shoutaazuma/allbuttons1_zpsa6a1597a.png );
background-position:0px -320px;
background-repeat:repeat repeat;
display:inline;
top:420px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected:hover, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected:hover, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected:hover, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected:hover, #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:hover {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i1302.photobucket.com/albums/ag140/shoutaazuma/allbuttons2_zpsa4f0528c.png );
background-position:0px -320px;
background-repeat:repeat repeat;
display:inline;
top:420px;
}
#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_not_selected {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i1302.photobucket.com/albums/ag140/shoutaazuma/allbuttons1_zpsa6a1597a.png );
background-position:0px -400px;
background-repeat:no-repeat no-repeat;
display:inline;
top:510px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected:hover, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected:hover, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected:hover, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected:hover, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected:hover, #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:hover {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i1302.photobucket.com/albums/ag140/shoutaazuma/allbuttons2_zpsa4f0528c.png );
background-position:0px -400px;
background-repeat:no-repeat no-repeat;
display:inline;
top:510px;
}
#list_surround {
background-attachment:scroll;
background-image:none;
background-position:0 0;
border-bottom-color:#292929;
border-bottom-style:solid;
border-bottom-width:0;
border-left-color:#292929;
border-left-style:solid;
border-left-width:0;
border-right-color:#292929;
border-right-style:solid;
border-right-width:0;
border-radius:10px;
height:auto;
margin:0px auto 30px;
position:absolute;
top:20px;
left:220px;
width:750px;
}
#list_surround .status_selected a {
color:#184900;
display:block;
font-size:1px;
height:2px;
padding:78px 0 0 218px;
width:30px;
}
#list_surround .status_not_selected a {
color:#184900;
display:block;
font-size:1px;
height:2px;
padding:78px 0 0 218px;
width:30px;
}
#list_surround .animetitle + small {
color:#FF6600;
}
#list_surround .category_totals {
padding:5px;
text-align:center;
color:#FFFFFF;
font-weight:normal;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 0px 0px 20px 20px;
}
#list_surround .category_totals:hover {
background-color:rgba(0,153,51,0.6);
transition: all 0.25s ease-in-out 0s ;
}
#list_surround #grand_totals {
display:none;
}
#mal_cs_listinfo a strong {
color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-variant:normal;
font-weight:normal;
text-decoration:underline;
text-transform:none;
}
#mal_cs_otherlinks strong {
color:rgba(0,0,0,0.6);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-variant:normal;
}
.borderRBL {
color:#00FFFF !important;
}
#list_surround .header_title span {
font: 30px Verdana;
font-variant:small-caps;
}
#list_surround .status_not_selected a {
opacity:0;
}
#list_surround .status_selected a {
opacity:0;
}
#copyright {
color:#FF6600;
font-family:sans-serif;
font-size:10px;
height:15px;
position:absolute;
text-align:center !important;
width:600px;
}
#copyright a {
color:#FF6600;
}
#copyright {
}
.td1, .td2{
background-color: rgba(0, 0, 0, 0.6);
}
tr:hover [class^="td"] {
background-color:rgba(255,255,255,0.6);
transition: all 0.25s ease-in-out 0s ;
-o-transition: all 0.25s ease-in-out 0s ;
-moz-transition: all 0.25s ease-in-out 0s ;
-webkit-transition: all 0.25s ease-in-out 0s ;
}
.td1:nth-of-type(2), .td2:nth-of-type(2) {
text-align:left;
}
*, #inlineContent {
font-family: Segoe UI;
font-size: 14px;
text-decoration: none;
}
#inlineContent {
display: block !important;
height: 100%;
width: 100%;
left: 0;
position: fixed;
top: 0;
background: transparent;
z-index: -1;
}
Extra codes for my cursor
Settings:
- Resolution: 1366 x 768 (Recommended) or higher
Note: For those who have issues regarding sudden change in height after hovering the title, this is probably due to the fixed setting of width of the link after hovering.
#list_surround tr:hover .animetitle{
display: block;
width: 530px;
}
Use inspect element or Firebug to adjust to appropriate width before finalizing the width setting.
ShoutaAzuma Apr 14, 2013 12:11 AM
Offline
Jan 2011
1943
Donating my list as well, it's for both anime and manga.
Full size .
Code:
@import "http://fonts.googleapis.com/css?family=PT+Sans";
#copyright {
text-align:center;
width:690px
}
#grand_totals {
text-align:center
}
#list_surround {
left:30px;
position:absolute!important;
width:990px
}
#list_surround .animetitle+small {
color:#537DA7;
font-size:10px
}
#mal_cs_listinfo,#mal_cs_links,#mal_cs_otherlinks,#mal_cs_powered {
display:none
}
* {
color:#FFFFFF;
font:400 13px "PT Sans";
text-decoration:initial
}
.animetitle {
font-weight:400
}
.category_totals {
}
.form {
border:1px solid #E0E0E0;
color:#000000;
font:11px Verdana,Arial;
padding:3px
}
.header_al {
font-size:16px;
font-weight:400
}
.header_al_links {
}
.header_completed {
}
.header_cw {
}
.header_dropped {
}
.header_onhold {
}
.header_ptw {
}
.header_title {
font-size:14px;
font-weight:400
}
.status_not_selected a,.status_selected a {
background-color:#537DA7;
border:1px solid rgba(255,255,255,0.2);
border-bottom-left-radius:0;
border-bottom-right-radius:0;
border-style:solid;
border-top-left-radius:0;
border-top-right-radius:0;
color:#FFFFFF;
display:block!important;
font-weight:400;
padding:6px;
transition:all .25s ease-in-out 0
}
.status_not_selected a:hover {
background-color:#5F8FBF;
border-color:rgba(255,255,255,0.2);
box-shadow:0 0 0 rgba(0,0,0,0);
transition:all .25s ease-in-out 0
}
.status_not_selected,.status_selected {
border:0 none!important;
height:auto!important;
padding:0;
text-align:center!important;
width:16.667%!important
}
.status_selected a {
background-color:#537DA7;
border:1px solid rgba(255,255,255,0.2);
border-style:solid
}
.status_selected a:hover {
background-color:#5F8FBF;
border-color:rgba(255,255,255,0.2);
box-shadow:0 0 0 rgba(0,0,0,0);
transition:all .25s ease-in-out 0
}
.table_header {
background-color:#537DA7;
border-color:rgba(255,255,255,0.2);
border-style:solid;
border-width:1px 1px 1px 0;
color:#000000;
padding:3px
}
.table_headerlink {
}
.table_headerlink:hover {
}
.table_headerlink:visited {
}
.td1 {
background-color:rgba(255,255,255,0.2);
border-color:rgba(255,255,255,0.2);
border-style:solid;
border-width:0 1px 1px 0;
color:#FFFFFF;
padding:3px;
transition:all .25s ease-in-out 0
}
.td1:nth-of-type(2),.td2:nth-of-type(2) {
text-align:left
}
.td2 {
background-color:rgba(255,255,255,0.2);
border-color:rgba(255,255,255,0.2);
border-style:solid;
border-width:0 1px 1px 0;
color:#FFFFFF;
padding:3px;
transition:all .25s ease-in-out 0
}
a {
color:#FFFFFF;
text-decoration:initial
}
a:hover {
color:#000000;
text-decoration:initial
}
a:visited {
color:#FFFFFF;
text-decoration:initial
}
body {
background-attachment:fixed!important;
background-image:url(
http://i.imgur.com/X6tZ18b.jpg );
background-position:right bottom;
background-repeat:initial initial;
background-size:cover
}
td:nth-of-type(5) {
width:260px
}
tr:hover [class^="td"] {
background-color:rgba(82,124,165,0.8)
}
There are a few things I believe anyone willing to use this one should be aware of:
It's only 96% complete. When mouse is over an entry, there was supposed to be a white border around it (1px).
It's not fully "compatible" with other browsers aside Chrome. IE and Opera will display every text with underline tag.
The wallpaper is not optimized for reading, I'm using it simply because I like it. So, change it if you feel necessary.
The code was a mess originally. I used an automatic "cleaner" but I'm not sure if that was enough.
I'm horrible with CSS myself, I've spent quite a few hours just trying to fix and get things the way I wanted. So if there's anyone who's willing to edit and fix at least one part of the issues mentioned in the layout, I would greatly appreciate it.
Offline
Sep 2010
163
Modified Version of the Square Layout Template from u531355.. removed the Header Graphic and centered the Menu.
Of course you can place a Text in between the 2 Menus.. something like "Sibbo7's AnimeList" or whatever.
@import url(http://fonts.googleapis.com/css?family=Varela+Round );
@import url(http://fonts.googleapis.com/css?family=Margarine );
@import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixedwithCategory.css";
/*
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/cYdpqKd.jpg );
background-attachment: fixed;
background-size: cover;
}
/*
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 {
color: white;
font-family: 'Margarine', cursive;
font-size: 26px;
text-shadow: 3px 3px 3px #000;
text-align: left;
background-color: transparent;
background-image:
url(https://dl.dropbox.com/u/57348187/MAL/PROZ.png );
}
/*
SUB-HEADERS BACKGROUND COLOR COLOR
Below each main header is the sub-header which says Score, Episodes, Tags, etc.
*/
.table_header {
background-image:
url(https://dl.dropbox.com/u/57348187/MAL/PROZ.png );
}
/*
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: 'Varela Round', sans-serif;
text-shadow: 0px 2px 1px #000;
font-size:13px;
}
/*
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:white;
font-family: 'Varela Round', sans-serif;
text-shadow: 0px 2px 1px #000;
font-size:12px;
}
/*
LIST WIDTH
Use this to increase the width of your list!
*/
#list_surround {
width:900px;
}
/*
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;
margin: auto !important;
right: 0px !important;
padding:-200px;
left: 0px !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:#D3D3D3;
text-decoration:underline;
}
.category_totals,
.td1,
.td2,
#grand_totals,
#copyright {
background-image:url(https://dl.dropbox.com/u/57348187/MAL/PROZ.png );
border-width:0;
padding:2px;
}
.category_totals:HOVER,
.td1:HOVER,
.td2:HOVER,
#grand_totals:HOVER,
#copyright:HOVER {background-image:url(https://dl.dropbox.com/u/57348187/MAL/PROZ2.png );
border-width:0;
padding:2px;
}
#copyright:after {
content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info.";
}
*.status_selected {
display: none;
background-color:black;
padding: 2px;
color:white;
text-decoration: blink;
}
*.status_not_selected {
display: none;
background-color:black;
padding: 2px;
color:white;
}
*.status_selected a{
display: none;
color:blue;
}
*.status_not_selected a{
display: none;
color:white;
}
.thickbox {
color:cyan;
font-family: 'Happy Monkey', cursive;
text-shadow: 2px 2px 2px #000;
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;
}
.td1 small, .td2 small {
color: #4e85d2;
}
sibbo7 Apr 21, 2013 6:12 AM
Offline
May 2012
1921
Edit: Check this topic for the code
Wanna donate my AnoHana Layout which I entered in the contest.
Simple layout, very bluish, feel free to edit it as you want.
Might be laggy on slow computers though.
Unique cursor, even doted my favs with a Hana.
Recommended Resolution: 1366 and higher
Code:
@import "http://dl.dropbox.com/u/102421246/MAL/CSS/AnoHanaCustom2/topbarAnohana.css";
@import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css";
@import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css";
* {
text-decoration: none;
}
body {
background-attachment: fixed;
background-clip: border-box;
background-color: transparent;
background-image: url("http://i45.tinypic.com/2q3t10z.png"), url("http://i45.tinypic.com/2e4byvl.jpg");
background-position: right 57% bottom, 0 0;
background-repeat: no-repeat no-repeat;
background-size: cover, cover;
cursor: url("http://cur.cursors-4u.net/nature/nat-8/nat793.cur") 1 2, auto;
font-family: candara;
}
#inlineContent {
background-image: url("");
background-repeat: no-repeat no-repeat;
display: inline-block !important;
height: 3000px !important;
left: 0 !important;
margin: auto !important;
position: fixed;
top: 0 !important;
width: 3000px !important;
z-index: -4;
}
#list_surround {
background-attachment: scroll;
background-image: url("http://dl.dropbox.com/u/102421246/MAL/AnoHanaLayout/anohanalogo.png");
background-position: 50% 0;
background-repeat: no-repeat no-repeat;
font-size: 81.25%;
height: 250px;
left: 0 !important;
line-height: 1;
margin: 0 auto;
padding-bottom: 10px;
padding-top: 228px;
position: absolute;
right: 0 !important;
width: 650px;
}
a {
color: #FFFFFF;
cursor: url("http://cur.cursors-4u.net/nature/nat-8/nat793.cur") 1 2, auto;
text-shadow: none;
}
a:hover {
color: #FF4000;
cursor: url("http://cur.cursors-4u.net/nature/nat-8/nat793.cur") 1 2, auto;
text-shadow: 0 1px rgba(255, 255, 255, 0.15);
}
.table_header {
}
.table_header:first-of-type {
border-radius: 20px 0 0 0;
}
.table_header:nth-of-type(2) {
text-align: left;
}
.table_header:nth-of-type(5) {
border-bottom-right-radius: 0;
border-top-left-radius: 0;
border-top-right-radius: 20px;
}
.td1 {
background-color: rgba(8, 236, 228, 0.5);
height: 20px;
}
.td2 {
background-color: rgba(49, 59, 255, 0.506);
height: 20px;
}
.table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals {
background-color: rgba(12, 46, 196, 0.7);
border: 0 none;
padding: 4px;
text-align: center;
vertical-align: top;
}
.table_header, .td1, .td2, .category_totals {
color: white;
}
.borderRBL {
line-height: normal !important;
}
[cellspacing="0"] {
line-height: 17px;
}
.category_totals {
background-color: rgba(12, 46, 196, 0.7);
border-radius: 0 0 12px 12px;
text-align: center;
}
.category_totals:hover {
background-color: rgba(12, 46, 196, 0.7);
color: #FFFFFF;
}
[class^="header_"] * {
background-repeat: no-repeat no-repeat;
font-size: 1px;
height: 200px;
line-height: 24px;
padding-bottom: 0;
text-align: right;
vertical-align: bottom;
}
.header_title {
border-radius: 4px 4px 4px 4px;
color: #FFFFFF;
display: inline-block;
font-style: italic;
height: auto;
padding: 0 8px 0 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
#grand_totals {
background-color: rgba(12, 46, 196, 0.8);
border: 0 none;
border-radius: 3px 3px 3px 3px;
color: #FFFFFF;
line-height: 20px;
min-height: 20px;
padding: 8px;
text-align: center;
vertical-align: middle;
}
.td1:nth-of-type(2), .td2:nth-of-type(2) {
text-align: left;
}
.table_header:nth-of-type(6) {
display: none;
width: 500px;
}
a, .td1, .td2, .category_totals {
}
.status_not_selected {
opacity: 0.5;
}
.status_not_selected:hover {
color: transparent;
opacity: 1;
-moz-transition: .4s ease;
-webkit-transition: .4s ease;
-o-transition: .4s ease;;
}
.status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a {
color: transparent;
display: block;
height: 100px;
width: 270px;
}
.header_cw {
background-color: transparent;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/MAL/MenmaCw2_zps53cb0332.png");
background-position: 0 0;
background-repeat: no-repeat no-repeat;
height: 200px;
margin-bottom: 0;
margin-left: 63px;
margin-top: -45px;
}
.header_completed {
background-color: transparent;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/MAL/AnjouCom_zps4a87293c.png");
background-position: 61px 5px;
background-repeat: no-repeat no-repeat;
height: 200px;
margin-bottom: 0;
margin-top: -40px;
z-index: 0;
}
.header_onhold {
background-color: transparent;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/MAL/HoldMenma_zps3c2d71da.png");
background-position: 91px 11px;
background-repeat: no-repeat no-repeat;
height: 200px;
margin-bottom: 0;
margin-top: -40px;
}
.header_dropped {
background-color: transparent;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/MAL/DroppedAnjou_zpse070bc93.png");
background-position: 131px 5px;
background-repeat: no-repeat no-repeat;
height: 200px;
margin-bottom: 0;
margin-top: -40px;
}
.header_ptw {
background-color: transparent;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/MAL/PtwMenma_zpse3a31365.png");
background-position: 15px 5px;
background-repeat: no-repeat no-repeat;
height: 200px;
margin-bottom: 0;
margin-top: -40px;
}
.status_selected {
display: block;
}
.status_not_selected {
display: block;
}
#list_surround .status_selected, #list_surround .status_not_selected {
background-attachment: scroll;
background-color: transparent;
background-image: url("http://dl.dropbox.com/u/102421246/MAL/AnoHanaLayout/CwCategory.png");
background-position: 0 -5px;
background-repeat: repeat repeat;
border: 1px solid #FFFFFF;
border-radius: 20px 20px 20px 20px;
display: block;
height: 90px;
left: 0;
padding: 0;
position: fixed;
top: 50px;
width: 300px;
}
#list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected {
background-attachment: scroll;
background-color: transparent;
background-image: url("http://dl.dropbox.com/u/102421246/MAL/AnoHanaLayout/ComCategory.png");
background-position: 0 -5px;
background-repeat: repeat repeat;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
top: 160px;
}
#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-attachment: scroll;
background-color: transparent;
background-image: url("http://dl.dropbox.com/u/102421246/MAL/AnoHanaLayout/HoldCategory.png");
background-position: 0 -5px;
background-repeat: repeat repeat;
top: 270px;
}
#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-attachment: scroll;
background-color: transparent;
background-image: url("http://dl.dropbox.com/u/102421246/MAL/AnoHanaLayout/DroppedCategory.png");
background-position: 0 -7px;
background-repeat: repeat repeat;
top: 380px;
}
#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-attachment: scroll;
background-color: transparent;
background-image: url("http://dl.dropbox.com/u/102421246/MAL/AnoHanaLayout/PtwCategory.png");
background-position: 0 -5px;
background-repeat: repeat repeat;
display: inline;
top: 490px;
}
#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-attachment: scroll;
background-color: transparent;
background-image: url("http://dl.dropbox.com/u/102421246/MAL/AnoHanaLayout/AllCategory.png");
background-position: 0 0;
background-repeat: repeat repeat;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
display: inline;
top: 600px;
width: 300px;
}
a, .td1, .td2, .category_totals {
}
.table_header:nth-of-type(2) {
}
.td1:nth-of-type(2), .td2:nth-of-type(2) {
}
tr:hover [class^="td"] {
background-color: rgba(51, 111, 235, 0.7);
-moz-transition: .4s ease;
-webkit-transition: .4s ease;
-o-transition: .4s ease;;
}
:hover + .hide {
background-color: rgba(12, 46, 196, 0.6);
background-position: 50% 18% !important;
background-repeat: no-repeat !important;
background-size: 250px 330px !important;
border-color: white;
border-radius: 25px 25px 25px 25px;
border-style: ridge;
border-width: 2px;
display: block !important;
height: 498px;
padding: 79px 40px 10px 10px;
position: fixed;
right: 3px;
top: 60px;
width: 234px;
}
.hide:before {
background: none repeat scroll 0 0 transparent;
border-radius: 25px 25px 0 0;
color: white;
content: "";
padding-bottom: 5px;
position: absolute;
text-align: center;
top: 10px;
width: 262px;
}
.td1:nth-of-type(6), .td2:nth-of-type(6) {
background-color: transparent !important;
background-image: url("none") !important;
display: none;
font-size: 14px;
height: 145px;
padding: 10px 10px 0 24px;
position: fixed;
right: 13px;
text-align: center;
top: 449px;
width: 235px;
z-index: 1;
}
.table_header:nth-of-type(6) {
display: none;
}
#copyright, #copyright:hover {
background-color: rgba(12, 46, 196, 0.6);
border-radius: 5px 5px 5px 5px;
bottom: 0;
color: white;
padding: 2px;
width: 650px;
}
#copyright:hover {
}
#copyright:before {
color: black;
content: " Design by SylakentH_, thanks to TheHolyPotato and Shishio Club!";
font-size: 12px;
padding-right: 10px;
}
#copyright:after {
color: gold;
content: " ";
padding-left: 20px;
}
#copyright a {
}
/* Ignore this part if you dont know how to edit it. Either ask me, SylakentH_, or just ask in the club.
This part is responsible for the Unique Hana favs dots. You simple dot your favs, these are my favs though.
a[href="http://myanimelist.net/anime/14967/Boku_wa_Tomodachi_ga_Sukunai_NEXT"], [href="http://myanimelist.net/anime/32/Neon_Genesis_Evangelion:_The_End_of_Evangelion"], [href="http://myanimelist.net/anime/2904/Code_Geass:_Hangyaku_no_Lelouch_R2"], [href="http://myanimelist.net/anime/11741/Fate/Zero_2nd_Season"], [href="http://myanimelist.net/anime/5114/Fulll_Alchemist:_Brotherhood"], [href="http://myanimelist.net/anime/7311/Suzumiya_Haruhi_no_Shoushitsu"],
[href="http://myanimelist.net/anime/14741/Chuunibyou_demo_Koi_ga_Shitai!"], [href="http://myanimelist.net/anime/2001/Tengen_Toppa_Gurren_Lagann"], [href="http://myanimelist.net/anime/1827/Seirei_no_Moribito"], [href="http://myanimelist.net/anime/9253/Steins;Gate"], [href="http://myanimelist.net/anime/1535/Death_Note"], [href="http://myanimelist.net/anime/226/Elfen_Lied"], [href="http://myanimelist.net/anime/6702/Fairy_Tail"], [href="http://myanimelist.net/anime/918/Gintama"], [href="http://myanimelist.net/anime/269/Bleach"], [href="http://myanimelist.net/anime/10620/Mirai_Nikki_(TV)"],
[href="http://myanimelist.net/anime/7791/K-On!!"], [href="http://myanimelist.net/anime/8407/Sora_no_Otoshimono:_Forte"], [href="http://myanimelist.net/anime/9989/Ano_Hi_Mita_Hana_no_Namae_wo_Bokutachi_wa_Mada_Shiranai."], [href="http://myanimelist.net/anime/1887/Lucky%E2%98%86Star"],[href="http://myanimelist.net/anime/21/One_Piece"],[href="http://myanimelist.net/anime/1735/Naruto:_Shippuuden"],[href="http://myanimelist.net/anime/11757/Sword_Art_Online"],[href="http://myanimelist.net/anime/12189/Hyouka"]{
background-attachment: scroll;
background-color: transparent;
background-image: url("http://i48.tinypic.com/2ludp8m.png");
background-position: left top;
background-repeat: no-repeat;
padding-bottom: 10px;
padding-left: 25px;
}
.animetitle[href*="anime/9253/"], .animetitle[href*="anime/2904/"], .animetitle[href*="anime/7311/"], .animetitle[href*="anime/5114/"], .animetitle[href*="anime/11741/"], .animetitle[href*="anime/1535/"], .animetitle[href*="anime/2001/"], .animetitle[href*="anime/32/"] {
color: gold !important;
font-size: 15px;
}
*/
SylakentH Jun 26, 2013 12:53 PM
Offline
Feb 2013
48
Ushioo said: Donating my current anime list:
Code:
Feel free to change the list as you like.
Is it possible to change the background image? If so, how?
It's cool but I prefer an image of an anime which I love or at least know.
Thanks for donating this, I love it!
Offline
Jan 2013
657
My first attempt at making layouts. They're somewhat minimalistic and have implemented the icon menu bar at the top. They're both Cowboy Bebop themed and both can be used for anime and/or manga lists. I'm using them right now if you want a live preview of what they will look like.
Red:
Code:
Blue:
Code:
RDW May 15, 2013 3:26 AM
Offline
Oct 2012
249
Donating my Hagani/Boku Wa Tomodachi Ga Sukunai Layout. (Anime List)
It has indicators in the code to help you with customization if there is anything you feel like changing. Meant to donate this a long time ago but better late than never I guess :)
Code:
/* TOP BAR */
@import "https://dl.dropbox.com/s/nf9dc7ifauzlqha/Blue%20TopBar.css";
/* ANIME COVERS */
@import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css";
/* BACKGROUND */
body {
background-attachment:fixed;
background-clip:border-box;
background-color:transparent;
background-image:url(http://oi56.tinypic.com/2r753zq.jpg );
background-position:0 0;
background-repeat:no-repeat no-repeat;
background-size:cover;
cursor:url(http://i45.tinypic.com/43vxy.png ), auto;
font-family:'comic Sans MS';
}
/* SECOND BACKGROUND (SENA)*/
#inlineContent {
background-image:url(http://i48.tinypic.com/34s2o42.png );
background-position:-9% 0;
background-repeat:no-repeat no-repeat;
display:inline-block !important;
height:3000px !important;
left:0 !important;
margin:auto !important;
position:fixed !important;
right:0 !important;
top:0 !important;
width:3000px !important;
z-index:-1 !important;
}
/*SIZE OF LIST & TITLE */
#list_surround {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i49.tinypic.com/565w0.png );
background-position:50% -60px;
background-repeat:no-repeat no-repeat;
font-size:81.25%;
line-height:1;
margin:0 auto;
padding-bottom:10px;
padding-top:232px;
position:absolute;
right:50px !important;
width:800px;
}
/*TEXT COLOR*/
a {
color:#FFFFFF;
cursor:url(http://i45.tinypic.com/43vxy.png ), auto;
text-decoration:none;
text-shadow:none;
}
/*TEXT HOVER*/
a:hover {
color:#FFFFFF;
cursor:url(http://i45.tinypic.com/43vxy.png ), auto;
text-shadow:none;
text-decoration: underline;
}
/*HEADER COLOR*/
.table_header {
background-color:rgba(0, 100, 185, 0.901961);
}
/*ROUNDED CORNER ON TOP LEFT*/
.table_header:first-of-type {
border-bottom-left-radius:0;
border-bottom-right-radius:0;
border-top-left-radius:20px;
border-top-right-radius:0;
}
/*MOVING HEADER TITLE OVER */
.table_header:nth-of-type(2) {
padding-left:35px;
text-align:left;
}
/*ROUNDER CORNER ON TOP RIGHT */
.table_header:last-of-type {
border-bottom-left-radius:0;
border-bottom-right-radius:0;
border-top-left-radius:0;
border-top-right-radius:20px;
}
/*ROW COLORS*/
.td1 {
background-color:rgba(0, 120, 235, 0.901961);
height:65px;
}
.td2 {
background-color:rgba(0, 139, 235, 0.901961);
height:65px;
}
/*DONT WORRY ABOUT THIS*/
.table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals {
border:0 none;
padding:4px;
text-align:center;
vertical-align:top;
}
.table_header, .td1, .td2, .category_totals {
color:white;
}
.borderRBL {
line-height:normal !important;
}
[cellspacing="0"] {
line-height:17px;
}
/*CATEGORY TOTALS*/
.category_totals {
background-color:rgba(0, 100, 185, 0.901961);
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
border-top-left-radius:0;
border-top-right-radius:0;
color:#FFFFFF;
text-align:center;
}
/*DONT WORRY ABOUT THIS*/
[class^="header_"] * {
background-repeat:no-repeat no-repeat;
font-size:0;
height:200px;
line-height:24px;
padding-bottom:4px;
text-align:right;
vertical-align:bottom;
}
.header_title {
border-bottom-left-radius:4px;
border-bottom-right-radius:4px;
border-top-left-radius:4px;
border-top-right-radius:4px;
color:#FFFFFF;
display:inline-block;
font-style:italic;
height:auto;
padding:0 8px 0 0;
text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px;
}
/* GRAND TOTALS */
#grand_totals {
background-color:rgba(0, 46, 184, 0.8);
border:0 none;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
border-top-left-radius:3px;
border-top-right-radius:3px;
color:#FFFFFF;
line-height:20px;
min-height:20px;
padding:8px;
text-align:center;
vertical-align:middle;
}
/*COPYRIGHT DONT REMOVE*/
#copyright {
background-color:rgba(180, 32, 48, 0.6);
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
border-top-left-radius:3px;
border-top-right-radius:3px;
color:#EEEEEE;
line-height:17px;
margin-top:10px;
padding:8px;
text-align:center;
}
#copyright::after {
}
/*DVD COVERS WITHOUT HOVER*/
.hide {
background-color:rgba(248, 162, 200, 0.701961);
background-position:50% 50%;
background-repeat:no-repeat no-repeat;
background-size:cover;
border:1px solid #FFFFFF;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
border-top-left-radius:0px;
border-top-right-radius:7px;
display:inline-block !important;
height:55px;
margin-left:33px;
margin-top:-65px;
position:absolute;
width:35px;
}
/*DVD COVERS WITH HOVER*/
.hide:hover {
background-color:transparent;
background-repeat:no-repeat no-repeat;
background-size:cover;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
border-top-left-radius:20px;
border-top-right-radius:20px;
box-shadow:rgba(63, 52, 60, 0.54902) 0 0 8px 8px;
margin-left:-140px;
padding-right:150px;
padding-top:220px !important;
position:absolute;
z-index:1;
}
/*MOVING ANIME TITLES OVER*/
.td1:nth-of-type(2), .td2:nth-of-type(2) {
padding-left:35px;
text-align:left;
}
/*DONT MESS WITH THIS*/
.td1:nth-of-type(6), .td2:nth-of-type(6) {
background-attachment:scroll;
background-color:transparent;
background-image:none;
background-position:0 0;
background-repeat:repeat repeat;
border-bottom-style:none !important;
border-bottom-width:medium !important;
display:inline-block;
font-family:cursive;
font-size:9pt;
height:0 !important;
left:70px;
line-height:16px !important;
margin-top:16px;
position:absolute;
text-align:justify !important;
width:720px;
z-index:2;
}
.table_header:nth-of-type(6) {
display:none;
}
span[id*="tagRow"] {
display:block !important;
}
span[id*="tagLinks"] {
display:none !important;
}
a, .td1, .td2, .category_totals {
-webkit-transition:all 0.25s ease-in-out 0s;
}
/*CATEGORY LINKS, CURRENTLY WATCHING*/
#list_surround .status_selected, #list_surround .status_not_selected {
-webkit-background-clip:padding-box !important;
background-clip:padding-box !important;
background-color:transparent;
background-image:url(http://i51.tinypic.com/2e0qu02.png );
background-position:100% 0;
background-repeat:no-repeat no-repeat;
background-size:contain;
border:1px solid #FFFFFF;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
border-top-left-radius:20px;
border-top-right-radius:20px;
display:block;
left:-55%;
padding:0;
position:absolute;
top:374px;
width:400px;
}
/*COMPLETED*/
#list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected {
background-image:url(http://i56.tinypic.com/okc0b5.png );
background-position:100% 0;
top:474px;
}
/*ON HOLD*/
#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-image:url(http://i56.tinypic.com/npjgxy.png );
background-position:0 0;
top:574px;
}
/*DROPPED*/
#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-image:url(http://i53.tinypic.com/apiaud.png );
background-position:100% 0;
top:674px;
}
/*PLAN TO WATCH*/
#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-image:url(http://i52.tinypic.com/2emj6hg.png );
background-position:0 0;
top:774px;
}
/*ALL ANIME*/
#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-image:url(http://i51.tinypic.com/4volcp.png );
background-position:100% 0;
top:874px;
}
/*SIZE OF CATEGORY BOXES*/
.status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a {
color:transparent;
display:block;
height:80px;
width:400px;
}
/*CURRENTLY WATCHING HEADER*/
.header_cw {
background-color:transparent;
background-image:url(http://i53.tinypic.com/xm5og3.png );
background-position:0 135px;
background-repeat:no-repeat no-repeat;
height:50px;
margin-bottom:0;
margin-top:-100px;
}
/*COMPLETED HEADER*/
.header_completed {
background-color:transparent;
background-image:url(http://i55.tinypic.com/345htew.png );
background-position:0 135px;
background-repeat:no-repeat no-repeat;
height:50px;
margin-bottom:0;
margin-top:-100px;
}
/*ON HOLD HEADER*/
.header_onhold {
background-color:transparent;
background-image:url(http://i54.tinypic.com/35ddaaa.png );
background-position:0 135px;
background-repeat:no-repeat no-repeat;
height:50px;
margin-bottom:0;
margin-top:-100px;
}
/*DROPPED HEADER*/
.header_dropped {
background-color:transparent;
background-image:url(http://i52.tinypic.com/rw6kbl.png );
background-position:0 135px;
background-repeat:no-repeat no-repeat;
height:50px;
margin-bottom:0;
margin-top:-100px;
}
/*PLAN TO WATCH HEADER*/
.header_ptw {
background-color:transparent;
background-image:url(http://i52.tinypic.com/epg2fc.png );
background-position:0 135px;
background-repeat:no-repeat no-repeat;
height:50px;
margin-bottom:0;
margin-top:-100px;
}
/*CATEGORY LINK STUFF*/
.status_selected {
display:block;
}
.status_not_selected {
display:block;
}
.status_not_selected {
opacity:1;
}
.status_not_selected:hover {
color:transparent;
opacity:1;
}
/*COLOR OF THE "AIRING EXT." TEXT*/
.animetitle + small {
color:#FF809F !important;
font-weight:bold;
}
/*MAKES STUFF TRANSITION*/
* {
-webkit-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;
Here are my current styles, which I will be replacing soon.
Both are simple layouts with a simple transparent table. Text is outlined to increase readability.
Anime List:
/* Icon-style top menu bar */
@import "http://dl.dropbox.com/u/78340470/Touhou%20Style%20Menu%20Bar/IconStyleCSSFixedwithCategoryTouhou.css";
/*
// Self-explanatory*/
body
{
color:#51819f;
text-shadow:-1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
font-size:11px;
font-family:Verdana, Arial;
background-image:url('http://i.imgur.com/fE9NE.jpg ');
background-color:#000;
background-repeat:no-repeat;
background-position:center top;
background-attachment:fixed;
}
/*
// Determines the positioning of your list*/
#list_surround
{
width:900px;
margin:0 auto;
}
/*
// All links on your list*/
a
{
color:#F60;
text-decoration:none;
}
a:visited
{
color:#F60;
text-decoration:none;
}
a:hover
{
color:#F60;
text-decoration:underline;
}
/*
// Alternating row color 1 */
.td1
{
background:rgba(0, 0, 0, 0.75);
color:#999;
border-color:#333;
border-style:solid;
border-width:0 1px 1px 0;
padding:2px;
}
/*
// Alternating row color 2 */
.td2
{
background:rgba(0, 0, 0, 0.75);
color:#999;
border-color:#333;
border-style:solid;
border-width:0 1px 1px 0;
padding:2px;
}
/*
// This represents the "Anime Title", "Score", "# Eps" columns */
.table_header
{
color:#999;
background:rgba(0, 0, 0, 0.75);
border-color:#333;
border-style:solid;
border-width:1px 1px 1px 0;
padding:2px;
}
/*
// Controls the select form decoration (the drop down select box)*/
.form
{
color:#999;
font-size:11px;
font-family:Verdana, Arial;
border-color:#333;
border-style:solid;
border-width:1px;
padding:2px;
}
/* Which 'status' up top is selected? */
.status_selected
{
color:#000;
background:rgba(0, 0, 0, 0.75);
font-weight:700;
text-decoration:underline;
border-color:#333;
border-style:solid;
border-width:0 1px 1px 0;
padding:2px;
}
.status_selected a
{
text-decoration:underline;
}
.status_not_selected
{
color:#000;
background:rgba(0, 0, 0, 0.75);
border-color:#333;
border-style:solid;
border-width:0 1px 1px 0;
padding:2px;
}
/*
Header classes for Currently Watching, Completed, Dropped, etc...*/
.header_title
{
font-size:20px;
font-weight:700;
text-align:center;
text-shadow:-1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}
.category_totals
{
text-align:center;
background:rgba(0, 0, 0, 0.75);
border-color:#333;
border-style:solid;
border-width:0 1px 1px;
}
#grand_totals
{
text-align:center;
background:rgba(0, 0, 0, 0.75);
border-color:#333;
border-style:solid;
border-width:0 1px 1px;
}
/* header_al is thesurrounding "User's Anime List" at the top */
.header_al
{
font-weight:700;
font-size:16px;
}
/* header_al_links is thewith your "Profile" and "MyAnimeList home" links
controls what styles you can give to all the anime titles in your list */
.animetitle
{
font-weight:700;
}
/*
copyright contains the "Producted by Garrett Gyssler" text
DO NOT REMOVE OR HIDE THIS DIV
IF FOUND TO BE REMOVED, YOUR LIST WILL BE REMOVED TOO*/
#copyright
{
padding-top:6px;
text-align:center;
width:900px;
margin:0 auto;
}
Manga List:
/* Icon-style top menu bar */
@import "http://dl.dropbox.com/u/78340470/Touhou%20Style%20Menu%20Bar/IconStyleCSSFixedwithCategoryTouhou.css";
/*
// Self-explanatory*/
body
{
color:#999;
text-shadow:-1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
font-size:11px;
font-family:Verdana, Arial;
background-image:url('http://i.imgur.com/AHg72.jpg ');
background-color:#000;
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
}
/*
// Determines the positioning of your list*/
#list_surround
{
width:900px;
margin:0 auto;
}
/*
// All links on your list*/
a
{
color:#51819F;
text-decoration:none;
}
a:visited
{
color:#51819F;
text-decoration:none;
}
a:hover
{
color:#51819F;
text-decoration:underline;
}
/*
// Alternating row color 1 */
.td1
{
background:rgba(0, 0, 0, 0.5);
color:#999;
border-color:#333;
border-style:solid;
border-width:0 1px 1px 0;
padding:2px;
}
/*
// Alternating row color 2 */
.td2
{
background:rgba(0, 0, 0, 0.5);
color:#999;
border-color:#333;
border-style:solid;
border-width:0 1px 1px 0;
padding:2px;
}
/*
// This represents the "Anime Title", "Score", "# Eps" columns */
.table_header
{
color:#999;
background:rgba(0, 0, 0, 0.75);
border-color:#333;
border-style:solid;
border-width:1px 1px 1px 0;
padding:2px;
}
/*
// Controls the select form decoration (the drop down select box)*/
.form
{
color:#999;
font-size:11px;
font-family:Verdana, Arial;
border-color:#333;
border-style:solid;
border-width:1px;
padding:2px;
}
/* Which 'status' up top is selected? */
.status_selected
{
color:#000;
background:rgba(0, 0, 0, 0.75);
font-weight:700;
text-decoration:underline;
border-color:#333;
border-style:solid;
border-width:0 1px 1px 0;
padding:2px;
}
.status_selected a
{
text-decoration:underline;
}
.status_not_selected
{
color:#000;
background:rgba(0, 0, 0, 0.75);
border-color:#333;
border-style:solid;
border-width:0 1px 1px 0;
padding:2px;
}
/*
Header classes for Currently Watching, Completed, Dropped, etc...*/
.header_title
{
font-size:20px;
font-weight:700;
text-align:center;
text-shadow:-1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}
.category_totals
{
text-align:center;
background:rgba(0, 0, 0, 0.75);
border-color:#333;
border-style:solid;
border-width:0 1px 1px;
}
#grand_totals
{
text-align:center;
background:rgba(0, 0, 0, 0.75);
border-color:#333;
border-style:solid;
border-width:1px 1px 1px 1px;
}
/* header_al is thesurrounding "User's Anime List" at the top */
.header_al
{
font-weight:700;
font-size:16px;
}
/* header_al_links is thewith your "Profile" and "MyAnimeList home" links
controls what styles you can give to all the anime titles in your list */
.animetitle
{
font-weight:700;
}
/*
copyright contains the "Producted by Garrett Gyssler" text
DO NOT REMOVE OR HIDE THIS DIV
IF FOUND TO BE REMOVED, YOUR LIST WILL BE REMOVED TOO*/
#copyright
{
padding-top:6px;
text-align:center;
width:900px;
margin:0 auto;
}
removed-user May 27, 2013 4:55 AM
Offline
May 2012
1921
Edit: Check this topic for the code
Hey guys, just gonna donate my One Piece layout.
Dont think gonna change anything grand, as I'm pretty pleased with the layout. Feel free to use it !
BG changes as you change category
even marked my favs, to know how to mark your favs check Shishio's tut
@import "http://dl.dropbox.com/u/102421246/MAL/CSS/AnoHanaCustom2/topbarAnohana.css";
@import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css";
@import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300 );
@import "https://dl.dropboxusercontent.com/u/102421246/MAL/CSS/OpEditButton.css";
* {
text-decoration: none;
}
body {
background-attachment: fixed;
background-clip: border-box;
background-color: transparent;
background-image: url("");
background-position: 0 83%;
background-repeat: no-repeat no-repeat;
background-size: cover;
cursor: url("http://i33.tinypic.com/2zh4gbb.png") 1 2, auto;
font-family: Open Sans;
}
#inlineContent {
background-image: url("");
background-repeat: no-repeat no-repeat;
display: inline-block !important;
height: 3000px !important;
left: 0 !important;
margin: auto !important;
position: fixed;
top: 0 !important;
width: 3000px !important;
z-index: -4 !important;
}
#list_surround {
background-attachment: scroll;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Rndm/One%20Piece/Very_Big_One_Piece_Logo_by_hothcoldsmall_zps6f8b1223.png:original");
background-position: 50% 0;
background-repeat: no-repeat no-repeat;
font-size: 81.25%;
height: 250px;
line-height: 1;
margin: 0 auto;
padding-bottom: 10px;
padding-top: 228px;
position: absolute;
top: 100px;
width: 650px;
right: 400px !important;
}
td[class^="td"]:nth-of-type(2) {
width: 505px !important;
}
tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 {
color: white;
text-shadow: 1px 1px black;
}
tr:hover [class^="td"] {
background-color: rgba(196, 30, 14, 0.9);
transition: all 0.4s ease 0s;
}
a, .table_header, .category_totals {
color: black;
cursor: url("http://i33.tinypic.com/2zh4gbb.png") 1 2, auto;
text-shadow: none;
}
a:hover {
color: #3167A9 !important;
cursor: url("http://i33.tinypic.com/2zh4gbb.png") 1 2, auto;
text-shadow: 1px 2px 3px white;
}
.table_header:first-of-type {
border-radius: 20px 0 0 0;
}
.table_header:nth-of-type(2) {
text-align: left;
}
.table_header:nth-of-type(5) {
border-bottom-right-radius: 0;
border-top-left-radius: 0;
border-top-right-radius: 20px;
}
.table_header, .td1, .td2, .category_totals {
background-color: rgba(234, 203, 82, 0.8);
border: 0 none;
padding: 3px;
text-align: center;
vertical-align: top;
}
.td1:nth-of-type(2), .td2:nth-of-type(2) {
text-align: left;
}
.table_header:nth-of-type(6) {
display: none;
width: 0;
}
small {
color: red;
font-weight: bold;
text-shadow: 1px 1px 1px black;
font-size: 11px;
}
.borderRBL {
line-height: normal !important;
}
[cellspacing="0"] {
line-height: 17px;
}
.category_totals {
background-color: rgba(234, 203, 82, 0.8);
border-radius: 0 0 12px 12px;
text-align: center;
}
.category_totals:hover {
background-color: rgba(196, 30, 14, 0.7);
color: #FFFFFF;
}
[class^="header_"] * {
background-repeat: no-repeat no-repeat;
font-size: 0;
height: 200px;
line-height: 24px;
padding-bottom: 0;
text-align: right;
vertical-align: bottom;
}
.header_title {
border-radius: 4px 4px 4px 4px;
color: #FFFFFF;
display: inline-block;
font-style: italic;
height: auto;
padding: 0 8px 0 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
#grand_totals {
background-color: rgba(234, 203, 82, 0.8);
border: 0 none;
border-radius: 3px 3px 3px 3px;
color: #FFFFFF;
line-height: 20px;
min-height: 20px;
padding: 8px;
text-align: center;
vertical-align: middle;
}
.status_not_selected {
opacity: 0.85;
z-index: -1;
}
.status_not_selected:hover {
color: transparent;
opacity: 1;
transition: all 0.4s ease 0s;
z-index: 2 !important;
}
.status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a {
color: transparent;
display: block;
height: 350px;
opacity: 0;
width: 247px;
}
.status_selected {
display: block;
}
.status_not_selected {
display: block;
}
.header_cw {
background-color: transparent;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Rndm/One%20Piece/WatchingHeader_zps6e749171.png:original");
background-position: 51% 0;
background-repeat: no-repeat no-repeat;
height: 200px;
margin-bottom: -44px;
margin-top: -15px;
}
.header_completed {
background-color: transparent;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Rndm/One%20Piece/CompletedHeader_zps5a2f4e3c.png:original");
background-position: 51% 0;
background-repeat: no-repeat no-repeat;
height: 200px;
margin-bottom: -44px;
margin-top: -15px;
z-index: 0;
}
.header_onhold {
background-color: transparent;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Rndm/One%20Piece/OnHold_zps74b8c559.png:original");
background-position: 51% 0;
background-repeat: no-repeat no-repeat;
height: 200px;
margin-bottom: -44px;
margin-top: -15px;
}
.header_dropped {
background-color: transparent;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Rndm/One%20Piece/DroppedHeader_zps247ab1ab.png:original");
background-position: 51% 0;
background-repeat: no-repeat no-repeat;
height: 200px;
margin-bottom: -44px;
margin-top: -15px;
}
.header_ptw {
background-color: transparent;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Rndm/One%20Piece/PlanningHeader_zpsc8f609b4.png:original");
background-position: 51% 0;
background-repeat: no-repeat no-repeat;
height: 200px;
margin-bottom: -44px;
margin-top: -15px;
}
.header_cw:before {
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Rndm/One%20Piece/OceanWP1_zpsf279e7f5.jpg:original");
background-position: 0% 100% !important;
background-repeat: no-repeat;
background-size: cover;
content: "";
display: block;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -10 !important;
}
.header_completed:before {
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Rndm/One%20Piece/OceanWP2_zps7b30efca.jpg:original");
background-position: 0% 100% !important;
background-repeat: no-repeat;
background-size: cover;
content: "";
display: block;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -10 !important;
}
.header_onhold:before {
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Rndm/One%20Piece/OceanWP3_zpsc0e531a4.jpg:original");
background-position: 0 100% !important;
background-repeat: no-repeat;
background-size: cover;
content: "";
display: block;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -10 !important;
}
.header_dropped:before {
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Rndm/One%20Piece/OceanWP4_zpsf04294a6.jpg:original");
background-position: 0 100% !important;
background-repeat: no-repeat;
background-size: cover;
content: "";
display: block;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -10 !important;
}
.header_ptw:before {
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Rndm/One%20Piece/OceanWP5_zps5de73de7.jpg:original");
background-position: 0 100% !important;
background-repeat: no-repeat;
background-size: cover;
content: "";
display: block;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -10 !important;
}
#list_surround .status_selected, #list_surround .status_not_selected {
background-attachment: scroll;
background-color: transparent;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Rndm/One%20Piece/LuffyWanted_zps96ee1a38.png:original");
background-position: 0 -5px;
background-repeat: no-repeat no-repeat;
display: block;
height: 345px;
left: 69px;
padding: 0;
position: fixed;
top: -7px;
transform: rotate(20deg);
-webkit-transform: rotate(20deg);
width: 247px;
}
#list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected {
background-attachment: scroll;
background-color: transparent;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Rndm/One%20Piece/NamiWanted_zps768b9dfa.png:original");
background-position: 0 -5px;
background-repeat: repeat repeat;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
left: 230px;
top: 20px;
transform: rotate(25deg);
-webkit-transform: rotate(25deg);
}
#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-attachment: scroll;
background-color: transparent;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Rndm/One%20Piece/ZoroWantededit_zpsea14d42f.png:original");
background-position: 0 -5px;
background-repeat: repeat repeat;
left: 20px;
top: 290px;
transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
}
#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-attachment: scroll;
background-color: transparent;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Rndm/One%20Piece/ChopperWantededit_zpscbfc7f7f.png:original");
background-position: 0 -7px;
background-repeat: repeat repeat;
top: 44px;
transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
}
#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-attachment: scroll;
background-color: transparent;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Rndm/One%20Piece/RobinWantededit_zpsd08df77f.png:original");
background-position: 0 -5px;
background-repeat: repeat repeat;
display: inline;
left: 160px;
top: 110px;
transform: rotate(43deg);
-webkit-transform: rotate(43deg);
}
#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-attachment: scroll;
background-color: transparent;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Rndm/One%20Piece/AllCrew_zps5d8b02b5.png:original");
background-position: 0 0;
background-repeat: no-repeat no-repeat;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
display: inline;
left: 150px;
top: 260px;
transform: rotate(13deg) !important;
-webkit-transform: rotate(13deg) !important;
width: 247px;
}
:hover + .hide {
background-repeat: no-repeat !important;
background-size: 242px 284px !important;
display: block !important;
height: 274px;
position: fixed;
right: calc(67% + 70px) !important;
top: 232px;
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
width: 242px;
z-index: 2;
}
:hover + .hide:after {
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Rndm/One%20Piece/PrevBox_zpsb9782941.png:original");
background-repeat: no-repeat;
background-size: 270px 370px;
content: "";
display: block;
height: 376px;
position: fixed;
right: -14px !important;
top: -17px !important;
width: 270px;
z-index: -2;
}
.hide:before {
border-radius: 25px 25px 0 0;
color: red;
content: "";
font-size: 14pt;
font-weight: bold;
padding-bottom: 5px;
position: absolute;
text-align: center;
top: 276px;
width: 217px;
}
.td1:nth-of-type(6) a, .td2:nth-of-type(6) a {
color: black !important;
text-shadow: 1px 2px 3px white !important;
}
.td1:nth-of-type(6), .td2:nth-of-type(6) {
background-color: rgba(234, 203, 82, 0.9) !important;
background-image: url("none") !important;
border-radius: 0px 33px 0 33px;
display: none;
font-size: 14px;
height: auto;
padding: 10px 10px 10px 24px;
position: fixed;
right: calc(67% + 0px);
text-align: center;
top: 621px;
width: 235px;
z-index: 1;
border: 2px solid white;
}
.table_header:nth-of-type(6) {
display: none;
}
#copyright, #copyright:hover {
background-color: rgba(196, 30, 14, 0.7);
border-radius: 5px 5px 5px 5px;
bottom: 0;
color: white;
padding: 2px;
width: 100%;
}
#copyright:hover {
}
#copyright:before {
color: black;
content: " Design by SylakentH_, thanks to Monsterguy, DeviantArt and Shishio Club!";
font-size: 12px;
padding-right: 10px;
}
#copyright:after {
color: gold;
content: " ";
padding-left: 20px;
}
#copyright a {
}
/*Mark your favs here*/
a[href=""], [href=""] {
background-attachment: scroll;
background-color: transparent;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Rndm/One%20Piece/LuffyFlagFav_zpse916b730.png:original");
background-position: left top;
background-repeat: no-repeat;
padding-bottom: 10px;
padding-left: 25px;
}
@media all and (max-width: 1366px) { #list_surround { position: absolute !important; left: 500px; } }
@media all and (max-width: 2500px) { #list_surround { position: absolute !important; right: 500px; width: 700px; } }
SylakentH Jun 26, 2013 12:54 PM
Offline
May 2012
1921
Edit: Check this topic for the code
Hey guys!
Here I go again, probably getting on your nerves huh :P
Wanted to share a Luka Megurine featured layout, although there isnt much of her to be seen.
Luka Megurine Layout
The anime list version
When you hover over a row, the relative pic appears.
Code
@import "https://dl.dropbox.com/s/4u9v39e5go65aoq/PinkTopBar.css";
@import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css";
@import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css";
@import "http://fonts.googleapis.com/css?family=Patrick+Hand+SC";
@import "https://dl.dropboxusercontent.com/u/102421246/MAL/CSS/EditButtonVocaloid.css";
* {
text-decoration: none;
}
body {
background-attachment: fixed;
background-clip: border-box;
background-color: transparent;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Vocaloid/MegurineLukafull548036_zps61563341.jpg~original");
background-position: 67% 0;
background-repeat: no-repeat no-repeat;
background-size: cover;
font-family: Patrick Hand Sc;
}
#list_surround {
background-attachment: fixed;
background-position: 24% 0;
background-repeat: no-repeat no-repeat;
font-size: 19px;
height: 250px;
left: 19% !important;
line-height: 1;
margin: 0 auto;
padding-bottom: 0;
padding-top: 0;
position: absolute;
width: 600px;
z-index: 0;
}
a {
color: white;
text-shadow: none;
}
td[class^="td"]:nth-of-type(2) {
width: 369px !important;
}
tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 {
color: #3167A9;
font-weight: bold;
transition: all 0.4s ease 0s;
}
a:hover {
color: yellow !important;
text-shadow: 0 1px rgba(255, 255, 255, 0.15);
}
.td1:nth-of-type(5), .td2:nth-of-type(5) {
border-right: 2px solid white !important;
color: white;
}
.td1:nth-of-type(1), .td2:nth-of-type(1) {
border-left: 2px solid white !important;
color: white;
}
.table_header:nth-of-type(1),.table_header:nth-of-type(2),.table_header:nth-of-type(3),.table_header:nth-of-type(4),.table_header:nth-of-type(5) {
border-top: 2px solid white !important;
}
.table_header:nth-of-type(1) {
border-left: 2px solid white !important;
color: white;
}
.table_header:nth-of-type(2) {
text-align: left;
}
.table_header:nth-of-type(5) {
border-bottom-right-radius: 0;
border-right: 2px solid white;
border-top-left-radius: 0;
color: white;
}
.table_header, .category_totals {
background-color: rgba(213, 190, 196, 0.9);
border: 0 none;
opacity: 1;
padding: 4px;
text-align: center;
vertical-align: top;
}
.td1, .td2 {
background: none repeat scroll 0 0 rgba(213, 190, 196, 0.9);
color: white !important;
padding: 5px;
}
.td1:nth-of-type(2), .td2:nth-of-type(2) {
text-align: left;
}
.table_header:nth-of-type(6) {
display: none;
width: 0;
}
small {
color: #F71C88;
font-weight: bold;
}
.table_header, .td1, .td2, .category_totals {
color: grey;
}
.borderRBL {
line-height: normal !important;
}
[cellspacing="0"] {
line-height: 17px;
}
.category_totals {
background-color: rgba(213, 190, 196, 0.9);
border-bottom: 2px solid white;
border-left: 2px solid white !important;
border-radius: 0 0 12px 12px;
border-right: 2px solid white;
text-align: center;
}
.category_totals:hover {
background-color: #C41E0E;
color: #FFFFFF;
}
[class^="header_"] * {
background-repeat: no-repeat no-repeat;
border-left: 2px solid white !important;
border-radius: 20px 20px 0 0;
border-right: 2px solid white !important;
border-top: 2px solid white !important;
font-size: 0;
height: 130px;
line-height: 24px;
padding-bottom: 0;
text-align: right;
vertical-align: bottom;
}
.header_title {
border: medium none !important;
color: transparent !important;
display: none;
font-size: 0 !important;
font-style: italic;
height: auto;
padding: 0 8px 0 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
#grand_totals {
background-color: rgba(213, 190, 196, 0.9);
border: 0 none;
border-radius: 3px 3px 3px 3px;
color: White;
line-height: 20px;
min-height: 20px;
padding: 8px;
text-align: center;
vertical-align: middle;
}
.status_not_selected {
}
.status_not_selected:hover {
background-color: #e6d3d7;
color: transparent;
transition: all 0.4s ease 0s;
}
.status_selected:hover a, .status_not_selected:hover a {
text-decoration: underline;
}
.status_not_selected a {
}
.status_selected a {
color: #3167A9 !important;
display: block;
height: 50px;
padding-right: 0;
width: 139px;
}
.status_selected {
background-color: #e6d3d7 !important;
color: #3167A9 !important;
}
.status_not_selected {
display: block;
}
.status_selected, .status_not_selected {
background: none repeat scroll 0 0 rgba(213, 190, 196, 0.9);
border-right: 2px solid white;
border-top: 2px solid white;
border-top-right-radius: 91px;
height: 36px;
left: 0;
margin-top: 317px;
padding-left: 0;
padding-top: 21px;
position: fixed;
}
.status_selected + .status_not_selected, .status_not_selected + .status_selected, .status_not_selected + .status_not_selected {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: -moz-use-text-color white -moz-use-text-color -moz-use-text-color;
border-image: none;
border-radius: 0 0 0 0;
border-style: none solid none none;
border-width: medium 2px medium medium;
height: 33px;
left: 0;
margin-top: 375px;
padding-top: 9px;
position: fixed;
width: 165px;
}
.status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected {
height: 33px;
left: 0;
margin-top: 417px;
position: fixed;
}
.status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
height: 33px;
left: 0;
margin-top: 459px;
position: fixed;
}
.status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
height: 33px;
left: 0;
margin-top: 501px;
position: fixed;
}
.status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
border-bottom: 2px solid white;
border-bottom-right-radius: 91px;
height: 33px;
left: 0;
margin-top: 543px;
padding-bottom: 10px;
position: fixed;
}
.header_cw {
background-color: rgba(213, 190, 196, 0.9) !important;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Vocaloid/HeaderCw_zps67e9b030.png~original");
background-position: 59% 1px;
background-repeat: no-repeat no-repeat;
border-radius: 20px 20px 0 0;
height: 200px;
z-index: 0 !important;
}
.header_completed {
background-color: rgba(213, 190, 196, 0.9) !important;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Vocaloid/ComHeader_zpsf5c0292b.png~original");
background-position: 50% 0;
background-repeat: no-repeat no-repeat;
height: 200px;
z-index: 0;
border-radius: 20px 20px 0 0;
}
.header_onhold {
background-color: rgba(213, 190, 196, 0.9) !important;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Vocaloid/HoldHeader_zps8f3e7ade.png~original");
background-position: 50% 0;
background-repeat: no-repeat no-repeat;
height: 200px;
border-radius: 20px 20px 0 0;
}
.header_dropped {
background-color: rgba(213, 190, 196, 0.9) !important;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Vocaloid/DroppedHeader_zps3527a1d1.png~original");
background-position: 50% 0;
background-repeat: no-repeat no-repeat;
height: 200px;
border-radius: 20px 20px 0 0;
}
.header_ptw {
background-color: rgba(213, 190, 196, 0.9) !important;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Vocaloid/PlanningHeader_zps61287309.png~original");
background-position: 50% 0;
background-repeat: no-repeat no-repeat;
height: 200px;
border-radius: 20px 20px 0 0;
}
:hover + .hide {
background-position: center 50% !important;
background-repeat: no-repeat !important;
background-size: cover;
border-color: white;
border-radius: 25px 25px 25px 25px;
border-style: solid;
border-width: 3px;
display: block !important;
height: 350px;
left: 1001px;
padding-bottom: 0;
position: fixed;
top: 160px;
width: 226px;
}
.hide:before {
background: none repeat scroll 0 0 transparent;
border-radius: 25px 25px 0 0;
color: white;
content: "";
padding-bottom: 5px;
position: absolute;
text-align: center;
top: -25px;
width: 225px;
}
.td1:nth-of-type(6) a, .td2:nth-of-type(6) a {
color: white !important;
font-weight: normal !important;
}
.td1:nth-of-type(6), .td2:nth-of-type(6) {
background-color: rgba(241, 114, 169, 0.7) !important;
border-color: white;
border-radius: 25px 25px 25px 25px;
border-style: solid;
border-width: 1px;
display: none;
height: auto;
left: 995px;
padding: 10px 10px 14px 24px;
position: fixed;
top: 522px;
width: 212px;
z-index: 1;
}
#copyright, #copyright:hover {
background-color: rgba(213, 190, 196, 0.9);
border: 1px solid white;
border-radius: 5em 5em 0 0;
bottom: -22px;
color: white;
font-size: 12px;
padding: 19px;
position: fixed;
right: 33px;
width: 137px;
}
#copyright:before {
color: white;
content: " Check Shishio-kun Club!";
font-size: 17px;
padding-right: 10px;
padding-top: 10px !important;
}
#copyright:after {
color: #FFD700;
content: " ";
padding-left: 20px;
}
Also you can mark your favs
Add this Code to the bottom
Code
a [href="AnimeURL1 "], [href="AnimeURL2 "] {
background-attachment: scroll;
background-color: transparent;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Vocaloid/LukaFav_zps63939cb3.png~original");
background-position: left top;
background-repeat: no-repeat;
color: gold !important;
padding-bottom: 10px;
padding-left: 35px;
text-shadow: 0 1px 2px black;
}
There's also a Manga version available
Code
@import "https://dl.dropbox.com/s/4u9v39e5go65aoq/PinkTopBar.css";
@import "http://dl.dropbox.com/u/49469857/MAL/premade/manga.css";
@import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css";
@import "http://fonts.googleapis.com/css?family=Patrick+Hand+SC";
@import "https://dl.dropboxusercontent.com/u/102421246/MAL/CSS/EditButtonVocaloid.css";
* {
text-decoration: none;
}
body {
background-attachment: fixed;
background-clip: border-box;
background-color: transparent;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Vocaloid/MegurineLukafull548036_zps61563341.jpg~original");
background-position: 67% 0;
background-repeat: no-repeat no-repeat;
background-size: cover;
font-family: Patrick Hand Sc;
}
#list_surround {
background-attachment: fixed;
background-position: 24% 0;
background-repeat: no-repeat no-repeat;
font-size: 19px;
height: 250px;
left: 19% !important;
line-height: 1;
margin: 0 auto;
padding-bottom: 0;
padding-top: 0;
position: absolute;
width: 600px;
z-index: 0;
}
td[class^="td"]:nth-of-type(2) {
width: 369px !important;
}
a {
color: white;
text-shadow: none;
}
tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 {
color: #3167A9;
font-weight: bold;
transition: all 0.4s ease 0s;
}
a:hover {
color: yellow !important;
text-shadow: 0 1px rgba(255, 255, 255, 0.15);
}
.td1:nth-of-type(5), .td2:nth-of-type(5) {
border-right: 2px solid white !important;
color: white;
}
.td1:nth-of-type(1), .td2:nth-of-type(1) {
border-left: 2px solid white !important;
color: white;
}
.table_header:nth-of-type(1), .table_header:nth-of-type(2), .table_header:nth-of-type(3), .table_header:nth-of-type(4), .table_header:nth-of-type(5) {
border-top: 2px solid white !important;
}
.table_header:nth-of-type(1) {
border-left: 2px solid white !important;
color: white;
}
.table_header:nth-of-type(2) {
text-align: left;
}
.table_header:nth-of-type(5) {
border-bottom-right-radius: 0;
border-right: 2px solid white;
border-top-left-radius: 0;
color: white;
}
.table_header, .category_totals {
background-color: rgba(213, 190, 196, 0.9);
border: 0 none;
opacity: 1;
padding: 4px;
text-align: center;
vertical-align: top;
}
.td1, .td2 {
background: none repeat scroll 0 0 rgba(213, 190, 196, 0.9);
color: white !important;
padding: 5px;
}
.td1:nth-of-type(2), .td2:nth-of-type(2) {
text-align: left;
}
.table_header:nth-of-type(6) {
display: none;
width: 0;
}
small {
color: #F71C88;
font-weight: bold;
}
.table_header, .td1, .td2, .category_totals {
color: grey;
}
.borderRBL {
line-height: normal !important;
}
[cellspacing="0"] {
line-height: 17px;
}
.category_totals {
background-color: rgba(213, 190, 196, 0.9);
border-bottom: 2px solid white;
border-left: 2px solid white !important;
border-radius: 0 0 12px 12px;
border-right: 2px solid white;
text-align: center;
}
.category_totals:hover {
background-color: #C41E0E;
color: #FFFFFF;
}
[class^="header_"] * {
background-repeat: no-repeat no-repeat;
border-left: 2px solid white !important;
border-radius: 20px 20px 0 0;
border-right: 2px solid white !important;
border-top: 2px solid white !important;
font-size: 0;
height: 130px;
line-height: 24px;
padding-bottom: 0;
text-align: right;
vertical-align: bottom;
}
.header_title {
border: medium none !important;
color: transparent !important;
display: none;
font-size: 0 !important;
font-style: italic;
height: auto;
padding: 0 8px 0 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
#grand_totals {
background-color: rgba(213, 190, 196, 0.9);
border: 0 none;
border-radius: 3px 3px 3px 3px;
color: White;
line-height: 20px;
min-height: 20px;
padding: 8px;
text-align: center;
vertical-align: middle;
}
.status_not_selected {
}
.status_not_selected:hover {
background-color: #e6d3d7;
color: transparent;
transition: all 0.4s ease 0s;
}
.status_selected:hover a, .status_not_selected:hover a {
text-decoration: underline;
}
.status_not_selected a {
}
.status_selected a {
color: #3167A9 !important;
display: block;
height: 50px;
padding-right: 0;
width: 139px;
}
.status_selected {
background-color: #e6d3d7 !important;
color: #3167A9 !important;
}
.status_not_selected {
display: block;
}
.status_selected, .status_not_selected {
background: none repeat scroll 0 0 rgba(213, 190, 196, 0.9);
border-right: 2px solid white;
border-top: 2px solid white;
border-top-right-radius: 91px;
height: 36px;
left: 0;
margin-top: 317px;
padding-left: 0;
padding-top: 21px;
position: fixed;
}
.status_selected + .status_not_selected, .status_not_selected + .status_selected, .status_not_selected + .status_not_selected {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: -moz-use-text-color white -moz-use-text-color -moz-use-text-color;
border-image: none;
border-radius: 0 0 0 0;
border-style: none solid none none;
border-width: medium 2px medium medium;
height: 33px;
left: 0;
margin-top: 375px;
padding-top: 9px;
position: fixed;
width: 165px;
}
.status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected {
height: 33px;
left: 0;
margin-top: 417px;
position: fixed;
}
.status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
height: 33px;
left: 0;
margin-top: 459px;
position: fixed;
}
.status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
height: 33px;
left: 0;
margin-top: 501px;
position: fixed;
}
.status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
border-bottom: 2px solid white;
border-bottom-right-radius: 91px;
height: 33px;
left: 0;
margin-top: 543px;
padding-bottom: 10px;
position: fixed;
}
.header_cw {
background-color: rgba(213, 190, 196, 0.9) !important;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Vocaloid/ReadingHeader_zpsd93c776b.png~original");
background-position: 59% 1px;
background-repeat: no-repeat no-repeat;
border-radius: 20px 20px 0 0;
height: 200px;
z-index: 0 !important;
}
.header_completed {
background-color: rgba(213, 190, 196, 0.9) !important;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Vocaloid/ComHeader_zpsf5c0292b.png~original");
background-position: 50% 0;
background-repeat: no-repeat no-repeat;
height: 200px;
z-index: 0;
}
.header_onhold {
background-color: rgba(213, 190, 196, 0.9) !important;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Vocaloid/HoldHeader_zps8f3e7ade.png~original");
background-position: 50% 0;
background-repeat: no-repeat no-repeat;
height: 200px;
}
.header_dropped {
background-color: rgba(213, 190, 196, 0.9) !important;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Vocaloid/DroppedHeader_zps3527a1d1.png~original");
background-position: 50% 0;
background-repeat: no-repeat no-repeat;
height: 200px;
}
.header_ptw {
background-color: rgba(213, 190, 196, 0.9) !important;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Vocaloid/PlanningHeader_zps61287309.png~original");
background-position: 50% 0;
background-repeat: no-repeat no-repeat;
height: 200px;
}
:hover + .hide {
background-position: center 50% !important;
background-repeat: no-repeat !important;
background-size: cover;
border-color: white;
border-radius: 25px 25px 25px 25px;
border-style: solid;
border-width: 3px;
display: block !important;
height: 350px;
left: 1001px;
padding-bottom: 0;
position: fixed;
top: 160px;
width: 226px;
}
.hide:before {
background: none repeat scroll 0 0 transparent;
border-radius: 25px 25px 0 0;
color: white;
content: "";
padding-bottom: 5px;
position: absolute;
text-align: center;
top: -25px;
width: 225px;
}
.td1:nth-of-type(6) a, .td2:nth-of-type(6) a {
color: white !important;
font-weight: normal !important;
}
.td1:nth-of-type(6), .td2:nth-of-type(6) {
background-color: rgba(241, 114, 169, 0.7) !important;
border-color: white;
border-radius: 25px 25px 25px 25px;
border-style: solid;
border-width: 1px;
display: none;
height: auto;
left: 995px;
padding: 10px 10px 14px 24px;
position: fixed;
top: 522px;
width: 212px;
z-index: 1;
}
#copyright, #copyright:hover {
background-color: rgba(213, 190, 196, 0.9);
border: 1px solid white;
border-radius: 5em 5em 0 0;
bottom: -22px;
color: white;
font-size: 12px;
padding: 19px;
position: fixed;
right: 33px;
width: 137px;
}
#copyright:before {
color: white;
content: " Check Shishio-kun Club!";
font-size: 17px;
padding-right: 10px;
padding-top: 10px !important;
}
#copyright:after {
color: #FFD700;
content: " ";
padding-left: 20px;
}
Mark your favs with the code below
Add this Code to the bottom
Code
a [href="MangaURL1 "], [href="MangaURL2 "] {
background-attachment: scroll;
background-color: transparent;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Vocaloid/LukaFav_zps63939cb3.png~original");
background-position: left top;
background-repeat: no-repeat;
color: gold !important;
padding-bottom: 10px;
padding-left: 35px;
text-shadow: 0 1px 2px black;
}
Hatsune Miku Layout
AnimeList version
When you hover over a row, the relative pic appears.
@import "https://dl.dropbox.com/s/nf9dc7ifauzlqha/Blue%20TopBar.css";
@import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css";
@import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css";
@import "http://fonts.googleapis.com/css?family=Patrick+Hand+SC";
@import "https://dl.dropboxusercontent.com/u/102421246/MAL/CSS/EditButtonVocaloidMiku.css";
* {
text-decoration: none;
}
body {
background-attachment: fixed;
background-clip: border-box;
background-color: transparent;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Vocaloid/Miku/Miku-Hatsune-Wallpaper-hatsune-miku-26723382-1920-1200_zpscfbe9d51.jpg~original");
background-position: 23% 0;
background-repeat: no-repeat no-repeat;
background-size: cover;
font-family: Patrick Hand Sc;
}
#list_surround {
background-attachment: fixed;
background-position: 24% 0;
background-repeat: no-repeat no-repeat;
font-size: 19px;
height: 250px;
left: 19% !important;
line-height: 1;
margin: 0 auto;
padding-bottom: 0;
padding-top: 0;
position: absolute;
width: 600px;
z-index: 0;
}
a {
color: white;
text-shadow: none;
}
tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 {
color: #1E3C82;
font-weight: bold;
transition: all 0.4s ease 0s;
}
td[class^="td"]:nth-of-type(2) {
width: 369px !important;
}
a:hover {
color: yellow !important;
text-shadow: 0 1px rgba(255, 255, 255, 0.15);
}
.td1:nth-of-type(5), .td2:nth-of-type(5) {
border-right: 2px solid white !important;
color: white;
}
.td1:nth-of-type(1), .td2:nth-of-type(1) {
border-left: 2px solid white !important;
color: white;
}
.table_header:nth-of-type(1) {
border-left: 2px solid white !important;
color: white;
}
.table_header:nth-of-type(2) {
text-align: left;
}
.table_header:nth-of-type(1), .table_header:nth-of-type(2), .table_header:nth-of-type(3), .table_header:nth-of-type(4), .table_header:nth-of-type(5), .table_header:nth-of-type(6) {
border-top: 2px solid white !important;
}
.table_header:nth-of-type(5) {
border-bottom-right-radius: 0;
border-right: 2px solid white;
border-top-left-radius: 0;
color: white;
}
.table_header, .category_totals {
background-color: rgba(94, 211, 229, 0.9);
border: 0 none;
opacity: 1;
padding: 4px;
text-align: center;
vertical-align: top;
}
.td1, .td2 {
background: none repeat scroll 0 0 rgba(94, 211, 229, 0.9);
color: white !important;
padding: 5px;
}
.td1:nth-of-type(2), .td2:nth-of-type(2) {
text-align: left;
}
.table_header:nth-of-type(6) {
display: none;
width: 0;
}
small {
color: #1370A5;
font-weight: bold;
}
.table_header, .td1, .td2, .category_totals {
color: grey;
}
.borderRBL {
line-height: normal !important;
}
[cellspacing="0"] {
line-height: 17px;
}
.category_totals {
background-color: rgba(94, 211, 229, 0.9);
border-bottom: 2px solid white;
border-left: 2px solid white !important;
border-radius: 0 0 12px 12px;
border-right: 2px solid white;
color: grey;
text-align: center;
}
.category_totals:hover {
background-color: #C41E0E;
color: #FFFFFF;
}
[class^="header_"] * {
background-repeat: no-repeat no-repeat;
border-left: 2px solid white !important;
border-radius: 20px 20px 0 0;
border-right: 2px solid white !important;
border-top: 2px solid white !important;
font-size: 0;
height: 130px;
line-height: 24px;
padding-bottom: 0;
text-align: right;
vertical-align: bottom;
}
.header_title {
border: medium none !important;
color: transparent !important;
display: none;
font-size: 0 !important;
font-style: italic;
height: auto;
padding: 0 8px 0 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
#grand_totals {
background-color: rgba(94, 211, 229, 0.9);
border: 0 none;
border-radius: 3px 3px 3px 3px;
color: white;
line-height: 20px;
min-height: 20px;
padding: 8px;
text-align: center;
vertical-align: middle;
}
.status_not_selected {
}
.status_not_selected:hover {
color: transparent;
background-color: #36f2fe;
transition: all 0.4s ease 0s;
}
.status_selected:hover a, .status_not_selected:hover a {
text-decoration: underline;
}
.status_not_selected a {
}
.status_selected a {
color: #3167A9 !important;
display: block;
height: 50px;
padding-right: 0px;
width: 139px;
}
.status_selected {
color: #3167A9 !important;
background-color: #36f2fe !important;
}
.status_not_selected {
display: block;
}
.status_selected, .status_not_selected {
background: none repeat scroll 0 0 rgba(94, 211, 229, 0.9);
border-right: 2px solid white;
border-top: 2px solid white;
border-top-right-radius: 91px;
height: 36px;
left: 0;
margin-top: 317px;
padding-left: 0;
padding-top: 21px;
position: fixed;
}
.status_selected + .status_not_selected, .status_not_selected + .status_selected, .status_not_selected + .status_not_selected {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: -moz-use-text-color white -moz-use-text-color -moz-use-text-color;
border-image: none;
border-radius: 0 0 0 0;
border-style: none solid none none;
border-width: medium 2px medium medium;
height: 33px;
left: 0;
margin-top: 375px;
padding-top: 9px;
position: fixed;
width: 165px;
}
.status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected {
height: 33px;
left: 0;
margin-top: 417px;
position: fixed;
}
.status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
height: 33px;
left: 0;
margin-top: 459px;
position: fixed;
}
.status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
height: 33px;
left: 0;
margin-top: 501px;
position: fixed;
}
.status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
border-bottom: 2px solid white;
border-bottom-right-radius: 91px;
height: 33px;
left: 0;
margin-top: 543px;
padding-bottom: 10px;
position: fixed;
}
.header_cw {
background-color: rgba(94, 211, 229, 0.9);
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Vocaloid/Miku/CWHeaderMiku_zps68f73883.png~original");
background-position: 97% 0;
background-repeat: no-repeat no-repeat;
border-radius: 20px 20px 0 0;
height: 200px;
z-index: 0 !important;
}
.header_completed {
background-color: rgba(94, 211, 229, 0.9);
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Vocaloid/Miku/ComHeaderMiku_zps5a5691b7.png~original");
background-position: 50% 0;
background-repeat: no-repeat no-repeat;
border-radius: 20px 20px 0 0;
height: 200px;
z-index: 0;
}
.header_onhold {
background-color: rgba(94, 211, 229, 0.9);
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Vocaloid/Miku/HoldHeaderMiku_zpsdd0a1a59.png~original");
background-position: 100% 0;
background-repeat: no-repeat no-repeat;
border-radius: 20px 20px 0 0;
height: 200px;
}
.header_dropped {
background-color: rgba(94, 211, 229, 0.9);
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Vocaloid/Miku/DroppedHeaderMiku_zps0aa78dc4.png~original");
background-position: 50% 0;
background-repeat: no-repeat no-repeat;
border-radius: 20px 20px 0 0;
height: 200px;
}
.header_ptw {
background-color: rgba(94, 211, 229, 0.9);
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Vocaloid/Miku/PlanningHeaderMiku_zpsb0a96058.png~original");
background-position: 50% 0;
background-repeat: no-repeat no-repeat;
border-radius: 20px 20px 0 0;
height: 200px;
}
:hover + .hide {
background-position: center 50% !important;
background-repeat: no-repeat !important;
background-size: cover;
border-color: white;
border-radius: 25px 25px 25px 25px;
border-style: solid;
border-width: 3px;
display: block !important;
height: 350px;
left: 1001px;
padding-bottom: 0;
position: fixed;
top: 160px;
width: 226px;
}
.hide:before {
background: none repeat scroll 0 0 transparent;
border-radius: 25px 25px 0 0;
color: white;
content: "";
padding-bottom: 5px;
position: absolute;
text-align: center;
top: -25px;
width: 225px;
}
.td1:nth-of-type(6) a, .td2:nth-of-type(6) a {
color: white !important;
font-weight: normal !important;
}
.td1:nth-of-type(6), .td2:nth-of-type(6) {
background-color: rgba(94, 211, 229, 0.9);
border-color: white;
border-radius: 25px 25px 25px 25px;
border-style: solid;
border-width: 1px;
color: white !important;
display: none;
height: auto;
left: 995px;
padding: 10px 10px 14px 24px;
position: fixed;
top: 522px;
width: 212px;
z-index: 1;
}
#copyright, #copyright:hover {
background-color: rgba(94, 211, 229, 0.9);
border: 1px solid white;
border-radius: 5em 5em 0 0;
bottom: -22px;
color: white;
font-size: 12px;
padding: 19px;
position: fixed;
right: 33px;
width: 137px;
}
#copyright:before {
color: white;
content: " Check Shishio-kun Club!";
font-size: 17px;
padding-right: 10px;
padding-top: 10px !important;
}
#copyright:after {
color: #FFD700;
content: " ";
padding-left: 20px;
}
Same as above, mark your favs
Add this Code to the bottom
Code
a [href="AnimeURL1 "], [href="AnimeURL2 "] {
background-attachment: scroll;
background-color: transparent;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Vocaloid/Miku/MikuFav_zpsc5a2575d.png~original");
background-position: left top;
background-repeat: no-repeat;
color: gold !important;
padding-bottom: 10px;
padding-left: 35px;
text-shadow: 0 1px 2px black;
}
Lastly the manga version
@import "https://dl.dropbox.com/s/nf9dc7ifauzlqha/Blue%20TopBar.css";
@import "http://dl.dropbox.com/u/49469857/MAL/premade/manga.css";
@import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css";
@import "http://fonts.googleapis.com/css?family=Patrick+Hand+SC";
@import "https://dl.dropboxusercontent.com/u/102421246/MAL/CSS/EditButtonVocaloidMiku.css";
* {
text-decoration: none;
}
body {
background-attachment: fixed;
background-clip: border-box;
background-color: transparent;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Vocaloid/Miku/Miku-Hatsune-Wallpaper-hatsune-miku-26723382-1920-1200_zpscfbe9d51.jpg~original");
background-position: 23% 0;
background-repeat: no-repeat no-repeat;
background-size: cover;
font-family: Patrick Hand Sc;
}
#list_surround {
background-attachment: fixed;
background-position: 24% 0;
background-repeat: no-repeat no-repeat;
font-size: 19px;
height: 250px;
left: 19% !important;
line-height: 1;
margin: 0 auto;
padding-bottom: 0;
padding-top: 0;
position: absolute;
width: 600px;
z-index: 0;
}
td[class^="td"]:nth-of-type(2) {
width: 369px !important;
}
a {
color: white;
text-shadow: none;
}
tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 {
color: #1E3C82;
font-weight: bold;
transition: all 0.4s ease 0s;
}
a:hover {
color: yellow !important;
text-shadow: 0 1px rgba(255, 255, 255, 0.15);
}
.td1:nth-of-type(5), .td2:nth-of-type(5) {
border-right: 2px solid white !important;
color: white;
}
.td1:nth-of-type(1), .td2:nth-of-type(1) {
border-left: 2px solid white !important;
color: white;
}
.table_header:nth-of-type(1) {
border-left: 2px solid white !important;
color: white;
}
.table_header:nth-of-type(2) {
text-align: left;
}
.table_header:nth-of-type(1), .table_header:nth-of-type(2), .table_header:nth-of-type(3), .table_header:nth-of-type(4), .table_header:nth-of-type(5), .table_header:nth-of-type(6) {
border-top: 2px solid white !important;
}
.table_header:nth-of-type(5) {
border-bottom-right-radius: 0;
border-right: 2px solid white;
border-top-left-radius: 0;
color: white;
}
.table_header, .category_totals {
background-color: rgba(94, 211, 229, 0.9);
border: 0 none;
opacity: 1;
padding: 4px;
text-align: center;
vertical-align: top;
}
.td1, .td2 {
background: none repeat scroll 0 0 rgba(94, 211, 229, 0.9);
color: white !important;
padding: 5px;
}
.td1:nth-of-type(2), .td2:nth-of-type(2) {
text-align: left;
}
.table_header:nth-of-type(6) {
display: none;
width: 0;
}
small {
color: #1370A5;
font-weight: bold;
}
.table_header, .td1, .td2, .category_totals {
color: grey;
}
.borderRBL {
line-height: normal !important;
}
[cellspacing="0"] {
line-height: 17px;
}
.category_totals {
background-color: rgba(94, 211, 229, 0.9);
border-bottom: 2px solid white;
border-left: 2px solid white !important;
border-radius: 0 0 12px 12px;
border-right: 2px solid white;
color: grey;
text-align: center;
}
.category_totals:hover {
background-color: #C41E0E;
color: #FFFFFF;
}
[class^="header_"] * {
background-repeat: no-repeat no-repeat;
border-left: 2px solid white !important;
border-radius: 20px 20px 0 0;
border-right: 2px solid white !important;
border-top: 2px solid white !important;
font-size: 0;
height: 130px;
line-height: 24px;
padding-bottom: 0;
text-align: right;
vertical-align: bottom;
}
.header_title {
border: medium none !important;
color: transparent !important;
display: none;
font-size: 0 !important;
font-style: italic;
height: auto;
padding: 0 8px 0 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
#grand_totals {
background-color: rgba(94, 211, 229, 0.9);
border: 0 none;
border-radius: 3px 3px 3px 3px;
color: white;
line-height: 20px;
min-height: 20px;
padding: 8px;
text-align: center;
vertical-align: middle;
}
.status_not_selected {
}
.status_not_selected:hover {
color: transparent;
background-color: #36f2fe;
transition: all 0.4s ease 0s;
}
.status_selected:hover a, .status_not_selected:hover a {
text-decoration: underline;
}
.status_not_selected a {
}
.status_selected a {
color: #3167A9 !important;
display: block;
height: 50px;
padding-right: 0px;
width: 139px;
}
.status_selected {
color: #3167A9 !important;
background-color: #36f2fe !important;
}
.status_not_selected {
display: block;
}
.status_selected, .status_not_selected {
background: none repeat scroll 0 0 rgba(94, 211, 229, 0.9);
border-right: 2px solid white;
border-top: 2px solid white;
border-top-right-radius: 91px;
height: 36px;
left: 0;
margin-top: 317px;
padding-left: 0;
padding-top: 21px;
position: fixed;
}
.status_selected + .status_not_selected, .status_not_selected + .status_selected, .status_not_selected + .status_not_selected {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: -moz-use-text-color white -moz-use-text-color -moz-use-text-color;
border-image: none;
border-radius: 0 0 0 0;
border-style: none solid none none;
border-width: medium 2px medium medium;
height: 33px;
left: 0;
margin-top: 375px;
padding-top: 9px;
position: fixed;
width: 165px;
}
.status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected {
height: 33px;
left: 0;
margin-top: 417px;
position: fixed;
}
.status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
height: 33px;
left: 0;
margin-top: 459px;
position: fixed;
}
.status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
height: 33px;
left: 0;
margin-top: 501px;
position: fixed;
}
.status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
border-bottom: 2px solid white;
border-bottom-right-radius: 91px;
height: 33px;
left: 0;
margin-top: 543px;
padding-bottom: 10px;
position: fixed;
}
.header_cw {
background-color: rgba(94, 211, 229, 0.9);
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Vocaloid/Miku/CwHeaderMiku_zpse3ca049c.png~original");
background-position: 97% 0;
background-repeat: no-repeat no-repeat;
border-radius: 20px 20px 0 0;
height: 200px;
z-index: 0 !important;
}
.header_completed {
background-color: rgba(94, 211, 229, 0.9);
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Vocaloid/Miku/ComHeaderMiku_zps5a5691b7.png~original");
background-position: 50% 0;
background-repeat: no-repeat no-repeat;
border-radius: 20px 20px 0 0;
height: 200px;
z-index: 0;
}
.header_onhold {
background-color: rgba(94, 211, 229, 0.9);
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Vocaloid/Miku/HoldHeaderMiku_zpsdd0a1a59.png~original");
background-position: 100% 0;
background-repeat: no-repeat no-repeat;
border-radius: 20px 20px 0 0;
height: 200px;
}
.header_dropped {
background-color: rgba(94, 211, 229, 0.9);
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Vocaloid/Miku/DroppedHeaderMiku_zps0aa78dc4.png~original");
background-position: 50% 0;
background-repeat: no-repeat no-repeat;
border-radius: 20px 20px 0 0;
height: 200px;
}
.header_ptw {
background-color: rgba(94, 211, 229, 0.9);
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Vocaloid/Miku/PlanningHeaderMiku_zpsb0a96058.png~original");
background-position: 50% 0;
background-repeat: no-repeat no-repeat;
border-radius: 20px 20px 0 0;
height: 200px;
}
:hover + .hide {
background-position: center 50% !important;
background-repeat: no-repeat !important;
background-size: cover;
border-color: white;
border-radius: 25px 25px 25px 25px;
border-style: solid;
border-width: 3px;
display: block !important;
height: 350px;
left: 1001px;
padding-bottom: 0;
position: fixed;
top: 160px;
width: 226px;
}
.hide:before {
background: none repeat scroll 0 0 transparent;
border-radius: 25px 25px 0 0;
color: white;
content: "";
padding-bottom: 5px;
position: absolute;
text-align: center;
top: -25px;
width: 225px;
}
.td1:nth-of-type(6) a, .td2:nth-of-type(6) a {
color: white !important;
}
.td1:nth-of-type(6), .td2:nth-of-type(6) {
background-color: rgba(94, 211, 229, 0.9);
border-color: white;
border-radius: 25px 25px 25px 25px;
border-style: solid;
border-width: 1px;
color: white !important;
display: none;
height: auto;
left: 995px;
padding: 10px 10px 14px 24px;
position: fixed;
top: 522px;
width: 212px;
z-index: 1;
}
#copyright, #copyright:hover {
background-color: rgba(94, 211, 229, 0.9);
border: 1px solid white;
border-radius: 5em 5em 0 0;
bottom: -22px;
color: white;
font-size: 12px;
padding: 19px;
position: fixed;
right: 33px;
width: 137px;
}
#copyright:before {
color: white;
content: " Check Shishio-kun Club!";
font-size: 17px;
padding-right: 10px;
padding-top: 10px !important;
}
#copyright:after {
color: #FFD700;
content: " ";
padding-left: 20px;
}
And as above mark your favs
Add this code to the bottom
Code
a [href="MangaURL1 "], [href="MangaURL2 "] {
background-attachment: scroll;
background-color: transparent;
background-image: url("http://i1353.photobucket.com/albums/q671/fahcyx/Vocaloid/Miku/MikuFav_zpsc5a2575d.png~original");
background-position: left top;
background-repeat: no-repeat;
color: gold !important;
padding-bottom: 10px;
padding-left: 35px;
text-shadow: 0 1px 2px black;
}
SylakentH Jun 26, 2013 12:54 PM
Offline
Sep 2012
587
My first share. Hopefully someone will like it ;D
I just made it for myself but I believe in free things so ... xD
It's quite simple since it's my first try so for the next one I'll try to do a better job.
Images
Code
@import "http://dl.dropbox.com/u/78340470/animetitle.css";
@import "http://dl.dropbox.com/u/78340470/CSSforCatgirls.css";
@import url(http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css );
@import url(http://dl.dropbox.com/u/49469857/MAL/premade/anime.css );
@import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/CSS/TopMenu/TopMenu.css );
@import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/CSS/TopMenu/Colors/Scheme.css );
#list_surround{
border-radius: 25px 25px 25px 25px;
border-style: solid !important;
border-width: 3px;
border-color: teal;
background-image:url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQF82mil9us7AbqUsW4bsojMJxjNkQ6aBMMYph4WnGBYgm3v10M5g );
}
body {
background-image:
url(http://desktopop.com/wp-content/uploads/3D-Dark-Moon-Wallpaper.jpg );
background-attachment: fixed;
}
.header_title {
background-image:url(http://desktopop.com/wp-content/uploads/3D-Dark-Moon-Wallpaper.jpg );
color=red;
font-family:english111 vivace bt;
font-size:40px;
text-align:center;
}
.table_header {
background-color:#990000;
}
.animetitle, .animetitle:visited {
color:#70B8FF;
font-family:Lucida Grande;
font-size:14px;
}
.td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright {
color:white;
font-family:Lucida Grande;
font-size:11px
}
#list_surround {
width:750px;
}
.category_totals,
.td1,
.td2,
#grand_totals,
#copyright {
background-color: rgba(55,55,55,.5);
}
tr:hover [class^=td] {
background-color: rgba(80, 50, 225, 0.6) !important;
}
body {
font-weight: light;
background-repeat: no-repeat;
background-color: black;
}
#list_surround {
margin:auto;
background-image:url();
}
a {
color:teal
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover, a:visited:hover {
color:blue;
text-decoration:none;
}
.category_totals,
.td1,
.td2,
#grand_totals,
#copyright {
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;
}
#copyright:after {
content: " By MAND4. No rights reserved.";
}
.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:cyan;
}
.status_not_selected a{
color:white;
}
.thickbox {
color:cyan;
font-family:fantasy;
font-size:12px;
}
.header_title {
height:52px;
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;
}
tr:hover [class^=td] {
-moz-transition: .2s linear;
-webkit-transition: .2s linear;
-o-transition: .2s linear;
}
table:hover + .hide {
background-size: cover;
left: 830px;
top: 160px;
height: 350px;
width: 226px;
padding-bottom: 0px;
border-style: solid;
border-color: white;
border-top: 1px solid white;;
border-left: 1px solid white;
border-right: 1px solid white;
border-bottom: 1px solid white;
border-radius: 25px 25px 25px 25px;
background-color: rgba(200, 5, 200, 0.75);
background-position: center 50% !important;
background-repeat: no-repeat !Important;
display: block !important;
position: fixed;
}
.hide:before {
background: transparent;
content: "MAND4";
padding-bottom: 5px;
position: absolute;
text-align: center;
width: 225px;
top: -25px;
border-radius: 25px 25px 0 0;
}
/*Change URL of the image for the top banner*/
#list_surround {
background-image: url(http://www.dodaj.rs/f/3m/pS/1TzyrfWJ/welcome.png );
background-position: center top;
background-repeat: no-repeat;
padding-top: 232px;
}
Offline
Oct 2012
249
Samurai Champloo list I made for someone :) *Turn off tags*
Code:
@import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css";
@import "https://dl.dropbox.com/s/8vjos6cpj8yo4ek/RedTopBar.css";
body {
background-attachment:fixed;
background-clip:border-box;
background-color:transparent;
background-image:url(http://i42.tinypic.com/2zjf1nc.png );
background-position:0 0%, 0 0;
background-repeat:no-repeat no-repeat;
background-size:cover;
font-family:calibri;
}
#inlineContent {
display:inline-block !important;
height:1080px !important;
left:0 !important;
margin:auto !important;
position:fixed !important;
right:0 !important;
top:0 !important;
width:1920px !important;
z-index:-1 !important;
}
#list_surround {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i43.tinypic.com/2vvkxad.png );
background-position:0 -40px;
background-repeat:no-repeat no-repeat;
font-size:100%;
line-height:1;
margin:0 auto;
padding-bottom:10px;
padding-top:500px;
position:absolute;
width:650px;
}
a {
color:#FFFFFF;
text-decoration:none;
text-shadow:none;
}
a:hover {
color:#FFFFFF;
text-decoration:underline;
}
.table_header {
background-color:rgba(255, 0, 0, 0.901961);
font-size:15px;
}
.table_header:first-of-type {
border-bottom-left-radius:0;
border-bottom-right-radius:0;
border-top-left-radius:10px;
border-top-right-radius:0;
}
.table_header:nth-of-type(2) {
padding-left:35px;
text-align:left;
}
.table_header:last-of-type {
border-bottom-left-radius:0;
border-bottom-right-radius:0;
border-top-left-radius:0;
border-top-right-radius:10px;
}
.td1 {
background-color:rgba(230, 0, 0, 0.701961);
height:65px;
}
.td2 {
background-color:rgba(230, 0, 0, 0.701961);
height:65px;
}
.table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals {
border:0 none;
padding:4px;
text-align:center;
vertical-align:top;
}
.table_header, .td1, .td2, .category_totals {
color:white;
}
.borderRBL {
line-height:normal !important;
}
[cellspacing="0"] {
line-height:17px;
}
.category_totals {
background-color:rgba(255, 0, 0, 0.901961);
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:0;
border-top-right-radius:0;
color:white;
font-size:15px;
text-align:center;
}
[class^="header_"] * {
background-repeat:no-repeat no-repeat;
font-size:0;
height:200px;
line-height:24px;
padding-bottom:4px;
text-align:right;
vertical-align:bottom;
}
.header_title {
border-bottom-left-radius:4px;
border-bottom-right-radius:4px;
border-top-left-radius:4px;
border-top-right-radius:4px;
color:#FFFFFF;
display:inline-block;
font-style:italic;
height:auto;
padding:0 8px 0 0;
text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px;
}
#grand_totals {
background-color:transparent;
border:0 none;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
color:#FFFFFF;
line-height:20px;
min-height:20px;
padding:8px;
text-align:center;
vertical-align:middle;
}
#copyright {
background-color:rgba(180, 32, 48, 0.6);
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
border-top-left-radius:3px;
border-top-right-radius:3px;
color:#EEEEEE;
line-height:17px;
margin-top:10px;
padding:8px;
text-align:center;
}
#copyright::after {
}
.hide {
background-color:rgba(248, 162, 200, 0.701961);
background-position:50% 50%;
background-repeat:no-repeat no-repeat;
background-size:cover;
border:1px solid #FFFFFF;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
border-top-left-radius:7px;
border-top-right-radius:7px;
display:inline-block !important;
height:55px;
margin-left:33px;
margin-top:-65px;
position:absolute;
width:35px;
}
.hide:hover {
background-color:transparent;
background-repeat:no-repeat no-repeat;
background-size:cover;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
border-top-left-radius:20px;
border-top-right-radius:20px;
box-shadow:rgba(63, 52, 60, 0.54902) 0 0 8px 8px;
margin-left:-130px;
padding-right:150px;
padding-top:220px !important;
position:absolute;
z-index:1;
}
.td1:nth-of-type(2), .td2:nth-of-type(2) {
padding-left:35px;
text-align:left;
}
.td1:nth-of-type(6), .td2:nth-of-type(6) {
background-attachment:scroll;
background-color:transparent;
background-image:none;
background-position:0 0;
background-repeat:repeat repeat;
border-bottom-style:none !important;
border-bottom-width:medium !important;
display:inline-block;
font-family:cursive;
font-size:9pt;
height:0 !important;
left:70px;
line-height:16px !important;
margin-top:16px;
position:absolute;
text-align:justify !important;
width:720px;
z-index:2;
}
.table_header:nth-of-type(6) {
display:none;
}
span[id*="tagRow"] {
display:block !important;
}
span[id*="tagLinks"] {
display:none !important;
}
a, .td1, .td2, .category_totals {
-webkit-transition:all 0.25s ease-in-out 0s;
transition:all 0.25s ease-in-out 0s;
}
#list_surround .status_selected, #list_surround .status_not_selected {
-webkit-background-clip:padding-box !important;
background-clip:padding-box !important;
background-color:transparent;
background-image:url(http://i40.tinypic.com/2mh7vw2.png );
background-position:0 0;
background-repeat:no-repeat no-repeat;
background-size:contain;
border:1px solid #E60000;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
display:block;
left:20px;
padding:0;
position:fixed;
top:10px;
width:300px;
}
#list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected {
background-image:url(http://i42.tinypic.com/eb1lwx.png );
background-position:100% 0;
top:115px;
}
#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-image:url(http://i42.tinypic.com/maiau8.png );
background-position:0 0;
top:220px;
}
#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-image:url(http://i41.tinypic.com/etd0f9.png );
background-position:100% 0;
top:325px;
}
#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-image:url(http://i41.tinypic.com/ixzdk2.png );
background-position:0 0;
top:430px;
}
#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-image:url(http://i39.tinypic.com/2w3cl0i.png );
background-position:100% 0;
top:535px;
}
.status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a {
color:transparent;
display:block;
font-size:0;
height:100px;
width:300px;
}
.header_cw {
background-color:transparent;
background-image:url(http://i43.tinypic.com/nr0mma.png );
background-position:0 -200px;
background-repeat:no-repeat no-repeat;
height:50px;
margin-bottom:0;
margin-top:-300px;
}
.header_completed {
background-color:transparent;
background-image:url(http://i40.tinypic.com/33crymr.png );
background-position:0 -200px;
background-repeat:no-repeat no-repeat;
height:50px;
margin-bottom:0;
margin-top:0;
}
.header_onhold {
background-color:transparent;
background-image:url(http://i40.tinypic.com/5335i1.png );
background-position:0 -200px;
background-repeat:no-repeat no-repeat;
height:50px;
margin-bottom:0;
margin-top:0;
}
.header_dropped {
background-color:transparent;
background-image:url(http://i43.tinypic.com/2w1ru6e.png );
background-position:0 -200px;
background-repeat:no-repeat no-repeat;
height:50px;
margin-bottom:0;
margin-top:0;
}
.header_ptw {
background-color:transparent;
background-image:url(http://i42.tinypic.com/mmes0p.png );
background-position:0 -200px;
background-repeat:no-repeat no-repeat;
height:50px;
margin-bottom:0;
margin-top:0;
}
.status_selected {
display:block;
}
.status_not_selected {
display:block;
}
.status_not_selected {
opacity:0.7;
}
.status_not_selected:hover {
color:transparent;
opacity:1;
}
#list_surround {
left:0 !important;
margin:auto !important;
position:absolute !important;
right:0 !important;
}
.animetitle + small {
color:#FF9933 !important;
font-weight:bold;
}
* {
-webkit-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;
}
.status_selected {
left:-8px !important;
}
.status_not_selected {
-webkit-transition:all 0.4s ease 0s;
display:block;
left:-65px !important;
opacity:0.7;
transition:all 0.4s ease 0s;
}
.status_not_selected:hover {
-webkit-transition:all 0.4s ease 0s;
color:transparent;
left:-8px !important;
opacity:1;
transition:all 0.4s ease 0s;
}
Offline
Oct 2012
78
Code:
@import "http://dl.dropbox.com/u/78340470/Touhou%20Style%20Menu%20Bar/IconStyleCSSFixedwithCategoryTouhou.css";
@import url(http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css );
@import url(http://dl.dropbox.com/u/49469857/MAL/premade/anime.css );
@import "http://fonts.googleapis.com/css?family=Patrick+Hand+SC";
/* Custom cursor */
* { cursor: url('http://ipic.su/img/img7/fs/ani1136.1369413885.gif '), auto; }
body {
background-attachment: fixed;
background-image: url("http://ipic.su/img/img7/fs/3123123.1371498289.jpg");
background-size: cover;
}
body {
background-position: 0px 49%;
}
.header_title {
background-color: transparent;
background-image: url("https://dl.dropbox.com/u/57348187/MAL/PROZ.png");
color: white;
font-family: 'Patrick Hand SC' !important;
font-size: 26px;
text-align: left;
text-shadow: 3px 3px 3px #000000;
}
.table_header {
background-image: url("https://dl.dropbox.com/u/57348187/MAL/PROZ.png");
}
.animetitle, .animetitle:visited {
color: white;
font-family: 'Patrick Hand SC' !important;
font-size: 14px;
text-shadow: 0 2px 1px #000000;
}
.td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright {
color: white;
font-family: 'Patrick Hand SC' !important;
font-size: 14px;
text-shadow: 0 2px 1px #000000;
}
#list_surround {
width: 900px;
}
#list_surround {
left: 0 !important;
margin: auto !important;
position: absolute !important;
right: 0 !important;
}
body {
background-color: #FBFDE8;
background-repeat: no-repeat;
}
#list_surround {
background-image: url("");
left: 2px;
position: absolute;
}
a {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover, a:visited:hover {
color: #D3D3D3;
text-decoration: underline;
}
.category_totals, .td1, .td2, #grand_totals, #copyright {
background-image: url("https://dl.dropbox.com/u/57348187/MAL/PROZ.png");
border-width: 0;
padding: 2px;
}
.category_totals:hover, .td1:hover, .td2:hover, #grand_totals:hover, #copyright:hover {
background-image: url("https://dl.dropbox.com/u/57348187/MAL/PROZ2.png");
border-width: 0;
padding: 2px;
}
#copyright:after {
content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info.";
}
.status_selected {
background-color: black;
color: white;
display: none;
padding: 2px;
text-decoration: blink;
}
.status_not_selected {
background-color: black;
color: white;
display: none;
padding: 2px;
}
.status_selected a {
color: blue;
display: none;
}
.status_not_selected a {
color: white;
display: none;
}
.thickbox {
color: cyan;
font-family: 'Happy Monkey',cursive;
font-size: 12px;
text-shadow: 2px 2px 2px #000000;
}
.header_title {
height: 32px;
padding: 2px;
}
.table_header {
border-width: 0;
font-weight: bold;
padding: 2px;
}
.category_totals {
height: 30px;
}
#copyright, #grand_totals {
margin: 0 auto;
text-align: center;
}
:hover + .hide {
background-position: center 50% !important;
background-repeat: no-repeat !important;
background-size: cover;
border-color: white;
border-radius: 25px 25px 25px 25px;
border-style: solid;
border-width: 3px;
display: block !important;
height: 350px;
left: 140px;
padding-bottom: 0;
position: fixed;
top: 160px;
width: 226px;
}
.hide:before {
background: none repeat scroll 0 0 transparent;
border-radius: 25px 25px 0 0;
color: white;
content: "";
padding-bottom: 5px;
position: absolute;
text-align: center;
top: -25px;
width: 225px;
}
.td1:nth-of-type(6), .td2:nth-of-type(6) {
background-color: rgba(72, 191, 101, 0.7) !important;
border-color: white;
border-style: solid;
border-radius: 25px 25px 25px 25px;
border-width: 1px;
display: none;
height: auto;
left: 140px;
padding: 10px 10px 14px 24px;
position: fixed;
top: 522px;
width: 212px;
z-index: 1;
}
#copyright, #copyright:hover {
background-color: rgba(241, 114, 169, 0.7) !important;
border-radius: 5px 5px 5px 5px;
bottom: 0;
color: white;
padding: 2px;
width: 100%;
}
.table_header:nth-of-type(6) {
display: none;
}
#copyright:hover {
}
#copyright:before {
color: red;
content: "Design by iVoid";
font-size: 12px;
padding-right: 10px;
}
#copyright:after {
color: white;
content: "iVoid Custom List";
padding-left: 20px;
}
#copyright a {
}
.animetitle[href$="/Clannad:_After_Story"] span:after,
.animetitle[href$="/Astarotte_no_Omocha!"] span:after,
.animetitle[href$="/Asura_Cryin'"] span:after,
.animetitle[href$="/Asura_Cryin'_2"] span:after,
.animetitle[href$="/Campione!:_Matsurowanu_Kamigami_to_Kamigoroshi_no_Maou"] span:after,
.animetitle[href$="/Fate/Zero_2nd_Season"] span:after,
.animetitle[href$="/Highschoo_ of_the_Dead"] span:after,
.animetitle[href$="/Kuroko_no_Basket"] span:after,
.animetitle[href$="/Mashiroiro_Symphony:_The_Color_of_Lovers"] span:after,
.animetitle[href$="/Onegai_Teacher"] span:after,
.animetitle[href$="/Papa_no_Iukoto_wo_Kikinasai!"] span:after,
.animetitle[href$="/Sakurasou_no_Pet_na_Kanojo"] span:after,
.animetitle[href$="/Toradora!"] span:after,
.animetitle[href$="/Katekyo_Hitman_Reborn!"] span:after,
.animetitle[href$="/Death_Note"] span:after,
.animetitle[href$="/Highschool_of_the_Dead"] span:after,
.animetitle[href$="/Elfen_Lied"] span:after,
.animetitle[href$="/Fate/stay_night:_Unlimited_Blade_Works"] span:after,
.animetitle[href$="/True_Tears"] span:after,
.animetitle[href$="/Amagami_SS+_Plus"] span:after,
.animetitle[href$="/Amagami_SS"] span:after,
.animetitle[href$="/Shakugan_no_Shana"] span:after,
.animetitle[href$="/Shakugan_no_Shana_II_(Second)"] span:after,
.animetitle[href$="/Shakugan_no_Shana_III_(Final)"] span:after,
.animetitle[href$="/Steins;Gate"] span:after,
.animetitle[href$="/Astarotte_no_Omocha!_EX"] span:after,
.animetitle[href$="/Yahari_Ore_no_Seishun_Love_Come_wa_Machigatteiru."] span:after {
content: ' ';
position: absolute;
display: block;
margin-left: 424px;
margin-top: -30px;
width: 158px;
height: 33px;
background: url('http://ipic.su/img/img7/fs/favor1.1369555396.png ') no-repeat;
}
.animetitle[href$="/Bakuman."] span:after,
.animetitle[href$="/Bakuman._2"] span:after,
.animetitle[href$="/Bakuman._3"] span:after {
content: ' ';
position: absolute;
display: block;
margin-left: 424px;
margin-top: -30px;
width: 158px;
height: 33px;
background: url('http://ipic.su/img/img7/fs/favor5.1369555424.png ') no-repeat;
}
.animetitle[href$="/Kotonoha_no_Niwa"] span:after,
.animetitle[href$="/Sword_Art_Online"] span:after {
content: ' ';
position: absolute;
display: block;
margin-left: 424px;
margin-top: -30px;
width: 158px;
height: 33px;
background: url('http://ipic.su/img/img7/fs/favor4.1369555416.png ') no-repeat;
}
.animetitle[href$="/Angel_Beats!"] span:after {
content: ' ';
position: absolute;
display: block;
margin-left: 424px;
margin-top: -30px;
width: 158px;
height: 33px;
background: url('http://ipic.su/img/img7/fs/favor3.1369555410.png ') no-repeat;
}
.animetitle[href$="/Clannad"] span:after {
content: ' ';
position: absolute;
display: block;
margin-left: 424px;
margin-top: -30px;
width: 158px;
height: 33px;
background: url('http://ipic.su/img/img7/fs/favor2.1369555403.png ') no-repeat;
}
.animetitle[href$="/Guilty_Crown"] span:after {
content: ' ';
position: absolute;
display: block;
margin-left: 424px;
margin-top: -30px;
width: 158px;
height: 33px;
background: url('http://ipic.su/img/img7/fs/favor2.1369555403.png ') no-repeat;
}
Favor:
Offline
Jan 2013
6
Donating my Hatsukoi 1/1 Layout. (Anime List)
Code:
@import "https://dl.dropbox.com/s/4u9v39e5go65aoq/PinkTopBar.css";
@import "http://fonts.googleapis.com/css?family=Merienda+One";
body {
background: url(http://i.imgur.com/GlkxDkZ.jpg ) ;
background-position:initial initial;
background-repeat:initial initial;
background-size:cover;
background-attachment: fixed;
}
/*
TITLE
The List header which by default says My Anime List
can be changed out here.
*/
#list_surround {
background-attachment: scroll !important;
background-clip: border-box !important;
background-color: transparent !important;
background-image: url("http://i.imgur.com/aIWpGXX.png") !important;
background-origin: padding-box !important;
background-position: left center, center top;
background-repeat: repeat !important;
background-size: auto auto !important;
Right: 280px;
margin: 0 auto;
min-height: 100% !important;
position: absolute !important;
top: 543px !important;
width: 920px !important;
}
#inlineContent {
background: url(http://i.imgur.com/G9nY3tm.jpg ) no-repeat scroll transparent center top !important;
display: inline-block !important;
height: 543px !important;
left: 0px !important;
margin: auto !important;
right: 280px !important;
top: -543px !important;
width: 920px !important;
position:absolute;
z-index: -1 !important;
}
/*
FONT
Font used across the whole list.
*/
body {
font-family: 'Merienda One', cursive !important;
}
/*
LINK COLOR
*/
a {
-moz-transition: all 0.25s ease-in-out 0s;
-webkit-transition: all 0.25s ease-in-out 0s;
-o-transition: all 0.25s ease-in-out 0s;
transition: all 0.25s ease-in-out 0s;
color: #0c83ea;
text-decoration: none;
text-shadow: 0 0 0.2em #fff, 0 0 0.2em #fff,
0 0 0.2em #fff, 0 0 0.2em #fff, 0 0 0.2em #fff,
0 0 0.2em #fff;
font-variant: capitalize;
font-size: 16px;
}
a:hover {
color: #F6ab01;
text-shadow: 0 0 0.3em #fff, 0 0 0.3em #fff,
0 0 0.3em #fff, 0 0 0.2em #fff, 0 0 0.3em #fff,
0 0 0.3em #fff;
}
/* CATEGORY LINKS */
.status_not_selected {
opacity: 1;
right: -150px !important;
transition: all 0.4s ease 0s;
z-index: 0;
}
.status_not_selected:hover {
color: transparent;
opacity: 1 !important;
right: 0px !important;
transition: all 0.4s ease 0s;
z-index: 2 !important;
}
.status_selected, .status_not_selected {
display: block;
}
.status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a {
color: transparent;
display: block;
height: 120px;
opacity: 0;
right: 4px;
width: 270px;
}
/* HEADER */
.table_header {
background-color: rgba(230,0,18,0.9);
}
.table_header:first-of-type {
border-radius: 3px 0 0 0;
}
.table_header:nth-of-type(2) {
text-align: left;
}
.table_header:last-of-type {
border-radius: 0 3px 0 0;
}
small {
color: red;
font-weight: bold;
}
/* ROWS COLOR */
.td1 {
-moz-transition: all 0.25s ease-in-out 0s;
-webkit-transition: all 0.25s ease-in-out 0s;
-o-transition: all 0.25s ease-in-out 0s;
transition: all 0.25s ease-in-out 0s;
background-color: transparent;
}
.td2 {
-moz-transition: all 0.25s ease-in-out 0s;
-webkit-transition: all 0.25s ease-in-out 0s;
-o-transition: all 0.25s ease-in-out 0s;
transition: all 0.25s ease-in-out 0s;
background-color: transparent;
}
/* ROWS HOVER */
tr:hover [class^="td"] {
background-color: rgba(255,111,155,0.9);
}
.td1:nth-of-type(2), .td2:nth-of-type(2) {
text-align: middle;
}
/* ROW FONT SIZE TRANSITION (FIREFOX ONLY) */
noindex:-moz-any-link, tr:hover td.td1, tr:hover td.td2 {
font-size: 15px;
}
/* LIST SETTINGS */
.table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals {
border-style: dashed;
border-width: 1.5px;
border: 0;
padding: 5px;
text-align: center;
vertical-align: middle;
}
.table_header, .td1, .td2, .category_totals {
line-height: 20px;
}
.borderRBL{
line-height: normal !important;
}
[cellspacing="0"] {
line-height: 17px;
}
[class^="header_"] +{
border-collapse: separate !important;
}
/* CATEGORY TOTALS */
.category_totals {
-moz-transition: all 0.25s ease-in-out 0s;
-webkit-transition: all 0.25s ease-in-out 0s;
-o-transition: all 0.25s ease-in-out 0s;
transition: all 0.25s ease-in-out 0s;
background-color: rgba(72, 64, 87, 0);
border-radius: 0 0 3px 3px;
color: rgba(51, 51, 51, 0);
text-align: center;
}
.category_totals:hover {
background-color: rgba(72, 64, 87, 0.6);
color: #EEEEEE;
}
/*
Header classes for Currently Watching, Completed, Dropped, etc...
*/
.header_cw
{
height: 310px;
background-image:url(http://i.imgur.com/rmZKNsI.png );
}
.header_completed
{height: 310px;
background-image:url(http://i.imgur.com/u6T1xVK.png );
}
.header_onhold
{
height: 310px;
background-image:url(http://i.imgur.com/iHcWRy9.png );
}
.header_dropped
{height: 310px;
background-image:url(http://i.imgur.com/QiXhs9g.png );
}
.header_ptw
{height: 310px;
background-image:url(http://i.imgur.com/7lU5pUq.png );
}
.header_title {
visibility:hidden;
}
/* BOTTOM OF LIST */
#grand_totals {
background-color: transparent;
background: transparent url("http://i.imgur.com/gOYz7qr.png") no-repeat;
color: #FF69B4;
height: 36px;
line-height: 45px;
min-height: 45px;
padding: 8px;
text-align: center;
vertical-align: middle;
padding-top: 12px;
font-size: 12px;
}
#list_surround .status_selected, #list_surround .status_not_selected {
background-attachment: scroll;
background-color: transparent;
background-image: url("http://i.imgur.com/GLQVrN9.png");
background-position: 0 0;
background-repeat: no-repeat no-repeat;
display: block;
height: 120px;
padding: 0;
position: fixed;
right: 0px;
top: 45px;
width: 270px;
}
#list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected {
background-attachment: scroll;
background-color: transparent;
background-image: url("http://i.imgur.com/MyDROTU.png");
right: 0px;
top: 165px;
}
#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-attachment: scroll;
background-color: transparent;
background-image: url("http://i.imgur.com/3mQ4E4W.png");
background-position: 0 0;
right: 0px;
top: 285px;
}
#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-attachment: scroll;
background-color: transparent;
background-image: url("http://i.imgur.com/tIg5MXa.png");
right: 0px;
top: 405px;
}
#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-attachment: scroll;
background-color: transparent;
background-image: url("http://i.imgur.com/3EgHeIt.png");
right: 0px;
top: 525px;
}
#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-attachment: scroll;
background-color: transparent;
background-image: url("http://i.imgur.com/3Lqm3Kv.png");
background-position: 0 0;
background-repeat: no-repeat no-repeat;
right: 0px;
top: 645px;
}
#copyright {
background: transparent url(http://i.imgur.com/aZ8Ve4B.png ) no-repeat;
height: 50px;
color: white;
position: center;
padding: 8px;
text-align: center;
padding-top: 56px;
font-size: 15px;
}
This is my first time working with a theme. It's just basically a modification of someone elses though. I hope that someone could make some use of it though. ^-^
Code:
/*thin top bar*/
@import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixedwithCategory.css";
/*Fonts*/
@import url("http://fonts.googleapis.com/css?family=Tangerine");
@import url("http://fonts.googleapis.com/css?family=Lemon");
@import url("http://fonts.googleapis.com/css?family=Nova+Slim");
@import url(http://fonts.googleapis.com/css?family=Handlee );
@import url(http://fonts.googleapis.com/css?family=Petit+Formal+ );
/*
Got a question or want to learn more? Try this link:
http://myanimelist.net/forum/?topicid=419405&show=0#post1
*/
/*
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!
*/
body {
background-image: url(https://imageshack.com/a/img689/3602/rmo0.png );
background-attachment: fixed;
background-size: cover;
}
/*
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:rgba(0, 150, 185, 0.9);
color: #FFFFFF;
font-family: 'Handlee', cursive;
font-size:20px;
border-radius: 20px 20px 0px 0px;
font-weight: 700;
text-align: center;
text-shadow: 3px -1px 5px #0C0C0C;
}
/*
SUB-HEADERS BACKGROUND COLOR COLOR
Below each main header is the sub-header which says Score, Episodes, Tags, etc.
*/
.table_header {
background-color: rgba(0, 150, 185, 0.9);
}
/*
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: 'Petit Formal ', cursive;
font-size:14px;
text-shadow: 2px 1px 2px #000000;
}
.animetitle + small {
color:#ACBAE3;
font-family: "Nova Slim";
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:white;
font-size:13px;
font-family: 'Petit Formal ', cursive;
text-shadow: 2px 1px 2px #000000;
}
/*
LIST WIDTH
Use this to increase the width of your list!
*/
#list_surround {
width:900px;
}
/*
LIST POSITION
Change "left" to "right" to switch the list side, or vice versa.
*/
#list_surround {
position: absolute !important;
right: 75px !important;}
/*
LIST BACKGROUND COLOR AND OPACITY
Go to this page for instructions on customizing this part,
under: Changing the list background color + opacity of the list background
http://myanimelist.net/forum/?topicid=440525
*/
.category_totals, .td1, .td2, #grand_totals, #copyright {
background: rgba(0, 150, 185, 0.9) !important;
}
/*LIST BORDERS
You can change the color of the border with border-color. You can increase the size of the border by increasing the px amount after any of the border-width codes. They're all set to 1px- make sure you increase all the border widths the same amount. Leave the border amounts that are set to zero alone.
*/
.status_selected, #grand_totals,
.status_not_selected, .header_title, #copyright {
border-color: white;
border-style: solid;
border-width: 1px;
}
.td1, .td2, .table_header {
border-color: white;
border-style: solid;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-width: 1px !important;
}
.category_totals{
border-color: white;
border-style: solid;
border-width: 1px 1px 1px;
}
/*
SECONDARY BACKGROUND
This originally puts the image in front of the main background but behind the list.
To change the background, change the link in parenthesis after "background: url"
You can also change the rest of the background settings to suit the image you're trying to put in there. Don't touch the other options below background unless you really know what you're doing. Increase the Z-index to 1 or more to put it in front of the list.
*/
#inlineContent {
background: url(http://img811.imageshack.us/img811/9782/9lz.png ) !important;
display: inline-block !important;
height: 400px !important;
margin: auto !important;
position: fixed !important;
right: 0px !important;
bottom: 0px !important;
width: 378px !important;
z-index: 1 !important;
image-position:right bottom;
pointer-events: none;
}
/*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, use the link at the top of this CSS or ask in my club!
*/
body {
font-weight: light;
background-repeat: no-repeat;
background-color: #FFFFFF;
}
a {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover, a:visited:hover {
color:#95A7DB;
text-decoration:none;
}
.category_totals,
.td1,
.td2,
#grand_totals,
#copyright {
background-color: rgba(40, 12, 61, 0.450);
border-width:0;
transition: all .8s ease 0s;/* CSS3 reference */
-o-transition: all .8s ease 0s; /* for Opera compatibility */
-ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */
-moz-transition: all .8s ease 0s; /* for Firefox compatibility */
-webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */
}
.category_totals a,
.td1 a,
.td2 a,
#grand_totals a,
#copyright a {
transition: all .8s ease 0s;/* CSS3 reference */
-o-transition: all .8s ease 0s; /* for Opera compatibility */
-ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */
-moz-transition: all .8s ease 0s; /* for Firefox compatibility */
-webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */
}
.category_totals:HOVER,
.td1:HOVER,
.td2:HOVER,
#grand_totals:HOVER,
#copyright:HOVER {background-color:rgba(40, 12, 61, 0.600);
border-width:0;
}
#copyright:after {
content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info. Theme by Kokuwo.";
}
#copyright {
margin-bottom: 30px !important;
border-radius: 20px;
padding: 10px;
}
.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 {
padding:2px;
}
.table_header {
border-width:0;
font-weight:bold;
padding:2px;
}
.category_totals {
border-radius: 0px 0px 20px 20px;
height: 40px;
text-align: center;
}
#grand_totals {
text-align: center;
margin:0 auto;
border-radius: 20px;
padding: 10px 20px;
width: 600px;
}
Offline
Oct 2012
78
My list "Death Note" Theme
Code
@import url(http://fonts.googleapis.com/css?family=New+Rocker );
@import url(http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css );
@import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css";
@import url(http://dl.dropbox.com/u/78192465/MyAnimeList/Index/TopMenu.css );
body {
background-attachment:fixed;
background-image:url(http://ipic.su/img/img7/fs/death-note_00291097.1373128137.png ) !important;
background-position:0px 49%;
background-repeat:no-repeat no-repeat;
background-size:cover;
color:#FFFFFF;
cursor:url(http://ipic.su/img/img7/fs/cursor.1373110983.png ) 1 2, auto;
font-family: 'New Rocker', cursive;
font-size:12px;
}
#list_surround {
cursor:url(http://ipic.su/img/img7/fs/cursor.1373110983.png ) 1 2, auto;
left:32%;
margin:auto;
position:absolute;
width:550px;
}
.td1, .td2 {
background-attachment:scroll;
background-color:rgba(0, 0, 0, 0.901961);
background-image:none;
background-position:0 0;
background-repeat:repeat repeat;
padding:3px;
}
.animetitle + small {
color:#7A95FF !important;
}
td:nth-of-type(2) small {
color:#FFFFFF;
font-size:10px;
padding-right:10px;
}
td:nth-of-type(2) small a {
color:#FFFFFF;
}
.td1:first-of-type, .td2:first-of-type {
border-left-style:solid !important;
border-left-width:2px !important;
}
.td1:last-of-type, .td2:last-of-type {
border-right-style:solid;
border-right-width:2px;
color:#FFFFFF;
}
td.table_header:nth-of-type(3) {
padding-right:7px;
}
a, a:visited {
color:#FFFFFF;
text-decoration:initial;
}
tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 {
color:#FFBF00;
}
.table_header {
background-color:rgba(0, 0, 0, 0.901961);
border-top-color:#FFFFFF;
border-top-style:solid;
border-top-width:2px;
font-size:10px;
padding:2px;
}
td.table_header:first-of-type {
border-left-color:#FFFFFF !important;
border-left-style:solid !important;
border-left-width:2px !important;
border-top-color:#FFFFFF !important;
border-top-left-radius:10px;
border-top-style:solid !important;
border-top-width:2px !important;
}
td.table_header:last-of-type {
border-right-color:#FFFFFF !important;
border-right-style:solid !important;
border-right-width:2px !important;
border-top-color:#FFFFFF !important;
border-top-right-radius:10px;
border-top-style:solid !important;
border-top-width:2px !important;
}
.category_totals {
background-color:rgba(0, 0, 0, 0.901961);
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-bottom-style:solid;
border-bottom-width:2px;
border-left-color:#FFFFFF !important;
border-left-style:solid !important;
border-left-width:2px !important;
border-right-color:#FFFFFF;
border-right-style:solid;
border-right-width:2px;
border-top-left-radius:0;
border-top-right-radius:0;
font-size:10px;
padding:2px 2px 2px 40px;
}
.borderRBL {
border-left-style:solid !important;
border-left-width:2px !important;
border-right-color:#FFFFFF !important;
border-right-style:solid !important;
border-right-width:2px !important;
color:#2030F0 !important;
font-size:11px;
padding-left:39px;
}
.borderRBL a, .borderRBL a:visited {
color:#F0304F !important;
text-decoration:initial;
}
.borderRBL a:hover {
color:#F0304F !important;
}
#copyright {
background-color:rgba(1, 1, 1, 0.498039);
border:2px solid #FFFFFF;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
border-top-left-radius:8px;
border-top-right-radius:8px;
color:#FFFFFF;
display:block;
font-size:11px;
margin-top:0;
padding:2px;
position:relative !important;
text-align:center !important;
top:10px;
}
#copyright::after {
content:'List Design By iVoid, Edited By Forgotten' !important;
display:block;
margin-top:20px;
text-align:center !important;
}
#copyright a {
}
#grand_totals {
display:none;
}
td:nth-of-type(2) small {
color:transparent;
}
[class^="header_"] * {
font-size:0;
height:10px;
line-height:24px;
padding-bottom:4px;
text-align:left;
vertical-align:bottom;
}
.header_cw {
background-image:url(http://ipic.su/img/img7/fs/cooltext1104771506.1373120274.png );
background-position:20px 10px;
background-repeat:no-repeat no-repeat;
background-size:500px 150px;
display:inline-block;
height:170px;
margin-bottom:-50px;
width:500px;
}
.header_completed {
background-image:url(http://ipic.su/img/img7/fs/cooltext1104651260.1373111973.png );
background-position:20px 10px;
background-repeat:no-repeat no-repeat;
background-size:500px 150px;
display:inline-block;
height:170px;
margin-bottom:-50px;
width:500px;
}
.header_onhold {
background-image:url(http://ipic.su/img/img7/fs/cooltext1104651699.1373112014.png );
background-position:20px 10px;
background-repeat:no-repeat no-repeat;
background-size:500px 150px;
display:inline-block;
height:170px;
margin-bottom:-50px;
width:500px;
}
.header_dropped {
background-image:url(http://ipic.su/img/img7/fs/cooltext1104652199.1373112041.png );
background-position:20px 10px;
background-repeat:no-repeat no-repeat;
background-size:500px 150px;
display:inline-block;
height:170px;
margin-bottom:-50px;
width:500px;
}
.header_ptw {
background-image:url(http://ipic.su/img/img7/fs/cooltext1104652651.1373112079.png );
background-position:20px 10px;
background-repeat:no-repeat no-repeat;
background-size:500px 150px;
display:inline-block;
height:170px;
margin-bottom:-50px;
width:500px;
}
#copyright, #copyright a, #copyright::after {
color:#FFFFFF !important;
}
a {
color:#FFFFFF;
cursor:url(http://ipic.su/img/img7/fs/cursor.1373110983.png ), auto;
text-decoration:none;
text-shadow:none;
}
#inlineContent {
cursor:url(http://ipic.su/img/img7/fs/cursor.1373110983.png ) 1 2, auto;
display:inline-block !important;
height:3000px !important;
left:0 !important;
margin:auto !important;
position:fixed !important;
right:0 !important;
top:0 !important;
width:3000px !important;
z-index:-1 !important;
}
a:hover {
cursor:url(http://ipic.su/img/img7/fs/cursor.1373110983.png ) 1 2, auto;
}
/*BUTTONS CODES*/
#list_surround .status_selected, #list_surround .status_not_selected {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://ipic.su/img/img7/fs/cw.1373109296.jpg );
background-position:0 0;
background-repeat:no-repeat no-repeat;
border:2px solid white !important;
border-bottom-left-radius:0;
border-bottom-right-radius:0;
border-top-left-radius:15px;
border-top-right-radius:0;
display:block;
height:90px;
padding:0;
position:fixed;
right:-8px;
top:50px;
width:300px;
}
#list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://ipic.su/img/img7/fs/completed.1373109292.jpg );
background-repeat:no-repeat no-repeat;
border-bottom-right-radius:0;
border-top-left-radius:0;
border-top-right-radius:0;
top:142px;
}
#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-attachment:scroll;
background-color:transparent;
background-image:url(http://ipic.su/img/img7/fs/on-hold.1373109306.jpg );
top:235px;
}
#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-attachment:scroll;
background-color:transparent;
background-image:url(http://ipic.su/img/img7/fs/dropped.1373109300.jpg );
background-repeat:repeat repeat;
top:328px;
}
#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-attachment:scroll;
background-color:transparent;
background-image:url(http://ipic.su/img/img7/fs/Planned.1373109316.jpg );
top:421px;
}
#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-attachment:scroll;
background-color:transparent;
background-image:url(http://ipic.su/img/img7/fs/all.1373109289.jpg );
background-position:0 0;
background-repeat:no-repeat no-repeat;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
top:513px;
width:300px;
}
.status_not_selected {
-webkit-transition:all 0.4s ease 0s;
opacity:0.75;
right:-95px !important;
transition:all 0.4s ease 0s;
}
.status_not_selected:hover {
-webkit-transition:all 0.25s ease 0s;
color:transparent;
opacity:1;
right:-8px !important;
transition:all 0.25s ease 0s;
}
.status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a {
color:transparent;
display:block;
height:90px;
opacity:0;
width:300px;
}
.status_selected {
display:block;
}
.status_not_selected {
display:block;
}
#list_surround:nth-of-type(n+4) tbodysmall {
visibility: hidden;
font-size: 0px;
}
#list_surround:nth-of-type(n+4) tbody small a:last-of-type {
display: none !important;
}
#list_surround:nth-of-type(n+4) tbody:hover small a:first-of-type {
background-color: rgba(1, 1, 1, 0.7);
border-left: 2px solid #FFFFFF !important;
display: block !important;
position: absolute !important;
left: -38px !important;
width: 31px;
visibility: visible;
border-radius: 5px 0 0 5px;
border-top: 2px solid #FFFFFF !important;
border-bottom: 2px solid #FFFFFF !important;
padding-left: 5px;
margin-top: -5px;
height: 17px;
padding-top: 3px;
font-size: 11px !important;
}
/*PICTURES AND TAGS CODE*/
:hover + .hide {
background-position: center 50% !important;
background-repeat: no-repeat !important;
background-size: cover;
border-color: black;
border-radius: 25px 25px 25px 25px;
border-style: solid;
border-width: 3px;
display: block !important;
height: 249px;
left: 1100px;
padding-bottom: 0;
position: fixed;
top: 155px;
width: 175px;
}
.hide:before {
background: none repeat scroll 0 0 transparent;
border-radius: 25px 25px 0 0;
color: black;
content: "";
padding-bottom: 5px;
position: absolute;
text-align: center;
top: -25px;
width: 225px;
}
.td1:nth-of-type(6), .td2:nth-of-type(6) {
background-color: black !important;
border-color: black;
border-style: solid;
border-radius: 25px 25px 25px 25px;
border-width: 1px;
display: none;
height: auto;
left: 1100px;
padding: 10px 10px 14px 24px;
position: fixed;
top: 415px;
width: 161px;
z-index: 1;
}
#copyright, #copyright:hover {
background-color: rgba black !important;
border-radius: 5px 5px 5px 5px;
bottom: 0;
color: white;
padding: 2px;
width: 100%;
}
.table_header:nth-of-type(6) {
display: none;
}
/*1 STARS CODE*/
.animetitle[href$="/"] span:after,
.animetitle[href$="/"] span:after {
content: ' ';
position: absolute;
display: block;
margin-left: 210px;
margin-top: -30px;
width: 158px;
height: 33px;
background: url('http://ipic.su/img/img7/fs/favor1.1369555396.png ') no-repeat;
}
/*5 STARS CODE*/
.animetitle[href$="/"] span:after,
.animetitle[href$="/"] span:after {
content: ' ';
position: absolute;
display: block;
margin-left: 120px;
margin-top: -30px;
width: 158px;
height: 33px;
background: url('http://ipic.su/img/img7/fs/favor5.1369555424.png ') no-repeat;
}
/*4 STARS CODE*/
.animetitle[href$="/"] span:after,
.animetitle[href$="/"] span:after {
content: ' ';
position: absolute;
display: block;
margin-left: 140px;
margin-top: -30px;
width: 158px;
height: 33px;
background: url('http://ipic.su/img/img7/fs/favor4.1369555416.png ') no-repeat;
}
/*3 STARS CODE*/
.animetitle[href$="/"] span:after {
content: ' ';
position: absolute;
display: block;
margin-left: 180px;
margin-top: -30px;
width: 158px;
height: 33px;
background: url('http://ipic.su/img/img7/fs/favor3.1369555410.png ') no-repeat;
}
/*2 STARS CODE*/
.animetitle[href$="/"] span:after,
.animetitle[href$="/"] span:after {
content: ' ';
position: absolute;
display: block;
margin-left: 180px;
margin-top: -30px;
width: 158px;
height: 33px;
background: url('http://ipic.su/img/img7/fs/favor2.1369555403.png ') no-repeat;
}
/*REWATCHING CODE*/
.animetitle[href$="/"] span:after,
.animetitle[href$="/"] span:after {
content: ' ';
position: absolute;
display: block;
margin-left: 150px;
margin-top: -14px;
width: 158px;
height: 33px;
background: url('http://ipic.su/img/img7/fs/rew.1373742583.png ') no-repeat;
}
Favor
Rewatching
background-image CLEAR NICKNAME
RazorSQ Aug 6, 2013 5:25 AM
Offline
Apr 2013
2
Hi!sorry for this but it seems that SylakentH_'s photos are missing..see i'm using the One Piece theme and suddently i lost all of the pictures he used.i just wanted to warn you :)
Offline
May 2012
1921
aninan said: Hi!sorry for this but it seems that SylakentH_'s photos are missing..see i'm using the One Piece theme and suddently i lost all of the pictures he used.i just wanted to warn you :)
check this topic http://myanimelist.net/forum/?topicid=618961
Offline
Apr 2013
2
Thank you so much!It worked now..i don't know what happened,and i wanted to tell yoo so you'll know it. :) And sorry for ruining this topic.
Offline
Jul 2013
381
Hello everyone~ It's my first post in this club, actually I'm a new member :) I'm into CSS (although I'm no pro :p) so I've decided that I'll make some list styles (until college starts =_=). So, here's the first style, featuring Naruto! :D
screenshot:
http://i.imgur.com/cZ0JfAN.jpg
download (with resources credits and instructions):
http://www.sendspace.com/file/128mk4
Also - thanks to Shishio-kun for the tutorials :)
aziza said: first one I ever designed:
CSS:
Really liked the idea behind this one, but some of the images were unavailable so I thought about reworked it a bit. Ended up tweaking the overall layout a bit.
CSS:
pastebin link
discomethod Aug 22, 2013 1:44 AM
Offline
Aug 2013
1
Only recently joined MAL. Took me a while to get the lists up to date. But once I did I ended up here while searching for the ways to improve the looks of the lists. I sort of ended up mashing up different styles and codes I found here while editing here and there apart from doing additional stuff with Adobe Photoshop. This is what I got. Feel free to use :)
/*Fonts*/
@import url("http://fonts.googleapis.com/css?family=Nova+Slim");
@import url(http://fonts.googleapis.com/css?family=Carrois+Gothic+SC );
@import url("http://fonts.googleapis.com/css?family=Tangerine");
@import
"http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css
";
@import "https://dl.dropboxusercontent.com/u/78340470/anime.css";
@import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css";
/*
Got a question or want to learn more? Try this link:
http://myanimelist.net/forum/?topicid=419405&show=0#post1
*/
/*
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!
*/
body {
background-image:
url(http://signavatar.com/29213_s.gif );
background-attachment: fixed;
}
/*
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). if you don't want a solid color there, go to the line that starts
with background-color and replace it the color type (blue for example) with the
word "transparent" (no quotations).
*/
.header_title {
background-image: url(http://img15.imageshack.us/img15/228/frame6518.png );
color:orange;
font-family: tangerine;
font-size:54px;
border-radius: 20px 20px 0px 0px;
text-align: center;
text-shadow: 3px -1px 5px #0C0C0C;
}
/*
SUB-HEADERS BACKGROUND COLOR COLOR
Below each main header is the sub-header which says Score, Episodes, Tags, etc.
*/
.table_header {
background-image:url(http://img15.imageshack.us/img15/228/frame6518.png );
font-size:12px;
}
/*
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:#FFFF00;
font-family: 'Carrois Gothic SC', sans-serif;
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:white;
font-family: 'Carrois Gothic SC', sans-serif;
font-size:12px;
}
/*
LIST WIDTH
Use this to increase the width of your list!
*/
#list_surround {
width:700px;
}
#list_surround {
position: absolute !important;
left: 180px !important;
top: 10px !important;}
/*
REPOSITION MAIN BACKGROUND
Change the position your background starts on your screen from with the two
properties after "background-position" below.
You replace 'center' and '43%' with two 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" after background-position in the code below, replacing "center
43%".
If you want it to start from the top and left, use "top left"
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: center 43%;}
/*OTHER CODES
Important codes for the layout's setup. Don't mess with these unless you know
exactly what you're doing. If you want to customize more on the page, use the
link at the top of this CSS, or ask in my club!
*/
body {
font-weight: light;
background-repeat: no-repeat;
background-color;
}
#list_surround {
margin:auto;
background-image:url();
}
a {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover, a:visited:hover {
font-weight:bold;
text-decoration:underline;
}
.category_totals,
.td1,
.td2,
#grand_totals,
#copyright {
background-image:url(http://img15.imageshack.us/img15/228/frame6518.png );
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;
}
#copyright:after {
content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more
designs or 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:#FFFF00;
}
.status_not_selected a{
color:white;
}
.thickbox {
color:#FFFF00;
font-family:'Carrois Gothic SC', sans-serif;
font-size:12px;
}
.header_title {
height:52px;
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;
}
body {
background-size: cover;
}
a, .td1, .td2 {
color:#FFFFFF;
font-weight:normal;
overflow:hidden;
}
#list_surround small a {
color: gray !important;
color: transparent !important;
background:
url(http://i1302.photobucket.com/albums/ag140/shoutaazuma/more2_zpsd5e9e3eb.png )
no-repeat center;
font-size: 13px;
text-shadow: none !important;
}
a.List_LightBox {
color: gray !important;
color: transparent !important;
background:
url(http://i1302.photobucket.com/albums/ag140/shoutaazuma/plus2_zps3678f301.png )
no-repeat center !important;
}
#list_surround .status_not_selected {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i.imgur.com/NCjBPmU.png );
background-position:0px 0px;
background-repeat:repeat repeat;
display:block;
height:80px;
right:-35px;
padding:0;
position:fixed;
top:60px;
width:250px;
overflow:auto;
}
#list_surround .status_not_selected:hover, #list_surround .status_selected {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i.imgur.com/LgwE6iN.png );
background-position:0px 0px;
background-repeat:repeat repeat;
display:block;
height:80px;
right:-5px;
padding:0;
position:fixed;
top:60px;
width:250px;
border:5px solid rgba(0,0,0,0.6);
border-radius:11px;
transition: right 0.25s ease-in-out 0s ;
-o-transition: all 0.25s ease-in-out 0s ;
-moz-transition: all 0.25s ease-in-out 0s ;
-webkit-transition: all 0.25s ease-in-out 0s ;
overflow:auto;
}
#list_surround .status_selected + .status_not_selected, #list_surround
.status_not_selected + .status_not_selected {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i.imgur.com/NCjBPmU.png );
background-position:0px -80px;
background-repeat:repeat repeat;
top:150px;
}
#list_surround .status_selected + .status_not_selected:hover, #list_surround
.status_not_selected + .status_selected, #list_surround .status_not_selected +
.status_not_selected:hover {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i.imgur.com/LgwE6iN.png );
background-position:0px -80px;
background-repeat:repeat repeat;
top:150px;
}
#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_not_selected
{
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i.imgur.com/NCjBPmU.png );
background-position:0px -160px;
background-repeat:repeat repeat;
top:240px;
}
#list_surround .status_selected + .status_not_selected +
.status_not_selected:hover, #list_surround .status_not_selected +
.status_selected + .status_not_selected:hover, #list_surround
.status_not_selected + .status_not_selected + .status_selected, #list_surround
.status_not_selected + .status_not_selected + .status_not_selected:hover {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i.imgur.com/LgwE6iN.png );
background-position:0px -160px;
background-repeat:repeat repeat;
top:240px;
}
#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_not_selected {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i.imgur.com/NCjBPmU.png );
background-position:0px -240px;
background-repeat:repeat repeat;
top:330px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected +
.status_not_selected:hover, #list_surround .status_not_selected +
.status_selected + .status_not_selected + .status_not_selected:hover,
#list_surround .status_not_selected + .status_not_selected + .status_selected +
.status_not_selected:hover, #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:hover {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i.imgur.com/LgwE6iN.png );
background-position:0px -240px;
background-repeat:repeat repeat;
top:330px;
}
#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_not_selected {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i.imgur.com/NCjBPmU.png );
background-position:0px -320px;
background-repeat:repeat repeat;
display:inline;
top:420px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected +
.status_not_selected + .status_not_selected:hover, #list_surround
.status_not_selected + .status_selected + .status_not_selected +
.status_not_selected + .status_not_selected:hover, #list_surround
.status_not_selected + .status_not_selected + .status_selected +
.status_not_selected + .status_not_selected:hover, #list_surround
.status_not_selected + .status_not_selected + .status_not_selected +
.status_selected + .status_not_selected:hover, #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:hover {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i.imgur.com/LgwE6iN.png );
background-position:0px -320px;
background-repeat:repeat repeat;
display:inline;
top:420px;
}
#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_not_selected {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i.imgur.com/NCjBPmU.png );
background-position:0px -400px;
background-repeat:no-repeat no-repeat;
display:inline;
top:510px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected +
.status_not_selected + .status_not_selected + .status_not_selected:hover,
#list_surround .status_not_selected + .status_selected + .status_not_selected +
.status_not_selected + .status_not_selected + .status_not_selected:hover,
#list_surround .status_not_selected + .status_not_selected + .status_selected +
.status_not_selected + .status_not_selected + .status_not_selected:hover,
#list_surround .status_not_selected + .status_not_selected + .status_not_selected
+ .status_selected + .status_not_selected + .status_not_selected:hover,
#list_surround .status_not_selected + .status_not_selected + .status_not_selected
+ .status_not_selected + .status_selected + .status_not_selected:hover,
#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:hover {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i.imgur.com/LgwE6iN.png );
background-position:0px -400px;
background-repeat:no-repeat no-repeat;
display:inline;
top:510px;
}
#list_surround {
background-attachment:scroll;
background-image:none;
background-position:0 0;
border-bottom-color:#292929;
border-bottom-style:solid;
border-bottom-width:0;
border-left-color:#292929;
border-left-style:solid;
border-left-width:0;
border-right-color:#292929;
border-right-style:solid;
border-right-width:0;
border-radius:10px;
height:auto;
margin:0px auto 30px;
position:absolute;
top:20px;
left:220px;
width:750px;
}
#list_surround .status_selected a {
color:#184900;
display:block;
font-size:1px;
height:2px;
padding:78px 0 0 218px;
width:30px;
}
#list_surround .status_not_selected a {
color:#184900;
display:block;
font-size:1px;
height:2px;
padding:78px 0 0 218px;
width:30px;
}
#list_surround .animetitle + small {
color:#FF6600;
}
#list_surround .category_totals {
padding:5px;
text-align:center;
color:#FFFFFF;
font-weight:normal;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 0px 0px 20px 20px;
}
#list_surround .category_totals:hover {
background-color:rgba(0,153,51,0.6);
transition: all 0.25s ease-in-out 0s ;
}
#list_surround #grand_totals {
display:none;
}
#mal_cs_listinfo a strong {
color:#FFFFFF;
font-family:'Carrois Gothic SC', sans-serif;
font-size:11px;
font-variant:normal;
font-weight:normal;
text-decoration:underline;
text-transform:none;
}
#mal_cs_otherlinks strong {
color:rgba(0,0,0,0.6);
font-family:'Carrois Gothic SC', sans-serif;
font-size:11px;
font-variant:normal;
}
.borderRBL {
color:#00FFFF !important;
}
#list_surround .header_title span {
font: 54px Tangerine;
font-variant:'Carrois Gothic SC', sans-serif;
}
#list_surround .status_not_selected a {
opacity:0;
}
#list_surround .status_selected a {
opacity:0;
}
#copyright {
color:#FF6600;
font-family: 'Carrois Gothic SC', sans-serif;;
font-size:10px;
height:15px;
position:absolute;
text-align:center !important;
width:600px;
}
#copyright a {
color:#FF6600;
}
#copyright {
}
.td1, .td2{
background-color: rgba(0, 0, 0, 0.6);
}
tr:hover [class^="td"] {
background-color:rgba(255,255,255,0.6);
transition: all 0.25s ease-in-out 0s ;
-o-transition: all 0.25s ease-in-out 0s ;
-moz-transition: all 0.25s ease-in-out 0s ;
-webkit-transition: all 0.25s ease-in-out 0s ;
}
.td1:nth-of-type(2), .td2:nth-of-type(2) {
text-align:left;
}
*, #inlineContent {
font-family: 'Carrois Gothic SC', sans-serif;
font-size: 14px;
text-decoration: none;
}
#inlineContent {
display: block !important;
height: 100%;
width: 100%;
left: 0;
position: fixed;
top: 0;
background: transparent;
z-index: -1;
}
/* COVER AREA
The surrounding area containing each cover pic which appears when you point to a
row (requires #more CSS to see a DVD or manga cover).Β
Move the cover's location around withΒ leftΒ andΒ top.Β
RemoveΒ onlyΒ theΒ border-radius: 25px 25px 25px 25px;Β lines to take the rounded
corners away.Β
Increase height and width to make the pics bigger.Β
DeleteΒ border-style: solid;Β to remove the border.Β
For changing the original background color see the bottom of the original post:
http://myanimelist.net/forum/?topicid=563993
*/
table:hover + .hide {
background-size: cover;
right: 10px;
top: 600px;
height: 310px;
width: 200px;
padding-bottom: 0px;
border-style: solid;
border-color: black;
border-top: 1px solid black;;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-radius: 25px 25px 25px 25px;
background-color: transparent;
background-position: center 50% !important;
background-repeat: no-repeat !Important;
display: block !important;
position: fixed;
}
/* PREVIEW MSG ABOVE COVERS
RemoveΒ content: "preview";Β to remove the PREVIEW text.
Change the text in quotations after content to what you want it to say above your
cover pic.Β
Top and width controls the position of the text.
*/
.hide:before {
background: transparent;
padding-bottom: 5px;
position: absolute;
text-align: center;
width: 225px;
top: -25px;
border-radius: 25px 25px 0 0;
}
P.S.: wallpapers are set to be rotating on refresh, so if You want to have Your own - just change url in
body {
background-image:
url(http://signavatar.com/29213_s.gif );
iSable Aug 22, 2013 4:59 PM
Offline
Jul 2013
74
Hello, I've only recently become interested in changing my list style so I've played around with a couple different lists, changing color and such. This list is the horizontal scrolling list from Hahaido. It was originally too girly for me so I thought I would make it more manly. You may need to make a couple tweaks if you use this list, but if you like it please feel free to use it.
http://dl.dropboxusercontent.com/s/nsbvselmi2rwywd/list.png
@import url(http://fonts.googleapis.com/css?family=Quicksand |Electrolize);
@import url(https://dl.dropboxusercontent.com/s/a07caakc81zxhaz/content.css );
@import url(https://dl.dropboxusercontent.com/s/hyrvicc2sikajgx/menu.css );
@import url(https://dl.dropboxusercontent.com/s/hiuoeh8pgzdrocl/animelist.css );
@import url(https://dl.dropboxusercontent.com/s/29jw8za7fsy5ns9/faves.css );
@import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM );
#list_surround br { display:none; }
/* # */
td[class^='td']:first-of-type {
position: absolute !important;
margin-left: -24px !important;
margin-top: 0;
width: auto !important;
padding: 5px 10px;
background-color: rgba(178, 34, 34, 1) !important;
border-radius: 10em;
-o-border-radius: 10em;
-moz-border-radius: 10em;
-webkit-border-radius: 10em;
}
/* Score */
td[class^='td']:nth-of-type(3):before { content: 'My score: '; font-size: 12px; }
td[class^='td']:nth-of-type(3) {
position: absolute !important;
right: 6px !important;
top: 219px !important;
width: auto;
color: #F8F8FF;
font-size: 28px;
text-align: right;
z-index: 5;
}
td[class^='td']:nth-of-type(3) a { color: #F8F8FF; }
/* Type */
td[class^='td']:nth-of-type(4) {
position: absolute !important;
margin-left: -344px !important;
margin-top: 32px;
width: auto !important;
}
/* Episodes */
td[class^='td']:nth-of-type(5):before { content: 'Episodes: '; }
td[class^='td']:nth-of-type(5) {
position: absolute !important;
margin-left: -344px !important;
top: 224px !important;
width: auto !important;
z-index: 5 !important;
}
/* Tags */
td[class^='td']:nth-of-type(6) {
pointer-events: none;
position: absolute !important;
display:;
left: -33px !important;
top: 58px !important;
width: 276px !important;
white-space: pre-line;
font-weight: 400 !important;
}
td[class^='td']:nth-of-type(6) a { font-weight: 400; }
/* Covers settings */
.hide {
visibility: visible;
position: relative;
display: inline-block !important;
float: left;
width: 180px !important;
height: 256px !important;
margin-top: 8px;
margin-left: -497px;
background-repeat: no-repeat !important;
background-size: 100% 100%;
border-radius: 10px;
-o-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, .9), inset 0 0 1px rgba(0, 0, 0, .7);
-o-box-shadow: 0 4px 8px rgba(0, 0, 0, .9), inset 0 0 1px rgba(0, 0, 0, .7);
-moz-box-shadow: 0 4px 8px rgba(0, 0, 0, .9), inset 0 0 1px rgba(0, 0, 0, .7);
-webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, .9), inset 0 0 1px rgba(0, 0, 0, .7);
z-index: 10;
}
/* Covers glow effect*/
.hide:after {
position: absolute;
content: '';
width: 0% !important;
height: 0% !important;
margin-left: 5%;
margin-top: 5%;
border-radius: 10px;
-o-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: linear-gradient(top, rgba(255, 255, 255, 0.7) 0%,rgba(255, 255, 255, .1) 100%);
background:
-moz-linear-gradient(top,
rgba(255,255,255,0.7) 0%,
rgba(255,255,255,.1) 100%);
background:
-webkit-gradient(linear, left top, left bottom,
color-stop(0%,rgba(255,255,255,0.7)),
color-stop(100%,rgba(255,255,255,.1)));
}
body {
width: 100%;
background-image: url("https://dl.dropboxusercontent.com/s/hm8ofdfkquijur4/Untitled.png" ); /* Fate/Zero background */
background-repeat: no-repeat;
background-attachment: fixed;
background-size: contain;
color: #f8f8ff;
font-size: 12px;
font-family: 'Quicksand', sans-serif; /* Custom font */
cursor: default;
overflow-x: scroll;
overflow-y: hidden;
}
a { text-decoration: none; }
a:hover { cursor: pointer; }
#list_surround {
position: absolute !important;
display: inline-block;
float: left;
left: 0;
bottom: 0;
min-width: 100%;
height: 300px;
min-height: 31%;
margin-right: -999999em;
border-top: solid 4px #b22222; /* Purple border above covers at the bottom */
background-color: rgba(24, 24, 24, 1);
/* Purple shadow above the purple border at the bottom */
box-shadow: 0 0 20px rgba(178, 34, 34, 1);
-o-box-shadow: 0 0 20px rgba(178, 34, 34, 1);
-moz-box-shadow: 0 0 20px rgba(178, 34, 34, 1);
-webkit-box-shadow: 0 0 20px rgba(178, 34, 34, 1);
}
.animetitle {
position: absolute;
margin-left: -36px !important;
width: 256px;
font-size: 18px;
font-weight: 600;
color: #FFFFFF !important;
text-shadow: 0 0 0.2em #F281B7;
white-space: pre-wrap;
}
/* Airing, rewatching etc.*/
.animetitle + small {
visibility: visible !important;
position: absolute !important;
display: inline-block !important;
margin-left: -88px;
margin-top: 202px;
font-size: 12px !important;
line-height: 14px !important;
width: auto !important;
padding: 5px 10px;
background-color: rgba(178, 34, 34, 1);
border-radius: 10em;
-o-border-radius: 10em;
-moz-border-radius: 10em;
-webkit-border-radius: 10em;
}
.td1, .td2 {
position: relative !important;
display: inline-block;
margin-left: 64px !important;
line-height: 24px !important;
}
.td1 a, .td2 a { color: #f8f8ff; font-weight: 600; }
#list_surround .header_title span { display: none; }
.category_totals {
position: fixed !important;
display: inline-block !important;
left: 0;
bottom: 0;
width: 100% !important;
padding: 2px;
font-size: 10px;
font-weight: 600;
line-height: 20px;
text-align: center !important;
color: #FFFFFF !important;
background-color: rgba(178, 34, 34, 1) !important; /* Purple background of totals cathegory */
}
#grand_totals { display: none; }
#copyright {
position: absolute !important;
display: inline-block !important;
margin-left: -494px !important;
top: -10px;
height: 174px;
width: 384px;
padding: 104px 6px 0 6px;
border-left: solid 4px #B22222;
border-right: solid 4px #B22222;
}
#copyright a { color: #8f2589; font-weight: 600; }
#copyright a:hover { text-decoration: underline; }
#copyright:after { display: block; content: 'List designed by Hahaido.'; }
/*Iori, Inaba pics*/
#list_surround:before {
position: fixed !important;
display: block !important;
content: '';
left: 0;
top: 0;
width: 50%;
height: 100%;
background-image: url();
background-repeat: no-repeat;
background-position: top center;
background-size: contain;
z-index: -1;
}
.animetitle[href$="/Fate/zero_2nd_Season"] span:after,
.animetitle[href$="/Toradora!"] span:after,
.animetitle[href$="/Clannad:_After_Story"] span:after,
.animetitle[href$="/Kokoro_Connect"] span:after,
.animetitle[href$="/Angel_Beats!"] span:after, {
position: absolute;
display: block;
content: ' ';
margin-left: 102px;
margin-top: 198px;
width: 32px;
height: 36px;
background: url('Images/favorite.png') no-repeat;
}
}
Vupa Aug 1, 2015 10:20 PM
"There stood a high school boy, who for selfish reasons had twice beaten an elementary school girl unconscious, and had gotten all nihilistically worked up about it. Actually that's still me."
Offline
Jul 2013
381
Donating my (now) old manga list style. Can be used as anime list style as well. It's a Eren (Shingeki no Kyojin) list.
the code:
@import 'https://dl.dropboxusercontent.com/s/2ldo3lk79elzfqx/erenlist.css';
#copyright
{visibility: visible;}
to change the eren picture add:
#list_surround
{background-image: url(your-image-url-goes-inside-these-brackets);}
make sure the image height is at least 300px;
nymphiae Mar 27, 2017 7:35 AM
Offline
Mar 2013
263
There are so many anime lists out there and too few profiles... So I decided to donate mine. I've only finished this today so it's a recent work but I hope you enjoy it. The links to the anime and manga lists are there so all you have to do is replace my name with your own. As for the other links, just add the one that redirects to the designated page.
Preview Image:
The Code:
Offline
Feb 2013
13
Donating my SAO layout :)
Preview:
http://i39.tinypic.com/2cnvbs9.png
code:
@import url(http://fonts.googleapis.com/css?family=Rationale );
@import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css";
@import "https://dl.dropboxusercontent.com/u/78340470/anime.css";
@import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css";
/* COVER AREA
The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS to see a DVD or manga cover).
Move the cover's location around with left and top.
Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away.
Increase height and width to make the pics bigger.
Delete border-style: solid; to remove the border.
For changing the original background color see the bottom of the original post:
http://myanimelist.net/forum/?topicid=563993
*/
:hover + .hide {
background-size: cover;
left: 850px;
top: 160px;
height: 350px;
width: 226px;
border-style: solid;
border-color: white;
border-top: 1px solid white;;
border-left: 1px solid white;
border-right: 1px solid white;
border-bottom: 1px solid white;
border-radius: 25px 25px 25px 25px;
background-color: rgba(200, 5, 200, 0.75);
background-position: center 50% !important;
background-repeat: no-repeat !Important;
display: block !important;
position: fixed;
}
/* PREVIEW MSG ABOVE COVERS
Remove content: "preview"; to remove the PREVIEW text.
Change the text in quotations after content to what you want it to say above your cover pic.
Top and width controls the position of the text.
*/
.hide:before {
background: transparent;
padding-bottom: 5px;
position: absolute;
text-align: center;
width: 225px;
top: -25px;
border-radius: 25px 25px 0 0;
}
/*
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!
*/
body {
background-image:
url(http://i.imgur.com/nZNzEOp.jpg?1 );
background-attachment: fixed;
background-size: cover;
}
/*
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). if you don't want a solid color there, go to the line that starts with background-color and replace it the color type (blue for example) with the word "transparent" (no quotations).
*/
.header_title {
background-color:transparent;
color:cyan;
font-family:Rationale;
font-size:43px;
}
/*
SUB-HEADERS BACKGROUND COLOR COLOR
Below each main header is the sub-header which says Score, Episodes, Tags, etc.
*/
.table_header {
background-color:transparent;
}
/*
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:cyan;
font-family:Rationale;
font-size:16px;
}
/*
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:white;
font-family:Rationale;
font-size:16px;
}
/*
LIST WIDTH
Use this to increase the width of your list!
*/
#list_surround {
width:850px;
}
/*
REPOSITION MAIN BACKGROUND
Change the position your background starts on your screen from with the two properties after "background-position" below.
You replace 'center' and '43%' with two 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" after background-position in the code below, replacing "center 43%".
If you want it to start from the top and left, use "top left"
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: top center;}
body {
cursor:url(http://i.imgur.com/dZIjvzA.png?1 ) 1 2, auto;
}
a:hover {
cursor: url(http://i.imgur.com/dZIjvzA.png?1 ) 1 2, auto;
}
Read more at http://myanimelist.net/forum/?topicid=202008#IxAvqz3EyMmVG4DF.99
/*OTHER CODES
Important codes for the layout's setup. Don't mess with these unless you know exactly what you're doing. If you want to customize more on the page, use the link at the top of this CSS, or ask in my club!
*/
body {
font-weight: light;
background-repeat: no-repeat;
background-color: black;
}
#list_surround {
position: absolute !important;
left: 1px !important;
background-image:url();
}
a {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover, a:visited:hover {
color:blue;
text-decoration:underline;
}
.category_totals,
.td1,
.td2,
#grand_totals,
#copyright {
background-image:url(http://img15.imageshack.us/img15/228/frame6518.png );
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;
}
#copyright:after {
content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs or 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:cyan;
}
.status_not_selected a{
color:white;
}
.thickbox {
color:cyan;
font-family:fantasy;
font-size:12px;
}
.header_title {
height:52px;
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;
}
/****************************/
/* Aqua Highlight on Hover */
/****************************/
tr:hover [class^=td] {
background-color: rgba(255, 165, 0, 1) !important;
-moz-transition: .4s ease;
-webkit-transition: .4s ease;
-o-transition: .4s ease;
}
/*
CUSTOM BANNER
"Background image" controls the image seen, change out the link to change the banner pic. Please leave everything else alone unless you know exactly what you're doing!
*/
#list_surround {
background-image: url(http://i44.tinypic.com/2q2k651.png );
background-position: right top;
background-repeat: no-repeat;
padding-top: 255px;
}
Read more at http://myanimelist.net/forum/?topicid=500087#Qb95RBh3uYKx7Ubl.99
Offline
Mar 2013
877
I am donating a modified version of a beginner list. Feel free to modify it further to your liking.
Preview :
Code :
http://pastebin.com/6hzah4tt
Edit: Fixed some tiny mistakes (:
shiawase-png Feb 6, 2015 8:42 AM
Offline
Feb 2010
11828
Thanks for your designs guys and girls, they all look great! I will be happy to add them to the main list with the others after they decide to finally re-enable IMG tags (its only been.. about 5 months!).
Offline
Oct 2012
58
Since I have an unused DxD list here, and a lot of people like one, I decided to donate it.
Preview:
http://www.dropbox.com/s/k6lflza4n96vgaq/Screenshot%202014-01-12%2017.51.47.png
The Code:
/* TOP BAR */
@import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css";
/* ANIME COVERS */
@import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css";
/* BACKGROUND */
body {
background-attachment:fixed;
background-clip:border-box;
background-color:transparent;
background-image:url(http://i42.tinypic.com/30wbjtg.png );
background-position:0 0;
background-repeat:no-repeat no-repeat;
background-size:cover;
cursor:url(http://cur.cursors-4u.net/games/gam-14/gam1391.png ), auto;
font-family:'comic Sans MS';
}
/*SIZE OF LIST & TITLE */
#list_surround {
background-attachment:scroll;
background-color:transparent;
background-position:50% -60px;
background-repeat:no-repeat no-repeat;
font-size:81.25%;
line-height:1;
margin:0 auto;
padding-bottom:10px;
padding-top:232px;
position:absolute;
right:50px !important;
width:800px;
}
/*TEXT COLOR*/
a {
color:#FFFFFF;
cursor:url(http://cur.cursors-4u.net/games/gam-14/gam1391.png ), auto;
text-decoration:none;
text-shadow:none;
}
/*TEXT HOVER*/
a:hover {
color:#FFFFFF;
cursor:url(http://cur.cursors-4u.net/games/gam-14/gam1391.png ), auto;
text-shadow:none;
text-decoration: underline;
}
/*HEADER COLOR*/
.table_header {
background-color:rgba(24, 24, 39, 0.6);
}
/*ROUNDED CORNER ON TOP LEFT*/
.table_header:first-of-type {
border-bottom-left-radius:0;
border-bottom-right-radius:0;
border-top-left-radius:20px;
border-top-right-radius:0;
}
/*MOVING HEADER TITLE OVER */
.table_header:nth-of-type(2) {
padding-left:35px;
text-align:left;
}
/*ROUNDER CORNER ON TOP RIGHT */
.table_header:last-of-type {
border-bottom-left-radius:0;
border-bottom-right-radius:0;
border-top-left-radius:0;
border-top-right-radius:20px;
}
/*ROW COLORS*/
.td1 {
background-color:rgba(24, 24, 39, 0.4);
height:65px;
}
.td2 {
background-color:rgba(24, 24, 39, 0.6);
height:65px;
}
/*DONT WORRY ABOUT THIS*/
.table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals {
border:0 none;
padding:4px;
text-align:center;
vertical-align:top;
}
.table_header, .td1, .td2, .category_totals {
color:white;
}
.borderRBL {
line-height:normal !important;
}
[cellspacing="0"] {
line-height:17px;
}
/*CATEGORY TOTALS*/
.category_totals {
background-color:rgba(24, 24, 39, 0.6);
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
border-top-left-radius:0;
border-top-right-radius:0;
color:#FFFFFF;
text-align:center;
}
/*DONT WORRY ABOUT THIS*/
[class^="header_"] * {
background-repeat:no-repeat no-repeat;
font-size:0;
height:200px;
line-height:24px;
padding-bottom:4px;
text-align:right;
vertical-align:bottom;
}
.header_title {
border-bottom-left-radius:4px;
border-bottom-right-radius:4px;
border-top-left-radius:4px;
border-top-right-radius:4px;
color:#FFFFFF;
display:inline-block;
font-style:italic;
height:auto;
padding:0 8px 0 0;
text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px;
}
/* GRAND TOTALS */
#grand_totals {
background-color:rgba(0, 46, 184, 0.8);
border:0 none;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
border-top-left-radius:3px;
border-top-right-radius:3px;
color:#FFFFFF;
line-height:20px;
min-height:20px;
padding:8px;
text-align:center;
vertical-align:middle;
}
/*COPYRIGHT DONT REMOVE*/
#copyright {
background-color:rgba(180, 32, 48, 0.6);
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
border-top-left-radius:3px;
border-top-right-radius:3px;
color:#EEEEEE;
line-height:17px;
margin-top:10px;
padding:8px;
text-align:center;
}
#copyright::after {
}
/*DVD COVERS WITHOUT HOVER*/
.hide {
background-color:rgba(248, 162, 200, 0.701961);
background-position:50% 50%;
background-repeat:no-repeat no-repeat;
background-size:cover;
border:1px solid #FFFFFF;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
border-top-left-radius:0px;
border-top-right-radius:7px;
display:inline-block !important;
height:55px;
margin-left:33px;
margin-top:-65px;
position:absolute;
width:35px;
}
/*DVD COVERS WITH HOVER*/
.hide:hover {
background-color:transparent;
background-repeat:no-repeat no-repeat;
background-size:cover;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
border-top-left-radius:20px;
border-top-right-radius:20px;
box-shadow:rgba(63, 52, 60, 0.54902) 0 0 8px 8px;
margin-left:-140px;
padding-right:150px;
padding-top:220px !important;
position:absolute;
z-index:1;
}
/*MOVING ANIME TITLES OVER*/
.td1:nth-of-type(2), .td2:nth-of-type(2) {
padding-left:35px;
text-align:left;
}
/*DONT MESS WITH THIS*/
.td1:nth-of-type(6), .td2:nth-of-type(6) {
background-attachment:scroll;
background-color:transparent;
background-image:none;
background-position:0 0;
background-repeat:repeat repeat;
border-bottom-style:none !important;
border-bottom-width:medium !important;
display:inline-block;
font-family:cursive;
font-size:9pt;
height:0 !important;
left:70px;
line-height:16px !important;
margin-top:16px;
position:absolute;
text-align:justify !important;
width:720px;
z-index:2;
}
.table_header:nth-of-type(6) {
display:none;
}
span[id*="tagRow"] {
display:block !important;
}
span[id*="tagLinks"] {
display:none !important;
}
a, .td1, .td2, .category_totals {
-webkit-transition:all 0.25s ease-in-out 0s;
}
/*CATEGORY LINKS, CURRENTLY WATCHING*/
#list_surround .status_selected, #list_surround .status_not_selected {
-webkit-background-clip:padding-box !important;
background-clip:padding-box !important;
background-color:transparent;
background-image:url(http://i42.tinypic.com/66jfc9.png );
background-position:100% 0;
background-repeat:no-repeat no-repeat;
background-size:contain;
border:1px solid #FFFFFF;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
border-top-left-radius:20px;
border-top-right-radius:20px;
display:block;
left:-55%;
padding:0;
position:absolute;
top:374px;
width:400px;
}
/*COMPLETED*/
#list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected {
background-image:url(http://i42.tinypic.com/jpkgi0.png );
background-position:100% 0;
top:474px;
}
/*ON HOLD*/
#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-image:url(http://i40.tinypic.com/dxok6.png );
background-position:0 0;
top:574px;
}
/*DROPPED*/
#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-image:url(http://i44.tinypic.com/k4tw5.png );
background-position:100% 0;
top:674px;
}
/*PLAN TO WATCH*/
#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-image:url(http://i44.tinypic.com/w8l285.png );
background-position:0 0;
top:774px;
}
/*ALL ANIME*/
#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-image:url(http://i43.tinypic.com/2ns4479.png );
background-position:100% 0;
top:874px;
}
/*SIZE OF CATEGORY BOXES*/
.status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a {
color:transparent;
display:block;
height:80px;
width:400px;
}
/*CURRENTLY WATCHING HEADER*/
.header_cw {
background-color:transparent;
background-image:url(http://i53.tinypic.com/xm5og3.png );
background-position:0 135px;
background-repeat:no-repeat no-repeat;
height:50px;
margin-bottom:0;
margin-top:-100px;
}
/*COMPLETED HEADER*/
.header_completed {
background-color:transparent;
background-image:url(http://i55.tinypic.com/345htew.png );
background-position:0 135px;
background-repeat:no-repeat no-repeat;
height:50px;
margin-bottom:0;
margin-top:-100px;
}
/*ON HOLD HEADER*/
.header_onhold {
background-color:transparent;
background-image:url(http://i54.tinypic.com/35ddaaa.png );
background-position:0 135px;
background-repeat:no-repeat no-repeat;
height:50px;
margin-bottom:0;
margin-top:-100px;
}
/*DROPPED HEADER*/
.header_dropped {
background-color:transparent;
background-image:url(http://i52.tinypic.com/rw6kbl.png );
background-position:0 135px;
background-repeat:no-repeat no-repeat;
height:50px;
margin-bottom:0;
margin-top:-100px;
}
/*PLAN TO WATCH HEADER*/
.header_ptw {
background-color:transparent;
background-image:url(http://i52.tinypic.com/epg2fc.png );
background-position:0 135px;
background-repeat:no-repeat no-repeat;
height:50px;
margin-bottom:0;
margin-top:-100px;
}
/*CATEGORY LINK STUFF*/
.status_selected {
display:block;
}
.status_not_selected {
display:block;
}
.status_not_selected {
opacity:1;
}
.status_not_selected:hover {
color:transparent;
opacity:1;
}
/*COLOR OF THE "AIRING EXT." TEXT*/
.animetitle + small {
color:#FF809F !important;
font-weight:bold;
}
/*MAKES STUFF TRANSITION*/
* {
-webkit-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;
Offline
Feb 2008
1731
jkun said: Here is a design I recently stopped using. I hope the instructions are clear enough.
Please, can anyone help me with thiss? I'm having trouble understanding a few things and I'm in love with the style as I'm usually on dA most of the time. =3 I tried on my own but nothing comes up so I'm assuming I'm too dumb, lol.
JadedGoth Jan 31, 2014 8:06 AM
Offline
Feb 2010
11828
JadedGoth said: jkun said: Here is a design I recently stopped using. I hope the instructions are clear enough.
Please, can anyone help me with thiss? I'm having trouble understanding a few things and I'm in love with the style as I'm usually on dA most of the time. =3 I tried on my own but nothing comes up so I'm assuming I'm too dumb, lol.
Did you ever start beginners tutorial on installing custom css layouts
http://myanimelist.net/forum/?topicid=200320
Offline
Aug 2013
520
Pico-tan Feb 23, 2014 7:56 AM
Offline
Jul 2013
133
Donating my Ghost in the Shell SAC layout, (a first try editing css with Shishio-kun's topics). I prefer sharing than keeping it for myself only, so feel free to improve it as well (any suggestions are welcome), because it is actually quite basic.
Preview :
http://i.imgur.com/Nh0JpH9.png?1
The code :
https://noblueskydropfiles.github.io/GITS_SAC_small%20thumbnails%20V2.css
Update Oct 20th 2014 : imports fix.
Update Dec 16th 2016 : new imports+fellow writer.
Update Jan 27th 2017 : switched from fellow writer to malcat
Nobluesky Jan 27, 2017 12:26 PM
New reply
Back to top
Reply Disabled for Non-Club Members
Reply
Cancel
How to use BBCode?
More topics from this board
Reply
Cancel
How to use BBCode?
Submit
Cancel
How to use BBCode?
Itβs time to ditch the text file.
Keep track of your anime easily by creating your own list.