Forum Settings
Forums
Top
  >  
Forum
  >  
Shishio's Custom MyAnimeList
  >  
Shishio's Custom MyAnimeList D...
  >  
[CSS - CLASSIC] How to individ...
RecentWatchedIgnoredSearch Forum

[CSS - CLASSIC] How to individually customize the headers (Currently Watching, Completed, etc.)

New
Aug 9, 2011 1:02 PM
#1
Shishio-kun

Offline
Feb 2010
12632
This topic is part of our CSS Tutorials and Add-ons section:
http://myanimelist.net/forum/?topicid=419405


These codes can be used for a lot of list types including the Beginner's Styles! You also might be interested to instead use a layout with individual headers already, there's the Lucky Star or K-on! layout for example: http://myanimelist.net/forum/?topicid=318587

You can customize the headers on your anime and manga lists individually. Here's an example of what you can do, on a manga list!


You can see I customized the header "Currently Reading" individually with an image of Mio Akiyama in a maid costume alongside a custom logo that says "Current Manga". Complete header has an individual pic of Mio in a swimsuit with a "Complete" logo. The original text "currently reading" and "complete" was removed and these images were added to the headers to replace that- see the image here its Mio and a logo in one: http://i55.tinypic.com/2ug14j4.jpg

How to get your headers customized this way!

The next post in this thread covers anime list header codes (use only on anime lists), the post after covers manga list headers (use only on manga lists). You just add them to the bottom of your CSS, then use it to customize the headers images as you please!

I already put those default images in the code (the ones from the example pic above), but you can replace them with your own creations! The codes are already set up for people who want to use custom headers as in the example pic. You're supposed to add ALL the codes from the post that pertains to your list type (anime or manga type). There are ones near the bottom of each post containing important fixes and one that removes the default header text. They're labeled according to what they do. Check the Frequently Asked Questions below for info on changing the header images and clearing/bring back the default header text.

If you have any questions just post in this thead!



Tips on customizing headers:
You can do a lot of other creative stuff with to replace your headers, replace them with whole pics like here:
http://i39.tinypic.com/2086t5i.jpg
and here I replaced the headers with not pics just fancy logos
http://i54.tinypic.com/2jcfvvn.jpg
or lets say your name was VampireMia15, well you could make a logo that says "VampireMia15's Current Anime"!



Frequently asked questions about the headers and codes:

How can I customize the image in the header?


I added the codes, then used my own images for the headers. But I can't see the original text like "currently watching" or "completed". What do I do to get this text back?



How can I customize the text in the headers?



How do I customize the text of a header individually?



How do I remove/clear the default text from the headers?



I added the codes to remove header text, but the text is still there. What do I do?



I want to use custom logos like you have in the default images, where did you make yours?

Shishio-kunSep 1, 2016 9:04 PM
Reply Disabled for Non-Club Members
Pages (2) [1] 2 »
Oct 16, 2011 1:13 PM
#2
Shishio-kun

Offline
Feb 2010
12632
/*
Anime List only

CURRENTLY WATCHING HEADER
This is the header above currently watching/reading. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list.

If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:".
*/
.header_cw {
background-image:url(http://i56.tinypic.com/343qcn6.jpg);
height: 200px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}



/*
COMPLETED HEADER
This is the header above your anime/manga that's completed. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list.

If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:".
*/
.header_completed {
background-image:url(http://i51.tinypic.com/2ihqwy1.jpg);
height: 200px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}



/*
ON-HOLD HEADER
This is the header above your animes/mangas on-hold. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list.

If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:".
*/
.header_onhold {
background-image:url(http://i56.tinypic.com/j7gs3b.jpg);
height: 200px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}



/*
DROPPED HEADER
This is the header above your dropped animes/mangas. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list.

If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:".
*/
.header_dropped {
background-image:url(http://i52.tinypic.com/2a62ulu.jpg);
height: 200px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}



/*
PLAN TO WATCH HEADER
This is the header above the anime/manga you plan to see or read on your list. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list.

If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:".
*/
.header_ptw {
background-image:url(http://i52.tinypic.com/vyb05g.jpg);
height: 200px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}

/*
REMOVE HEADER COLOR
You need this code to remove the default background colors from the header and override any related codes. You're supposed to use your own images or the default ones for the header, so this color is set to transparent so it won't get in the way. If you want the color back for some reason, remove this section.
*/
.header_title {
background-color: transparent !important;
}

/*
OTHER CODES
Stuff I had to add after site changes. You need this otherwise the headers won't be visible.
*/
tbody
{background-color: transparent;
background-image: none;}


/*
REMOVE HEADER TEXT
These codes remove the original text like "Completed" and "Currently Watching" from
each category on the list. Some people will want the text gone so they can have their own custom logos. But if you want the text back, you have to remove this whole section. It shouldn't affect the images in any way.
*/
.header_title {
color: gray !important;
color: transparent !important;
font-size: 1px !important;
font-size: 0px !important;
font-size: 0 !important;
font-size: 0pt !important;
}

Shishio-kunDec 9, 2013 2:15 PM
Oct 16, 2011 1:13 PM
#3
Shishio-kun

Offline
Feb 2010
12632
/*
Manga List only

CURRENTLY READING HEADER
This is the header above currently reading. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list.

If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:".
*/
.header_cw {
background-image:url(http://i55.tinypic.com/2ug14j4.jpg);
height: 200px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}



/*
COMPLETED HEADER
This is the header above completed manga. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list.

If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:".
*/
.header_completed {
background-image:url(http://i51.tinypic.com/2ihqwy1.jpg);
height: 200px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}



/*
ON-HOLD HEADER
This is the header above your manga on-hold. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list.

If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:".
*/
.header_onhold {
background-image:url(http://i56.tinypic.com/j7gs3b.jpg);
height: 200px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}



/*
DROPPED HEADER
This is the header above your dropped manga. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list.

If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:".
*/
.header_dropped {
background-image:url(http://i52.tinypic.com/2a62ulu.jpg);
height: 200px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}



/*
PLAN TO READ HEADER
This is the header above the manga you plan to read on your list. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list.

If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:".
*/
.header_ptw {
background-image:url(http://i52.tinypic.com/a4q1wz.jpg);
height: 200px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}

/*
REMOVE HEADER COLOR
You need this code to remove the default background colors from the header and override any related codes. You're supposed to use your own images or the default ones for the header, so this color is set to transparent so it won't get in the way. If you want the color back for some reason, remove this section.
*/
.header_title {
background-color: transparent !important;
}


/*
OTHER CODES
Stuff I had to add after site changes. You need this otherwise the headers won't be visible.
*/
tbody
{background-color: transparent;
background-image: none;}


/*
REMOVE HEADER TEXT
These codes remove the original text like "Completed" and "Currently Reading" from
each category on the list. Some people will want the text gone so they can have their own custom logos. But if you want the text back, you have to remove this whole section. It shouldn't affect the images in any way.
*/
.header_title {
color: gray !important;
color: transparent !important;
font-size: 1px !important;
font-size: 0px !important;
font-size: 0 !important;
font-size: 0pt !important;
}

Shishio-kunDec 9, 2013 2:21 PM
Oct 17, 2011 3:29 AM
#4
Den-kun

Offline
Sep 2011
148
shishi i just noticed that when i used the codes above the black bar above my list is no longer transparent. how can i make it transparent again? thanks!
Oct 18, 2011 12:45 AM
#5
Shishio-kun

Offline
Feb 2010
12632
Den-kun said:
shishi i just noticed that when i used the codes above the black bar above my list is no longer transparent. how can i make it transparent again? thanks!


Oh I see there's an outdated code in your layout to make the bar transparent and its causing problems to the header, you might have got it from here in the past but we're using a new method since- I'll PM your CSS with the appropriate changes.
Oct 18, 2011 4:52 AM
#6
Den-kun

Offline
Sep 2011
148
thanks shishi! you're a genius! i'm now using JASC animation shop to customize my own headers LOL. can you tell me how to combine the header that i made from cooltext.com and the picture i edited using JASC just like what you did in the mio headers? thanks a lot dude! =^‿‿^=
Oct 18, 2011 1:03 PM
#7
Shishio-kun

Offline
Feb 2010
12632
Den-kun said:
can you tell me how to combine the header that i made from cooltext.com and the picture i edited using JASC just like what you did in the mio headers?


open Jasc
drag the logo and the image you want to use from your computer into Jasc
now in Jasc, drag the logo into the image like in the example below
save (as in example), the saved image will be the new pic you made in Jasc


k4bcl0.jpg

b5l6ag.jpg

35idpgi.jpg

If you're having trouble dragging a pic into Jasc, you just put your cursor on it, click and hold, and move it into the program. Within Jasc you do the same click hold and pull the image into another.
Oct 18, 2011 9:43 PM
#8
Den-kun

Offline
Sep 2011
148
that seems easy. the problem is, i can't seem to expand the width of the picture for the header to fit in. (T^T)
Oct 18, 2011 10:51 PM
#9
Shishio-kun

Offline
Feb 2010
12632
Den-kun said:that seems easy. the problem is, i can't seem to expand the width of the picture for the header to fit in. (T^T)


1. Go to "File" and open a new window that is the size you want it to be. 800px width, 300px high should be good enough for headers. If its too big you can always redo it later.

2. Then you can just use that new window- drag your logo and image into that and save. Now this will be your new header.


btw resizing an image to a bigger size will make it fuzzy so its never worth it. Resizing stuff smaller is very useful though. You resize an image either way with "shift + S" keys, or its under animation in the options up top.
Shishio-kunOct 18, 2011 10:54 PM
Oct 18, 2011 11:28 PM
#10
Den-kun

Offline
Sep 2011
148
i see.. yeah! thanks a lot dude! you're awesome!! i really owe you big time! LOL
Oct 19, 2011 1:20 PM
#11
Shishio-kun

Offline
Feb 2010
12632
Den-kun said:
i see.. yeah! thanks a lot dude! you're awesome!! i really owe you big time! LOL


Yup I have a lot of experience with jasc so ask anytime, you can find out alot of stuff just messing around its pretty fun and way better for most stuff then Photoshop which is overly detailed and annoying, fuck that program lol.

Another thing about Jasc for making banners is when you resize something to a smaller size it will round out rough or fuzzy edges and speckles most times. So if you got a cool image but it has flaws, sometimes making it smaller will iron the flaws out.
Apr 6, 2012 1:01 AM
#12
czerah

Offline
Oct 2008
3847
Hi. How do I make it so that the pre-selected category is "currently reading" when I open my manga list? Thanks! :)
Apr 8, 2012 9:01 AM
#13
Shishio-kun

Offline
Feb 2010
12632
czerah said:
Hi. How do I make it so that the pre-selected category is "currently reading" when I open my manga list? Thanks! :)


http://myanimelist.net/editprofile.php?go=listpreferences

default status selected
Apr 8, 2012 12:47 PM
#14
czerah

Offline
Oct 2008
3847
Haha! So that's what it is! Thank you so much. :)
Apr 14, 2012 7:04 AM
#15
Zelteza

Offline
Oct 2010
16
Thanks for this tutorial! But I need your help, in my list, under "Fusing", I can still see the black "Watching" words overlapping it, how do I go about removing it?
Apr 14, 2012 12:34 PM
#16
Shishio-kun

Offline
Feb 2010
12632
See the bottom of the second post, there's a "Remove Header Text" section of code thats supposed to be added when you add these. Just add that to your CSS
Jul 5, 2012 8:55 PM
#17
Koshii

Offline
Jun 2012
143
So i'm about to add my own custom images to my headers, but i'm having a problem and need to solve it before I continue.



There are white lines going through all of the images and i'm not sure how to remove them. I've used the remove header code.
Jul 5, 2012 9:30 PM
#18
al_exs

Offline
Apr 2012
181
zeldas12 said:
So i'm about to add my own custom images to my headers, but i'm having a problem and need to solve it before I continue.



There are white lines going through all of the images and i'm not sure how to remove them. I've used the remove header code.


These lines are the border of Header titles.

Just add:
.header_title {
border: 0px none;
}
Jul 5, 2012 9:42 PM
#19
Koshii

Offline
Jun 2012
143
al_exs said:
zeldas12 said:
So i'm about to add my own custom images to my headers, but i'm having a problem and need to solve it before I continue.



There are white lines going through all of the images and i'm not sure how to remove them. I've used the remove header code.


These lines are the border of Header titles.

Just add:
.header_title {
border: 0px none;
}


Ah okay, thanks! I knew it was the border, just wasn't sure on how to remove em'.
Apr 11, 2013 7:16 AM
#20
Shape430

Offline
Feb 2013
620
This is my first time attempting something like this so please forgive me if this is really obvious. But when I try to add the header as a PNG it won't appear and if I try adding it as a JPEG the header is there but with a giant white box behind it.

Can anyone tell me what exactly I'm doing wrong here? I followed the tutorial and double checked everything, again I apologize if this is extremely obvious.

Thanks in advance.
Apr 11, 2013 3:25 PM
#21
KenshiSama
Offline
Mar 2013
60
um where can i make these at i dont know a place i can make these at
Apr 12, 2013 11:32 AM
#22
Shishio-kun

Offline
Feb 2010
12632
Grim-Wolf said:
um where can i make these at i dont know a place i can make these at


Answered in topic, you make the custom logo text at cooltext.com. If you want to add the anime picture to it you need to learn a little graphic design you can refer to my tutorial video (step 1) where I make a custom background, you could drag the character you want with the logo you make at cooltext similar to how I drag and make images in the video. The videos on the front page. Or go to the Graphic Design section on front page menu where you learn how to make your own simple backgrounds too.
Apr 22, 2013 3:39 PM
#23
Shape430

Offline
Feb 2013
620
So does nobody know what the answer my problem is :/? Ive honestly tryed everything and am kinda stumped lol.
Apr 22, 2013 4:51 PM
#24
Shishio-kun

Offline
Feb 2010
12632
Shape430 said:
This is my first time attempting something like this so please forgive me if this is really obvious. But when I try to add the header as a PNG it won't appear and if I try adding it as a JPEG the header is there but with a giant white box behind it.

Can anyone tell me what exactly I'm doing wrong here? I followed the tutorial and double checked everything, again I apologize if this is extremely obvious.

Thanks in advance.


Without the code or the image in question its very hard to narrow down the problem and I can only guess at it. Post a link to the image where you uploaded it, code would be nice to.
May 5, 2013 8:59 AM
#25
jemhuntr

Offline
Nov 2012
15
Question: is it possible to edit the text of the headers itself without having to use images? I want to change the text.
May 5, 2013 9:15 AM
#26
Hahaido

Offline
Jan 2012
1578
JeMhUnTeR said:
Question: is it possible to edit the text of the headers itself without having to use images? I want to change the text.

http://myanimelist.net/forum/?topicid=443937&show=60#msg21760815
see spoiler
May 15, 2013 6:18 PM
#27
Shishio-kun

Offline
Feb 2010
12632
Todd_Jensen said:
I can't get the Watching image to show up on my list. Can someone help me? Thanks.


Delete the

Read more at http://myanimelist.net/forum/?topicid=200323&pages=49&show=960#RgEReFXcfAbDUqCd.99

In between the headers and the codes above it. Nice background.
May 15, 2013 6:59 PM
#28
takkun_
Trickster

Offline
Jun 2011
2248
Shishio-kun said:


Delete the

Read more at http://myanimelist.net/forum/?topicid=200323&pages=49&show=960#RgEReFXcfAbDUqCd.99

In between the headers and the codes above it. Nice background.


Ah, I see thanks.

Yea, I really like too. For some reason I can't move the image any higher. I wanted the grass at the bottom to be visible. But I still think it looks pretty good.
Jun 3, 2013 3:43 AM
#29
straggy

Offline
Mar 2013
1081
I'm really stumped about my code, mostly cause I've been picking and choosing from different tuts from different people (and probably inadvertently made it really messy as a result), but when I tried to add the header logos it was placing them where the background render was supposed to be and deleting that entirely and no matter how I mismatched it, the logos wouldn't go above the boxes at all.

Here's my code:


EDIT: Never mind, I figured it out for myself!
straggyJun 18, 2013 12:50 PM
Jun 26, 2013 12:44 PM
#30
VividLane
Offline
Oct 2011
5
Hi! I'm not sure if this is the right place for this kind of question, but can you tell me how to lessen the gap between the header and the sub-headers.
I'm talking about this particular gap:
http://i42.tinypic.com/dhbsd5.jpg

My code:
Shishio-kunJun 29, 2013 5:38 PM
Jun 29, 2013 5:39 PM
#31
Shishio-kun

Offline
Feb 2010
12632
VoidLaneX said:
Hi! I'm not sure if this is the right place for this kind of question, but can you tell me how to lessen the gap between the header and the sub-headers.
I'm talking about this particular gap:
http://i42.tinypic.com/dhbsd5.jpg

My code:


Add to the bottom, set the height as you want

.header_title{
height: 15px}
Jul 1, 2013 10:50 AM
#32
VividLane
Offline
Oct 2011
5
Shishio-kun said:
VoidLaneX said:
Hi! I'm not sure if this is the right place for this kind of question, but can you tell me how to lessen the gap between the header and the sub-headers.
I'm talking about this particular gap:
http://i42.tinypic.com/dhbsd5.jpg

My code:


Add to the bottom, set the height as you want

.header_title{
height: 15px}


Thanks a lot!
Jul 14, 2013 9:08 PM
#33
AguaMolhada

Offline
Oct 2010
3
hello guys... i have 1 problem.... only my Watching img isn't working... can someone help me? ;(

Ty Shishio-kun for the tutorial o/ i'm trying to make my custom style using your tutorials =D
The code is the same but only the watching isn't working ;(
AguaMolhadaJul 14, 2013 9:13 PM
Jul 14, 2013 10:05 PM
#34
Hahaido

Offline
Jan 2012
1578
AguaMolhada said:
hello guys... i have 1 problem.... only my Watching img isn't working... can someone help me? ;(

Try to find 10 changes ;)
Jul 14, 2013 11:38 PM
#35
AguaMolhada

Offline
Oct 2010
3
Hahaido said:
AguaMolhada said:
hello guys... i have 1 problem.... only my Watching img isn't working... can someone help me? ;(

Try to find 10 changes ;)


Ty Hahaido i found found only this changes
(removed/only this work)// Self-explanatory*/
".header_cw margin-bottom: 0px;" don't apply idk why and still not applying (like in copyright have padding-top 6px; and margin 0 auto; and dont show)
Jul 15, 2013 12:09 AM
#36
Hahaido

Offline
Jan 2012
1578
AguaMolhada said:

".header_cw margin-bottom: 0px;" don't apply idk why and still not applying

Aug 13, 2013 11:08 AM
#37
LiteLight

Offline
Mar 2013
391
Shape430 said:
This is my first time attempting something like this so please forgive me if this is really obvious. But when I try to add the header as a PNG it won't appear and if I try adding it as a JPEG the header is there but with a giant white box behind it.

Can anyone tell me what exactly I'm doing wrong here? I followed the tutorial and double checked everything, again I apologize if this is extremely obvious.

Thanks in advance.
I got the same problem.. :S
Aug 13, 2013 11:46 AM
#38
Shishio-kun

Offline
Feb 2010
12632
Waarpax said:
Shape430 said:
This is my first time attempting something like this so please forgive me if this is really obvious. But when I try to add the header as a PNG it won't appear and if I try adding it as a JPEG the header is there but with a giant white box behind it.

Can anyone tell me what exactly I'm doing wrong here? I followed the tutorial and double checked everything, again I apologize if this is extremely obvious.

Thanks in advance.
I got the same problem.. :S


Did you read my response to them tho- without link to the page/code and images, and description as to what the problem is exactly I can't answer. You need to do the same just link me and tell me what you're trying to do exactly. From what I see on your list the headers are up fine and look good.
Aug 27, 2013 12:54 PM
#39
Naru1
Offline
Aug 2013
4
hey there i just wanted to ask that how can u customaize the all animes header?? i have copied ur code but there is no reference to all anime haeder i tried to code it myself but failed :/ it shows WATCHING header in its place :(
plzzz help
Aug 27, 2013 2:39 PM
#40
Shishio-kun

Offline
Feb 2010
12632
Naru1 said:
hey there i just wanted to ask that how can u customaize the all animes header?? i have copied ur code but there is no reference to all anime haeder i tried to code it myself but failed :/ it shows WATCHING header in its place :(
plzzz help


There isn't an all anime header, is there lol? I thought it was always Currently Watching on top by default followed by the other categories, because on All Anime you're seeing all 5 categories.
Aug 27, 2013 3:00 PM
#41
Naru1
Offline
Aug 2013
4
Shishio-kun said:
Naru1 said:
hey there i just wanted to ask that how can u customaize the all animes header?? i have copied ur code but there is no reference to all anime haeder i tried to code it myself but failed :/ it shows WATCHING header in its place :(
plzzz help


There isn't an all anime header, is there lol? I thought it was always Currently Watching on top by default followed by the other categories, because on All Anime you're seeing all 5 categories.


when i click all animes link it has WATCHING as the header how do i remove it or change it to ALL ANIME header??
Aug 27, 2013 3:16 PM
#42
Xerallite

Offline
Mar 2013
313
Naru1 said:
Shishio-kun said:
Naru1 said:
hey there i just wanted to ask that how can u customaize the all animes header?? i have copied ur code but there is no reference to all anime haeder i tried to code it myself but failed :/ it shows WATCHING header in its place :(
plzzz help


There isn't an all anime header, is there lol? I thought it was always Currently Watching on top by default followed by the other categories, because on All Anime you're seeing all 5 categories.


when i click all animes link it has WATCHING as the header how do i remove it or change it to ALL ANIME header??

As Shishio said, All Anime is referred to all categories (Watching, Completed, On-Hold, Dropped, Plan to Watch) show up in one single page. You don't need an 'all anime' header.
Aug 28, 2013 6:08 AM
#43
Shishio-kun

Offline
Feb 2010
12632
@Naru: I've written a code that should head the list with "Watching" on Currently Watching category and "All Anime" on the All anime page. It seems to work fine in testing on your page but you'll have to install it on your list to see if it works out ok. This code might interfere with category links as well but you can ask back here if you can't make the adjustments on your own; it made it for your current anime list layout, if its used on another layout the settings will have to be adjusted (top, left, width, height) but you can ask about that too if you can't get it right (just leave the codes in pls if you have problems and wanna ask about it).

This all has to be added to the bottom, first section of code is position of Watching header, second is the header, third is position of All Anime header, fourth is the All Anime text, fifth removes the original currently watching header which is replaced by all the above codes:

.status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected{
background: transparent !important;
position: absolute !important;
top: 300px;
left: -30px;
height: 50px;
width: 200px;
}

.status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected:after{
content: "Watching";
color:#0033CC;
font-family:Segoe Print;
font-size:30px;
}


.status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected{
background: transparent !important;
position: absolute !important;
top: 300px;
left: -20px;
height: 50px;
width: 200px;
}

.status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected:after{
content: "All Anime";
color:#0033CC;
font-family:Segoe Print;
font-size:30px;
}

.header_cw {
visibility: hidden;
}
Aug 28, 2013 1:29 PM
#44
Naru1
Offline
Aug 2013
4
Shishio-kun said:
@Naru: I've written a code that should head the list with "Watching" on Currently Watching category and "All Anime" on the All anime page. It seems to work fine in testing on your page but you'll have to install it on your list to see if it works out ok. This code might interfere with category links as well but you can ask back here if you can't make the adjustments on your own; it made it for your current anime list layout, if its used on another layout the settings will have to be adjusted (top, left, width, height) but you can ask about that too if you can't get it right (just leave the codes in pls if you have problems and wanna ask about it).

This all has to be added to the bottom, first section of code is position of Watching header, second is the header, third is position of All Anime header, fourth is the All Anime text, fifth removes the original currently watching header which is replaced by all the above codes:

.status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected{
background: transparent !important;
position: absolute !important;
top: 300px;
left: -30px;
height: 50px;
width: 200px;
}

.status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected:after{
content: "Watching";
color:#0033CC;
font-family:Segoe Print;
font-size:30px;
}


.status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected{
background: transparent !important;
position: absolute !important;
top: 300px;
left: -20px;
height: 50px;
width: 200px;
}

.status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected:after{
content: "All Anime";
color:#0033CC;
font-family:Segoe Print;
font-size:30px;
}

.header_cw {
visibility: hidden;
}


Thankyou so much! ^_^
Sep 25, 2013 1:29 AM
#45
WindsGrace
Offline
Apr 2013
11
I need help with merging my current anime list code and the code of the side layout & pictures of the watching, on-hold, completed etc. of http://myanimelist.net/animelist/2010101060 anime list. I have tried many different combinations however... no luck. Any help would be much obliged.

My current code:

@import url(http://fonts.googleapis.com/css?family=Margarine);

@import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixedwithCategory.css";


/*
BACKGROUND IMAGE
This is the main background image for the whole page.
Change the image link to the background you want!
For more help see here:
http://myanimelist.net/forum/?topicid=419405&show=0#post1
*/

body {
background-image:
url(http://i54.fastpic.ru/big/2012/1223/4f/0f186e1c890888f76f14330596cc504f.jpg);
background-attachment: fixed;
background-size: cover;
}

/*
REPOSITION MAIN BACKGROUND
Change the position your background starts on your screen from with the two properties after "background-position" below.

For example, the default code starts it from the left and top corner of the screen. You change 'left' and 'top' other properties, they can be any of the following: left, top, bottom, right, or center.

So if you want your background to start from the center of the screen, use "center center".
If you want it to start from the top and center, use "top center".
If you want it to start from the right and top, use "right top"
If you want it to start from the right and bottom, use "right bottom"
and so forth...

Additionally, you can change "left" to a % to determine how far left or right the background starts from. For example "30% top" will start the background from the top but 30% of the pic's width from the left of the layout. You can also change top to a % to change the amount you want to start it from the top or bottom.
*/

body{
background-position: left top;}

/*
HEADER COLOR AND FONT
These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc).
*/

.header_title {
color: white;
font-family: 'Margarine', cursive;
font-size: 26px;
text-shadow: 3px 3px 3px #000;
text-align: left;
background-color: transparent;
background-image:
url(https://dl.dropbox.com/u/57348187/MAL/PROZ.png);

}



/*
SUB-HEADERS BACKGROUND COLOR COLOR
Below each main header is the sub-header which says Score, Episodes, Tags, etc.
*/

.table_header {
background-image:
url(https://dl.dropbox.com/u/57348187/MAL/PROZ.png);
}



/*
ANIME/MANGA TITLE FONTS
This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc.
*/

.animetitle, .animetitle:visited {
color:white;
font-family: 'Varela Round', sans-serif;
text-shadow: 0px 2px 1px #000;
font-size:13px;
}



/*
LIST FONTS
This is the type and color for more of the numbers, links, and words on the list itself!
*/

.td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright {
color:white;
font-family: 'Varela Round', sans-serif;
text-shadow: 0px 2px 1px #000;
font-size:12px;
}



/*
LIST WIDTH
Use this to increase the width of your list!
*/

#list_surround {
width:900px;
}


/*
LIST POSITION
Change left to right to set it on the right side. Add to the px amount (5px by default) to change how far from the side it is. To center a list, see this tutorial:
http://myanimelist.net/forum/?topicid=393437&show=0#post1
*/
#list_surround {
position: absolute !important;
margin: auto !important;
right: 0px !important;
padding:-200px;
left: 0px !important;}


/*OTHER CODES
Important codes for the layout's setup. Please don't mess with these. If you want to customize more on the page, come to my group and ask or move on to a more advanced layout.
*/


body {
font-weight: light;
background-repeat: no-repeat;
background-color: #FBFDE8;
}
*#list_surround {
background-image:url();
left:2px;
position:absolute;
}
a {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover, a:visited:hover {
color:#D3D3D3;
text-decoration:underline;
}
.category_totals,
.td1,
.td2,
#grand_totals,
#copyright {
background-image:url(https://dl.dropbox.com/u/57348187/MAL/PROZ.png);
border-width:0;
padding:2px;
}

.category_totals:HOVER,
.td1:HOVER,
.td2:HOVER,
#grand_totals:HOVER,
#copyright:HOVER {background-image:url(https://dl.dropbox.com/u/57348187/MAL/PROZ2.png);
border-width:0;
padding:2px;
}
#copyright:after {
content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info.";
}
*.status_selected {
display: none;
background-color:black;
padding: 2px;
color:white;
text-decoration: blink;
}
*.status_not_selected {
display: none;
background-color:black;
padding: 2px;
color:white;
}
*.status_selected a{
display: none;
color:blue;
}
*.status_not_selected a{
display: none;
color:white;
}
.thickbox {
color:cyan;
font-family: 'Happy Monkey', cursive;
text-shadow: 2px 2px 2px #000;
font-size:12px;
}
.header_title {
height:32px;
padding:2px;
}
.table_header {
border-width:0;
font-weight:bold;
padding:2px;
}
.category_totals {
height:30px;
}
#copyright, #grand_totals {
text-align: center;
margin:0 auto;
}

Read more at http://myanimelist.net/forum/?topicid=314657&show=40#FoD6JVXKGoEF1zqz.99

WindsGraces~
WindsGraceSep 25, 2013 2:21 AM
Sep 25, 2013 6:09 AM
#46
dzikibambus

Offline
Jul 2010
93
WindsGrace said:
I need help with merging my current anime list code and the code of the side layout & pictures of the watching, on-hold, completed etc. of http://myanimelist.net/animelist/2010101060 anime list. I have tried many different combinations however... no luck. Any help would be much obliged.

If I understood correctly what you're trying to do
You have to delete:
@import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixedwithCategory.css";

and add:

at the end. You also have to delete "Read more at http://myanimelist.net/forum/?topicid=314657&show=40#FoD6JVXKGoEF1zqz.99" cause it'll probably break the code after it.
Sep 25, 2013 9:52 AM
#47
WindsGrace
Offline
Apr 2013
11
Thanks I got the pictures on the list but no luck with the menu working nor does it fit in my current proportions... any further help would be great.

Thanks again.

~WindsGrace
WindsGraceSep 25, 2013 10:18 AM
Sep 25, 2013 11:28 AM
#48
dzikibambus

Offline
Jul 2010
93
WindsGrace said:
Thanks I got the pictures on the list but no luck with the menu working nor does it fit in my current proportions... any further help would be great.

Thanks again.

~WindsGrace

Totally forgot about this, sorry. You have to change:

to:

You might change the position of each link by editing the "top" values in the code from my previous post. I'd say adding 100 to each should do the trick.
Whole code:
Sep 25, 2013 3:48 PM
#49
WindsGrace
Offline
Apr 2013
11
Marvelous it works. Thank you very much for all the help. ^^
Nov 27, 2013 5:49 AM
#50
Alextasha

Offline
Apr 2013
481
Ok I copied that code and have something like that
https://dl.dropboxusercontent.com/u/55985962/01.jpg

but I want this https://dl.dropboxusercontent.com/u/55985962/02.jpg
How to remove that gap?
I tried
.header_title{
height: 15px}
but header only get thin ("Watching" didn't go down)

my code
Reply Disabled for Non-Club Members
Pages (2) [1] 2 »
See All Discussions

More topics from this board

» theme help

threat - Jul 5

5 by Zaryf »»
Aug 21, 5:46 AM

» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )

Valerio_Lyndon - Apr 19, 2018

1261 by KiranaStarr »»
Aug 16, 5:48 PM

» [CSS] ⭐️ Customize your List Cursor + Cursor Fixes

Shishio-kun - Mar 8, 2021

30 by Shishio-kun »»
Jul 28, 3:17 AM

» How To Have Different Banner/Cover image & Background Image For Manga & Anime Lists

YasminaRegina - Jul 25

2 by YasminaRegina »»
Jul 26, 1:02 AM

Sticky: » 💚 [REPAIR STICKY] Repair/speed up layouts + Request layout fixes ( 1 2 )

Shishio-kun - Nov 17, 2023

52 by LucaBalsa »»
Jul 6, 2:02 PM

MoreTop Anime

  1. 1 Sousou no Frieren
  2. 2 Fullmetal Alchemist: Brotherhood
  3. 3 Steins;Gate
  4. 4 Shingeki no Kyojin Season 3 Part 2
  5. 5 Gintama: The Final

MoreTop Airing Anime

  1. 1 Kimetsu no Yaiba Movie: Mugen Jou-hen
  2. 2 One Piece
  3. 3 Kaoru Hana wa Rin to Saku
  4. 4 Grand Blue Season 2
  5. 5 Dandadan 2nd Season

MoreMost Popular Characters

  1. 1 Lamperouge, Lelouch
  2. 2 Monkey D., Luffy
  3. 3 Levi
  4. 4 Lawliet, L
  5. 5 Roronoa, Zoro
It’s time to ditch the text file.
Keep track of your anime easily by creating your own list.
Sign Up Login