[CSS- CLASSIC] Pre-Made CSS For Your Anime or Manga List! (Channel-style layout)

Online

Feb 2010

12646

Estupratom said:
I would like to increase the font size, could you help me?

http://myanimelist.net/mangalist/Estupratom

If you're just looking to increasing the overall font size on the page, try this: find font-size in the code, then change the number next to that to a new numerical value.

Mar 21, 2011 1:58 PM

#55

SeventhMist

Offline

Nov 2010

126

Moronicidiot said:

SeventhMist said:
I noticed that "Plan to Watch" is written in a very small font in the top left corner where the header pic is. Could you help me remove it please?

Add this to the bottom of your CSS.

#list_surround .header_title span {display: none}

That did the trick, thanks a lot.

Apr 16, 2011 9:26 AM

#56

fantastic

Offline

Dec 2009

169

I know this may be a bit of a stretch, but is there any way to change the colors of this area?

I know I can change the all-the-way-in-the-back section, as you can see, but I was wondering if there's any way just to dick around with the other background sections.

Your favorite anime is shit.

Apr 17, 2011 7:23 AM

#57

Drize

Offline

Mar 2010

122

fantastic said:
I know this may be a bit of a stretch, but is there any way to change the colors of this area?

I know I can change the all-the-way-in-the-back section, as you can see, but I was wondering if there's any way just to dick around with the other background sections.

That part that wasn't changed is an image that. You're gunna have to change the image to change that part.

Heres the link to the image: http://i49.tinypic.com/246thj5.jpg

Apr 18, 2011 12:12 PM

#58

fantastic

Offline

Dec 2009

169

Yeah, I figured as much... I changed the color and pasted the url in but it did not work as intended. Oh well, it was worth a shot. Thanks.

Your favorite anime is shit.

May 3, 2011 4:19 PM

#59

Aizzy

Offline

Oct 2008

2

Well, going to give CSS a try and this really helps a lot with my learning...Thanks!

May 7, 2011 10:44 AM

#60

Kagebunshin

Offline

Dec 2008

13

Hello.

i am using this template for my list(s) but i got a little problem.
http://images.tfdlite.com/bar.png

the bar is slightly off in google chrome (iexplore and firefox are just fine though)

Shishio-kunAug 7, 2011 5:16 PM

May 14, 2011 10:24 AM

#61

Geolga9

Offline

Nov 2009

72

Kagebunshin said:
Hello.

the bar is slightly off in google chrome (iexplore and firefox are just fine though)

I use Chrome as well, so if you give me the entire code you're using, I can take a look at it for you and see what the problem is.

May 26, 2011 10:10 AM

#62

UnderminE

Offline

May 2009

328

Okay, i have a question. This is my personal list -without using CSS-

As we can see, That moon is taking a part at center of the page.

But after using CSS; -this list is totally a copy/paste from Shishio-kun's tutorial besides the bg image-

What happened to the moon :D How can i fix that?

edit: The code was taken from this page:
http://myanimelist.net/forum/?topicid=200320&show=0

UnderminEMay 26, 2011 10:14 AM

Jun 6, 2011 9:47 AM

#63

Offline

Aug 2009

282

The picture is not centered, it is currently put to an edge of the page. You need to change its setting to center.

If you can't find it yourself in the code I'll help you later when I've got time. :P

Jun 23, 2011 11:06 AM

#64

rachel024

Offline

Jan 2011

66

i used one of the codes that are posted here and then i edited them all..
this is how my manga list looks like now...http://myanimelist.net/mangalist/rachel_0914

well,.. i'm not fully satisfied of the image above cause its full height can't be shown
if i make it so.. this will be the result

as u can see it covered the other list below

hmm,.. maybe can anyone help me about this? :D

Jun 29, 2011 10:35 PM

#65

Online

Feb 2010

12646

UnderminE said:

What happened to the moon :D How can i fix that?
=

In my code, it sets backgrounds to display from the center position, and in the default css on this site which you have as of this post, the backgrounds are set to left-center position. So when you see your moon on my code, it displays from the center, and when you see the moon with the site's default code, it starts to display the background a little from the left, so you see more from the left.

Next time you use my beginner's code, just add this code on the bottom with it and the moon will display the way you want to.

body {
background-position: left center;}

Jun 29, 2011 10:50 PM

#66

Online

Feb 2010

12646

rachel_0914 said:

hmm,.. maybe can anyone help me about this? :D

Add these codes to the bottom of your manga css and save, please post back so we know it worked..

#list_surround .header_title {
background: url(http://i278.photobucket.com/albums/kk108/keipee09/Habaekv01_ch06coloring-5.jpg) repeat scroll 0 0 transparent;
height: 270px;
left: -283px;
padding: 25px;
position: absolute;
top: -325px;
width: 749px;
}

#list_surround {
background: none repeat scroll 0 0 #FFFFFF;
border-bottom: 1px solid #292929;
border-left: 1px solid #292929;
border-right: 1px solid #292929;
height: 100%;
left: 141px;
margin: 329px auto 30px;
position: relative;
width: 584px;
}

Jun 29, 2011 11:21 PM

#67

UnderminE

Offline

May 2009

328

Shishio-kun said:

body {
background-position: left center;}

I've tried and It's okay now, thank you~

Jun 30, 2011 4:02 PM

#68

rachel024

Offline

Jan 2011

66

Shishio-kun said:

rachel_0914 said:

hmm,.. maybe can anyone help me about this? :D

Add these codes to the bottom of your manga css and save, please post back so we know it worked..

#list_surround .header_title {
background: url(http://i278.photobucket.com/albums/kk108/keipee09/Habaekv01_ch06coloring-5.jpg) repeat scroll 0 0 transparent;
height: 270px;
left: -283px;
padding: 25px;
position: absolute;
top: -325px;
width: 749px;
}

#list_surround {
background: none repeat scroll 0 0 #FFFFFF;
border-bottom: 1px solid #292929;
border-left: 1px solid #292929;
border-right: 1px solid #292929;
height: 100%;
left: 141px;
margin: 329px auto 30px;
position: relative;
width: 584px;
}

i added the codes but the result just made it worse... i mean the image didn't show.. =/

Jun 30, 2011 5:59 PM

#69

Online

Feb 2010

12646

rachel_0914 said:

Shishio-kun said:

rachel_0914 said:

i added the codes but the result just made it worse... i mean the image didn't show.. =/

I copied your manga list CSS, then added the codes I posted just now, and it came out like this:

Isn't this what you're goin for? What web browser are you using? Maybe thats the problem. I use Firefox.

I have the layout from the pic's code right here on my manga list too:

http://myanimelist.net/mangalist/Shishio-kun

this is the code I am using on that page now, maybe you can try to replace the one you have right now with it, save once, and then go to the manga list to see what happens.

Jul 1, 2011 9:13 AM

#70

rachel024

Offline

Jan 2011

66

Shishio-kun said:

rachel_0914 said:

Shishio-kun said:

rachel_0914 said:

i added the codes but the result just made it worse... i mean the image didn't show.. =/

I copied your manga list CSS, then added the codes I posted just now, and it came out like this:

Isn't this what you're goin for? What web browser are you using? Maybe thats the problem. I use Firefox.

I have the layout from the pic's code right here on my manga list too:

http://myanimelist.net/mangalist/Shishio-kun

this is the code I am using on that page now, maybe you can try to replace the one you have right now with it, save once, and then go to the manga list to see what happens.

it works now,. ^-^ thank you <3

Jul 11, 2011 11:39 AM

#71

Offline

Aug 2009

282

Kagebunshin said:
Hello.

i am using this template for my list(s) but i got a little problem.
http://images.tfdlite.com/bar.png

the bar is slightly off in google chrome (iexplore and firefox are just fine though)

I just changed my standard web browser to Google Chrome from Firefox and encountered this issue, too. The code doesn't seem to be that friendly with Chrome... I've got no idea how to fix this, make it so that it's compatible with both web browsers, that is. Anybody know a way how to fix this, or you must use Firefox in order to see it how it's supposed to be? If you adjust the position of this bar, it moves towards one side (adjusting this line: margin-left:-349px;; see the code in the spoiler), this so that you can make it fit into the way Chrome is reading it. But, if you do that, it changes for Firefox, obviously. Meh.

Shishio-kunAug 7, 2011 5:15 PM

Jul 18, 2011 11:53 AM

#72

Foxygirl05

Offline

Dec 2007

1710

Hey,

I have two problems:
Problem 1: I think my header is too big but I don't know where I can change.
Problem 2: I would like to havethe pictures more in the middle.

Screenshot:

Code:

Thanks~

Last.fm

Aug 7, 2011 8:25 PM

#73

Online

Feb 2010

12646

Kagebunshin said:
Hello.

i am using this template for my list(s) but i got a little problem.
http://images.tfdlite.com/bar.png

the bar is slightly off in google chrome (iexplore and firefox are just fine though)

You will have to add this fix to the bottom. It will make chrome's code a little different and your bottom bar should be centered correctly. I tested it myself. Try to keep this your very bottom code in your CSS if you can. Make me sure to post back here if it works or not too!

@media screen and (-webkit-min-device-pixel-ratio:0) {
#copyright {
margin-left:-209px;
}
}

Rodness said:

I just changed my standard web browser to Google Chrome from Firefox and encountered this issue, too. The code doesn't seem to be that friendly with Chrome... I've got no idea how to fix this, make it so that it's compatible with both web browsers, that is. Anybody know a way how to fix this, or you must use Firefox in order to see it how it's supposed to be? If you adjust the position of this bar, it moves towards one side (adjusting this line: margin-left:-349px;; see the code in the spoiler), this so that you can make it fit into the way Chrome is reading it. But, if you do that, it changes for Firefox, obviously. Meh.

In order to fix a browser specific issue, you can just use a CSS hack like the one I posted for the other guy. Codes put after @media screen and (-webkit-min-device-pixel-ratio:0) in the bracket are only read by Google Chrome, so codes put there only affect that browser and we can make the specific change we need. Its really important for IE cuz that browser always has issues the other browsers don't. There's a lot of CSS hacks out there and some get outdated.

Also, I updated the original codes in this thread with the hack so they will have centered bottom bars in Chrome from now on!

Shishio-kunAug 7, 2011 8:31 PM

Aug 7, 2011 8:42 PM

#74

Online

Feb 2010

12646

Foxygirl05 said:
Hey,

I have two problems:
Problem 1: I think my header is too big but I don't know where I can change.
Problem 2: I would like to havethe pictures more in the middle.

Screenshot:

Code:

Thanks~

You have to make the header smaller in whatever program you created it in. There is no code to make a image that much smaller. As for the second part, the position of the images is already as far right as they can go. Therefore, the problem is with the images you're using having space on their right that is seemingly pushing them left. Redo the images with no space on the right of them, and make sure they are background-position: right;. If you don't know how to set this I can correct your code for you once you modify your images as needed.

Aug 16, 2011 2:47 PM

#75

Kagebunshin

Offline

Dec 2008

13

Shishio-kun said:

Kagebunshin said:
Hello.

i am using this template for my list(s) but i got a little problem.
http://images.tfdlite.com/bar.png

the bar is slightly off in google chrome (iexplore and firefox are just fine though)

You will have to add this fix to the bottom. It will make chrome's code a little different and your bottom bar should be centered correctly. I tested it myself. Try to keep this your very bottom code in your CSS if you can. Make me sure to post back here if it works or not too!

@media screen and (-webkit-min-device-pixel-ratio:0) {
#copyright {
margin-left:-209px;
}
}

Works indeed, Thanks alot :)

Aug 21, 2011 7:40 PM

#76

kamui666

Offline

Aug 2011

5

i used the premade manga code that was on the first page.. but for some reason the picture that say Manga List on it. wont show up on my screen. does anyone know why and how to fix it?

Aug 22, 2011 11:20 AM

#77

Online

Feb 2010

12646

kamui666 said:
i used the premade manga code that was on the first page.. but for some reason the picture that say Manga List on it. wont show up on my screen. does anyone know why and how to fix it?

I think its cuz you have no manga listed at the moment, add some, and it should appear.

Sep 26, 2011 2:25 PM

#78

_Silen

Livin in the 90s

Offline

Jan 2011

75

Hey, Thanks for the CSS looks awesome on my list. But I did notice one thing, that theres a really tiny string of text overlapping the header. Its not visible on dark headers, but are noticeable on white ones. The text is "Plan to Watch". Ive noticed this on other lists that have used this code. Any way to fix this?

Heres a link to my list, you'll see the text as a small line to the upper left of my "LordSilen's Anime List" header or Banner at the top of the page. http://myanimelist.net/animelist/LordSilen

_SilenSep 26, 2011 2:54 PM

Sep 27, 2011 10:30 PM

#79

Online

Feb 2010

12646

LordSilen said:
Hey, Thanks for the CSS looks awesome on my list. But I did notice one thing, that theres a really tiny string of text overlapping the header. Its not visible on dark headers, but are noticeable on white ones. The text is "Plan to Watch". Ive noticed this on other lists that have used this code. Any way to fix this?

This should be easy to fix, just add this to the bottom of your CSS box after everything else. Don't remove or replace anything in your code. Let me know here if it works or not!

#list_surround .header_title span {
color: white;
}

Sep 28, 2011 10:27 AM

#80

_Silen

Livin in the 90s

Offline

Jan 2011

75

Hey thanks, the code works! While the text is still there, I don't care since its far less noticeable. :D

Oct 16, 2011 9:41 AM

#81

Offline

Aug 2009

282

SquChan said:
Thank you for your codes, Shishio and Moronicidiot.

I used it for my anime list (manga list comes later) and changed the style a little bit.
Well, I haven't the slightest idea of CSS, so I need premade codes for it, because I want my anime/manga list to look cool. But on the other hand I want something I made myself, so I changed the style a little to have at least a little bit of that feeling, you see? I hope that's ok or?
However, I'm very thankful for your club here :3 It was and is really helpful.

If you want to see it, just click on my sig. It's the fastest way I think :x

I think it looks great. I've looked at some other users' lists as well, and I'm glad people are able to personalize 'em a little bit.

Oct 16, 2011 9:52 AM

#82

Offline

Aug 2009

282

Here's a code for hiding the mini text at the buttons:

#list_surround .status_not_selected a {
color: black;
display:none;
}

Add it to the bottom of the CSS code.
Just change the colour (black) to the one you wish for by typing out that colour. I dunno why this doesn't affect "All anime", though. I'll look into that matter. Looks like that one needs a specific code for itself.

EDIT: It's much better to make the text transparent, which the opacity stands for (0=fully transparent, 0.5=50% opacity and 1=100% opacity), at the bottom of that code. Silly me for not thinking about that. xD

Here's a code which covers ALL the mini texts:

#list_surround .header_title span {
display:none;
}
#list_surround .status_not_selected a {
opacity:0;
}
#list_surround .status_selected a {
opacity:0;
}

This code even hides the mini text appearing when you've clicked on a button.

RodnessNov 10, 2011 10:56 AM

Nov 10, 2011 11:08 AM

#83

Offline

Aug 2009

282

^ Add this to the main post, please. Looks like I'm spamming, haha. xD

Jan 12, 2012 8:58 AM

#84

FlameHazeShana

Offline

Nov 2011

1

Hey, somebody I would do with Code Geass? Ladies photos.Thanks ;)

Jan 24, 2012 12:02 AM

#85

Online

Feb 2010

12646

FlameHazeShana said:
Hey, somebody I would do with Code Geass? Ladies photos.Thanks ;)

Request here:
http://myanimelist.net/forum/?topicid=393393

Jan 26, 2012 6:38 PM

#86

CommanderPhoenix

Offline

Aug 2011

123

Thanks for this layout it's awesome!

Feb 21, 2012 8:41 PM

#87

Offline

May 2011

3536

This is great, thanks a lot for these layouts. Didn't have any problems replacing the pictures and editing the stuff a little bit.

One thing I wanted to ask though, is it possible when you click the "more" in the list for the info to come out as a list like this

rather than being bunched up like this

Feb 21, 2012 11:11 PM

#88

Offline

Nov 2011

304

@ ZeroZx
Search for

#list_surround br

and replace with

#list_surround > br, #copyright > br

VeriTiFeb 21, 2012 11:36 PM

Feb 22, 2012 5:47 PM

#89

Offline

May 2011

3536

Thanks! Doing that does fix the problem, but for some reason the copyright line at the bottom gets cut in half like this

when its suppose to be like this

ZeroZxFeb 22, 2012 6:12 PM

Feb 22, 2012 7:48 PM

#90

Offline

Nov 2011

304

Don't know why is that, I put

#list_surround > br, #copyright > br{display:none}

instead of your code with "#list_surround br" and it seem to work nice. Maybe you've forgot to put #copyright > br part, I can't be sure 'cause it seems you've reverted the changes

VeriTiFeb 22, 2012 8:38 PM

Feb 22, 2012 9:03 PM

#91

Offline

May 2011

3536

Oh sorry, I reverted it back because I thought it wasn't okay to have the copyright messed up like that. I got it pasted exactly the way you wrote it atm but it's still cut in half.

Also noticed the top ends up like this

ZeroZxFeb 22, 2012 9:22 PM

Feb 22, 2012 9:21 PM

#92

Offline

Nov 2011

304

Oh, I need a 3rd-party facepalm, and quickly! MAL code parser seem to be broken even worse, turning > 's into > 's in source.

#list_surround br{display:none}

.borderRBL br{display:block !important}

This should do the trick.
Also since all br's on list surround were hidden to remove the space between different tables, if you don't mind it to appear, you may just add

#copyright br{display:none}

Feb 22, 2012 9:30 PM

#93

Offline

May 2011

3536

Thanks again for replying so fast, that seems to have done the trick! No problems as far as I can tell.

And lol yeah MAL code keeps on changing to those, it gets annoying.

Feb 23, 2012 8:44 AM

#94

Online

Feb 2010

12646

VeriTi said:



#list_surround br{display:none}

.borderRBL br{display:block !important}

#copyright br{display:none}

Can I add that the original premade CSS for this thread and the only side effect will be enhancing the more part? Seems like it. Thats awesome. How can one change the colors easily for just this part?

Feb 23, 2012 9:37 AM

#95

Offline

Nov 2011

304

Shishio-kun said:
Can I add that the original premade CSS for this thread and the only side effect will be enhancing the more part? Seems like it. Thats awesome. How can one change the colors easily for just this part?

Guess my English is too poor to understand this completely -_-

Feb 23, 2012 9:50 AM

#96

Online

Feb 2010

12646

Don't worry about it; well basically I'm asking after I add those codes, do you know how I can change the colors for that text that come up when you click "more" on the list?

I want to add them to the premade CSS in the first post in this thread. But I want to change the colors.

Feb 23, 2012 10:19 AM

#97

Offline

Nov 2011

304

Oh, you mean like

.borderRBL{color: #FF0;}

?

Feb 23, 2012 10:26 AM

#98

Online

Feb 2010

12646

Wow thanks for the fast response! And yes, but with downloaded episodes changing color too. I couldn't figure out how to before.

But I actually I got it, I just had to add span:

.borderRBL, .borderRBL span{color: cyan;}

I'll add these to the front post later, and credit you. Thanks for answering that guy's question so fast too bro!

Feb 23, 2012 10:40 AM

#99

Offline

Nov 2011

304

@ Shishio
lol I thought that would be just too simple to be what you mean.
Don't know why you may need to add span also because color here is supposed to be inherited from .borderRBL unless it is overrided somewhere else, which you should be able to see with Firebug

Feb 23, 2012 11:32 AM

#100