Hey guys, I wanted to change the look of my mal so I used this script:
/* LIST WIDTH
7
*/
#list_surround {
width: 77% !important;
}
#inlineContent:before {
left: 11% !important;
}
/* BANNER (TOP IMAGE)*/
#inlineContent {
background-image: url(http://i.imgur.com/ZqmzBdI.jpg);
background-position: right 11% !important;
background-size: cover;
z-index: -3 !important;
}
/* MAIN BACKGROUND (BEHIND EVERYTHING) */
body {
background-image: url();
background-size: cover;
background-attachment: fixed;
}
/* TOP BAR ICONS
Replace the icons for the top bar here. Remember you see different icons depending on if you're on your own list or not, or when you're logged out.
*/
/* USER ICON */
#mal\_cs_listinfo div:first-of-type a:before {
background-image: url("http://i.imgur.com/L3NPnIc.png");
}
/* LOGOUT ICON */
#mal\_cs_listinfo div:last-of-type a:before {
background-image: url("http://i.imgur.com/8SeJ2Xv.png");
}
/* ADD TO LIST ICON */
#mal\_cs_links div:first-of-type a:first-of-type:before {
background-image: url("http://i.imgur.com/xQVAKzz.png");
}
/* VISITOR'S ANIME LIST ICON*/
#mal\_cs_links div:last-of-type a:first-of-type:before {
background-image: url("http://i.imgur.com/vIs2F3V.png");
}
/* VISITOR'S MANGA LIST ICON*/
#mal\_cs_links div:last-of-type a:last-of-type:before {
background-image: url("http://i.imgur.com/es1SALB.png");
}
/* HOME ICON, VISITOR'S ICON FOR YOUR PROFILE LINK*/
#mal\_cs_links div:first-of-type a:last-of-type:before, #mal_cs_otherlinks div:first-of-type a:before {
background-image: url("http://i.imgur.com/wizrHEb.png");
}
/* LIST OWNER'S MANGA LIST ICON*/
#mal\_cs_otherlinks di\v a[href*="/mangalist/"]:before {
background-image: url("http://i.imgur.com/0HdfMQ7.png");
}
/* LIST OWNER'S ANIME LIST ICON*/
#mal\_cs_otherlinks di\v a[href*="/animelist/"]:before {
background-image: url("http://i.imgur.com/zuq7ViZ.png");
}
/* FORUM ICON*/
#mal\_cs_otherlinks a[href*="/forum/"]:before {
background-image: url("http://i.imgur.com/cFhhBvt.png");
}
/* HISTORY ICONS*/
#mal\_cs_otherlinks a[href*="/history/"]:before, #mal\_cs_otherlinks di\v a[href*="/history/"]:before {
background-image: url("http://i.imgur.com/R2p6EbR.png");
}
/* EXPORT ICON*/
#mal\_cs_otherlinks a[href*="/panel.php?go=export"]:before {
background-image: url("http://i.imgur.com/tRXCo2i.png");
}
/* SHARED ICON*/
#mal\_cs_otherlinks di\v a[href*="/shared"]:before {
background-image: url("http://i.imgur.com/1BHMiAh.png");
}
/* LOGIN ICON*/
#mal_cs_otherlinks di\v a[href*="/login.php"]:before {
background-image: url("http://i.imgur.com/Rd7leqb.png");
}
/* REGISTER ICON*/
#mal_cs_otherlinks di\v a[href*="/register.php"]:before {
background-image: url("http://i.imgur.com/fRQHVKI.png");
}
/* LEARN MORE ICON*/
#mal_cs_otherlinks di\v a[href*="/modules.php?go=faq"]:before {
background-image: url("http://i.imgur.com/oqrJXHB.png");
}
/* COLORS*/
/* COLOR OF LIST*/
#list_surround{
background-color: rgb(52, 52, 52);}
/* BACKGROUND COLOR BEHIND TOP BAR AND BANNER BORDER */
#list_surround:before,
#inlineContent:after,
#inlineContent:before {
background-color: rgb(52, 52, 52);
}
/* MAIN BACKGROUND (BEHIND EVERYTHING) */
body {
background-color: rgb(26, 26, 26) !Important;
}
/* COLOR OF BUTTONS, HEADERS, UNSELECTED BUTTONS, ANIMETITLE, AND BEHIND ICONS
The first rgb color is the top of the header, second is bottom of the header (Firefox).
The third rgb color is the top of the header, fourth is bottom of the header (Chrome).
*/
#mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a,
.table_headerLink,
.status_not_selected a,
.header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw,
.td1, .td2, .td1 a + small, .td2 a + small, .animetitle,
#grand_totals,
.category_totals,
#copyright {
background-image: -moz-linear-gradient(top, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%) !important;
background-image: -webkit-linear-gradient(top, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%) !important;
}
/* COLOR OF CATEGORY MENU BUTTONS/TOP BAR BUTTONS/ANIMETITLE ON HOVER
The first rgb color is the top of the header, second is bottom of the header (Firefox).
The third rgb color is the top of the header, fourth is bottom of the header (Chrome).
*/
#mal_cs_listinfo a:hover,
#mal_cs_links a:hover,
#mal_cs_otherlinks a:hover,
.table_headerLink:hover,
.status_not_selected a:hover,
.animetitle:hover {
background-image: -moz-linear-gradient(bottom, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%) !important;
background-image: -webkit-linear-gradient(bottom, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%) !important;
}
/* SELECTED CATEGORY LINK BUTTON COLOR */
.status_selected{
background-color: rgb(26, 26, 26) !important;
background-image: none;
}
/* TOPBAR SEARCHBOX COLOR
*/
#searchBox{
background-color: black !important;
background-image: ;
color: white !important;
}
/* HEADER COLORS */
.header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw{
color: white;
}
/* TOPBAR BUTTON TEXT COLOR */
.table_header a{
color: silver;
}
/* SELECTED CATEGORY LINK TEXT COLOR*/
.status_selected a{
color: silver;
}
/* UNSELECTED CATEGORY LINK TEXT COLOR */
.status_not_selected a {
color: silver;
}
/* ANIME INFO BUBBLE COLOR */
.td1:first-of-type, .td2:first-of-type, .td1, .td2, .td1 a, .td2 a {
color: silver;
}
/* ANIMETITLE COLOR */
.animetitle{
color: silver;
}
/* LINK TEXT AND TAGS TEXT ON HOVER */
a:hover, #mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover {
color: white !Important;
}
/* CATEGORY TOTALS COLOR, GRAND TOTALS COLOR, COPYRIGHT COLOR */
.category_totals,
#grand_totals,
#copyright {
color: silver ;
}
#copyright a{
color: white;
}
/* HOVER EFFECT ON TITLES */
#list_surround tab\le:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw):hover {
background-color: rgba(245, 132, 0, 0.2);
}
/* MAX HEIGHT OF ANIME TITLES
Adjust this to make more or less height for the longer titles on your list.
*/
.animetitle {
max-height: 34px !important;
}
/* HEIGHT OF TAGS BOX
If you've turned Tags on for your list, you can adjust the height of the box your tags appear in here.
Keep in mind you won't see tags for this list style unless you hover your cursor over the anime.
*/
.td1[width="125"], .td2[width="125"] {
height: 45px !important;
}
/*******************************
OTHER CODES, DON'T TOUCH UNLESS YOU KNOW WHAT YOU'RE DOING
*******************************/
.hide {
box-shadow: 0px 0px 11px 2px rgb(13, 13, 13) inset;
}
#mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a,
.table_headerLink, .status_not_selected,
.header_cw, .header_completed, .header_onhold,
.header_dropped, .header_ptw,
.category_totals, #grand_totals, #copyright {
background-color: rgb(26, 26, 26) !important;
background-image: linear-gradient(top, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%);
background-image: -o-linear-gradient(top, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%);
background-image: -ms-linear-gradient(top, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%);
}
#mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover,
.table_headerLink:hover, .status_not_selected:hover {
background-image: linear-gradient(bottom, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%);
background-image: -o-linear-gradient(bottom, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%);
background-image: -ms-linear-gradient(bottom, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%);
}
.td1, .td2, .td1 a + small, .td2 a + small, .animetitle {
background-color: rgba(13, 13, 13, 0.9);
background: transparent linear-gradient(top, rgba(26, 26, 26, 0.9) 40%, rgba(13, 13, 13, 0.9) 60%);
background: transparent -o-linear-gradient(top, rgba(26, 26, 26, 0.9) 40%, rgba(13, 13, 13, 0.9) 60%);
background: transparent -ms-linear-gradient(top, rgba(26, 26, 26, 0.9) 40%, rgba(13, 13, 13, 0.9) 60%);
}
.animetitle:hover {
background-image: linear-gradient(bottom, rgba(26, 26, 26, 0.9) 40%, rgba(13, 13, 13, 0.9) 60%);
background-image: -o-linear-gradient(bottom, rgba(26, 26, 26, 0.9) 40%, rgba(13, 13, 13, 0.9) 60%);
background-image: -ms-linear-gradient(bottom, rgba(26, 26, 26, 0.9) 40%, rgba(13, 13, 13, 0.9) 60%);
}
body {
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a {
text-decoration: none;
}
#mal\_control\_strip {
width: 77% !important;
height: 120px;
margin: auto !important;
background: none !important;
}
#inlineContent {
pointer-events: none;
display: block !important;
position: absolute;
top: 0px;
left: 0px;
height: 420px;
width: 100%;
background-position: right;
border-bottom-width: 42px;
border-bottom-style: solid;
z-index: -1;
}
#mal\_control\_strip tbody {
position: absolute;
top: 0px;
width: 686px;
height: 120px;
border-radius: 0px 0px 13px 13px;
}
#mal_cs_pic, #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks {
padding: 0px !important;
}
#mal_cs_pic, #mal_cs_listinfo, #mal_cs_links {
border-right-style: none !important;
}
#mal_cs_pic {
position: absolute;
top: 11px;
left: 11px;
}
#mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a {
display: block;
position: absolute;
top: 11px;
width: 64px;
height: 64px;
line-height: 64px;
overflow-x: hidden !important;
overflow-y: hidden;
white-space: nowrap;
letter-spacing: -1px;
font-size: 0px !important;
font-weight: bold !important;
text-align: center;
text-decoration: none !important;
border-radius: 7px;
}
#mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover {
font-size: 11px !important;
}
#mal_cs_listinfo div:first-of-type a {left: 11px;}
#mal_cs_listinfo div:last-of-type a {left: 86px;}
#mal_cs_links div:first-of-type a:first-of-type {left: 161px;}
#mal_cs_links div:last-of-type a:first-of-type {left: 236px;}
#mal_cs_links div:last-of-type a:last-of-type {left: 311px;}
#mal_cs_links div:first-of-type a:last-of-type,
#mal_cs_otherlinks div:first-of-type a {left: 386px;}
#mal_cs_otherlinks a[href*="/forum/"],
#mal_cs_otherlinks a[href*="/mangalist/"],
#mal_cs_otherlinks a[href*="/animelist/"],
#mal_cs_otherlinks a[href*="/login.php"] {left: 461px;}
#mal_cs_otherlinks a[href*="/history/"],
#mal_cs_otherlinks a[href*="/register.php"] {left: 536px;}
#mal_cs_otherlinks a[href*="/panel.php?go=export"],
#mal_cs_otherlinks a[href*="/shared"],
#mal_cs_otherlinks a[href*="/modules.php?go=faq"] {left: 611px;}
#mal_cs_listinfo a:before, #mal_cs_links a:before, #mal_cs_otherlinks a:before {
position: absolute;
top: 0px;
left: 0px;
width: 64px;
height: 64px;
content: "";
background-position: center;
background-repeat: no-repeat;
background-size: 56px;
}
#mal_cs_listinfo a:hover:before, #mal_cs_links a:hover:before, #mal_cs_otherlinks a:hover:before {
content: none;
}
#mal_cs_powered {
top: 86px !important;
left: 461px;
right: auto !important;
}
#mal_cs_powered img {
display: none;
}
#searchBox {
position: absolute;
top: 0px;
left: 0px;
padding: 4px 7px;
width: 200px !important;
height: 15px;
font-size: 11px !important;
text-align: center;
border: none;
border-radius: 4px;
}
.header_cw + tab\le , .header_completed + tab\le , .header_onhold + tab\le ,
.header_dropped + tab\le , .header_ptw + tab\le {
position: absolute;
top: 86px;
width: 461px;
-layout: fixed;
border-spacing: 11px 0px;
}
#list_surround tab\le:nth-of-type(n+4) ~ .header_cw + tab\le ,
#list_surround tab\le:nth-of-type(n+4) ~ .header_completed + tab\le ,
#list_surround tab\le:nth-of-type(n+4) ~ .header_onhold + tab\le ,
#list_surround tab\le:nth-of-type(n+4) ~ .header_dropped + tab\le ,
#list_surround tab\le:nth-of-type(n+4) ~ .header_ptw + tab\le {
display: none;
}
.table_header {
width: auto;
}
.table_header:first-of-type, .table_header:nth-of-type(n+6) {
display: none;
}
.table_headerLink {
display: block;
padding: 4px 7px;
height: 15px;
text-align: center;
border-radius: 4px;
}
#list_surround tab\le:first-of-type {
position: absolute;
top: 398px;
width: auto;
font-size: 13px;
font-weight: bold;
border-spacing: 11px;
border-radius: 13px 13px 0px 0px;
}
.status_selected, .status_not_selected {
width: auto;
white-space: nowrap;
border-radius: 7px;
}
.status_selected a, .status_not_selected a {
display: block;
padding: 0px 22px;
line-height: 42px;
}
#list_surround {
min-width: 726px;
margin: 406px auto 64px;
padding: 11px 31px 42px 31px;
border-radius: 42px;
}
.header_cw, .header_completed, .header_onhold,
.header_dropped, .header_ptw {
clear: both;
position: relative;
top: 31px;
margin: 0px 0px 42px 0px;
padding: 11px 0px;
border-radius: 13px;
}
.header_title {
padding-left: 242px;
font-size: 22px;
font-weight: bold;
text-align: center;
}
#list_surround tab\le:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw),
.hide {
float: left;
position: relative;
width: 220px;
height: 220px;
margin: 11px;
border-radius: 13px;
}
#list_surround tab\le:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw) {
z-index: 1;
}
.hide {
display: block !important;
margin-left: -231px;
background-position: center -20px;
}
.td1, .td2 {
position: absolute;
padding: 4px 7px;
border-radius: 4px;
}
.td1:nth-of-type(2), .td2:nth-of-type(2) {
visibility: hidden;
padding: 0px;
width: 100%;
height: 100%;
}
.td1:first-of-type:before, .td2:first-of-type:before {
content: "#";
}
.td1:first-of-type, .td2:first-of-type {
top: 11px;
left: 11px;
width: 42px;
z-index: 1;
}
.td1 a[title="Anime Information"] + small, .td2 a[title="Anime Information"] + small {
display: block;
visibility: visible;
position: absolute;
top: 11px;
left: 82px;
width: 43px;
padding: 4px 7px;
font-size: 11px;
text-align: center;
word-wrap: break-word;
border-radius: 4px;
}
.td1:nth-of-type(4)[width="50"], .td2:nth-of-type(4)[width="50"] {
top: 11px;
right: 11px;
width: 42px;
}
td[width="70"] + .td1:nth-of-type(5):before, [width="70"] + .td2:nth-of-type(5):before {
content: "Volumes: ";
}
td[width="70"] + .td1:nth-of-type(5), td[width="70"] + .td2:nth-of-type(5) {
top: 11px;
right: 11px;
width: auto;
text-align: right;
}
.td1 a:not([title="Anime Information"]) + small, .td2 a:not([title="Anime Information"]) + small {
display: block;
visibility: visible;
position: absolute;
top: 41px;
right: 11px;
width: auto;
padding: 4px 7px;
font-size: 11px;
text-align: right;
border-radius: 4px;
}
.animetitle {
display: block;
visibility: visible;
position: absolute;
left: 11px;
bottom: 41px;
padding: 7px;
width: 184px;
max-height: 34px;
overflow: hidden;
text-align: center;
font-size: 13px;
font-weight: bold;
border-radius: 7px;
}
.td1:nth-of-type(3):before, .td2:nth-of-type(3):before {
content: "Score: ";
}
.td1:nth-of-type(3), .td2:nth-of-type(3) {
left: 11px;
bottom: 11px;
width: auto;
text-align: left;
}
td[width="50"] + .td1:nth-of-type(5):before, [width="50"] + .td2:nth-of-type(5):before {
content: "Episodes: ";
}
td[width="50"] + .td1:nth-of-type(5), td[width="50"] + .td2:nth-of-type(5) {
right: 11px;
bottom: 11px;
width: auto;
text-align: right;
}
.td1:nth-of-type(4)[width="70"]:before, .td2:nth-of-type(4)[width="70"]:before {
content: "Chapters: ";
}
.td1:nth-of-type(4)[width="70"], .td2:nth-of-type(4)[width="70"] {
bottom: 11px;
right: 11px;
width: auto;
text-align: right;
}
.td1:nth-of-type(n+6), .td2:nth-of-type(n+6) {
display: none;
}
.td1[width="125"], .td2[width="125"] {
left: 11px;
top: 71px;
width: 184px;
height: 45px;
overflow: auto;
}
#list_surround tab\le:hover .td1[width="125"],
#list_surround tab\le:hover .td2[width="125"] {
display: block;
}
input[type=text] {
width: 100%;
text-align: right;
border: none;
border-radius: 4px;
}
input[value=Go] {
display: none;
}
#list_surround .List_LightBox {
display: block;
visibility: visible;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
font-size: 0px;
}
.category_totals {
padding: 0px 31px;
text-align: center;
white-space: pre-line;
border-radius: 13px;
}
.category_totals:before {
display: block;
content: "Totals:";
text-align: center;
font-weight: bold;
}
#grand_totals, #copyright {
clear: both;
position: relative;
top: 31px;
padding: 11px 0px;
text-align: center;
}
#grand_totals {
margin-bottom: 22px;
border-radius: 7px;
}
#copyright {
margin-top: 0px !important;
margin-bottom: 31px;
border-radius: 13px;
}
#list_surround br {
display: none;
}
#mal\_control\_strip #mal_cs_otherlinks strong{
margin: 0px !important;
font-size: 0px !important;
}
#list_surround:before {
border-radius: 0 0 13px 13px;
height: 120px;
top: 0;
width: 700px;
content: "";
z-index: -2 !important;
display: block;
position: absolute !important;
left: 11% !important;
}
#inlineContent:after {
content: "";
display: block !important;
height: 42px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 420px;
width: 100%;
}
#inlineContent:before {
border-radius: 13px 13px 0 0;
position: absolute;
top: 398px;
display: block !important;
height: 63px;
left: 11%;
margin: auto;
position: absolute;
width: 858px;
content: "";
}
.status_not_selected a {
border-radius: 6px;
color: ;
}
.status_not_selected a {
border-radius: 6px;
}
#mal\_cs_otherlinks :nth-of-type(2) {
margin-top: -40px;
}
#mal_cs_otherlinks a[href*="/forum/"], #mal_cs_otherlinks a[href*="/mangalist/"], #mal_cs_otherlinks a[href*="/animelist/"], #mal_cs_otherlinks a[href*="/login.php"], #mal_cs_otherlinks di\v a[href*="/register.php"]{
margin-top: 0;
}
.header_cw + tab\le, .header_completed + tab\le, .header_onhold + tab\le, .header_dropped + tab\le, .header_ptw + tab\le {
background: none repeat scroll 0 0 transparent;
border-spacing: 11px 0;
left: 12%;
margin-left: -7px;
position: absolute;
top: 86px;
width: 461px;
}
#mal\_control\_strip tbody {
background-color: transparent;
}
#list_surround tab\le:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw),
.hide {
height: 300px !important;
}
.hide {
background-position: center !important;
}
It works but I don't see the images on anime icons. Does somebody know how to fix it? |
