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 
Feb 5, 2012 4:26 AM

Offline
Joined: Aug 2011
Posts: 21
@VeriTi..."THANK YOU!" Wow, that was a quick responce. (^-^).

I reeeeeeeally needed to know if using an obsolete browser could be causing most of my problems since the code you posted for me wasn't working at all...and I know I was entering it correctly. Like I said, wanted to get simple little, stupid mistakes out of the way first, a.k.a. web browser too old.

Now, I have to decide which version to go with. *sighs*
 
Feb 5, 2012 11:33 AM

Offline
Joined: Feb 2010
Posts: 4338
You should upgrade it if you can. Seems like almost all of the popular add ons get carried over to later versions of Firefox, so don't worry about that, its like a 1 in a 100 chance your add ons all didn't carry over or theres something to replace it. To be safe what I'd do is search your add-ons and read if they are available in FF10. They usually have info like that.

But if your computer is real slow in some way, I don't think you should upgrade to a new Firefox. Until about a month ago I had a notebook that was 6 years old and even with a fresh copy of Windows running Firefox was laggy and froze sometimes. It didn't freeze tho when using the latest Chrome. So if your coms like that, you might want to get the latest Chrome instead of upgrading Firefox- you'll be able to enjoy the latest CSS upgrades + Chrome is fast even on slow computers.
 
Feb 5, 2012 1:21 PM

Offline
Joined: Aug 2011
Posts: 21
@Shishio-kun...Sorry for all the newbie questions a.k.a. which web browser I need. Eventually I'll get to more CSS/customizing questions...I hope. (^_~) *winky*

Was debating whether or not to go with Chrome, since it's apparently the hottest browser right now. My Vaio is 3 yrs old and running Windows 7. Only, it's just a pain sometimes to get acquainted with a updated or new browser, you know, when you're already used to something else. But if I wanna customize MAL, etc., I should probably go with the best available. Thanks for helping the newbie. Here we go...
 
Feb 5, 2012 2:44 PM

Offline
Joined: Jun 2011
Posts: 46
If your going to be doing alot of CSS take a look at the Firebig plugin for FF, it might help you decide.
 
Feb 6, 2012 2:18 AM

Offline
Joined: Nov 2011
Posts: 303
@missmotoko

In my opinion, Chrome will suck for any Opera or FF user, if he knows how to use most of his favourite browser's features like FF addons or Opera UserJS and mail client

So, forget about Chrome for now, being "hottest" doesn't mean being awesome for you (and actually Chrome doesn't support some things like background on tr)

And I think that FF has actually became better than it was, and there is no much difference in functional for design between Firebug and tools in other popular browsers
 
Feb 6, 2012 3:52 AM

Offline
Joined: Aug 2011
Posts: 21
@VeriTi...

Chrome is a NO-GO. I downloaded and played around with it yesterday. (>_<)* Grrrrr! It was actually loading pages slower...way slower, go figure. It's not a connection problem since my ISP is my cable company so it's quite fast. And it didn't solve MAL background sizing issue. It's of no use to me after all. So yes, it does indeed "suck", hehehe.

The settings were just too frustratingly different (having to add basic, functional tools i.e. my "home button", wtf?!) Too much work.
I love my FF! So running FF4 for now until I get the nerve to udate to FF9 or 10.
 
Feb 6, 2012 8:47 AM

Offline
Joined: Feb 2010
Posts: 4338
missmotoko said:
@VeriTi...

Chrome is a NO-GO. I downloaded and played around with it yesterday. (>_<)* Grrrrr! It was actually loading pages slower...way slower, go figure. It's not a connection problem since my ISP is my cable company so it's quite fast. And it didn't solve MAL background sizing issue. It's of no use to me after all. So yes, it does indeed "suck", hehehe.

The settings were just too frustratingly different (having to add basic, functional tools i.e. my "home button", wtf?!) Too much work.
I love my FF! So running FF4 for now until I get the nerve to udate to FF9 or 10.


If you run Windows 7 you should be able to run the latest Firefox problem free. I've seen your list in the latest version of Chrome and it actually fixes the issue, plus Chrome is the fastest browser, so something else is wrong not the browser. Maybe your computer is not compatible with it for some reason. But since you don't like Chrome's layout and if you're not going to update- just use Microsoft Paint or another program to resize your image for your computer screen size. Some websites may resize the background too.
 
Feb 6, 2012 9:00 AM

Offline
Joined: Nov 2011
Posts: 303
BTW I've already told that it can be fixed for 3.6 with -moz-background-size added like this:
body{background-size:cover;-moz-background-size:cover}
I've tested it and it does work (3.6 portable).
 
Feb 7, 2012 3:33 AM

Offline
Joined: Aug 2011
Posts: 21
@ VeriTi & Shishio-kun...

Problem solved...kinda. After adding body{background-size:cover;-moz-background-size:cover} the pics that appeared too small in MAL, NOW, fits the whole background. At first, I didn't understand that you meant for me to add -moz-background-size to the code. Remember..newbie. o(^-^#)o

Plus, I think MAL.net may have a slow reaction time when changing/updating/loading certain settings. Or maybe not? Just a thought.

The only prob is that it's not a perfect fit. Now, it's only the "too big" issue. However, I suppose that can't be helped. I'll just have to manually resize it like Shi-kun suggested. (and Shi-kun, you're right, it does work in Chrome, but still a no-go...stubborn) (^_~) *winky!*

To both of you, THANKS, for your help and patience.
Modified by missmotoko, Feb 7, 2012 3:39 AM
 
Feb 7, 2012 5:14 AM

Offline
Joined: Nov 2011
Posts: 303
@ missmotoko
cover option scales the image to the smallest size such that both its width and its height can fit inside the content area.

It works with my 1590x1192px background in 3.6 (screen)
If you want, you can adjust the point that image will be resized around by using percentages or left/center/right & top/bottom in background-position property

And still, consider upgrading FF: web is not static
 
Feb 14, 2012 3:32 PM

Offline
Joined: May 2011
Posts: 9
Is there any way to change list width?
 
Feb 14, 2012 8:01 PM

Offline
Joined: Nov 2011
Posts: 303
@ ElenFNX

List width is the width of #list_surround. So all you have to do is to put width: 1200px; to the block where you have your #list_surround{} set up, or simply put this:
#list_surround{width: 1200px;}
at the bottom of your style (change 1200px with your desired width)
 
Feb 15, 2012 4:08 AM

Offline
Joined: May 2011
Posts: 9
Oh, it's working now ^_^
Thank you!
 
Feb 19, 2012 9:36 PM
Offline
Joined: Feb 2012
Posts: 1
Muito obrigadooo!!! =)
 
Feb 21, 2012 8:57 AM

Offline
Joined: Feb 2012
Posts: 193
Thank you very very much for this wonderful tutorial!
Every minute you are thinking of evil, you might have been thinking of good instead. Refuse to pander to a morbid interest in your own misdeeds. Pick yourself up, be sorry, shake yourself, and go on again.
Evelyn Underhill

 
Feb 22, 2012 4:02 PM

Offline
Joined: Aug 2010
Posts: 391
Thanks!! That has to be the best tutorial I've ever seen, for anything! You just made it so easy xD



 
Feb 25, 2012 9:25 PM

Offline
Joined: Nov 2011
Posts: 5
Thank you very much!
 
Mar 3, 2012 6:22 PM

Offline
Joined: Nov 2011
Posts: 1977
Is there a way to have different anime and manga list backgrounds? I know its possible, but I was wondering if it would be extra complicated to do so with this layout.

"I like to expose what people hide. I'm an intellectual rapist." - Furudo Erika
 
Mar 3, 2012 6:38 PM

Offline
Joined: Jul 2008
Posts: 1515
DarkShards said:
Is there a way to have different anime and manga list backgrounds? I know its possible, but I was wondering if it would be extra complicated to do so with this layout.

u get like 2 css styles, just have one style for anime list n manga list
 
Mar 3, 2012 6:45 PM

Offline
Joined: Nov 2011
Posts: 1977
ClearSinz said:
DarkShards said:
Is there a way to have different anime and manga list backgrounds? I know its possible, but I was wondering if it would be extra complicated to do so with this layout.

u get like 2 css styles, just have one style for anime list n manga list


Yeah I just figured that out haha, thanks! =DD

"I like to expose what people hide. I'm an intellectual rapist." - Furudo Erika
 
Mar 3, 2012 10:09 PM

Offline
Joined: Feb 2012
Posts: 869
Hey Guys. I'm just wondering 'coz the code says "DO NOT REMOVE THIS DIV" or something. Do I really need to delete the whole thing and copy the one that's provided? I really need your help guys.
 
Mar 3, 2012 10:18 PM

Offline
Joined: Nov 2011
Posts: 303
@ pizza_012
This is about copyright thing, it means you must not disable or hide this block using CSS. Don't worry, it is visible in this layout (and just in every single code posted here).
 
Mar 3, 2012 10:42 PM

Offline
Joined: Feb 2012
Posts: 869
VeriTi said:
@ pizza_012
This is about copyright thing, it means you must not disable or hide this block using CSS. Don't worry, it is visible in this layout (and just in every single code posted here).


Thanks but I just want to make it clear and very sure before taking any action..... so will it be SAFE to erase ALL the default given codes and replace it with the one that shishio provided?
 
Mar 3, 2012 10:48 PM

Offline
Joined: Nov 2011
Posts: 303
Of course it is, there won't be that much people otherwise. More, my layout code takes only one line here on MAL :3
 
Mar 3, 2012 10:54 PM

Offline
Joined: Feb 2012
Posts: 869
VeriTi said:
Of course it is, there won't be that much people otherwise. More, my layout code takes only one line here on MAL :3


Thank You so much VeriTi. I know I'm such a noob at these stuffs =.= +1 for you. Sorry for asking such questions .___. btw, where do you get your pictures?
 
Mar 3, 2012 11:09 PM

Offline
Joined: Nov 2011
Posts: 303
What pictures do you mean? I use Konachan for wallpapers and Sankaku Channel (NSFW) for anime art in general, and all other elements like gradients/buttons are hand-made in Photoshop
 
Mar 23, 2012 7:59 PM

Offline
Joined: Oct 2011
Posts: 3
Sorry for such a noob question but... What's the ideal background size? I want to use a 1920 x 1080 (character on left, list on right) but for some people the character is "cut off"...
 
Mar 23, 2012 9:00 PM

Offline
Joined: Nov 2011
Posts: 303
There is no ideal background size. I'd add
background-size: cover;
to where it is set so it would stretch or shrink automatically if it is too small or too big for one who is viewing your list
 
Mar 23, 2012 10:01 PM

Offline
Joined: Feb 2010
Posts: 4338
Fujoshi_18 said:
Sorry for such a noob question but... What's the ideal background size? I want to use a 1920 x 1080 (character on left, list on right) but for some people the character is "cut off"...


You can use
body
{background-size: cover;}

as he said to make the background cover every screen sizes now so finding an ideal background size isn't as important as it used to be, unless the person viewing has a really old out of date browser.

But if you weren't gonna use that code, what I used to do is find an image thats about 1920px across like yours and I'd set it so the character face peeked out on 1000px computer screens (genuinely thats the smallest computer screen size) and the whole image showed on wide screens. That way on the small coms they'd see at least a face, and as the computer screen got larger they'd see more and more.

I did something like that for this layout, notice the 1000px screenshot- http://myanimelist.net/forum/?topicid=217651

this is the pic I used for it- http://img139.imageshack.us/img139/7053/center2000bg1.jpg
 
Mar 26, 2012 12:34 PM

Offline
Joined: Nov 2008
Posts: 478
thank you so much!! Actually this is my first time using the CSS code, I have two questions, I wanna place my list on the right side and reduce the height of the headers, how do I do that please?
 
Mar 27, 2012 6:57 AM

Offline
Joined: Oct 2008
Posts: 3884
thanks a lot! this really helped me a lot! :)
 
Mar 27, 2012 11:47 AM

Offline
Joined: Feb 2010
Posts: 4338
motoko09 said:
thank you so much!! Actually this is my first time using the CSS code, I have two questions, I wanna place my list on the right side and reduce the height of the headers, how do I do that please?


Add this to your CSS box after everything else:

#list_surround {
position: absolute;
right: 0;
}



Scroll down in your code and find

.header_title {
height: 30px;
padding: 2px;
}


Lower the px height
 
Mar 29, 2012 2:10 PM
Offline
Joined: Mar 2012
Posts: 39
Hi!! Question... I have an image in the center of my anime list but the laterals are black 'cos the image is not that big... so I want to ad on the left and right side a moving gif but I can't find a BCCode for that... could you help me please? Thanks^^ ..... and what's the difference between CSS and BC Code?
 
Mar 29, 2012 5:46 PM

Offline
Joined: Feb 2010
Posts: 4338
You can replace your whole CSS code with this to get the blossoms on the sides and the pic in the middle.



btw in the future if your body background is too small, you can add just add this code to the bottom of any CSS edit box to blow up the background image to full size for your screen (won't work if you're on real old browser though). It won't work on the code above tho since I switched the body background with another background code to create that look you mentioned, but you can use it on other layout codes including the one you have right now.

body {
background-size: cover;
}


You don't use BBcode on the lists, you use CSS. BBcode customizes the profiles, forums, posts here, comments, etc. CSS customizes the list's (or any page's) design properties like background and font color and BBcode pretties the text we post.
 
Apr 1, 2012 10:32 AM
Offline
Joined: Feb 2010
Posts: 688
Thanks Shishio-kun for the tutorial. Too bad I have a busy week starting tomorrow, but I'm looking forward to working with it.
 
Apr 5, 2012 3:09 AM
Offline
Joined: Jan 2012
Posts: 31
I have a questionn....I wanna like put my profile like this :

http://myanimelist.net/animelist/Ame_Sama

How do i go about doing that?
<img src="http://i41.servimg.com/u/f41/15/01/65/68/sirart11.jpg" />

 
Apr 5, 2012 7:11 AM
Offline
Joined: Feb 2010
Posts: 688
Nevermind. problem solved.
Modified by Eucalyptustree16, Apr 7, 2012 9:18 AM
 
Apr 5, 2012 11:16 PM

Offline
Joined: Aug 2008
Posts: 2448
Thanks for posting this its sooooo helpful :D
[right][right]
 
Apr 8, 2012 9:05 AM

Offline
Joined: Feb 2010
Posts: 4338
SirArthur9494 said:
I have a questionn....I wanna like put my profile like this :

http://myanimelist.net/animelist/Ame_Sama

How do i go about doing that?


You need to be more specific since "that" can be anything, but if you want a banner like his:
http://myanimelist.net/forum/?topicid=202242

If you want his code:
http://myanimelist.net/forum/?topicid=399507
 
Apr 11, 2012 5:16 AM
Offline
Joined: Apr 2012
Posts: 1
Shishio-kun said:
SirArthur9494 said:
I have a questionn....I wanna like put my profile like this :

http://myanimelist.net/animelist/Ame_Sama

How do i go about doing that?


You need to be more specific since "that" can be anything, but if you want a banner like his:
http://myanimelist.net/forum/?topicid=202242

If you want his code:
http://myanimelist.net/forum/?topicid=399507
Thanx
 
Apr 15, 2012 3:34 PM

Offline
Joined: Oct 2011
Posts: 380
Sweet, thank you very much ^_^.
 
Apr 20, 2012 5:12 PM

Offline
Joined: Jul 2007
Posts: 5273
xCorruptedCookie said:
I have a questionn....I wanna like put my profile like this :

http://myanimelist.net/animelist/PandaPuff&status=2&order=0

how do i go about doing that? XD;


Same as "Corroptedcookie", i want to create my list so that is aligned to the left like that with the image displayed off on the right.

I am sure it is explained some where here in the club but i just visited here so im new as well.

Also i was wondering approxametly what size does the photo have to be in order to fit in the MAL list. I have had many problems before uploading photo's that were either to small or just ended up cropped at the corners.



 
Apr 20, 2012 5:30 PM

Offline
Joined: Feb 2010
Posts: 4338
link9us said:
xCorruptedCookie said:
I have a questionn....I wanna like put my profile like this :

http://myanimelist.net/animelist/PandaPuff&status=2&order=0

how do i go about doing that? XD;


Same as "Corroptedcookie", i want to create my list so that is aligned to the left like that with the image displayed off on the right.

I am sure it is explained some where here in the club but i just visited here so im new as well.

Also i was wondering approxametly what size does the photo have to be in order to fit in the MAL list. I have had many problems before uploading photo's that were either to small or just ended up cropped at the corners.


Tutorial on repositioning list:
http://myanimelist.net/forum/?topicid=393437

It can be any size, if you use this method to resize it to your screen resolution:
http://myanimelist.net/forum/?topicid=419677

If you don't want to use that method for some reason (using an old browser for example), then you just need to get a wallpaper the same size as your resolution or more. In this premade layout with the bg on the left side, the wallpaper is like 2000px across so even the biggest coms see it:
http://myanimelist.net/forum/?topicid=217651
 
May 6, 2012 6:01 PM

Offline
Joined: Aug 2011
Posts: 158
Wow this is great :)
 
Jul 29, 2012 5:16 PM

Offline
Joined: Jul 2012
Posts: 11
great guide! :D
even i got it & even managed to change my list to how i wanted it. then it's gotta be amazing :))

good job making this one!

sincerely, forever greatful
 
Sep 23, 2012 4:51 AM

Offline
Joined: May 2012
Posts: 138
Thanks a bunch this helped out quite a bit. i would like to ask though how to change the black colour i see when i put my mouse over one of my anime titles... i cant find anywhere on the code that has the colour black on it beside the other codes you suggest not to messs with. its pretty annoying XD
Signature removed. Please follow the signature rules, as defined in the Site & Forum Guidelines.
 
Sep 26, 2012 4:39 PM

Offline
Joined: Apr 2012
Posts: 182
Kasavon said:
Thanks a bunch this helped out quite a bit. i would like to ask though how to change the black colour i see when i put my mouse over one of my anime titles... i cant find anywhere on the code that has the colour black on it beside the other codes you suggest not to messs with. its pretty annoying XD


In this section, change the background-color to transparent if you don't want color at all.
.category_totals:hover, .td1:hover, .td2:hover, #grand_totals:hover, #copyright:hover {
background-color: black;
...
...
}
 
Oct 2, 2012 6:45 PM
Offline
Joined: Jul 2012
Posts: 543
im sorry but i seriously dont understand anything even after reading the tutorial. specifically i dont get which code to copy and paste on step 5? can i get help?
 
Oct 2, 2012 8:16 PM

Offline
Joined: Nov 2011
Posts: 303
@jjrocks24
The code that appears when you click "show spoiler" right under the only paragraph in step 5
 
Oct 13, 2012 12:40 AM

Offline
Joined: Mar 2011
Posts: 169
Awesome, thank you for these tutorials sir.
 
Pages (4) « 1 [2] 3 4 »