UsakoMoon said: http://myanimelist.net/animelist/UsakoMoon
theres my version of it, its chu2byo...I did it awhile ago but I added some things :-)
Yes I liked that one a lot, since I saw it actually I've been meaning to do this so Al's design gets more attn and use like that
SylakentH_ said: Used a lot of codes from this layout and inspired me.
A while ago I've made this one and not yet for public use anyway here would be the code of
a
Boku wa Tomodachi ga Sukunai featured layout.
http://i.imgur.com/9hHNB6P.png
@import "https://dl.dropboxusercontent.com/u/102421246/MAL/CSS/Lists/Haganai/TopBarVerHaganai.css";
@import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css";
@import "http://fonts.googleapis.com/css?family=Autour+One";
@import "http://fonts.googleapis.com/css?family=Patrick+Hand+SC";
@import "https://dl.dropboxusercontent.com/u/102421246/MAL/CSS/Lists/Haganai/HaganaiFav.css";
@import "https://dl.dropboxusercontent.com/u/102421246/MAL/CSS/Censored.css";
* {
text-decoration: none;
}
body {
background-attachment: fixed;
background-clip: border-box;
background-color: transparent;
background-image: url("http://i.imgur.com/ZjJPpam.jpg");
background-position: 0 83%;
background-repeat: no-repeat no-repeat;
background-size: cover;
cursor: url("http://i42.tinypic.com/dc3pdc.png") 1 2, auto;
font-family: Autour One;
}
#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:after {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("http://i.imgur.com/MewCm5E.png");
background-origin: padding-box;
background-position: 0 0;
background-repeat: no-repeat;
background-size: 37% auto !important;
bottom: -23%;
content: "";
display: inline-block;
height: 498px;
left: -39px;
position: fixed;
width: 500px;
z-index: 4;
}
#list_surround:before {
background-image: url("http://i.imgur.com/asJRNHd.png");
background-repeat: no-repeat;
background-size: 59% auto;
content: "";
height: 268px;
left: 0 !important;
position: fixed;
top: 24px;
width: 450px;
z-index: 6 !important;
}
body:after {
bottom: 10px;
color: white;
content: "Welcome to the beach site! Enjoy your stay.";
display: inline-block;
font-size: 13pt;
height: 53px;
left: 2px;
position: fixed;
text-align: center;
vertical-align: middle;
width: 300px;
}
body:before {
background: none no-repeat scroll 0 0 rgba(38, 135, 252, 0.6);
border-top-right-radius: 300px 60px;
bottom: 0;
box-shadow: 0 0 15px 0 white inset;
color: white;
content: "";
display: inline-block;
font-size: 12pt;
height: 100px;
left: 0;
position: fixed;
text-align: center;
vertical-align: middle !important;
width: 336px;
}
#list_surround {
background-attachment: scroll;
background-image: url("http://i.imgur.com/LJLFggd.png");
background-position: 50% -82%;
background-repeat: no-repeat no-repeat;
background-size: 800px auto;
font-size: 13px;
height: 250px;
margin: 0 auto;
padding-bottom: 10px;
padding-top: 283px;
position: absolute;
right: 50px !important;
top: 21px;
width: 700px;
}
#list_surround > table:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw) {
background-color: rgba(38, 135, 252, 0.6);
border-radius: 25px;
box-shadow: 0 0 15px 0 white inset;
transition: background-color 0.4s linear 0s;
-webkit-transition: background-color 0.4s linear 0s;
}
tr:hover td.td1, tr:hover td.td2, tr:hover td.td1 a, tr:hover td.td2 a {
color: yellow;
text-shadow: 1px 1px 7px black;
transition: all 0.4s ease 0s;
-webkit-transition: all 0.4s ease 0s;
}
#list_surround > table:nth-of-type(n+4):hover:not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw) {
background: none repeat scroll 0 0 rgba(165, 205, 253, 0.9) !important;
}
.td1, .td2 {
height: 110px;
}
a, .table_header, .category_totals {
color: white;
cursor: url("http://i42.tinypic.com/dc3pdc.png") 1 2, auto;
text-shadow: none;
}
a:hover {
color: #007FC1 !important;
cursor: url("http://i42.tinypic.com/dc3pdc.png") 1 2, auto;
text-shadow: 1px 2px 3px white !important;
}
.table_header a {
color: white;
}
.table_header {
background-color: rgba(38, 135, 252, 0.6);
border-radius: 20px 20px 20px 20px;
box-shadow: 0 0 15px 0 white inset;
padding: 5px;
text-align: center;
transition: background-color 0.5s linear 0s;
width: 120px;
}
.table_header:nth-of-type(3) {
left: 248px;
position: fixed;
text-align: center;
top: 154px;
z-index: 6;
}
.table_header:first-of-type {
display: none;
font-size: 20px;
}
.table_header:nth-of-type(2) {
left: 250px;
position: fixed;
top: 127px;
z-index: 6;
}
.table_header:hover {
background-color: rgba(165, 205, 253, 0.8);
transition: all 0.4s ease 0s;
}
.table_header:nth-of-type(4) {
left: 248px;
position: fixed;
top: 181px;
z-index: 6;
}
.table_header:nth-of-type(5) {
left: 248px;
padding: 5px;
position: fixed;
top: 208px;
width: 120px;
z-index: 6;
}
.category_totals {
background-color: rgba(38, 135, 252, 0.8);
box-shadow: 0 0 15px 0 white inset;
padding: 3px;
text-align: center;
}
.td1:nth-of-type(1), .td2:nth-of-type(1) {
color: rgba(255, 255, 255, 0.7);
}
.td1:nth-of-type(2), .td2:nth-of-type(2) {
padding-left: 73px;
padding-top: 6px;
text-align: left;
vertical-align: top;
width: 506px;
}
.td1:nth-of-type(3) a, .td2:nth-of-type(3) a {
background-color: rgba(255, 255, 255, 0.6);
border-radius: 25px 25px 25px 25px;
box-shadow: 0 0 8px 3px white ;
color: yellow;
font-size: 16px;
height: 20px;
text-shadow: 1px 2px 3px black;
width: 20px;
padding-left: 8px;
padding-right: 8px;
padding-top: 2px;
padding-bottom: 0px;
margin-top: 0px;
position: absolute;
margin-left: -16px;
}
.td1:nth-of-type(3), .td2:nth-of-type(3) {
color: yellow;
padding-right: 11px !important;
padding-top: 6px;
vertical-align: top;
}
.td1:nth-of-type(4), .td2:nth-of-type(4) {
color: rgba(255, 255, 255, 0.7);
padding-right: 10px;
padding-top: 6px;
vertical-align: top;
}
.td1:nth-of-type(5) a, .td2:nth-of-type(5) a {
color: rgba(255, 255, 255, 0.7);
}
.td1:nth-of-type(5), .td2:nth-of-type(5) {
padding-right: 8px;
padding-top: 6px;
vertical-align: top;
color: rgba(255, 255, 255, 0.7);
}
.animetitle + small {
color: yellow;
font-size: 15px !important;
font-weight: bold;
left: 4%;
margin-top: 74px;
padding-right: 2px;
position: absolute;
text-overflow: ellipsis;
text-shadow: 0 0 1px black, 0 0 3px black, 0 0 6px white, 1px 1px 2px black;
z-index: 1;
}
[cellspacing="0"] {
line-height: 17px;
}
.category_totals {
background-color: rgba(38, 135, 252, 0.6);
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 15px 0 white inset;
height: 90px !important;
text-align: center;
}
.category_totals:hover {
background-color: rgba(196, 30, 14, 0.7);
color: #FFFFFF;
}
#grand_totals {
background-color: rgba(38, 135, 252, 0.6);
border: 0 none;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 15px 0 white inset;
color: #FFFFFF;
line-height: 20px;
min-height: 20px;
padding: 8px;
text-align: center;
vertical-align: middle;
}
[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);
}
#list_surround > table:first-of-type {
left: 10px;
padding-right: 20px;
position: fixed;
top: 280px;
width: 230px;
z-index: 5;
}
#list_surround > table:first-of-type td {
display: block;
height: 50px;
padding-bottom: 10px;
width: 100%;
}
.status_not_selected a {
background: url("http://i.imgur.com/oyASlKx.png") no-repeat scroll 0 0 rgba(38, 135, 252, 0.6);
border-radius: 20px 20px 20px 20px !important;
box-shadow: 0 0 11px 2px white inset;
color: transparent !important;
display: block;
height: 60px;
text-shadow: none !important;
transition: background-color 0.4s linear 0s;
width: 230px;
}
.status_selected a {
background: url("http://i.imgur.com/oyASlKx.png") no-repeat scroll 0 0 #F7F59F;
border-radius: 20px 20px 20px 20px;
box-shadow: 0 0 11px 2px #6CBEE3 inset;
color: transparent !important;
display: block;
height: 60px;
text-shadow: none !important;
width: 230px;
}
.status_not_selected > a[href*="status=1"] {
background-position: 50% 0;
}
.status_not_selected > a[href*="status=2"] {
background-position: 50% -55px;
}
.status_not_selected > a[href*="status=3"] {
background-position: 50% -110px;
}
.status_not_selected > a[href*="status=4"] {
background-position: 50% -160px;
}
.status_not_selected > a[href*="status=7"] {
background-position: 50% -278px;
}
.status_not_selected > a[href*="status=6"] {
background-position: 50% -223px;
}
.status_not_selected > a:hover {
background-color: rgba(165, 205, 253, 0.9);
}
.status_selected > a[href*="status=1"] {
background-position: 50% 0;
}
.status_selected > a[href*="status=2"] {
background-position: 50% -56px;
}
.status_selected > a[href*="status=3"] {
background-position: 50% -112px;
}
.status_selected > a[href*="status=4"] {
background-position: 50% -164px;
}
.status_selected > a[href*="status=6"] {
background-position: 50% -220px;
}
.status_selected > a[href*="status=7"] {
background-position: 50% -280px;
}
.header_cw {
background-color: transparent;
background-image: url("http://i.imgur.com/NtBJPUT.png");
background-position: 51% 0;
background-repeat: no-repeat no-repeat;
height: 200px;
margin-bottom: 0;
margin-top: -15px;
}
.header_completed {
background-color: transparent;
background-image: url("http://i.imgur.com/Xx9IrUI.png");
background-position: 51% 0;
background-repeat: no-repeat no-repeat;
height: 200px;
margin-top: -15px;
z-index: 0;
}
.header_onhold {
background-color: transparent;
background-image: url("http://i.imgur.com/Dp62NCd.png");
background-position: 51% 0;
background-repeat: no-repeat no-repeat;
height: 200px;
margin-top: -15px;
}
.header_dropped {
background-color: transparent;
background-image: url("http://i.imgur.com/17bAnpD.png");
background-position: 51% 0;
background-repeat: no-repeat no-repeat;
height: 200px;
margin-top: -15px;
}
.header_ptw {
background-color: transparent;
background-image: url("http://i.imgur.com/lexFxQ3.png");
background-position: 51% 0;
background-repeat: no-repeat no-repeat;
height: 200px;
margin-top: -15px;
}
.hide {
background-color: rgba(248, 162, 200, 0.7);
background-position: 50% 50%;
background-repeat: no-repeat no-repeat;
background-size: cover;
border: 1px solid #FFFFFF;
border-radius: 15px 15px 15px 15px;
display: inline-block !important;
height: 95px;
margin-left: 29px;
margin-top: -109px;
position: absolute;
transition: all 0.25s ease-in-out 0s;
-webkit-transition: all 0.25s ease-in-out 0s;
width: 65px;
}
.hide:hover {
background-color: transparent;
background-repeat: no-repeat no-repeat;
background-size: cover;
border-radius: 20px 20px 20px 20px;
box-shadow: 0 0 15px 8px white;
margin-left: -218px;
padding-right: 150px;
padding-top: 220px !important;
position: absolute;
z-index: 20;
}
.hide:hover:before {
background-image: url("http://i.imgur.com/8CwvcFi.png");
background-repeat: no-repeat;
background-size: 95% auto;
border-radius: 25px 25px 0 0;
content: "";
height: 200px;
left: -3%;
padding-bottom: 5px;
position: absolute;
text-align: center;
top: -117px;
width: 225px;
z-index: 20 !important;
}
.hide:hover:after {
background: none repeat scroll 0 0 transparent;
content: " ";
height: 101px;
left: 92px;
position: absolute;
top: 0;
width: 219px;
z-index: 20;
}
.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-radius: 10px 10px 10px 10px;
color: rgba(255, 255, 255, 0.8);
display: inline-block;
font-family: Patrick Hand SC;
font-size: 13px;
height: 50px;
left: 93px;
line-height: 16px !important;
margin-left: 9px;
margin-top: 35px;
padding: 5px;
position: absolute;
width: 578px;
z-index: 2;
transition: all 0.6s ease 0s;
-webkit-transition: all 0.6s ease 0s;
}
tr:hover .td1:nth-of-type(6) , tr:hover .td2:nth-of-type(6) {
font-size: 15px !important;
}
.table_header:nth-of-type(6) {
display: none;
}
span[id*="tagRow"] {
display: block !important;
}
span[id*="tagLinks"] {
display: none !important;
}
.td1 div, .td2 div {
color: transparent;
padding-left: 4px;
}
.td1 div small a:first-of-type, .td2 div small a:first-of-type {
color: white;
float: right;
position: relative;
right: 23px;
top: 0;
}
td:nth-of-type(6) div a {
background-color: rgba(38, 135, 252, 0.6);
border-radius: 8px 8px 8px 8px;
box-shadow: 1px 2px 9px 1px white inset;
padding: 0 9px 3px 10px;
}
td:nth-of-type(6) div *:hover {
background-color: #F7F59F;
}
.td1 div small a:last-of-type, .td2 div small a:last-of-type {
color: transparent;
display: none;
float: right;
position: relative;
right: 59px;
}
#copyright, #copyright:hover {
background-color: rgba(38, 135, 252, 0.6);
border-radius: 10px 10px 10px 10px;
bottom: 0;
box-shadow: 0 0 15px 0 white inset;
color: white;
padding: 4px;
width: 100%;
}
#copyright:before {
color: white;
content: " List by SylakentH_, special thanks to UsakoMoon and Shishio-kun for code and inspiration. ";
font-size: 12px;
padding: 4px;
}
#copyright:after {
color: gold;
content: " ";
padding-left: 20px;
}
#copyright a {
}
@media all and (min-device-width:1441px){
#list_surround {
right: 150px !important;
width: 850px;
}
.td1:nth-of-type(6), .td2:nth-of-type(6) {
width: 700px;
}
}
Wow I never knew that Haganai layout was inspired by this! Good thing you posted this, cuz next month is Sena-themed Month in this club!