Forum Settings
Forums

[CSS - CLASSIC] Beginner's tutorial on using custom list layouts (change wallpaper/fonts too)

Pages (4) « 1 2 [3] 4 »
Must be a Club Member to Reply 
Nov 8, 2012 11:15 AM

Offline
Joined: Jul 2012
Posts: 71
Thank you for the tutorial ^^
 
Dec 6, 2012 11:31 AM

Offline
Joined: Oct 2012
Posts: 454
Thanks a bunch :D
-------Only God will judge me --------

iSignature
 
Jan 3, 2013 8:04 PM
Offline
Joined: Feb 2012
Posts: 1
thanks,it really helped : )
 
Jan 25, 2013 4:56 PM

Offline
Joined: Apr 2012
Posts: 753
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
 
Jan 25, 2013 6:07 PM

Offline
Joined: Feb 2010
Posts: 4244
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.

The part of the top of your code is like this:

body {

background-image:
[IMG]http://i1221.photobucket.com/albums/dd476/Furykury1/Aria3_zps6eb80dc6.jpg[/IMG]
background-attachment: fixed;
}




Change it to this:


body {

background-image: url(http://i1221.photobucket.com/albums/dd476/Furykury1/Aria3_zps6eb80dc6.jpg);
background-attachment: fixed;
}


Notice I didn't use the [IMG] parts and added back some of the rest like url and the parenthesis.
 
Jan 25, 2013 10:05 PM

Offline
Joined: Apr 2012
Posts: 753
Shishio-kun, Arigatou! That fixed the problem. I don't change my background very often, but I will be more careful in the future.
 
Jan 26, 2013 12:33 AM

Offline
Joined: Feb 2010
Posts: 4244
Furykury1 said:
Shishio-kun, Arigatou! That fixed the problem. I don't change my background very often, but I will be more careful in the future.


Its a nice background, so I wouldn't change it often!
 
Jan 26, 2013 1:52 PM
Review Moderator
­čŹ¬nomnomnom­čŹ¬

Offline
Joined: Jun 2007
Posts: 1352
Hello, I am a complete ignorant abt CSS and just started a ocuple hours ago venturing into changing some things into this one http://myanimelist.net/forum/?topicid=393393&show=0#msg16773645 (the 2nd one for my animelist)

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


Also, I have a question since I can't find it on my own... x.x



Where (or how) can I reduce the space between the "Watching" to the top header with the statuses? /o\

EDIT: An hour after posting this, I made some more changes but my 2 problems remain the same. I didn't change anything beyond stuff I knew.
Modified by Maffy, Jan 26, 2013 2:54 PM
 
Jan 26, 2013 5:26 PM

Offline
Joined: Feb 2010
Posts: 4244
Maffy said:
Hello, I am a complete ignorant abt CSS and just started a ocuple hours ago venturing into changing some things into this one http://myanimelist.net/forum/?topicid=393393&show=0#msg16773645 (the 2nd one for my animelist)

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


Also, I have a question since I can't find it on my own... x.x



Where (or how) can I reduce the space between the "Watching" to the top header with the statuses? /o

EDIT: An hour after posting this, I made some more changes but my 2 problems remain the same. I didn't change anything beyond stuff I knew.


If you just want the list to not scroll over the top bar- add this to bottom of the box.


#list_surround {
z-index: -1 !important;
}


If you want to reduce the space from the header to the status buttons

.header_title {
margin-top: -30px;
}


Adjust the amount of px how you please.
 
Jan 27, 2013 12:50 AM
Review Moderator
­čŹ¬nomnomnom­čŹ¬

Offline
Joined: Jun 2007
Posts: 1352
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? :/
 
Jan 27, 2013 12:13 PM

Offline
Joined: Feb 2010
Posts: 4244
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? :/


http://myanimelist.net/forum/?topicid=314657

Get header codes, add margin-top or padding-top and adjust the space as you want.
 
Jan 28, 2013 1:33 PM
Review Moderator
­čŹ¬nomnomnom­čŹ¬

Offline
Joined: Jun 2007
Posts: 1352
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!
 
Jan 28, 2013 11:52 PM

Offline
Joined: Feb 2010
Posts: 4244
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.
 
Jan 29, 2013 11:57 AM
Review Moderator
­čŹ¬nomnomnom­čŹ¬

Offline
Joined: Jun 2007
Posts: 1352
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?
 
Jan 29, 2013 2:39 PM

Offline
Joined: Feb 2010
Posts: 4244
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.
 
Jan 29, 2013 3:05 PM
Review Moderator
­čŹ¬nomnomnom­čŹ¬

Offline
Joined: Jun 2007
Posts: 1352
Oh she's ok with it! She's just not that active here and I'm the one pretty much fixing her style xD;
http://myanimelist.net/animelist/nekohime23

I put the code again so you can see the problem :D
 
Jan 29, 2013 4:12 PM

Offline
Joined: Feb 2010
Posts: 4244
Maffy said:
Oh she's ok with it! She's just not that active here and I'm the one pretty much fixing her style xD;
http://myanimelist.net/animelist/nekohime23

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.
 
Jan 30, 2013 1:54 AM
Review Moderator
­čŹ¬nomnomnom­čŹ¬

Offline
Joined: Jun 2007
Posts: 1352
Oh that worked just fine :D Thank you again! And ofc, everything weird or unseen will either happen to me or her. That's how it goes with us xD

We shall be careful about the code, thanks!
 
Jan 30, 2013 4:59 PM
Offline
Joined: Aug 2012
Posts: 359
Wow! O.O It actually worked for me! Thank you so much!
 
Jan 30, 2013 6:22 PM

Offline
Joined: Mar 2012
Posts: 14760
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?
 
Jan 30, 2013 8:52 PM

Offline
Joined: Feb 2010
Posts: 4244
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.

http://myanimelist.net/editprofile.php?go=listpreferences
 
Jan 30, 2013 9:37 PM

Offline
Joined: Mar 2012
Posts: 14760
Shishio-kun said:
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.

http://myanimelist.net/editprofile.php?go=listpreferences
I tried to see it when log out and it work but when I see it when log in it doesn't change. Why is that?

Edit: It's already worked now. Thanks for your time.
 
Feb 4, 2013 8:47 PM

Offline
Joined: Aug 2011
Posts: 295
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 )

AnimeList

MangaList
 
Feb 6, 2013 4:17 PM

Offline
Joined: Feb 2010
Posts: 4244
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 )

AnimeList

MangaList


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??
 
Feb 25, 2013 7:11 AM

Offline
Joined: Aug 2011
Posts: 295
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"
 
Mar 7, 2013 4:20 PM

Offline
Joined: Nov 2012
Posts: 957
Thanks for this, it's the best tutorial I've ever used for anything!
 
Apr 21, 2013 4:05 PM
Offline
Joined: Aug 2011
Posts: 4
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?
 
Apr 21, 2013 5:57 PM

Offline
Joined: Feb 2010
Posts: 4244
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.
 
Apr 21, 2013 6:16 PM
Offline
Joined: Aug 2011
Posts: 4
Shishio-kun said:
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
 
Apr 22, 2013 8:43 AM
Offline
Joined: Aug 2011
Posts: 4
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.
 
Apr 22, 2013 8:57 AM

Offline
Joined: Oct 2012
Posts: 247
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.


.header_title {
text-align: center;

That should work :)


 
Apr 22, 2013 9:24 AM
Offline
Joined: Aug 2011
Posts: 4
TheHolyPotato said:
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.


.header_title {
text-align: center;

That should work :)

Thanks, worked like a charm
 
May 8, 2013 8:44 AM
Offline
Joined: Aug 2012
Posts: 2
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!
 
May 8, 2013 9:37 AM

Offline
Joined: Oct 2012
Posts: 247
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!


Ae you sure you changed the list style?


 
May 8, 2013 3:22 PM
Offline
Joined: Aug 2012
Posts: 2
TheHolyPotato said:
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!


Ae you sure you changed the list style?


i'm sure!
 
May 8, 2013 11:07 PM

Offline
Joined: Oct 2012
Posts: 247
@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


 
May 11, 2013 3:03 PM

Offline
Joined: Feb 2010
Posts: 4244
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..
 
Jun 8, 2013 2:42 AM

Offline
Joined: May 2013
Posts: 10
Thank you so much for this :'D

this is the result of all your help: IceMake_FT07
 
Oct 3, 2013 5:02 AM

Offline
Joined: Oct 2013
Posts: 278
Imma try my BEST tomorrow! :3
Wish me luck! ^^
 
Oct 5, 2013 3:44 PM

Offline
Joined: Aug 2013
Posts: 353
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
Modified by improper, Oct 5, 2013 3:47 PM
 
Oct 28, 2013 1:48 PM
Offline
Joined: Nov 2011
Posts: 92
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
 
Nov 3, 2013 1:28 PM
Offline
Joined: Oct 2013
Posts: 21
Going try my best :D
 
Nov 4, 2013 11:14 PM

Offline
Joined: Feb 2010
Posts: 4244
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


Raise or lower the % amount after

body {
background-position:


in your code to get the pic where u want it
 
Mar 16, 2014 8:53 PM

Offline
Joined: Aug 2011
Posts: 1583
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?
 
Mar 18, 2014 3:17 PM

Offline
Joined: Feb 2010
Posts: 4244
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.
 
Jul 1, 2014 8:01 AM
Offline
Joined: May 2013
Posts: 2
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.
 
Aug 21, 2014 5:22 PM

Offline
Joined: Jun 2013
Posts: 21
hi, I have a question.

can i change the color of Airing and Not Yet Aired?
I know I can change the color and design but what I wanna know is

can I change the two things in each different colors like:

Airing [in green]
and
Not Yet Aired [in red]

is that possible?
 
Sep 16, 2014 4:35 AM

Offline
Joined: Sep 2014
Posts: 2665
thanks a lot :)
 
Sep 18, 2014 6:16 AM

Offline
Joined: Feb 2010
Posts: 4244
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.
 
Sep 18, 2014 6:19 AM

Offline
Joined: Feb 2010
Posts: 4244
Crash333 said:
hi, I have a question.

can i change the color of Airing and Not Yet Aired?
I know I can change the color and design but what I wanna know is

can I change the two things in each different colors like:

Airing [in green]
and
Not Yet Aired [in red]

is that possible?


I haven't looked into this ever, so I don't know an easy way off the top of my head, except manually which is too much trouble
 
Pages (4) « 1 2 [3] 4 »