Forum Settings
Forums

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

New
Reply Disabled for Non-Club Members
Pages (2) « 1 [2]
Nov 27, 2013 3:46 PM

Offline
Apr 2012
181
Add at the bottom of the css:

.header_cw td, .header_completed td, .header_onhold td, .header_dropped td, .header_ptw td {
vertical-align: bottom;
}
.header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw {
margin-bottom: 36px !important; /* 32 of line height + 2*2px padding */
}

also add in .header_title

.header_title{
margin-bottom: -36px;
}
Nov 28, 2013 2:06 AM

Offline
Apr 2013
481
Thank you very much :D but it ALMOST working ^^

As you can see here https://dl.dropboxusercontent.com/u/55985962/03.jpg on watching/completed/on hold/dropped it's working but on plan to watch doesn't :(

Current code
Nov 28, 2013 3:08 AM

Offline
Jan 2012
1578
Try
Nov 28, 2013 4:31 AM

Offline
Apr 2013
481
Now is all good :D Arigatou!
Jul 16, 2014 8:55 PM
Offline
Nov 2013
10
How can I make this- (http://www.dafont.com/trigun.font?text=Watching) into a header?
Jul 17, 2014 5:38 AM

Offline
Feb 2010
12635
Igneel_Grandine said:
How can I make this- (http://www.dafont.com/trigun.font?text=Watching) into a header?


You download and install the font to your computer, than make the headers with the font in any graphic design program that uses fonts (all of them afaik).
Jul 17, 2014 7:11 PM
Offline
Nov 2013
10
Shishio-kun said:
Igneel_Grandine said:
How can I make this- (http://www.dafont.com/trigun.font?text=Watching) into a header?


You download and install the font to your computer, than make the headers with the font in any graphic design program that uses fonts (all of them afaik).


Thanks!
Jul 28, 2014 3:07 PM

Offline
Jul 2014
3778
Hi, I'm having an issue with the .png sprite not being displayed.

Code:



And here's a fast link to the PNG in question: http://files.enjin.com/60394/lay/HeaderSpr.png

It is the same dimensions as the original sprite and the elements are to size... A headscratcher, this

The link is not broken, but it just won't display as headers.
Red_TuesdayJul 28, 2014 3:12 PM
Jul 28, 2014 5:11 PM

Offline
Aug 2013
520
Red_Tuesday said:
Hi, I'm having an issue with the .png sprite not being displayed.

Code:



And here's a fast link to the PNG in question: http://files.enjin.com/60394/lay/HeaderSpr.png

It is the same dimensions as the original sprite and the elements are to size... A headscratcher, this

The link is not broken, but it just won't display as headers.
Fixed it :) The pic's link was entered twice, once in a bracket and once without one.




Jul 28, 2014 5:16 PM

Offline
Jul 2014
3778
Oiomi said:
Fixed it :) The pic's link was entered twice, once in a bracket and once without one.


Brilliant! I guess I falsely assumed the example I used had to be 100% identical except for the links :)

Thanks a million :D
Aug 30, 2014 3:49 AM

Offline
Mar 2014
6347
Hey shishio! I'm having a problem with the headers. I posted the jpg. links in my CSS but now the headers have a white box behind them instead of being transparent.
http://imgur.com/dR0iWuh,SHC1yL4,u3BniLW,b5VSEHc,1Z0g1yq#0

^ this is the link to the images. Help me !
[i]"Yet each man kills the thing he loves,
By each let this be heard,
Some do it with a bitter look,
Some with a flattering word,
The coward does it with a kiss,
The brave man with a sword!''
~Oscar
[/i]
Aug 30, 2014 6:56 AM

Offline
Aug 2013
520
geniobastardo said:
Hey shishio! I'm having a problem with the headers. I posted the jpg. links in my CSS but now the headers have a white box behind them instead of being transparent.
http://imgur.com/dR0iWuh,SHC1yL4,u3BniLW,b5VSEHc,1Z0g1yq#0

^ this is the link to the images. Help me !
well you already mentioned the problem. Jpeg does not supporttransparent backgrounds.




Aug 30, 2014 7:45 AM

Offline
Mar 2014
6347
Oiomi-chan said:
geniobastardo said:
Hey shishio! I'm having a problem with the headers. I posted the jpg. links in my CSS but now the headers have a white box behind them instead of being transparent.
http://imgur.com/dR0iWuh,SHC1yL4,u3BniLW,b5VSEHc,1Z0g1yq#0

^ this is the link to the images. Help me !
well you already mentioned the problem. Jpeg does not supporttransparent backgrounds.


It was png. actually. Sorry for the wrong statement. I tried uploading with both the formats but with the same aftermath. I think something's wrong with the code.
geniobastardoAug 30, 2014 8:08 AM
[i]"Yet each man kills the thing he loves,
By each let this be heard,
Some do it with a bitter look,
Some with a flattering word,
The coward does it with a kiss,
The brave man with a sword!''
~Oscar
[/i]
Aug 30, 2014 8:50 AM

Offline
Feb 2010
12635
geniobastardo said:

It was png. actually. Sorry for the wrong statement. I tried uploading with both the formats but with the same aftermath. I think something's wrong with the code.


I don't see how its the code- your image on Imgur you linked us to has the white background (no transparency behind it). So in between when you made the image and uploaded the pic, something else added the white background. You probably didn't save or export the header image in your graphic design program as a PNG, or you didn't make the background transparent in the program (probably this based on what you said).

Also your header is transparent on your list... the only thing with the white background is the header pic itself on Imgur.
Aug 30, 2014 9:01 AM

Offline
Mar 2014
6347
Shishio-kun said:
geniobastardo said:

It was png. actually. Sorry for the wrong statement. I tried uploading with both the formats but with the same aftermath. I think something's wrong with the code.


I don't see how its the code- your image on Imgur you linked us to has the white background (no transparency behind it). So in between when you made the image and uploaded the pic, something else added the white background. You probably didn't save or export the header image in your graphic design program as a PNG, or you didn't make the background transparent in the program (probably this based on what you said).

Also your header is transparent on your list... the only thing with the white background is the header pic itself on Imgur.


oh yes I messed up when I downloaded the images. Thanks for the reminder!
[i]"Yet each man kills the thing he loves,
By each let this be heard,
Some do it with a bitter look,
Some with a flattering word,
The coward does it with a kiss,
The brave man with a sword!''
~Oscar
[/i]
Nov 14, 2014 1:00 PM

Offline
Apr 2014
11204
Can someone help me with my headers, I moved them down because they weren't in the right place but then this happened:

Does anyone know how to fix this?
Nov 14, 2014 4:05 PM

Offline
Feb 2010
12635
Milk_is_Special said:
Can someone help me with my headers, I moved them down because they weren't in the right place but then this happened:


You took away all the height for some reason. You can raise height back to 100px or so to see the headers again. The margin-bottom should be 0, unless you want to move the headers toward and behind the list, then you adjust the numbers as it says in the code (below 0, as in negative numbers).
Nov 14, 2014 4:40 PM

Offline
Apr 2014
11204
Shishio-kun said:
Milk_is_Special said:
Can someone help me with my headers, I moved them down because they weren't in the right place but then this happened:


You took away all the height for some reason. You can raise height back to 100px or so to see the headers again. The margin-bottom should be 0, unless you want to move the headers toward and behind the list, then you adjust the numbers as it says in the code (below 0, as in negative numbers).
Ok, thank you very much for your fast response.
May 19, 2015 11:47 AM
Offline
Nov 2014
4
Hi, I also have the problem that my watching image wont show up and it doesn't matter which image I use. Although it seems like others had this problem before, I just don't get it. I used the same code as in the description:
/*
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://i62.tinypic.com/11b124i.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://i62.tinypic.com/11b124i.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://i62.tinypic.com/2573d6d.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;
}
May 19, 2015 10:11 PM

Offline
Feb 2010
12635
You have an extra closing bracket at the bottom of your CSS, one of these:
}

it screws up codes added underneath it. Remove it then try to add new codes
May 19, 2015 11:13 PM
Offline
Nov 2014
4
Thanks for the quick reply =)
Works fine now
Jun 4, 2015 10:09 PM

Offline
Aug 2014
10
Hello Shishio-kun, this is my first post on all MAL, I want to thank you for these great tutorials of yours, I have managed to make a list style that is very to my liking, however I wish to do something and I have not found a way to do it. I wish to make it so my header's image is on the "top layer of the page" so to speak.
Here's a concept image so you can get what I mean:

http://i.imgur.com/qFj0hlk.png

As you can see, the character's legs sit on top of the list and any text.
Is there a way to achieve this?

Here's my list, just in case you're interested. :)
http://myanimelist.net/animelist/Lightless_Reaper
Jun 5, 2015 2:39 AM

Offline
Feb 2010
12635
Lightless_Reaper said:
Hello Shishio-kun, this is my first post on all MAL, I want to thank you for these great tutorials of yours, I have managed to make a list style that is very to my liking, however I wish to do something and I have not found a way to do it. I wish to make it so my header's image is on the "top layer of the page" so to speak.
Here's a concept image so you can get what I mean:

http://i.imgur.com/qFj0hlk.png

As you can see, the character's legs sit on top of the list and any text.
Is there a way to achieve this?

Here's my list, just in case you're interested. :)
http://myanimelist.net/animelist/Lightless_Reaper


Yes its possible, you need to edit the header like so:

1. Make the header large enough to show the whole character

2. Give it a z-index code to go in front of the list, for example this should work:
z-index: 10 !important;

3. Reposition it over the list like in the example

4. Give it pointer events none so you click thru it and it won't get in the way
pointer-events: none

That should be fine to do that. Let us know here if there's a part you get stuck on or aren't sure how to do
Jun 5, 2015 8:11 AM

Offline
Aug 2014
10
Shishio-kun said:

Yes its possible, you need to edit the header like so:

1. Make the header large enough to show the whole character

2. Give it a z-index code to go in front of the list, for example this should work:
z-index: 10 !important;

3. Reposition it over the list like in the example

4. Give it pointer events none so you click thru it and it won't get in the way
pointer-events: none

That should be fine to do that. Let us know here if there's a part you get stuck on or aren't sure how to do


First of all, thank you for your help.

I followed your instructions, but they didn't really work as expected:
I used your header tutorial (The fist post on this thread), I wanted to edit the "Watching" section, the code for that part is the following:


You told me to add z-index: 10 !important; and pointer-events: none; which I did, but even then, when I adjusted the image to it overlayed the list, I would always get this:

the header still got under the list.

So, I decided to google a bit and found out that you'd need to add position:relative; in order for z-index: 10 !important; to work, Maybe this was just my case but when I put that part of code everything was fixed and now it looks like this:

to anyone who might want to do this in the future:
Do note that moving the header a bit may be needed in order for it to go where you need it to be.

I thought I should post this to inform anyone interested.

my final code went like this:


Thank you so much for your help, Shishio-kun! :D
Aug 5, 2015 7:23 AM
Offline
Jan 2014
6
Why the 'margin-bottom' disappears from my .header_cw section?it will always have this leave a gap and its causing the image not to appear.


.header_cw {
background-image:url(http://i56.tinypic.com/343qcn6.jpg);
height: 90px;

background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}
LegeonXAug 5, 2015 7:28 AM
Aug 16, 2015 2:57 AM

Offline
Feb 2010
12635
LegeonX said:
Why the 'margin-bottom' disappears from my .header_cw section?it will always have this leave a gap and its causing the image not to appear.


.header_cw {
background-image:url(http://i56.tinypic.com/343qcn6.jpg);
height: 90px;

background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}


And old MAL glitch, you can try to add the selector (code title) again and then the stuff you want, or import the entire CSS to dodge glitches (there's a topic on this)
Nov 15, 2015 8:06 AM
Offline
Nov 2014
100
How do i make the background transparanet?
Tried doing one but failed badly.
http://imagehost4.online-image-editor.com/oie_upload/images/1516400700T30X7/transparent.png
Dec 4, 2015 4:30 AM

Offline
Oct 2015
13
Shishio-kun said:
/*

/*
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;
}



Add
pointer-events: none;
to this, so you will see default cursor instead of text cursor when hovering over removed titles.
Dec 7, 2015 7:53 AM

Offline
Sep 2011
151
Lightless_Reaper said:
Shishio-kun said:

Yes its possible, you need to edit the header like so:

1. Make the header large enough to show the whole character

2. Give it a z-index code to go in front of the list, for example this should work:
z-index: 10 !important;

3. Reposition it over the list like in the example

4. Give it pointer events none so you click thru it and it won't get in the way
pointer-events: none

That should be fine to do that. Let us know here if there's a part you get stuck on or aren't sure how to do


First of all, thank you for your help.

I followed your instructions, but they didn't really work as expected:
I used your header tutorial (The fist post on this thread), I wanted to edit the "Watching" section, the code for that part is the following:


You told me to add z-index: 10 !important; and pointer-events: none; which I did, but even then, when I adjusted the image to it overlayed the list, I would always get this:

the header still got under the list.

So, I decided to google a bit and found out that you'd need to add position:relative; in order for z-index: 10 !important; to work, Maybe this was just my case but when I put that part of code everything was fixed and now it looks like this:

to anyone who might want to do this in the future:
Do note that moving the header a bit may be needed in order for it to go where you need it to be.

I thought I should post this to inform anyone interested.

my final code went like this:


Thank you so much for your help, Shishio-kun! :D


I was looking for the exact same thing!! Thank you both <3 You saved my life :D
"If you wish so ardently for your life to disappear then give it to me!"
Jan 31, 2016 10:39 AM
Offline
Aug 2014
2
Hi this is my first time posting here, and I ran into a bit of a problem when I tried to use the sample images to test out the custom headers.
Instead of being fixed to their positions, the images 'follow' the screen within their assigned positions (URL: http://myanimelist.net/animelist/Goton_no_Hebi?status=1). I've tested running some other user's CSS styles to test if this is a recurring issue with my system or browser, but that doesn't seem to be the case, meaning that there is some issue with my code.
Please help!
Jan 31, 2016 1:35 PM
Offline
Aug 2014
2
Never mind, it turns out I had everything set to 'fixed' instead of 'static'.
Oct 22, 2016 4:38 PM
Offline
Aug 2015
2
Hi Quick question about jasc. How do I save the combined picture (my custom image + cool text word) without the white background? My custom image has a checkered background, and when I convert the pic to jpg/gif/png from jasc it automatically puts the white background in it? What do I do?
Dec 26, 2018 4:15 AM
Offline
Jul 2015
1
Does anyone know how to get rid of these subheaders? http://prntscr.com/lzp1gh
Dec 26, 2018 5:03 PM
平沢唯

Offline
Dec 2016
2206
Neekita said:
Does anyone know how to get rid of these subheaders? http://prntscr.com/lzp1gh
If you just want to remove them entirely, try adding this code to the bottom of your own. It should do what you want.
/* Remove Column Headers */
[class^="header_"] + table { display: none; }
Dec 26, 2018 6:39 PM

Offline
Feb 2010
12635
Valerio_Lyndon said:
Neekita said:
Does anyone know how to get rid of these subheaders? http://prntscr.com/lzp1gh
If you just want to remove them entirely, try adding this code to the bottom of your own. It should do what you want.
/* Remove Column Headers */
[class^="header_"] + table { display: none; }


thanks for taking care of that :D
Reply Disabled for Non-Club Members
Pages (2) « 1 [2]

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
It’s time to ditch the text file.
Keep track of your anime easily by creating your own list.
Sign Up Login