Anime List Design Help Please

Apr 9, 2015 10:10 PM

Offline

Jan 2015

3111

Hey, i would like to change my list to something new, preferably something like this "Request complete for dadotarugo" from this thread http://myanimelist.net/forum/?topicid=393393&show=60#msg22695503

I tried to do it myself, and am having trouble, i followed the basic tutorial and did it correctly, however i want one with cover pictures for the anime, and i particularly like the simplistic layout of the above mentioned, and how noticable the background is.

If possible i would also like to change the background to be something else.

Thank you for the help, please comment below if you are willing to assist me.

"Make it flashier!" -Maid Chou Anime List

Apr 14, 2015 4:28 PM

--Dawn--

Offline

Jan 2015

3111

Still looking for help if possible

"Make it flashier!" -Maid Chou Anime List

Apr 18, 2015 1:55 PM

BurntJelly

Offline

Feb 2013

6197

What do you mean by "having trouble"?

Try doing the standard copy-paste to get your list looking like the one posted. I can try to help make any customizations necessary afterwards.

Apr 20, 2015 4:07 PM

--Dawn--

Offline

Jan 2015

3111

BurntJelly said:
What do you mean by "having trouble"?

Try doing the standard copy-paste to get your list looking like the one posted. I can try to help make any customizations necessary afterwards.

i did the standard copy and paste, but for the one where it has cover pics and stuff it didnt work, and where is the one you posted?

"Make it flashier!" -Maid Chou Anime List

Apr 22, 2015 8:46 PM

BurntJelly

Offline

Feb 2013

6197

Sorry, I was referring to the one you referenced in the first post.

What exactly didn't work though? Did the layout not work correctly? Were the images just missing?
I'm just trying to get an idea of how far you managed to get.

Apr 24, 2015 4:14 PM

--Dawn--

Offline

Jan 2015

3111

BurntJelly said:
Sorry, I was referring to the one you referenced in the first post.

What exactly didn't work though? Did the layout not work correctly? Were the images just missing?
I'm just trying to get an idea of how far you managed to get.

Okay, so i got it working somewhat now, i have the covers for most of the anime, but not all of them, and it still looks wierd, like the titles and stuff dont really show up.

http://imgur.com/SRz98Jw

"Make it flashier!" -Maid Chou Anime List

Apr 24, 2015 4:15 PM

--Dawn--

Offline

Jan 2015

3111

Also, it doesnt look like the example, its a straight down list, not like in the example pic where its across as well

"Make it flashier!" -Maid Chou Anime List

Apr 24, 2015 4:24 PM

--Dawn--

Offline

Jan 2015

3111

If you can help, that would be amazing, i really want this list design, and would really appreciate it. Also, if you know how to change the background that would be cool.

"Make it flashier!" -Maid Chou Anime List

Apr 25, 2015 10:12 PM

BurntJelly

Offline

Feb 2013

6197

The one mistake you made was that you copied the manga list styles in as well.

But...
That CSS won't work from the MAL custom CSS because the editor eats some of the important selectors. It may have worked at the time it was written, but not now. I tried "fixing" it with firebug, but it didn't help much.

I'm bored right now, so I'll see if I can do something to make it work... (basically re-implement from scratch).

Apr 25, 2015 11:37 PM

#10

--Dawn--

Offline

Jan 2015

3111

BurntJelly said:
The one mistake you made was that you copied the manga list styles in as well.

But...
That CSS won't work from the MAL custom CSS because the editor eats some of the important selectors. It may have worked at the time it was written, but not now. I tried "fixing" it with firebug, but it didn't help much.

I'm bored right now, so I'll see if I can do something to make it work... (basically re-implement from scratch).

Wow, thanks a ton, if you can do that that would be amazing, let me know if there is anything i can help with, and dont worry about getting it done too quickly, id appreciate it if you just did it in any free time you have.

"Make it flashier!" -Maid Chou Anime List

Apr 26, 2015 2:33 AM

#11

BurntJelly

Offline

Feb 2013

6197

It's a work in progress... but the way I did it isn't going to work for "All Anime"... going to have to do it a bit differently.

I have it on my list right now. It's pretty close. Time for a break (sleep).

Apr 26, 2015 12:21 PM

#12

--Dawn--

Offline

Jan 2015

3111

BurntJelly said:
It's a work in progress... but the way I did it isn't going to work for "All Anime"... going to have to do it a bit differently.

I have it on my list right now. It's pretty close. Time for a break (sleep).

Wow, thanks a ton, only thing i would really change is the background, since i dont know what that one is from. But i cant believe you got that far so fast. Really appreciate it. Wish i could return the favor

"Make it flashier!" -Maid Chou Anime List

Apr 26, 2015 2:41 PM

#13

BurntJelly

Offline

Feb 2013

6197

You're going to want to find a better cover css file, that one is out of date. (or generate one yourself custom for your list).

To change the background, just change the first background uri under "body".

It's not perfect (covers in the last column are a bit off not sure why), and I haven't tested it while not-logged in. So I don't know how it will look for others viewing.

Note: This is the non-advanced version that should work with the typical #more*:before cover CSS files out there. I have an advanced version that has a fully working "more" button, but it requires custom cover CSS.

@import "https://dl.dropboxusercontent.com/u/49469857/MAL/premade/anime.css";

body
{
	background: url("http://blog-imgs-46.fc2.com/p/i/c/pictureroom/D-grayman1.jpg") no-repeat top center;
	background-attachment: fixed;
	background-size: cover;					
	color: #FFFFFF;
	font-size: 11.00px;
	font-family: Verdana, Arial;
	background-color: #000000;
}

#list_surround
{
	margin: 0 auto;
    width: 80%;
	text-align: center;
}

a
{
	color: #FFFFFF;
	text-decoration: none;
}

a:hover
{
	text-decoration: underline;
}

/* anime list tables */
[width="100%"]
{
	margin: 50px 50px;
	padding: 14px;
	display: inline-block;
	height: 350px;
	position: relative;
	width: 250px;
	background: rgba(22, 22, 22, 0.85);
	border: 1px solid #7e7e7e;
	border-radius: 10px;
	color: #FFFFFF;
}

/* number */
.td1:nth-of-type(1),
.td2:nth-of-type(1)
{
	display: none;
}

/* anime title */
.td1:nth-of-type(2),
.td2:nth-of-type(2)
{
    display: block;
	text-align: center;
}
.animetitle span
{
    background: rgba(22, 22, 22, 0.85);
    border: 1px solid #7e7e7e;
    border-radius: 10px;
    left: -1px;
    overflow: hidden;
    padding: 2px 6px;
    position: absolute;
    top: -30px;
    white-space: nowrap;
    width: 236px;
	font-weight: bold;
}
.animetitle:hover span
{
	text-decoration: underline;
}
/* airing */
.td1:nth-of-type(2) small,
.td2:nth-of-type(2) small
{
	left: 14px;
	position: absolute;
	top: 176px;
	font-size: 9px;
}
/* edit more links */
.td1:nth-of-type(2) div[style="float: right;"],
.td2:nth-of-type(2) div[style="float: right;"]
{
	left: 14px;
	position: absolute;
	right: 14px;
	top: 176px;
	color: transparent;
}
.td1:nth-of-type(2) div[style="float: right;"] small,
.td2:nth-of-type(2) div[style="float: right;"] small
{
	position: static;
	font-size: 9px;
}
[id^="xmenu"]
{
    display: none;
}

/* score */
.td1:nth-of-type(3):before,
.td2:nth-of-type(3):before
{
    content: "Score: ";
}
.td1:nth-of-type(3),
.td2:nth-of-type(3)
{
    position: absolute;
    top: 190px;
    width: auto !important;
}

/* type */
.td1:nth-of-type(4):before,
.td2:nth-of-type(4):before
{
    content: "Type: ";
}
.td1:nth-of-type(4),
.td2:nth-of-type(4)
{
    position: absolute;
    top: 210px;
    width: auto !important;
}

/* episodes */
.td1:nth-of-type(5):before,
.td2:nth-of-type(5):before
{
    content: "Episodes: ";
}
.td1:nth-of-type(5),
.td2:nth-of-type(5)
{
    position: absolute;
    top: 190px;
	right: 14px;
    width: auto !important;
}

/* tags */
.td1:nth-of-type(6),
.td2:nth-of-type(6)
{
    position: absolute;
    top: 230px;
	left: 14px;
	right: 14px;
	bottom: 14px;
    width: auto !important;
	overflow: auto;
}

/* rating */
.td1:nth-of-type(7):before,
.td2:nth-of-type(7):before
{
    content: "Rating: ";
}
.td1:nth-of-type(7),
.td2:nth-of-type(7)
{
    position: absolute;
    top: 210px;
	right: 14px;
    width: auto !important;
}

/* priority */
.td1:nth-of-type(8):before,
.td2:nth-of-type(8):before
{
    content: "Priority: ";
}
.td1:nth-of-type(8),
.td2:nth-of-type(8)
{
    position: absolute;
    top: 176px;
	right: 14px;
    width: auto !important;
	font-size: 9px;
}

/* more */
.hide
{
    border-radius: 8px;
    display: inline-block !important;
    height: 160px;
    margin-left: -291px; /* why is this off in the last column? */
    margin-top: 62px;
    position: absolute;
    text-align: left;
    width: 225px;
    z-index: 15;
	background-color: rgba(22, 22, 22, 0.85);
    background-repeat: no-repeat;
	transition: height 400ms ease 200ms;
}
.hide:hover
{
	height: 322px;
}

/* table headers */
.header_cw + [width="100%"],
.header_completed + [width="100%"],
.header_dropped + [width="100%"],
.header_ptw + [width="100%"]
{
	display: block;
	width: 250px;
	height: auto;
	padding: 4px;
	margin: 0px auto;
	font-size: 9px;
}
.header_cw + [width="100%"]:before,
.header_completed + [width="100%"]:before,
.header_dropped + [width="100%"]:before,
.header_ptw + [width="100%"]:before
{
	content: "Sort";
	display: block;
}
.table_header:nth-of-type(1),
.table_header:nth-of-type(6)
{
    display: none;
}
.table_header
{
	display: inline-block;
	margin: 0px 4px;
	width: auto;
}
.table_header strong
{
	font-weight: normal;
}

/* status links */
[width="100%"][align="center"]
{
    height: 40px;
    margin: 7px 0px;
    padding: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: auto;
    z-index: 25;
	background: transparent;
	border: none;
	border-radius: 0px;
}
.status_selected, .status_not_selected
{
    display: inline-block;
    margin: 0 10px;
    width: auto;
}
.status_selected
{
}
.status_selected a
{
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: underline;
}
.status_selected:nth-child(1), .status_not_selected:nth-child(1) { right: 500px; width: 130px; }
.status_selected:nth-child(2), .status_not_selected:nth-child(2) { right: 400px; width: 65px; }
.status_selected:nth-child(3), .status_not_selected:nth-child(3) { right: 300px; }
.status_selected:nth-child(4), .status_not_selected:nth-child(4) { right: 200px; }
.status_selected:nth-child(5), .status_not_selected:nth-child(5) { right: 100px; }
.status_selected:nth-child(6), .status_not_selected:nth-child(6) { right: 0px; }

/* watching completed headers */
.header_cw,
.header_completed,
.header_onhold,
.header_dropped,
.header_ptw
{
    border: 1px solid #7e7e7e !important;
	border-radius: 10px !important;
	background: rgba(22, 22, 22, 0.85) !important;
    display: block !important;
    height: auto !important;
    margin: 10px auto !important;
    width: 250px !important;
	text-align: center;
	position: relative !important;
}
.header_cw *,
.header_completed *,
.header_onhold *,
.header_dropped *,
.header_ptw *
{
	text-align: center;
	display: block;
	font-size: 30px;
}

/* page header */
#mal_cs_pic,
#mal_cs_listinfo,
#mal_cs_links,
#mal_cs_otherlinks
{
	position: fixed !important;
	top: 0px !important;
	background: rgba(22, 22, 22, 0.85);
	padding: 0px 10px !important;
	border-bottom: 1px solid #7E7E7E;
	z-index: 20;
	height: 30px !important;
	line-height: 9px;
}
#mal_cs_pic { left: 0px; width: 321px !important; }
#mal_cs_listinfo { left: 0px; width: 150px !important; }
#mal_cs_links { left: 171px; }
#mal_cs_otherlinks { left: 342px; right: 0px; border-right: 1px solid #7E7E7E; }
#mal_cs_powered { display: none; }

/* bottom stuff */
#copyright,
#grand_totals
{
	text-align: center;
	border-radius: 10px;
	background: rgba(22, 22, 22, 0.85);
	border: 1px solid #7e7e7e;
	margin: 2em auto !important;
	display: block;
	padding: 4px;
	width: 250px;
}
#grand_totals:before
{
	content: "Grand Totals";
	display: block;
}
#copyright:after
{
	content: "List style by BurntJelly"; /* based on another that didn't work for Dawnslicer  http://myanimelist.net/forum/?topicid=393393&show=60#msg22695503 */
	display: block;
}

Apr 26, 2015 3:30 PM

#14

--Dawn--

Offline

Jan 2015

3111

BurntJelly said:
You're going to want to find a better cover css file, that one is out of date. (or generate one yourself custom for your list).

To change the background, just change the first background uri under "body".

It's not perfect (covers in the last column are a bit off not sure why), and I haven't tested it while not-logged in. So I don't know how it will look for others viewing.

Note: This is the non-advanced version that should work with the typical #more*:before cover CSS files out there. I have an advanced version that has a fully working "more" button, but it requires custom cover CSS.

@import "https://dl.dropboxusercontent.com/u/49469857/MAL/premade/anime.css";

body
{
	background: url("http://blog-imgs-46.fc2.com/p/i/c/pictureroom/D-grayman1.jpg") no-repeat top center;
	background-attachment: fixed;
	background-size: cover;					
	color: #FFFFFF;
	font-size: 11.00px;
	font-family: Verdana, Arial;
	background-color: #000000;
}

#list_surround
{
	margin: 0 auto;
    width: 80%;
	text-align: center;
}

a
{
	color: #FFFFFF;
	text-decoration: none;
}

a:hover
{
	text-decoration: underline;
}

/* anime list tables */
[width="100%"]
{
	margin: 50px 50px;
	padding: 14px;
	display: inline-block;
	height: 350px;
	position: relative;
	width: 250px;
	background: rgba(22, 22, 22, 0.85);
	border: 1px solid #7e7e7e;
	border-radius: 10px;
	color: #FFFFFF;
}

/* number */
.td1:nth-of-type(1),
.td2:nth-of-type(1)
{
	display: none;
}

/* anime title */
.td1:nth-of-type(2),
.td2:nth-of-type(2)
{
    display: block;
	text-align: center;
}
.animetitle span
{
    background: rgba(22, 22, 22, 0.85);
    border: 1px solid #7e7e7e;
    border-radius: 10px;
    left: -1px;
    overflow: hidden;
    padding: 2px 6px;
    position: absolute;
    top: -30px;
    white-space: nowrap;
    width: 236px;
	font-weight: bold;
}
.animetitle:hover span
{
	text-decoration: underline;
}
/* airing */
.td1:nth-of-type(2) small,
.td2:nth-of-type(2) small
{
	left: 14px;
	position: absolute;
	top: 176px;
	font-size: 9px;
}
/* edit more links */
.td1:nth-of-type(2) div[style="float: right;"],
.td2:nth-of-type(2) div[style="float: right;"]
{
	left: 14px;
	position: absolute;
	right: 14px;
	top: 176px;
	color: transparent;
}
.td1:nth-of-type(2) div[style="float: right;"] small,
.td2:nth-of-type(2) div[style="float: right;"] small
{
	position: static;
	font-size: 9px;
}
[id^="xmenu"]
{
    display: none;
}

/* score */
.td1:nth-of-type(3):before,
.td2:nth-of-type(3):before
{
    content: "Score: ";
}
.td1:nth-of-type(3),
.td2:nth-of-type(3)
{
    position: absolute;
    top: 190px;
    width: auto !important;
}

/* type */
.td1:nth-of-type(4):before,
.td2:nth-of-type(4):before
{
    content: "Type: ";
}
.td1:nth-of-type(4),
.td2:nth-of-type(4)
{
    position: absolute;
    top: 210px;
    width: auto !important;
}

/* episodes */
.td1:nth-of-type(5):before,
.td2:nth-of-type(5):before
{
    content: "Episodes: ";
}
.td1:nth-of-type(5),
.td2:nth-of-type(5)
{
    position: absolute;
    top: 190px;
	right: 14px;
    width: auto !important;
}

/* tags */
.td1:nth-of-type(6),
.td2:nth-of-type(6)
{
    position: absolute;
    top: 230px;
	left: 14px;
	right: 14px;
	bottom: 14px;
    width: auto !important;
	overflow: auto;
}

/* rating */
.td1:nth-of-type(7):before,
.td2:nth-of-type(7):before
{
    content: "Rating: ";
}
.td1:nth-of-type(7),
.td2:nth-of-type(7)
{
    position: absolute;
    top: 210px;
	right: 14px;
    width: auto !important;
}

/* priority */
.td1:nth-of-type(8):before,
.td2:nth-of-type(8):before
{
    content: "Priority: ";
}
.td1:nth-of-type(8),
.td2:nth-of-type(8)
{
    position: absolute;
    top: 176px;
	right: 14px;
    width: auto !important;
	font-size: 9px;
}

/* more */
.hide
{
    border-radius: 8px;
    display: inline-block !important;
    height: 160px;
    margin-left: -291px; /* why is this off in the last column? */
    margin-top: 62px;
    position: absolute;
    text-align: left;
    width: 225px;
    z-index: 15;
	background-color: rgba(22, 22, 22, 0.85);
    background-repeat: no-repeat;
	transition: height 400ms ease 200ms;
}
.hide:hover
{
	height: 322px;
}

/* table headers */
.header_cw + [width="100%"],
.header_completed + [width="100%"],
.header_dropped + [width="100%"],
.header_ptw + [width="100%"]
{
	display: block;
	width: 250px;
	height: auto;
	padding: 4px;
	margin: 0px auto;
	font-size: 9px;
}
.header_cw + [width="100%"]:before,
.header_completed + [width="100%"]:before,
.header_dropped + [width="100%"]:before,
.header_ptw + [width="100%"]:before
{
	content: "Sort";
	display: block;
}
.table_header:nth-of-type(1),
.table_header:nth-of-type(6)
{
    display: none;
}
.table_header
{
	display: inline-block;
	margin: 0px 4px;
	width: auto;
}
.table_header strong
{
	font-weight: normal;
}

/* status links */
[width="100%"][align="center"]
{
    height: 40px;
    margin: 7px 0px;
    padding: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: auto;
    z-index: 25;
	background: transparent;
	border: none;
	border-radius: 0px;
}
.status_selected, .status_not_selected
{
    display: inline-block;
    margin: 0 10px;
    width: auto;
}
.status_selected
{
}
.status_selected a
{
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: underline;
}
.status_selected:nth-child(1), .status_not_selected:nth-child(1) { right: 500px; width: 130px; }
.status_selected:nth-child(2), .status_not_selected:nth-child(2) { right: 400px; width: 65px; }
.status_selected:nth-child(3), .status_not_selected:nth-child(3) { right: 300px; }
.status_selected:nth-child(4), .status_not_selected:nth-child(4) { right: 200px; }
.status_selected:nth-child(5), .status_not_selected:nth-child(5) { right: 100px; }
.status_selected:nth-child(6), .status_not_selected:nth-child(6) { right: 0px; }

/* watching completed headers */
.header_cw,
.header_completed,
.header_onhold,
.header_dropped,
.header_ptw
{
    border: 1px solid #7e7e7e !important;
	border-radius: 10px !important;
	background: rgba(22, 22, 22, 0.85) !important;
    display: block !important;
    height: auto !important;
    margin: 10px auto !important;
    width: 250px !important;
	text-align: center;
	position: relative !important;
}
.header_cw *,
.header_completed *,
.header_onhold *,
.header_dropped *,
.header_ptw *
{
	text-align: center;
	display: block;
	font-size: 30px;
}

/* page header */
#mal_cs_pic,
#mal_cs_listinfo,
#mal_cs_links,
#mal_cs_otherlinks
{
	position: fixed !important;
	top: 0px !important;
	background: rgba(22, 22, 22, 0.85);
	padding: 0px 10px !important;
	border-bottom: 1px solid #7E7E7E;
	z-index: 20;
	height: 30px !important;
	line-height: 9px;
}
#mal_cs_pic { left: 0px; width: 321px !important; }
#mal_cs_listinfo { left: 0px; width: 150px !important; }
#mal_cs_links { left: 171px; }
#mal_cs_otherlinks { left: 342px; right: 0px; border-right: 1px solid #7E7E7E; }
#mal_cs_powered { display: none; }

/* bottom stuff */
#copyright,
#grand_totals
{
	text-align: center;
	border-radius: 10px;
	background: rgba(22, 22, 22, 0.85);
	border: 1px solid #7e7e7e;
	margin: 2em auto !important;
	display: block;
	padding: 4px;
	width: 250px;
}
#grand_totals:before
{
	content: "Grand Totals";
	display: block;
}
#copyright:after
{
	content: "List style by BurntJelly"; /* based on another that didn't work for Dawnslicer  http://myanimelist.net/forum/?topicid=393393&show=60#msg22695503 */
	display: block;
}

Sorry, i really dont know like anything about CSS, what is the cover css file, and how do i get a new one? And a few of the anime dont have cover pics, is that because they are newer and dont have one yet, or is there something i need to do? Oh, can you explain the more advanced one too, if i wont be able to do it thats fine, but if i could get it to work that would be cool.

"Make it flashier!" -Maid Chou Anime List

Apr 26, 2015 4:07 PM

#15

--Dawn--

Offline

Jan 2015

3111

Also, I was wondering where to change the text color, i noticed yours was blue and i kind of liked that, not a big deal though, if you look at mine i got the background changed, and you can see anything that needs changing too maybe http://myanimelist.net/animelist/Dawnslicer&status=1&order=0

Thanks a ton for everything so far, even if the problems didnt get fixed i still like it more than before

"Make it flashier!" -Maid Chou Anime List

Apr 26, 2015 6:57 PM

#16

BurntJelly

Offline

Feb 2013

6197

Yea, orange/blue would look better with that background.

As far as generating the CSS for the covers, I have a bookmarklet posted on my website (see profile) that I use to generate mine (it's a bit of a hack-fest though). But you have to find a place on the web to upload it (dropbox, googledrive, some other web space, etc.). You don't have that much on your list yet, so you might even have enough space to put them in the MAL editor, but that won't last.

I didn't really test this but

@import "https://dl.dropboxusercontent.com/u/49469857/MAL/premade/anime.css";

body
{
	background: url("http://all4desktop.com/data_images/original/4222626-magic-of-universe.jpg") no-repeat top center;
	background-attachment: fixed;
	background-size: cover;					
	color: #FFFFFF;
	font-size: 11.00px;
	font-family: Verdana, Arial;
	background-color: #000000;
}

#list_surround
{
	margin: 0 auto;
    width: 80%;
	text-align: center;
}

a
{
	color: #00DDFF;
	text-decoration: none;
}

a:hover
{
	text-decoration: underline;
}

/* anime list tables */
[width="100%"]
{
	margin: 50px 50px;
	padding: 14px;
	display: inline-block;
	height: 350px;
	position: relative;
	width: 250px;
	background: rgba(0, 11, 22, 0.75);
	border: 1px solid #AA8040;
	border-radius: 10px;
	color: #ffc070;
}

/* number */
.td1:nth-of-type(1),
.td2:nth-of-type(1)
{
	display: none;
}

/* anime title */
.td1:nth-of-type(2),
.td2:nth-of-type(2)
{
    display: block;
	text-align: center;
}
.animetitle span
{
    background: rgba(0, 11, 22, 0.75);
    border: 1px solid #AA8040;
    border-radius: 10px;
    left: -1px;
    overflow: hidden;
    padding: 2px 6px;
    position: absolute;
    top: -30px;
    white-space: nowrap;
    width: 236px;
	font-weight: bold;
}
.animetitle:hover span
{
	text-decoration: underline;
}
/* airing */
.td1:nth-of-type(2) small,
.td2:nth-of-type(2) small
{
	left: 14px;
	position: absolute;
	top: 176px;
	font-size: 9px;
}
/* edit more links */
.td1:nth-of-type(2) div[style="float: right;"],
.td2:nth-of-type(2) div[style="float: right;"]
{
	left: 14px;
	position: absolute;
	right: 14px;
	top: 176px;
	color: transparent;
}
.td1:nth-of-type(2) div[style="float: right;"] small,
.td2:nth-of-type(2) div[style="float: right;"] small
{
	position: static;
	font-size: 9px;
}
[id^="xmenu"]
{
    display: none;
}

/* score */
.td1:nth-of-type(3):before,
.td2:nth-of-type(3):before
{
    content: "Score: ";
}
.td1:nth-of-type(3),
.td2:nth-of-type(3)
{
    position: absolute;
    top: 190px;
    width: auto !important;
}

/* type */
.td1:nth-of-type(4):before,
.td2:nth-of-type(4):before
{
    content: "Type: ";
}
.td1:nth-of-type(4),
.td2:nth-of-type(4)
{
    position: absolute;
    top: 210px;
    width: auto !important;
}

/* episodes */
.td1:nth-of-type(5):before,
.td2:nth-of-type(5):before
{
    content: "Episodes: ";
}
.td1:nth-of-type(5),
.td2:nth-of-type(5)
{
    position: absolute;
    top: 190px;
	right: 14px;
    width: auto !important;
}

/* tags */
.td1:nth-of-type(6),
.td2:nth-of-type(6)
{
    position: absolute;
    top: 230px;
	left: 14px;
	right: 14px;
	bottom: 14px;
    width: auto !important;
	overflow: auto;
}

/* rating */
.td1:nth-of-type(7):before,
.td2:nth-of-type(7):before
{
    content: "Rating: ";
}
.td1:nth-of-type(7),
.td2:nth-of-type(7)
{
    position: absolute;
    top: 210px;
	right: 14px;
    width: auto !important;
}

/* priority */
.td1:nth-of-type(8):before,
.td2:nth-of-type(8):before
{
    content: "Priority: ";
}
.td1:nth-of-type(8),
.td2:nth-of-type(8)
{
    position: absolute;
    top: 176px;
	right: 14px;
    width: auto !important;
	font-size: 9px;
}

/* more */
.hide
{
    border-radius: 8px;
    display: inline-block !important;
    height: 160px;
    margin-left: -291px; /* why is this off in the last column? */
    margin-top: 62px;
    position: absolute;
    text-align: left;
    width: 225px;
    z-index: 15;
	background-color: rgba(22, 22, 22, 0.75);
    background-repeat: no-repeat;
	transition: height 400ms ease 200ms;
}
.hide:hover
{
	height: 322px;
}

/* table headers */
.header_cw + [width="100%"],
.header_completed + [width="100%"],
.header_dropped + [width="100%"],
.header_ptw + [width="100%"]
{
	display: block;
	width: 250px;
	height: auto;
	padding: 4px;
	margin: 0px auto;
	font-size: 9px;
}
.header_cw + [width="100%"]:before,
.header_completed + [width="100%"]:before,
.header_dropped + [width="100%"]:before,
.header_ptw + [width="100%"]:before
{
	content: "Sort";
	display: block;
}
.table_header:nth-of-type(1),
.table_header:nth-of-type(6)
{
    display: none;
}
.table_header
{
	display: inline-block;
	margin: 0px 4px;
	width: auto;
}
.table_header strong
{
	font-weight: normal;
}

/* status links */
[width="100%"][align="center"]
{
    height: 40px;
    margin: 7px 0px;
    padding: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: auto;
    z-index: 25;
	background: transparent;
	border: none;
	border-radius: 0px;
}
.status_selected, .status_not_selected
{
    display: inline-block;
    margin: 0 10px;
    width: auto;
}
.status_selected
{
}
.status_selected a
{
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: underline;
}
.status_selected:nth-child(1), .status_not_selected:nth-child(1) { right: 500px; width: 130px; }
.status_selected:nth-child(2), .status_not_selected:nth-child(2) { right: 400px; width: 65px; }
.status_selected:nth-child(3), .status_not_selected:nth-child(3) { right: 300px; }
.status_selected:nth-child(4), .status_not_selected:nth-child(4) { right: 200px; }
.status_selected:nth-child(5), .status_not_selected:nth-child(5) { right: 100px; }
.status_selected:nth-child(6), .status_not_selected:nth-child(6) { right: 0px; }

/* watching completed headers */
.header_cw,
.header_completed,
.header_onhold,
.header_dropped,
.header_ptw
{
    border: 1px solid #AA8040 !important;
	border-radius: 10px !important;
	background: rgba(0, 11, 22, 0.75) !important;
    display: block !important;
    height: auto !important;
    margin: 10px auto !important;
    width: 250px !important;
	text-align: center;
	position: relative !important;
}
.header_cw *,
.header_completed *,
.header_onhold *,
.header_dropped *,
.header_ptw *
{
	text-align: center;
	display: block;
	font-size: 30px;
}

/* page header */
#mal_cs_pic,
#mal_cs_listinfo,
#mal_cs_links,
#mal_cs_otherlinks
{
	position: fixed !important;
	top: 0px !important;
	background: rgba(22, 22, 22, 0.85);
	padding: 0px 10px !important;
	border-bottom: 1px solid #7E7E7E;
	z-index: 20;
	height: 30px !important;
	line-height: 9px;
}
#mal_cs_pic { left: 0px; width: 321px !important; }
#mal_cs_listinfo { left: 0px; width: 150px !important; }
#mal_cs_links { left: 171px; }
#mal_cs_otherlinks { left: 342px; right: 0px; border-right: 1px solid #7E7E7E; }
#mal_cs_powered { display: none; }

/* bottom stuff */
#copyright,
#grand_totals
{
	text-align: center;
	border-radius: 10px;
	background: rgba(0, 11, 22, 0.75);
	border: 1px solid #AA8040;
	margin: 2em auto !important;
	display: block;
	padding: 4px;
	width: 250px;
}
#grand_totals:before
{
	content: "Grand Totals";
	display: block;
}
#copyright:after
{
	content: "List style by BurntJelly"; /* based on another that didn't work for Dawnslicer  http://myanimelist.net/forum/?topicid=393393&show=60#msg22695503 */
	display: block;
}

Apr 26, 2015 8:58 PM

#17

--Dawn--

Offline

Jan 2015

3111

BurntJelly said:
Yea, orange/blue would look better with that background.

As far as generating the CSS for the covers, I have a bookmarklet posted on my website (see profile) that I use to generate mine (it's a bit of a hack-fest though). But you have to find a place on the web to upload it (dropbox, googledrive, some other web space, etc.). You don't have that much on your list yet, so you might even have enough space to put them in the MAL editor, but that won't last.

I didn't really test this but

@import 

"https://dl.dropboxusercontent.com/u/49469857/MAL/premade/anime.css";

body
{
	background: url("http://all4desktop.com/data_images/original/4222626-magic-of-universe.jpg") no-repeat top center;
	background-attachment: fixed;
	background-size: cover;					
	color: #FFFFFF;
	font-size: 11.00px;
	font-family: Verdana, Arial;
	background-color: #000000;
}

#list_surround
{
	margin: 0 auto;
    width: 80%;
	text-align: center;
}

a
{
	color: #00DDFF;
	text-decoration: none;
}

a:hover
{
	text-decoration: underline;
}

/* anime list tables */
[width="100%"]
{
	margin: 50px 50px;
	padding: 14px;
	display: inline-block;
	height: 350px;
	position: relative;
	width: 250px;
	background: rgba(0, 11, 22, 0.75);
	border: 1px solid #AA8040;
	border-radius: 10px;
	color: #ffc070;
}

/* number */
.td1:nth-of-type(1),
.td2:nth-of-type(1)
{
	display: none;
}

/* anime title */
.td1:nth-of-type(2),
.td2:nth-of-type(2)
{
    display: block;
	text-align: center;
}
.animetitle span
{
    background: rgba(0, 11, 22, 0.75);
    border: 1px solid #AA8040;
    border-radius: 10px;
    left: -1px;
    overflow: hidden;
    padding: 2px 6px;
    position: absolute;
    top: -30px;
    white-space: nowrap;
    width: 236px;
	font-weight: bold;
}
.animetitle:hover span
{
	text-decoration: underline;
}
/* airing */
.td1:nth-of-type(2) small,
.td2:nth-of-type(2) small
{
	left: 14px;
	position: absolute;
	top: 176px;
	font-size: 9px;
}
/* edit more links */
.td1:nth-of-type(2) div[style="float: right;"],
.td2:nth-of-type(2) div[style="float: right;"]
{
	left: 14px;
	position: absolute;
	right: 14px;
	top: 176px;
	color: transparent;
}
.td1:nth-of-type(2) div[style="float: right;"] small,
.td2:nth-of-type(2) div[style="float: right;"] small
{
	position: static;
	font-size: 9px;
}
[id^="xmenu"]
{
    display: none;
}

/* score */
.td1:nth-of-type(3):before,
.td2:nth-of-type(3):before
{
    content: "Score: ";
}
.td1:nth-of-type(3),
.td2:nth-of-type(3)
{
    position: absolute;
    top: 190px;
    width: auto !important;
}

/* type */
.td1:nth-of-type(4):before,
.td2:nth-of-type(4):before
{
    content: "Type: ";
}
.td1:nth-of-type(4),
.td2:nth-of-type(4)
{
    position: absolute;
    top: 210px;
    width: auto !important;
}

/* episodes */
.td1:nth-of-type(5):before,
.td2:nth-of-type(5):before
{
    content: "Episodes: ";
}
.td1:nth-of-type(5),
.td2:nth-of-type(5)
{
    position: absolute;
    top: 190px;
	right: 14px;
    width: auto !important;
}

/* tags */
.td1:nth-of-type(6),
.td2:nth-of-type(6)
{
    position: absolute;
    top: 230px;
	left: 14px;
	right: 14px;
	bottom: 14px;
    width: auto !important;
	overflow: auto;
}

/* rating */
.td1:nth-of-type(7):before,
.td2:nth-of-type(7):before
{
    content: "Rating: ";
}
.td1:nth-of-type(7),
.td2:nth-of-type(7)
{
    position: absolute;
    top: 210px;
	right: 14px;
    width: auto !important;
}

/* priority */
.td1:nth-of-type(8):before,
.td2:nth-of-type(8):before
{
    content: "Priority: ";
}
.td1:nth-of-type(8),
.td2:nth-of-type(8)
{
    position: absolute;
    top: 176px;
	right: 14px;
    width: auto !important;
	font-size: 9px;
}

/* more */
.hide
{
    border-radius: 8px;
    display: inline-block !important;
    height: 160px;
    margin-left: -291px; /* why is this off in the last column? */
    margin-top: 62px;
    position: absolute;
    text-align: left;
    width: 225px;
    z-index: 15;
	background-color: rgba(22, 22, 22, 0.75);
    background-repeat: no-repeat;
	transition: height 400ms ease 200ms;
}
.hide:hover
{
	height: 322px;
}

/* table headers */
.header_cw + [width="100%"],
.header_completed + [width="100%"],
.header_dropped + [width="100%"],
.header_ptw + [width="100%"]
{
	display: block;
	width: 250px;
	height: auto;
	padding: 4px;
	margin: 0px auto;
	font-size: 9px;
}
.header_cw + [width="100%"]:before,
.header_completed + [width="100%"]:before,
.header_dropped + [width="100%"]:before,
.header_ptw + [width="100%"]:before
{
	content: "Sort";
	display: block;
}
.table_header:nth-of-type(1),
.table_header:nth-of-type(6)
{
    display: none;
}
.table_header
{
	display: inline-block;
	margin: 0px 4px;
	width: auto;
}
.table_header strong
{
	font-weight: normal;
}

/* status links */
[width="100%"][align="center"]
{
    height: 40px;
    margin: 7px 0px;
    padding: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: auto;
    z-index: 25;
	background: transparent;
	border: none;
	border-radius: 0px;
}
.status_selected, .status_not_selected
{
    display: inline-block;
    margin: 0 10px;
    width: auto;
}
.status_selected
{
}
.status_selected a
{
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: underline;
}
.status_selected:nth-child(1), .status_not_selected:nth-child(1) { right: 500px; width: 130px; }
.status_selected:nth-child(2), .status_not_selected:nth-child(2) { right: 400px; width: 65px; }
.status_selected:nth-child(3), .status_not_selected:nth-child(3) { right: 300px; }
.status_selected:nth-child(4), .status_not_selected:nth-child(4) { right: 200px; }
.status_selected:nth-child(5), .status_not_selected:nth-child(5) { right: 100px; }
.status_selected:nth-child(6), .status_not_selected:nth-child(6) { right: 0px; }

/* watching completed headers */
.header_cw,
.header_completed,
.header_onhold,
.header_dropped,
.header_ptw
{
    border: 1px solid #AA8040 !important;
	border-radius: 10px !important;
	background: rgba(0, 11, 22, 0.75) !important;
    display: block !important;
    height: auto !important;
    margin: 10px auto !important;
    width: 250px !important;
	text-align: center;
	position: relative !important;
}
.header_cw *,
.header_completed *,
.header_onhold *,
.header_dropped *,
.header_ptw *
{
	text-align: center;
	display: block;
	font-size: 30px;
}

/* page header */
#mal_cs_pic,
#mal_cs_listinfo,
#mal_cs_links,
#mal_cs_otherlinks
{
	position: fixed !important;
	top: 0px !important;
	background: rgba(22, 22, 22, 0.85);
	padding: 0px 10px !important;
	border-bottom: 1px solid #7E7E7E;
	z-index: 20;
	height: 30px !important;
	line-height: 9px;
}
#mal_cs_pic { left: 0px; width: 321px !important; }
#mal_cs_listinfo { left: 0px; width: 150px !important; }
#mal_cs_links { left: 171px; }
#mal_cs_otherlinks { left: 342px; right: 0px; border-right: 1px solid #7E7E7E; }
#mal_cs_powered { display: none; }

/* bottom stuff */
#copyright,
#grand_totals
{
	text-align: center;
	border-radius: 10px;
	background: rgba(0, 11, 22, 0.75);
	border: 1px solid #AA8040;
	margin: 2em auto !important;
	display: block;
	padding: 4px;
	width: 250px;
}
#grand_totals:before
{
	content: "Grand Totals";
	display: block;
}
#copyright:after
{
	content: "List style by BurntJelly"; /* based on another that didn't work for Dawnslicer  http://myanimelist.net/forum/?topicid=393393&show=60#msg22695503 */
	display: block;
}

Yeah, that worked, i like the colors, if its not too much trouble, could you show me how to do the covers sometime, i tried to follow this tutorial at one point and didnt quite get it. Maybe if you have some free time one night you can teach me real quick, i am almost always available so i can work to your schedual pretty easily.

Thanks a ton for everything though as it is. This is pretty much exactly what i wanted. Only thing more i would want is that they add a genre option to the list so we dont have to add tags personally lol

"Make it flashier!" -Maid Chou Anime List

Apr 26, 2015 9:21 PM

#18

--Dawn--

Offline

Jan 2015

3111

Got the tags to work, thats pretty sweet, thanks so much for all of this

Edit: I think i will need help on using an external source for the tags and covers, cause i just did it straight from MAL this time i think like you said, but yeah i plan on adding a lot more to my list when i have the motivation. If possible i would like to do it whenever you have some free time maybe like i said in my last reply, but if not ill figure it out somehow since you have done so much already.

--Dawn--Apr 26, 2015 10:11 PM

"Make it flashier!" -Maid Chou Anime List

May 10, 2015 1:14 PM

#19

BurntJelly

Offline

Feb 2013

6197

The easiest thing for you to do would probably be to open a Dropbox account.

Alternately, you should be able to use an existing google account (google drive, or google sites) to host it.

I made a blog entry for the card layout. (you are currently using the alternative simple version that is 2nd on the page). All you have to do is use my tool, replace the templates, run it, copy/paste the result into a CSS file (on your machine), then upload it someplace (and fix the @import in your custom style).

May 11, 2015 7:11 PM

#20

--Dawn--

Offline

Jan 2015

3111

BurntJelly said:
The easiest thing for you to do would probably be to open a Dropbox account.

Alternately, you should be able to use an existing google account (google drive, or google sites) to host it.

I made a blog entry for the card layout. (you are currently using the alternative simple version that is 2nd on the page). All you have to do is use my tool, replace the templates, run it, copy/paste the result into a CSS file (on your machine), then upload it someplace (and fix the @import in your custom style).

Alright, i think i get it. What is the difference between the "Alternate" version that i am using and the other version by the way?

"Make it flashier!" -Maid Chou Anime List

May 14, 2015 7:17 PM

#21

BurntJelly

Offline

Feb 2013

6197

The "top" version doesn't have the weird alignment issue in the right column and "More" is fully functional. (basically it's better in every way) If you were to switch to that version, you'd have to go through it to change all the colors to match your background.

May 15, 2015 10:46 AM

#22

--Dawn--

Offline

Jan 2015

3111

BurntJelly said:
The "top" version doesn't have the weird alignment issue in the right column and "More" is fully functional. (basically it's better in every way) If you were to switch to that version, you'd have to go through it to change all the colors to match your background.

oh, yeah, i dont feel like doing that lol, my list seems to be working almost perfectly. only thing i need to worry about is when i get to the point that your tool doesnt work on MAL anymore and i have to use an external source.

"Make it flashier!" -Maid Chou Anime List

May 16, 2015 9:08 AM

#23

BurntJelly

Offline

Feb 2013

6197

You seem to be missing the point of using my tool, since you haven't started using your own custom covers CSS file. After running it, you are supposed to copy/paste the "stuff" in the bottom textarea to a CSS file on your PC, then upload it to the web.

I suggest taking a look at How to Import CSS easily with Dropbox.

Shishio's Custom Lists & Profiles (club) has tutorials for just about all of these kinds of things.

May 16, 2015 6:47 PM

#24

--Dawn--

Offline

Jan 2015

3111

BurntJelly said:
You seem to be missing the point of using my tool, since you haven't started using your own custom covers CSS file. After running it, you are supposed to copy/paste the "stuff" in the bottom textarea to a CSS file on your PC, then upload it to the web.

I suggest taking a look at How to Import CSS easily with Dropbox.

Shishio's Custom Lists & Profiles (club) has tutorials for just about all of these kinds of things.

Alright, ill take a look. Yeah, i guess i dont get what you mean right now.

"Make it flashier!" -Maid Chou Anime List

May 16, 2015 9:06 PM

#25

Shishio-kun

Offline

Feb 2010

12687

Great list design!

@import "https://dl.dropboxusercontent.com/u/49469857/MAL/premade/anime.css";
But this cover CSS (top line of your code) you're using currently has been outdated for a while tho and was dead for a long time already due to overuse (it can't handle more than 100k hits a day). The newest public cover CSS is
@import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM);
If you're going to use a public cover import you should use that instead of the one you have now, since afaik it has all the current anime covers and I haven't seen it crash yet despite the heavy usage. I just updated it today actually.

But you should use the tool posted to make your own if you can, its always best. There's actually alot of cover CSS generating programs out there now.

See All Discussions

» 【 ART THREAD 】Let's share our art! ‪‪❤︎‬ ( 1 2 3 4 5 ) mewmewforever - Aug 30, 2024	205	by Retro8bit »» Yesterday, 6:39 PM
» Four Ages! Robert_SS_Gordon - Feb 21	47	by Robert_SS_Gordon »» Sep 23, 9:17 AM
» AniTaste - cross-site anime list comparator Mciej - Sep 21	1	by Retro8bit »» Sep 21, 5:29 PM
» Saeryen's Songs! Saeryen - Jul 25	5	by Saeryen »» Sep 20, 1:54 PM
» Share Your YouTube Channel/Videos! ( 1 2 3 4 5 ... Last Page ) nin-tendo - Dec 16, 2022	584	by Senery »» Sep 20, 10:01 AM

Anime List Design Help Please

More topics from this board

» 【 ART THREAD 】Let's share our art! ‪‪❤︎‬ ( 1 2 3 4 5 )

» Four Ages!

» AniTaste - cross-site anime list comparator

» Saeryen's Songs!

» Share Your YouTube Channel/Videos! ( 1 2 3 4 5 ... Last Page )

MoreTop Anime

MoreTop Airing Anime

MoreMost Popular Characters