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]
Aug 27, 2013 3:00 PM
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

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

Offline
Feb 2010
12678
@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
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
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

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
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

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
Offline
Apr 2013
11
Marvelous it works. Thank you very much for all the help. ^^
Nov 27, 2013 5:49 AM

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
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
12678
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
12678
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
12678
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
12678
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
12678
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
12678
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
12678
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

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

Valerio_Lyndon - Apr 19, 2018

1262 by Shishio-kun »»
Yesterday, 4:35 AM

» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )

Shishio-kun - Jul 21, 2017

382 by Shishio-kun »»
Yesterday, 4:29 AM

Sticky: » [ BBCODE ] All 2023 BBcodes, Guides, and Templates ( 1 2 )

Shishio-kun - Feb 16, 2023

57 by Shishio-kun »»
Yesterday, 4:27 AM

Sticky: » [ SIGNATURES ~ PROFILES] All guides, generators, and templates

Shishio-kun - Feb 16, 2023

31 by Shishio-kun »»
Yesterday, 4:14 AM

» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )

Shishio-kun - Apr 15, 2010

7921 by takkun_ »»
Sep 19, 9:54 PM
It’s time to ditch the text file.
Keep track of your anime easily by creating your own list.
Sign Up Login