| @ayame: Find and replace your List surround with this: #list_surround { height:100%; width:700px; margin: auto !important; position: relative !important; } This will center your list into the middle of the page for all browsers and screen sizes. It should look fine on most computers after thats since the background size cover code will fit the background to updated browsers. |
| @ Shishio Just centering doesn't seem enough because there is still going to be that large space between the list and red borders, no? |
 |
VeriTi said: @ Shishio Just centering doesn't seem enough because there is still going to be that large space between the list and red borders, no? Yeah, I just noticed the red borders thing, but imo the first thing to get out of the way is centering the list on all screen sizes. On top of that code, you can remove the background-size: cover from body to make it so all screen resolutions get the red border on the sides of the list like you see. The only thing is when you do this screen resolutions bigger than 1400px will see this: http://i41.tinypic.com/whiddv.jpg See the beige on the sides- you can just take the original background and edit it so that the beige gaps get the same stone background. This is the easiest solution I can think of after you add the other codes. Make sure it stretches out to 2000px across to cover all screen resolutions. Tinypic won't host a 2000px image, use this site: http://ihostimages.x10.mx/ Also alternately you can just use inline content to put the borders behind the list as a second background, and then you can keep background-size: cover on the main background and take the red borders off of that background. And from now on you can use the "View" option in your browser's menu and Zoom in and out. |
Shishio-kunFeb 16, 2012 11:11 AM
Miketsukami said: It's my 1st try doing my own layout so I had some problems This is how it looks on firefox with res 1280x1024 Ah now I can see it just fine now! Looks fantastic. I noticed some other peoples layouts were showing up mostly white but then I noticed that website http://imgur.com/ was blocked by AdBlock (I don't know if its just me). |
Shishio-kun said: @ayame: Find and replace your List surround with this: #list_surround { height:100%; width:700px; margin: auto !important; position: relative !important; } This will center your list into the middle of the page for all browsers and screen sizes. It should look fine on most computers after thats since the background size cover code will fit the background to updated browsers. Ok, wait, now I 'm confused, what should I do, is add this code, and make it this wallpaper resolution after that, and also remove the background-size cover from the top of the list. Got it the thing whith inline content, but will it work in any resolution too? And about the beige color, do you how can I change it? I'm trying a while now... Thank you guys for everything. |
| Now the list looks like this with this resolution: |
Aya__Feb 16, 2012 12:54 PM
Ayame_chan_ said: Shishio-kun said: @ayame: Find and replace your List surround with this: #list_surround { height:100%; width:700px; margin: auto !important; position: relative !important; } This will center your list into the middle of the page for all browsers and screen sizes. It should look fine on most computers after thats since the background size cover code will fit the background to updated browsers. Ok, wait, now I 'm confused, what should I do, is add this code, and make it this wallpaper resolution after that, and also remove the background-size cover from the top of the list. Got it the thing whith inline content, but will it work in any resolution too? And about the beige color, do you how can I change it? I'm trying a while now... Thank you guys for everything. Yeah, thats what I would do to fix the resolution problem quickly as possible. There might be other solutions but thats the fastest and easiest way I can think of atm: 1. Replace your list surround with the new list surround I posted. 2. Remove background-size:cover from the body part of the list near the top. 3. I think its fine at this point, but you can replace your current background with one that covers the 2000px wide computers, and also has the borders in the middle fitting around the list like on yours. Then you get the borders around the list on all computers and a nice big image that covers all desktops. Remember those super wide screen coms also have a height of 1200px too. The #inlineContent is a separate solution that you can use to put list borders behind the list and not have to use the background image of body for those borders. Just use an image with borders that goes behind the list but peeks out to put borders on the side of the list. Code can be found here: http://myanimelist.net/forum/?topicid=393581 but needs to be shortened in width to cover behind your list. Should work with any resolution since the inline contents only meant to go behind the list and not be more than 700-800px or so wide. When you have the borders right, you can use background-size cover on body all you want cuz the borders won't be on body anymore. To change the background color from beige to whatever, its #FFFFCC found in the top of your code to another color. #FFFFCC is a weird type of color name called an HTML color. You can find a series of HTML colors here: http://www.w3schools.com/html/html_colornames.asp Sorry its turning out complicated, but from now on you can just use the view option to look at different resolutions first. |
Ayame_chan_ said: Now the list looks like this with this resolution: I don't see that at all on any resolution, is that what you actually see on your computer? Are the zoom options tweaked at all? What browser and resolution do you normally have? You can add multiple backgrounds to body with this thread and have the big image in back of the background you are using now (and leave the background-size cover off). Then big computer screens will see big bg instead of the beige color. |
| First I added the bg with that higher resolution and that's the way it was in my computer, The zoom options are normal, I use Chrome and I guess the resolution is 1366x768. So I tried to do the multiple bg thing, and is it right? Shoud I add background-size: cover? The code: I just wanna see if the code is fine, to fix what I added in the "donate your old list CSS layouts" |
Aya__Feb 16, 2012 3:43 PM
Ayame_chan_ said: First I added the bg with that higher resolution and that's the way it was in my computer, The zoom options are normal, I use Chrome and I guess the resolution is 1366x768. So I tried to do the multiple bg thing, and is it right? Shoud I add background-size: cover? The code: I just wanna see if the code is fine, to fix what I added in the "donate your old list CSS layouts" This is how it looks on a bigger resolution: http://i42.tinypic.com/358c8rq.jpg This is how it looks on a smaller resolution: http://i44.tinypic.com/rsezwy.jpg Don't add background-size cover, because you should lose the borders around the list on multiple resolutions. Its cuz the main background gets stretched to fit the smaller resolution: http://i42.tinypic.com/1fvd3n.jpg Its great as is now for a premade layout to post in the donate thread! You've been making a lot of layouts too so if this is becoming a hobby you may want to start using Firefox as it has a lot of useful extensions like Firebug which will take a little time to get used to but its fairly straightforward and in the end makes editing a layout so much easier. When you have questions we can answer for you here or in the Ask thread and use visual examples, etc. |
| I guess I can't change anything in the way it looks in a bigger resolution, but it's better now. Oh right, I won't add it then. I've changed the background color too, I guess now the colors are more alike. Ok, I'll put the code there the way it is now. ^^ Geez, so troublesome for a simple list style. rsrs I used to use firefox, and I still have it here, I'll take a look, and I'll probably ask something there, so thank you for all the help.^^ |
Aya__Feb 17, 2012 12:06 AM
Shishio-kun said: Ah now I can see it just fine now! Looks fantastic. I noticed some other peoples layouts were showing up mostly white but then I noticed that website http://imgur.com/ was blocked by AdBlock (I don't know if its just me). Thanks! I guess it's possible since I uploaded all the images on http://imgur.com/. |
 |
| Wow, it looks great! You're getting really good at this Ayame. It looks perfectly fine on other resolutions to me, and if you want to see for yourself use this site: http://quirktools.com/screenfly/ After you enter your list's web address in the bar, it will give you a preview of your list. Then you can click desktop and cycle through different screen resolutions. |
| Thanks. *-* I'm trying to get better. ^^ And thank you very much for the website, it's really usefull, love it. XD |
Aya__Feb 20, 2012 7:48 PM
Ayame_chan_ said: Thanks. *-* I'm trying to get better. ^^ And thank you very much for the website, it's really usefull, love it. XD You're definitely getting better. If you use Firefox you should learn to use Firebug if you haven't already, it will make things editing your layout much easier once you get it down, and I just completed my tutorial on it for several of its features. But you probably don't even need the tutorial, if you just install Firebug and mess around with it on your list layout (keep an eye on the lower right hand part of menu) you would probably get an idea of what its capable of and how you can edit your list in real time with it. http://myanimelist.net/forum/?topicid=405333 |
| But I use Google Chrome.. is there anything like this firebug on Chrome? I liked the tutorial, when I have some time I'll try to learn how to use it, I still have Firefox here anyway, so thanks. ^^ |
| I heard there's a Chrome Firebug, but my experience with Chrome add-ons that copy Firefox add-ons is bad. They often had flaws and bugs. It would be good to make your layouts in Firefox if you learn it though, and if you notice a difference in Firefox and Chrome after editing (very rare) you can just use this: http://myanimelist.net/forum/?topicid=397909&show=0#post1 Glad you liked the tutorial; I always think people will be overwhelmed by the length and number of visual examples but that to me is the easiest way to follow the steps and learn.. I hate tutorials that are all text lol. |
| Chrome has a built-in tool (Ctrl + Shift + I), but it's quite bad for this purpose because it doesn't have anything like CSS tab in Firebug (where you can get the code you've changed) or pure CSS input field like in Opera Dragonfly, but it may be enough if you're going to test some minor changes, not to make whole layout with it. |
|
| Your visual examples make things easier to understand you can be sure of that. ^^ And about the Firebug, it's a good tip using firefox only to do the layouts and lists. I was a bit curious about those codes with "important!" in it, I used to see around, so this is what they are about...interesting. Well, I guess I'll try to do it someday, thank you guys. ^^ |
VeriTi said: Chrome has a built-in tool (Ctrl + Shift + I), but it's quite bad for this purpose because it doesn't have anything like CSS tab in Firebug (where you can get the code you've changed) or pure CSS input field like in Opera Dragonfly, but it may be enough if you're going to test some minor changes, not to make whole layout with it. You can also just press F12 in order to show this. |
 |
| my first made animelist any advices? :) |
 |
| Heres mine, just finished yesterday. Loving that Persona 4 theme :P http://myanimelist.net/animelist/LordSilen 2 examples: My resolution is 1600x900, the list will overlap the background images more on smaller resolutions. |
Oh wow I really like it! Really good for any one, let alone a first try. I've actually been hoping someone would do a list like this for a while. LordSilen said: Heres mine, just finished yesterday. Loving that Persona 4 theme :P http://myanimelist.net/animelist/LordSilen 2 examples: My resolution is 1600x900, the list will overlap the background images more on smaller resolutions. This looks really good too! I added a code to remove the All Anime button to the thread you asked for it in. Love the color in the background too, makes it really stand out with the fade and top bar. |
| @ Tsundere_chan Wow nice remix of my and Drize's layout :) I think you should also change a color of blur that appears when hovering a link and that's all, it's already very good. |
|
| change it to gold color likes the bottom bar. check it :) . Is it look better?) |
|
| @ Tsundere_chan Definitely it does :) |
|
| So, this is my current list. I still need to fix the shadows on top menu for IE, but if you notice any other bug please let me know.  |
_Ayu_ said: So, this is my current list. I still need to fix the shadows on top menu for IE, but if you notice any other bug please let me know. Epic list design~ :) |
Drize said: Epic list design~ :) Thank you for the complement and thank you for the codes that I’ve steal from you. ;) Got say, I’m a big fan of your designs. |
| After much editing, and headache, finally got finished. Although I got only 85% of what I intended. : ( Thank Shishio-kun and all of the club by always to be helping. :)  |
~ |
| Insone goood |
 |
| Looking good Insone. I really love the Steins; Gate pic. |
Animexx said: Insone goood Thanks! :) LordSilen said: Looking good Insone. I really love the Steins; Gate pic. I love also, even more with this eyes of Kurisu. * - * |
~ |
Insone said: After much editing, and headache, finally got finished. Although I got only 85% of what I intended. : ( Thank Shishio-kun and all of the club by always to be helping. :) OMG! I love Kurisu~ By default, I already love the design because shes there. :) When I saw the rest of the anime list design, I have finally decided that your anime list is one of the anime list designs that I love on MAL because of how clean and simple looking it is. :) |
Drize said: Insone said: After much editing, and headache, finally got finished. Although I got only 85% of what I intended. : ( Thank Shishio-kun and all of the club by always to be helping. :) OMG! I love Kurisu~ By default, I already love the design because shes there. :) When I saw the rest of the anime list design, I have finally decided that your anime list is one of the anime list designs that I love on MAL because of how clean and simple looking it is. :) All I can say is... wow, it looks simple yet so complex :S |
 |
Drize said: OMG! I love Kurisu~ By default, I already love the design because shes there. :) When I saw the rest of the anime list design, I have finally decided that your anime list is one of the anime list designs that I love on MAL because of how clean and simple looking it is. :) All it takes in its design, the patterns simple and clean, I like , so always try to pass these standards for everything I do. Kurisu-nyan: 3 Alfyan said: All I can say is... wow, it looks simple yet so complex :S Looking at certain angles, really makes sense. It took me a long time on the CSS because this was my first contact with this type of code. : x |
~ |
@Insone - I've pointed this out before to the person who first wrote the CSS for the menu at the top right corner. Looks like the person didn't bother fixing it. The CSS for the menu is only written for MAL users that are logged in, not for those that aren't logged in. As you can tell by the image below, there still is a MAL bar. |
#mal\_control\_strip { background: transparent !important; } td#mal_cs_pic a img { display: none; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } This will fix the logged out problem for the Angel Beats layouts (like Isone's). I added it to the originals today. |
Shishio-kunMar 21, 2012 1:58 PM
Drize said: @Insone - I've pointed this out before to the person who first wrote the CSS for the menu at the top right corner. Looks like the person didn't bother fixing it. The CSS for the menu is only written for MAL users that are logged in, not for those that aren't logged in. As you can tell by the image below, there still is a MAL bar. Drize, if not for you, would pass unnoticed by me. Thank you. Shishio-kun said: #mal_control_strip { background: transparent !important; } td#mal_cs_pic a img { display: none; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } This will fix the logged out problem for the Angel Beats layouts (like Isone's). I added it to the originals today. Thank you very much Shishio-kun. Again you saved me. :) |
~ |
| I'm thinking seriously about now going develop a theme of the goddess Senjougahara, because until I finish, 2013 has arrived. haha Although with the help of you, everything is easy. ^^ |
~ |
| Insone your theme looks great! very simple and nice. and also <3 Kurisu) "theme of the goddess Senjougahara" - sounds good)) i'm doing it too but i got some problems cuz of my bad skills in PS :( studyin hard in ps right now -__- |
|
| @ Tsundere_chan Feel free to ask here if you need help with something :) |
|
| Here is mine :). |
| @Tweek91330 it looks nice and unusual but on small resolution it looks quite bad and hard to read also i think the bar (under the header pic) looks too simple, doesn't it? |
|
Tweek91330 said: Here is mine :). Wow that was pretty clever fixing the search option to the right side! I should add that as an option to that popular top bar style. The dark background really brings out those pics! I really like the one on the far right. Good job on that! As a suggestion the font color could be a brighter red and the menu list a darker opacity to make it easier to read. I think the bar under the header pic is fitting and matches the text tho real well. Maybe the text in there could be larger, might make it look a bit better. |
Tsundere_chan said: @Tweek91330 it looks nice and unusual but on small resolution it looks quite bad and hard to read also i think the bar (under the header pic) looks too simple, doesn't it? For the bar, i can try to make it look better ^^. As for the resolution, i don't know how to do that (without change the layout). Shishio-kun said: As a suggestion the font color could be a brighter red and the menu list a darker opacity to make it easier to read. I think the bar under the header pic is fitting and matches the text tho real well. Maybe the text in there could be larger, might make it look a bit better. Thanks, i'll try that ^^. Also, the top bar style is great, a lot better than the one from mal. Edit : I edited a little my list, it's better that way indeed :). |
Tweek91330Mar 28, 2012 10:22 AM
| @SoulToxin Amazing! the vectors you have in there go along with it so well! |
| Thanks :D |
 |
More topics from this board
» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7921 |
by takkun_
»»
Yesterday, 9:54 PM |
|
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
381 |
by KabukiChouNights
»»
Sep 13, 10:56 AM |
|
» theme helpthreat - 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 FixesShishio-kun - Mar 8, 2021 |
30 |
by Shishio-kun
»»
Jul 28, 3:17 AM |