MyAnimeList Theme

Feel free to post any fan works in this forum.
Post Reply
User avatar
Nightray
Posts: 4
Joined: Mon May 13, 2013 11:18 am

MyAnimeList Theme

Post by Nightray » Tue May 14, 2013 10:33 am

(Click for live preview)
Image
Image
Image
Image
Anime:

Code: Select all

@import url(http://db.tt/W515joSf); /* Headers & Categories */
@import url(); /* Favorites */
@import url(http://db.tt/lxjCUI4D); /* Main CSS */


 body { }
Manga:

Code: Select all

@import url(http://db.tt/kVPW7zry); /* Headers & Categories */
@import url(); /* Favorites */
@import url(http://db.tt/lxjCUI4D); /* Main CSS */


 body { }
Image

This list design allows you to use Image symbol to mark your favorite anime and manga. To enable it follow those easy steps:

Step one: Open new text file in Notepad
Step two: Paste following code:

Code: Select all

.animetitle[href$="/"] span:after,
.animetitle[href$="/"] span:after {
content: ' ';
position: absolute;
display: block;
margin-left: 340px;
margin-top: -15px;
width: 16px;
height: 16px;
background: url('http://db.tt/tP2sPBWM') no-repeat;
}
Step three: Add anime titles to .animetitle[href$="/"] span:after. The "/" is very important.
It should be looking like that:

Code: Select all

.animetitle[href$="/Fate/Zero_2nd_Season"] span:after,
.animetitle[href$="/Steins;Gate"] span:after,
.animetitle[href$="/Clannad"] span:after {
content: ' ';
position: absolute;
display: block;
margin-left: 340px;
margin-top: -15px;
width: 16px;
height: 16px;
background: url('http://db.tt/tP2sPBWM') no-repeat;
}
Step four: Click on "Save As..." and save the file as animefav.css or mangafav.css (the .css extension is very important)
Step five: If you do not have a web server, create a free account on Dropbox or on other free hostings/file storages.
Step six: Upload your .css file to a public folder (in case of dropbox it will be Dropbox > Public)
Step seven: Copy the url address of your file and paste it into the empty brackets in @import url(); /* Favorites */
Last Step: Replace the headers in the Main Code:
For anime list, find @import url(http://db.tt/W515joSf); /* Headers & Categories */ in the main code and change it to @import url(http://db.tt/VrmzIbdo); /* Headers & Categories + Favorites */
For manga list, find @import url(http://db.tt/kVPW7zry); /* Headers & Categories */ in the main code and change it to @import url(http://db.tt/XmZylgyJ); /* Headers & Categories + Favorites */

The finished Main Code should look like:

Code: Select all

@import url(http://db.tt/VrmzIbdo); /* Headers & Categories + Favorites */
@import url(http://www.yourdomain.com/animefav.css); /* Favorites */
@import url(http://db.tt/lxjCUI4D); /* Main CSS */


 body { }
Image
1. What the hell is MyAnimeList?
It is (probably) the biggest catalog of Anime and Manga.

2. Is this theme approved by Katawa Shoujo Developers?
Yes it is. I have a permission from Aura to use and share this theme.

3. Why there is only a picture of Lilly, I like the other girls too!
My original idea was to have random sprite each time you refresh the page. Since I couldn't find any good sprites beside this one, and the Developers turned down my request, Lilly became the official face of this theme.

4. Can I change that picture to something else?
I'm fine with that as long as you are not violating someones copyrights. The picture is stored under /* SIDE IMAGES */

5. Help! I can't see Lilly!
Don't worry, she can't... *bitʃslap* Ouch! Fine, that was a bad joke. The picture is set to display only on screens wider than 1450px. In my opinion it was ruining the composition on lower resolutions. If you really insist on having it, find @media all and (min-width:1450px) and change it to a lower number.

6. Will you make a theme for me?
Nope.

7. Will you marry me?
Umm... Nope.
Last edited by Nightray on Tue May 14, 2013 6:30 pm, edited 2 times in total.

User avatar
Vekter
Posts: 87
Joined: Fri Mar 09, 2012 11:49 pm

Re: MyAnimeList Theme

Post by Vekter » Tue May 14, 2013 2:04 pm

Call me stupid, but I can't find where to put the new CSS.

User avatar
Doctor
Posts: 14
Joined: Thu Jan 31, 2013 2:36 pm
Location: Canada!

Re: MyAnimeList Theme

Post by Doctor » Tue May 14, 2013 4:33 pm

This is SOOO very awesome! I salut you for making it!
However,
I cringe because Cowboy bebop isn't one of your favorites.
"... No matter how people see me as, pariah or paragon, I am but myself."
-FL

User avatar
Nightray
Posts: 4
Joined: Mon May 13, 2013 11:18 am

Re: MyAnimeList Theme

Post by Nightray » Tue May 14, 2013 4:34 pm

Vekter wrote:Call me stupid, but I can't find where to put the new CSS.
Profile -> Edit -> My List Style -> Advanced Style CSS Editor and paste it there. Then go to Profile -> Edit -> My List Style -> Change My List Style and select the one you just made.

CartmanJr
Posts: 1
Joined: Tue May 14, 2013 4:52 pm

Re: MyAnimeList Theme

Post by CartmanJr » Tue May 14, 2013 4:56 pm

This is awesome, however, I seem to be getting some issues with it.

Image

User avatar
Nightray
Posts: 4
Joined: Mon May 13, 2013 11:18 am

Re: MyAnimeList Theme

Post by Nightray » Tue May 14, 2013 5:23 pm

CartmanJr wrote:This is awesome, however, I seem to be getting some issues with it.
What browser are you using?

[edit]
I found the problem. For whatever reason MyAnimeList is loosing TD{ I'll post a fix in a minute. The problem is with MyAnimeList. Unfortunately their script is far from being perfect... It was overwriting my changes so I had to outsource the code on dropbox just like I did with my own theme. Good news, installing the script is a child's play now, bad news, installing favorites not so much.

User avatar
Volfaren
Posts: 2
Joined: Fri Sep 28, 2012 12:09 am

Re: MyAnimeList Theme

Post by Volfaren » Sat May 18, 2013 11:08 pm

This is really great, but could you possibly provide it without the custom cursor? I find it to be a bit unwieldy. Thanks a lot and great work!
Image
Image

User avatar
Nightray
Posts: 4
Joined: Mon May 13, 2013 11:18 am

Re: MyAnimeList Theme

Post by Nightray » Sun May 19, 2013 6:06 pm

Volfaren wrote:This is really great, but could you possibly provide it without the custom cursor? I find it to be a bit unwieldy. Thanks a lot and great work!
Replace Main CSS to this:

Code: Select all

@import url(http://db.tt/i6v91SN3); /* Main CSS */

Post Reply