Well, I wanted to change my background image and I think I put it in the wrong place. Where does it go? I have the code but I must have put it in the wrong place
Furykury1 said: Well, I wanted to change my background image and I think I put it in the wrong place. Where does it go? I have the code but I must have put it in the wrong place
Its in the right place but you didn't add the right kind of code and you removed some of the original CSS it needs. Don't use the code links, use Direct Links as shown in the first post. The [img] codes are for posting images to profiles not lists.
I managed to figure most of the stuff out (the ones I wanted, anyway) but I think I did something cause I have a problem.
This
As you can see, the list is over the top bar and I'm not sure how I did it or even if it's my fault.... and that's why I'm posting here :3
I'm using this code
/*
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).
*/
/*
LIST WIDTH
Use this to increase the width of your list!
*/
#list_surround {
width:615px;
}
/*
LIST POSITION
Change "left" to "right" to switch the list side, or vice versa.
*/
#list_surround {
top:20px;
left: 20px;
position: absolute;}
/*
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 'right' and 'top' with two 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 left, use "top left".
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: right top;}
/*OTHER CODES
Important codes for the layout's setup. Please don't mess with these unless you know what you're doing! To learn more, use the link at the top of this CSS.
*/
I managed to figure most of the stuff out (the ones I wanted, anyway) but I think I did something cause I have a problem.
This
As you can see, the list is over the top bar and I'm not sure how I did it or even if it's my fault.... and that's why I'm posting here :3
I'm using this code
/*
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).
*/
/*
LIST WIDTH
Use this to increase the width of your list!
*/
#list_surround {
width:615px;
}
/*
LIST POSITION
Change "left" to "right" to switch the list side, or vice versa.
*/
#list_surround {
top:20px;
left: 20px;
position: absolute;}
/*
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 'right' and 'top' with two 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 left, use "top left".
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: right top;}
/*OTHER CODES
Important codes for the layout's setup. Please don't mess with these unless you know what you're doing! To learn more, use the link at the top of this CSS.
*/
Thanks a lot :D It worked for the top box juuuust great :D
Though, about the space reduction, I still have a problem. I added the code to the bottom and sure enough, it reduced the space but it also reduced the space for every header. I find the distance between "Completed", for example, to the list above just great and I don't want that reduced but the distance from "Watching" to the status buttons is almost double that. Is there any way I can specify that? :/
Maffy said: Thanks a lot :D It worked for the top box juuuust great :D
Though, about the space reduction, I still have a problem. I added the code to the bottom and sure enough, it reduced the space but it also reduced the space for every header. I find the distance between "Completed", for example, to the list above just great and I don't want that reduced but the distance from "Watching" to the status buttons is almost double that. Is there any way I can specify that? :/
Maffy said: That... didn't take as long as I imagined it xD Thought it'd be much harder than 5 minutes! But you give easy and right to the point instructions :D
Everything is great now, thanks a whole lot! My list is now so much prettier with a style than before :D Awesome work :D Thank you!
So happy it worked for you and yeah its really easy a lot of ppl give up thinking it will be impossible but it takes like 10 minutes ha.
Yes it's fairly easy when you get down to it. I hope one day to build a style on my own at some point xD I understood the basics :D
Also, I have another question. My friend took from the same post I posted here (http://myanimelist.net/forum/?topicid=393393&show=0#msg16773645 ), the first style which had the same list-scrolling-over-top-bar problem. I gave her the code you told me but that pretty much disabled every link in her list. I tried figuring it out that maybe something was clashing with it buuuut I don't really know much about and I failed. Do you know what might be the problem and how we can bypass it?
Maffy said: Yes it's fairly easy when you get down to it. I hope one day to build a style on my own at some point xD I understood the basics :D
Also, I have another question. My friend took from the same post I posted here (http://myanimelist.net/forum/?topicid=393393&show=0#msg16773645 ), the first style which had the same list-scrolling-over-top-bar problem. I gave her the code you told me but that pretty much disabled every link in her list. I tried figuring it out that maybe something was clashing with it buuuut I don't really know much about and I failed. Do you know what might be the problem and how we can bypass it?
Hmm, I can't say without seeing it unfortunately. I'd have to look at her list but I don't like putting people on the spot cuz some people don't like that, so rather than linking her list here can you PM me her list link, unless you think she'd be fine with you linking her list here lol.
I put the code again so you can see the problem :D
Oh how weird, I never seen that happen...
#list_surround {
z-index: 0 !important;
}
#mal\_control\_strip{
z-index: 1 !important}
This will do fine for that but if you have to erase and readd this everytime you save her CSS over, cuz for some reason MAL changes the code so it doesnt work after saving it twice.
NeoAnkara said: I copied all but my list not changing. The only change I made in the code is background image. Is there something wrong with my step?
I can see your list customized fine. Log out and check. If you can see it when logged out, maybe you need to uncheck the box next to Style Override. Don't forget to save this setting at the bottom.
NeoAnkara said: I copied all but my list not changing. The only change I made in the code is background image. Is there something wrong with my step?
I can see your list customized fine. Log out and check. If you can see it when logged out, maybe you need to uncheck the box next to Style Override. Don't forget to save this setting at the bottom.
Man thanx a lot for your guide! You 're awesome!
These are my lists so far and I'm pretty happy with them (I m still a beginner but once I become more adopted to css I ll make a more complex list :D )
fireandrew said: Man thanx a lot for your guide! You 're awesome!
These are my lists so far and I'm pretty happy with them (I m still a beginner but once I become more adopted to css I ll make a more complex list :D )
Wow really good backgrounds, the artists are great. And you already got the page per category trick working good job. Where did you get these images from??
Shishio-kun said: Wow really good backgrounds, the artists are great. And you already got the page per category trick working good job. Where did you get these images from??
Thank you for you kind words :D ... for the backgrounds just google "wall snyp"
i figured, "Today is the day i finally customize my list!" The tutorial seems simple but i'm having trouble with changing my background image. I've copied everything i was supposed to and put a different image in but there is no change to the background. I've pasted the link in multiple times, but nothing. What could it be?
Witeout_203 said: i figured, "Today is the day i finally customize my list!" The tutorial seems simple but i'm having trouble with changing my background image. I've copied everything i was supposed to and put a different image in but there is no change to the background. I've pasted the link in multiple times, but nothing. What could it be?
Didn't copy the entire code or left part of it out. There is an extra */ at the top of your CSS throwing the body section off, this is left over from part of the top instructions that got cut off. That part either wasn't copied in full or was deleted on purpose but not deleted in its entirety. Anyways if you just remove that */ tho it will be fine and show the bg.
Witeout_203 said: i figured, "Today is the day i finally customize my list!" The tutorial seems simple but i'm having trouble with changing my background image. I've copied everything i was supposed to and put a different image in but there is no change to the background. I've pasted the link in multiple times, but nothing. What could it be?
Didn't copy the entire code or left part of it out. There is an extra */ at the top of your CSS throwing the body section off, this is left over from part of the top instructions that got cut off. That part either wasn't copied in full or was deleted on purpose but not deleted in its entirety. Anyways if you just remove that */ tho it will be fine and show the bg.
Thanks so much. it worked. Now on to putting different colors in their. thanks again
Where would i look to find how to make the word in the header move to the center? Like "Watching" for example. And is it possible to change the opacity of said header?
I know i am asking a lot of questions but this is the last one.
Witeout_203 said: Where would i look to find how to make the word in the header move to the center? Like "Watching" for example. And is it possible to change the opacity of said header?
I know i am asking a lot of questions but this is the last one.
Witeout_203 said: Where would i look to find how to make the word in the header move to the center? Like "Watching" for example. And is it possible to change the opacity of said header?
I know i am asking a lot of questions but this is the last one.
@lilligant
Whenever you have the coding, lets say you have "Hi" in there. Whenever you go and erase that to lets say, "Bye" and ten update css, it will change on the list. Although, whenever you go back to the css box it will still say "Hi" If you want to permanently save it, refresh the page and then "Bye" will be there. I dont know if this is only for me but this might be whats wrong :/
Hopefully you kinda get what I'm saying, im bad at explaining things :p
lilligant said: I'm really sorry, but no matter what I do, my list's appearance doesn't change!!
I was wondering if you could help at all? I'd be willing to provide screenshots and whatever else you would need!
Your list has the Miku starting style but you used a Tumblr link and you have a black background that doesn't show the pic. I don't think Tumblr allows direct linking so use an image-hosting site like Photobucket Tinypic Imgur etc..
Woah, thanks a bunch for this brilliant tutorial.
Maybe what I've managed to do wasn't much of a work compared to others', but that's all I can do for now :P
I'm having trouble with my background image if you could look at my anime list please you will see its cutting the top of the image of slightly is it cause i put "center center" for the background image if so should i put just "center" if someone could help many thanks
mejordan1993 said: I'm having trouble with my background image if you could look at my anime list please you will see its cutting the top of the image of slightly is it cause i put "center center" for the background image if so should i put just "center" if someone could help many thanks
I attempted to use one of the donated layouts (actually, a lot of them), and every time I tried to change the background it'd actually remove the previous background and instead, have no background and go with it's default background colour. :/ I'm not sure why this is happening?
Laciie said: I attempted to use one of the donated layouts (actually, a lot of them), and every time I tried to change the background it'd actually remove the previous background and instead, have no background and go with it's default background colour. :/ I'm not sure why this is happening?
I don't know either, post code with problem and background you want. Also when you save changes save once and hit back in your browser, as pointed out in first post. If you keep saving changes without going back you will keep saving over old changes.
I can't change the font for headers.
I can change everything else but the font for "Wtaching, Completed..." stays as Times New Roman no matter what I do.
What am I doing wrong.
ZeZartha said: I can't change the font for headers.
I can change everything else but the font for "Wtaching, Completed..." stays as Times New Roman no matter what I do.
What am I doing wrong.
Maybe you've changed your layout, but your list uses custom image headers now so you'd have to change the image. For other layouts, add !important (with a space in front of it) before the semi-colon on the line where you change your font-family.