Darkstar1141 said: Looks complicated.Sorry, CSS noob here. I'm wondering how to make the header image to fit smaller display sizes while being 420x1980. I've tried adding variations of NikeHatter said: Selectors are case sensitive, it's not #inlinecontent but #inlineContentOk here's my problem. I use the exact codes but the header never shows up, help? http://myanimelist.net/mangalist/NikeHatter |
u531355 said: Darkstar1141 said: Looks complicated.Sorry, CSS noob here. I'm wondering how to make the header image to fit smaller display sizes while being 420x1980. I've tried adding variations of I feel like I'm just missing something. The default "seasons" header is definitely wider than my computer resolution, yet it fits nicely. My imgur image doesn't seem to want to do the same. Would the solution simply be to resize it to my personal res, or change the aspect ratio? Thanks. |
Darkstar1141 said: I'm not sure I understand what you want. The header picture is 420px high, and it'll show the right part of the picture that your screen is able to display. For example if your header picture is 1920px wide and your screen only 1366px, it'll only display the 1366 rightmost pixels of the picture.u531355 said: Darkstar1141 said: Looks complicated.Sorry, CSS noob here. I'm wondering how to make the header image to fit smaller display sizes while being 420x1980. I've tried adding variations of I feel like I'm just missing something. The default "seasons" header is definitely wider than my computer resolution, yet it fits nicely. My imgur image doesn't seem to want to do the same. Would the solution simply be to resize it to my personal res, or change the aspect ratio? Thanks. So if you want a 1920px picture to fit your 1366px screen, yes you can resize it. But it'll look bad for ppl with wider resolutions. So I think what you want is for the picture to automatically adjust to the screen size. But there are 2 ways you can adjust it. One is to keep the 420px height and stretch the width depending on the screen resolution. Your code for that was almost correct: #inlineContent {background-size: cover;} If you use that you have to keep in mind that a 1920px wide picture would need more than 420px of height to fill the 420px on a 1366px screen. A quick math tells you it would need to be 591px high.I hope I didn't lose you .. the other way would be not to need a 1920x591px picture and just keep the 1920x420px. But then it would have to auto-adjust the height of the #inlineContent and many others elements in the code depending on the screen resolution ... that's what I think is complicated if not impossible. Blazeflack said: It's not a bug, it's a design choice. Most of the time text is not long enough for the scrollbar to appear, but it's better for the scrollbar to appear than not being able to see the end of the text at all. The following lines are responsible for this:Thanks for sharing this design, I love it. I found a small 'bug' though. When mousing over the icons in the top bar the image will switch to text, and if the text is long enough a horizontal scrollbar is shown. It doesn't look good. You may have to view another persons list to see the effect, or log out and view your own. overflow-x: auto; But if you've have a better design idea, I want to hear it, because you're right it's not perfect this way.overflow-y: hidden; white-space: nowrap; letter-spacing: -1px; |
u531355 said: But if you've have a better design idea, I want to hear it, because you're right it's not perfect this way. I actually spent some time trying to find a way to do word-wrapping while keeping the text centered, which I didn't succeed at unfortunately. CSS lacks a valign control for stuff other than table-cells. What I ended up doing was decreasing the line-height and use word-wrapping which causes the text to spawn at the top and then break to new lines if the text is too wide. #mal_cs_listinfo div a, #mal_cs_links div a, #mal_cs_otherlinks div a { display: block; position: absolute; top: 11px; width: 64px; height: 64px; line-height: 16px; letter-spacing: -1px; font-size: 0px; font-weight: bold; text-align: center; text-decoration: none; border-radius: 7px; word-wrap: break-word; }  It doesn't look as good as having the text vertically centered, but since I have to choose between 2 bad solutions, I think this is the better one. |
removed-userMay 29, 2013 9:31 AM
| Thanks u531355, that addressed my confusion. Thanks for the awesome layout. |
AvalonBright said: Just discovered this yesterday, and it's absolutely gorgeous! One thing though, I'm a complete newb to CSS stuff (literally I have no idea what I'm doing), and I'd love to put a background image on my anime list instead of the plain blue background. How do I go about doing that? I didn't see anything in the css that seemed to suggest adding an actual image instead of just colors, so I'm assuming it needs written in from scratch :( Add to bottom of box /* AREA AROUND THE TITLES AND COVERS Change the color and transparency here. The first three numbers are the amount of red, then green, then blue; can be 0-255. The last number is how transparent it is. Can be from 0.0 - 1.0. 0.0 is completely transparent. */ #list_surround { background-color: rgba(1, 149, 195, 0.0); } /* BACKGROUND BEHIND TITLES */ body { background-color: transparent; background-image: url("http://i.imgur.com/kkze0IX.jpg"); background-attachment: fixed; background-position: top; background-size: cover; } |
Blazeflack said: It doesn't look as good as having the text vertically centered, but since I have to choose between 2 bad solutions, I think this is the better one. Thank you for posting your code, people who want the other bad solution can now get it. |
| Hey just joined the club since I just got one of my own premade CSS layouts. Though everything's been working out fine as of yet, I seem to not get how to fix one thing. I don't know if this has already been answerd, though I couldn't find anything in the thread regarding this. I would like to know if there's a way to center the font at the overhead bar, displaying which tab you're on.  This is my first time dealing with CSS, so I'm a complete newb at it. Though great work with the premade layouts! Liking them all alot! |
RosemarkJun 8, 2013 5:15 AM
| Add this code after the options: .header_title {padding-left: 0px;} |
u531355 said: Add this code after the options: .header_title {padding-left: 0px;} Thanks for the fast reply, it fixed the problem! :) |
sayami said: I would like to change the top bar's style completely to one of the styles here. How should I start? This list has its own top bar built in the #2 CSS. That CSS has a group of MAL top bar codes like #mal_control_strip and what not all starting with #mal that interfere with the top bar mods. You could copy the CSS from the link put it in your CSS edit box or another import, then delete those codes then use a top bar import more easily. If you don't know how to do that ask back. |
| Thanks a lot, now it works :) But one problem still remains for me, and it is the Manga title, Score, Chapters, Volumes buttons, which were under the top bar.They're still at the same place. How should I move them somewhere else or erase them? |
sayamiJun 11, 2013 1:55 AM
 |
| It's this selector: .header_cw + table, .header_completed + table, .header_onhold + table, .header_dropped + table, .header_ptw + table {} You can change it's current position or make it display: none; |
| Thank you so much, it works now perfectly :) |
|
GoldenBRS said: For my anime list,do you know what size that I have to use for my background pic? I tried it before, and I got white background I saw. I want this picture. Here is my css. Do I have to add this code in the bottom? Also for my manga list, how I put my background red instead of black? That code was for someone else but you can try to add that to the bottom. For the background image link use one of that pic you want. Download it and upload it to a site like Imgur and use the direct link. If you try to link it from Konachan or if the image link is dead you will get a white background. On the red manga list thing- go to layout themes (#4) in the main post, find red theme, replace the link in #4 of your layout code with the red theme's link from the first post. |
sayami said: I would like to change the top bar's style completely to one of the styles here. How should I start? I would like to do a similar thing to this though is it possible to add the “Anime Title, Score, Type, Progress” selector to this top bar? If there is how should I start out? Thanks in advance! |
Rosemark said: sayami said: I would like to change the top bar's style completely to one of the styles here. How should I start? I would like to do a similar thing to this though is it possible to add the “Anime Title, Score, Type, Progress” selector to this top bar? If there is how should I start out? Thanks in advance! Its possible but no ones done that yet, to do that on your own you would need to learn how to code on an advanced level and make an icon bar from the links as Kyou or Al_exs did or have someone make it for you. |
| Hello, i have this layout in my lists and i love it ... but i had a problem... How can i do this ? I already done with the others but the square list i cant find it. Style code: https://dl.dropboxusercontent.com/s/a30mth7drq4ffar/style.css Theme code: https://dl.dropboxusercontent.com/s/oljv0nok5cbe78k/theme.css |
| remove these 2 lines in the body selector: margin: auto !important; width: 77%; |
| God -.-' i havent see it... Really thanks for the help =D |
| Hey wanted to ask if there is way to make the banners change when you click on currently watching, completed and so on. I tried using this code here http://myanimelist.net/forum/?topicid=397783 but couldn't find a way to get it to work PS great design and real easy to configure. |
rupisltJul 20, 2013 9:15 AM
| "I hate the rain So I lent you my power to stop it. The rain stopped. But only after you made this world sink into the sea" Tensa Zangetsu |
Shishio-kun said: Rosemark said: sayami said: I would like to change the top bar's style completely to one of the styles here. How should I start? I would like to do a similar thing to this though is it possible to add the “Anime Title, Score, Type, Progress” selector to this top bar? If there is how should I start out? Thanks in advance! Its possible but no ones done that yet, to do that on your own you would need to learn how to code on an advanced level and make an icon bar from the links as Kyou or Al_exs did or have someone make it for you. Hey, thanks for the reply. The problem for me is that I'm a total beginner to everything involving HTML and CSS, so I think I'll have to wait with it until I've started learning some myself. I didn't really like any of the preset Top-Bars that the square layouts featured, though the one I personally ended up using was the Gnome Top-Bar. Link to the Gnome Top-Bar Code: http://dl.dropboxusercontent.com/u/49469857/MAL/premade/square/bars/gnome/bar.css Edit: The question came out kind of wrong last time, what I really ment to ask was if there were a easy way/method to customize square layouts top bar icons, like changing a specific icon in the code etc. I've got some photoshop experience, so making icon's won't really be too much of a problem. The problem is really how I imply them to the code! Would really appreciate, if not to hard, how to customize them myself. Thanks in advance! |
RosemarkJul 24, 2013 9:36 AM
Rosemark said: Shishio-kun said: Rosemark said: sayami said: I would like to change the top bar's style completely to one of the styles here. How should I start? I would like to do a similar thing to this though is it possible to add the “Anime Title, Score, Type, Progress” selector to this top bar? If there is how should I start out? Thanks in advance! Its possible but no ones done that yet, to do that on your own you would need to learn how to code on an advanced level and make an icon bar from the links as Kyou or Al_exs did or have someone make it for you. Hey, thanks for the reply. The problem for me is that I'm a total beginner to everything involving HTML and CSS, so I think I'll have to wait with it until I've started learning some myself. I didn't really like any of the preset Top-Bars that the square layouts featured, though the one I personally ended up using was the Gnome Top-Bar. Link to the Gnome Top-Bar Code: http://dl.dropboxusercontent.com/u/49469857/MAL/premade/square/bars/gnome/bar.css Edit: The question came out kind of wrong last time, what I really ment to ask was if there were a easy way/method to customize square layouts top bar icons, like changing a specific icon in the code etc. I've got some photoshop experience, so making icon's won't really be too much of a problem. The problem is really how I imply them to the code! Would really appreciate, if not to hard, how to customize them myself. Thanks in advance! Answer >>>How to change the top bar icons: Ok this is actually really simple to do there is not much work that has to be done if you make the images for the new top icons. The code for the top bar icons that you are using is this. To change the icons first copy and paste the code into a text file named topbaricons.css the important bit is the css at the end which sets the format. then you need to create the icons for your top bar which are 64 pixels in width and 64 in height. There are 16 different buttons named as shown below I would use the same names to keep things simple. You will have to create all 16 of these buttons and upload them somewhere on the internet. The best place would be https://www.dropbox.com/ you will have to make it public and the tutorial for that is here at STEP 4 http://myanimelist.net/forum/?topicid=609907. Once you have made and uploaded the images copy the share link of the image and replace it in the css file that you made with the code. For example the first line of the code looked like this #mal_cs_listinfo div:first-of-type a:before {background-image: url(profile.png);} just replace the profile.png with the link of the image that you want to use #mal_cs_listinfo div:first-of-type a:before {background-image: url(LINK OF THE IMAGE GOES HERE);} this is what it should look like with the link. #mal_cs_listinfo div:first-of-type a:before {background-image: url(http://dl.dropboxusercontent.com/u/49469857/MAL/premade/square/bars/gnome/profile.png);} Once you did this for all 16 images then save the css file named topbaricons.css and upload it to the dropbox account public folder. Then you can use the link the same as you did for your Gnome top bar If I wasn't clear or didn't explain something right send me a message. |
rupisltJul 25, 2013 1:58 PM
| "I hate the rain So I lent you my power to stop it. The rain stopped. But only after you made this world sink into the sea" Tensa Zangetsu |
| Hey loving this layout, except I can't seem to move or get rid of the bar I've pointed to in the picture. Any solutions? |
| Question Zup dude, once again thanks for the reply! This may come of kinda sounding like a request rather than problem solving, though would there be some kind of easy way to just move this icon to this place? It's the basic Gnome Top Bar Code layout, link. Would really appreciate help on this one, since it's currently driving me crazy. Thanks in advance! Cheers mate! ANSWER No problem thats easy enaugh you will need to create your own css file with this code VVVVVV and save it under the name bar.css and then upload it to drop box, also I asumed you wanted both images the same so if you want to change anything there is an explanation below.VVV Any questions feel free to ask and also if you want I can give you my skype for any help so just ask and I will send you my Skype ID or you send me your. This is just for the purpose of a tutorial in case someone else has the same problem. any question ask |
rupisltAug 16, 2013 6:13 PM
| "I hate the rain So I lent you my power to stop it. The rain stopped. But only after you made this world sink into the sea" Tensa Zangetsu |
| Hey :) First of all I would like to say thank you for this awesome layout :D I really appreciate it. But I've run into a problem with the header. I followed u531355's instructions and made a (1920 x 420)px header. Since my desktop resolution is 1360x768 the header shows up like this: And only shows up correctly when I set my browser zoom to 75%: So, is there any way to make the header show up the same in every resolution? And thanks again for the all the help and cool layouts :) I'll be grateful for any help you can provide. |
fapdancing said: You can use this code and adjust the number:Hey loving this layout, except I can't seem to move or get rid of the bar I've pointed to in the picture. Any solutions? #list_surround > table:first-of-type {top: 150px;} Sporsho said: No the header will always be 420px high no matter which resolution you have. So you should chose a picture that looks good even with only its 1360 right-most pixels displayed.So, is there any way to make the header show up the same in every resolution? AvalonBright said: It's because I didn't update the file with the links for a 2 months now, so it contained dead links. Now it's fixed ;)Is there a problem with the series images' dropbox? I noticed a couple days ago Gatchaman Crowds is just showing up as a blue square, and now Kamisama no Inai Nichiyoubi suddenly is too. :( hawkranger said: Glad you figured it out ;)... If you want to use it for both your animelist and mangalist you should create two css styles. |
sonia368 said: I have a question. How increase height of frame that i pointed out on image below? http://i.imgur.com/LzOaEdD.jpg Oh I see that when I modify the theme for my own list: .animetitle { search for: max-height: 34px; and delete it. That line is a conditional to not surpass 34px of height, and for those anime tittles that are ultra long like Danganronpa: Kibou no Gakuen to Zetsubou no Koukousei - The Animation that got 4 lines of text in the Square Layout |
| I have been trying to make my own topbar icons. however it did not work out... just replaced the old bar.css with: Then I uploaded it to Speedy Share and have given a link to that but it doesnt work? Any ideas? |
 |
Shotaro96 said: I have been trying to make my own topbar icons. however it did not work out... just replaced the old bar.css with: Then I uploaded it to Speedy Share and have given a link to that but it doesnt work? Any ideas? Answered here: http://myanimelist.net/forum/?topicid=200323&show=1300#msg25478651 |
| Anyway to make loading of list faster? |
|
| Not really, the pictures alone for your list weigh more than 10MB. What you can do is change the default status selected to "watching" instead of "show all" so it has way less to load and is hence faster. You can also use pinned tabs so that your list is cached. |
| My quick re-design of sibbo7's and u531355's layout: https://dl.dropboxusercontent.com/u/144008148/Premade/Requests/Marcusderp/Marcusderp-request%20sample3.png Code: |
 |
| Is there anyway to move the .headers out of the #list_surround background? Been trying for hours but no luck :\ |
 |
| WOW O.O This is amazing style D: |
jicks said: Is there anyway to move the .headers out of the #list_surround background? Been trying for hours but no luck : Your list looks great so you don't really need to, or maybe you've solved this issue since then.. but you can simply add or take from top or left under the .header codes, if its not what you want set the position: to absolute instead or relative. These things move headers out of list surround on almost every list. |
| I noticed a few animes pictures, like Black Rock Shooter TV, Yu-sibu, HOTD DOTD OVA don't seem to work. |
| None of the generators links work. Anyone mind giving me a link to a working one? (preferred U531355's generator) |
  |
Toxicwolf said: None of the generators links work. Anyone mind giving me a link to a working one? (preferred U531355's generator) Its because all the past generator versions were broken by security changes from MAL staff- this is mentioned on the front page of this group and the only working generator is Hahaido's but its having selective problems atm http://myanimelist.net/forum/?topicid=442261&show=0 If it doesn't work for you it might take some time before there's a version working for you but he always gets his stuff working 100% after enough feedback |
More topics from this board
» 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 |
|
» How To Have Different Banner/Cover image & Background Image For Manga & Anime ListsYasminaRegina - Jul 25 |
2 |
by YasminaRegina
»»
Jul 26, 1:02 AM |
|
Sticky: » 💚 [REPAIR STICKY] Repair/speed up layouts + Request layout fixes ( 1 2 )Shishio-kun - Nov 17, 2023 |
52 |
by LucaBalsa
»»
Jul 6, 2:02 PM |