| This layout has been updated and moved to this new topic: https://myanimelist.net/forum/?topicid=2130238 |
Shishio-kunNov 17, 2023 7:10 AM
| Woah thanks for this shishio :O The only reason I didnt put on the tags with this layout is because the right side got all messed up. Like the top right corner lost its roundness and all the rows were different lengths. What did you do to fix that? This is what I mean |
TheHolyPotatoMay 27, 2013 7:24 PM
TheHolyPotato said: Woah thanks for this shishio :O The only reason I didnt put on the tags with this layout is because the right side got all messed up. Like the top right corner lost its roundness and all the rows were different lengths. What did you do to fix that? This is what I mean Thank you, I also had put your original version of this layout in our 2013 hall of fame: http://myanimelist.net/forum/?topicid=599027 On the corner roundness, everyone uses last of type to round the right corner, but when you're using tags on this layout style it is still the last of type but now its no longer visible on the top, and the second to last of type becomes the end of the table. So this controls it: .table_header:nth-last-of-type(2) you add nth- before last of type and (x), where x is how many you wanna go back from the end. Phew! So use for your list: .table_header:nth-last-of-type(2) { border-radius: 0 10px 0 0; } Might wanna lower width a little too. |
| Hmm it doesn't seem to be working :/ What am I doing wrong? I put the code at the end but it still doesn't change? |
TheHolyPotato said: Hmm it doesn't seem to be working :/ What am I doing wrong? I put the code at the end but it still doesn't change? Second to last set (below) isn't closed with a bracket so codes added below it can't take affect. A lot of ppl's codes are like this for some reason. * { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; |
| Wow I feel like an idiot -_- thanks again. |
| I've made some adjustments to these layouts and updated the screenshots, so the header text on the table will be a little clearer and the colors match each magical girl! Also there's notes in the code on where you can adjust those colors if you want. Also there's a solution for people who don't want to use tags but want the best look overall. |
| Hello, i would like to know if you have the manga version of the side buttons (on the left)), if not do you at least have the original so i can edit them myself?? like instead of watching i can put reading and so on.. thanks in advance |
devileyes said: Hello, i would like to know if you have the manga version of the side buttons (on the left)), if not do you at least have the original so i can edit them myself?? like instead of watching i can put reading and so on.. thanks in advance I don't have the original or manga alternates- HolyPotato made those buttons- but I've asked him about it! If something comes up he or I will try to post links here. |
Shishio-kun said: devileyes said: Hello, i would like to know if you have the manga version of the side buttons (on the left)), if not do you at least have the original so i can edit them myself?? like instead of watching i can put reading and so on.. thanks in advance I don't have the original or manga alternates- HolyPotato made those buttons- but I've asked him about it! If something comes up he or I will try to post links here. alright thanks alot mate i really appreciate it :) |
| Ok got the manga buttons n stuff edited. I don't know how big the header text is compared to the ones I made so if someone could fiddle with that, that'd be great. If not I'll do it later. Reading button: http://i.imgur.com/CdokEMa.png Reading Header: http://i.imgur.com/r8TRp5n.png Plan to read button: http://i.imgur.com/mOB1pcO.png Plan to read header: http://i.imgur.com/uH0pl1M.png All manga button: http://i.imgur.com/mxyGxdy.png |
| When using Internet Explorer my anime list looks perfect but when I look at my list using Google Chrome the rows are still different lengths do you know of any way to fix this so the rows are the same length using Google Chrome. |
Vanvonhunter said: When using Internet Explorer my anime list looks perfect but when I look at my list using Google Chrome the rows are still different lengths do you know of any way to fix this so the rows are the same length using Google Chrome. Ok thank you for bring that problem to my attn! I wasn't aware of it and its prob my fault when I was converting it in the past and I overlooked the sides in Chrome. But I added a fix to the layouts which can be added onto any CSS: @media screen and (-webkit-min-device-pixel-ratio:0) { .td1:nth-of-type(2), .td2:nth-of-type(2){ width: 73% !important; } .animetitle { padding-left: 5px; } } You should be able to add it to the bottom of any of these Mahou templates, just make sure its at the very bottom after the two closing brackets at the bottom. In the templates, I added it before @media all and (min-device-width: 1001px). I haven't gotten a chance to look at the fix in Chrome in many resolutions, so if someone with a screen resolution of 1600 or more and a smaller one between 1000 and 1200 can tell if it looks even in Chrome I'd appreciate it a lot! Also there is a small unevenness with the very top of the table by the word progress, but thats not the issue (I'll look into this another time after this is working ok), its if the sides of the table are even or not. |
| Thanks that fixed my problem but I changed the width to 75% because otherwise the headers were longer than the rest of the list. @media screen and (-webkit-min-device-pixel-ratio:0) { .td1:nth-of-type(2), .td2:nth-of-type(2){ width: 75% !important; } .animetitle { padding-left: 5px; } } |
Shishio-kunSep 8, 2013 12:45 PM
| Wow good! Hmm can someone do me a favor and try this too real fast, and tell me if the headers line up, and whats your screen resolution if you know please? Mine is 1366px, so I go by that, need other resolutions like 1024px or wider than 1366 @media screen and (-webkit-min-device-pixel-ratio:0) { .td1:nth-of-type(2), .td2:nth-of-type(2), .table_header:nth-of-type(2){ width: 73% !important; } .animetitle { padding-left: 5px; } } |
Shishio-kun said: Wow good! Hmm can someone do me a favor and try this too real fast, and tell me if the headers line up, and whats your screen resolution if you know please? Mine is 1366px, so I go by that, need other resolutions like 1024px or wider than 1366 @media screen and (-webkit-min-device-pixel-ratio:0) { .td1:nth-of-type(2), .td2:nth-of-type(2), .table_header:nth-of-type(2){ width: 73% !important; } .animetitle { padding-left: 5px; } } My screen resolution is 1366 x 768 and using the above code still shows the headers longer than the rest of the list. |
TheHolyPotato said: Ok got the manga buttons n stuff edited. I don't know how big the header text is compared to the ones I made so if someone could fiddle with that, that'd be great. If not I'll do it later. Reading button: http://i.imgur.com/CdokEMa.png Reading Header: http://i.imgur.com/r8TRp5n.png Plan to read button: http://i.imgur.com/mOB1pcO.png Plan to read header: http://i.imgur.com/uH0pl1M.png All manga button: http://i.imgur.com/mxyGxdy.png Been using this on my manga list and was wondering if you could redo the Completed, On-Hold, and Dropped headers to because I like the larger font headers you picked for the manga list. |
| Sorta half-assed the headers, redid them for manga lists Reading: http://i.imgur.com/OWi79tP.png Completed: http://i.imgur.com/qgcVOFM.png On Hold: http://i.imgur.com/KVv7E0r.png Dropped: http://i.imgur.com/HVrzRMz.png Plan to Read: http://i.imgur.com/o4RuvMU.png |
TheHolyPotato said: Sorta half-assed the headers, redid them for manga lists Reading: http://i.imgur.com/OWi79tP.png Completed: http://i.imgur.com/qgcVOFM.png On Hold: http://i.imgur.com/KVv7E0r.png Dropped: http://i.imgur.com/HVrzRMz.png Plan to Read: http://i.imgur.com/o4RuvMU.png Thanks for redoing them they look great. |
| Is there any way to resolve this problem: ----> CLICK HERE! |
  |
If I remember correctly you just have to go under custom headers in your CSS and change the margin-top: -200px; to (ex: -150 or -100) or to the distance you like for Completed header, Onhold header, Dropped header, and PTW header. |
Vanvonhunter said: If I remember correctly you just have to go under custom headers in your CSS and change the margin-top: -200px; to (ex: -150 or -100) or to the distance you like for Completed header, Onhold header, Dropped header, and PTW header. Thank you so much! My problem with my list was finally solved!~ |
| |
Aeowina said: I have a minor problem: The images for the anime or manga wont show up. The box is left a pinkish-purple solid color. It isn't because of incomplete loading - because I've refreshed many times, etc. How do I fix this? You didn't copy the imports from the top of the CSS. just recopy the whole layout and make sure you include the imports at the top |
| The links doesn't work, but only the clean version of this layout. (Which is on my anime list) But I really wanted the other magical girls to be there in the layout when I click on a different page or refresh it. How or where do I put the render pictures of the girls so I can see that?? |
 Know that there is warmth, love, happiness, kindness and peace in the world. |
XsapphireblueX said: The links doesn't work, but only the clean version of this layout. (Which is on my anime list) But I really wanted the other magical girls to be there in the layout when I click on a different page or refresh it. The CSS links don't work now? When I click them they load fine. For example: https://dl.dropboxusercontent.com/u/78340470/Club%20layouts/Featured/MagicaMadokaBow.css https://dl.dropboxusercontent.com/u/78340470/Club%20layouts/Featured/MagicaRandom.css these are loading fine for me... How or where do I put the render pictures of the girls so I can see that?? ... always read comments in the CSS code for that stuff first. Scroll down and look for secondary background: /* SECONDARY BACKGROUND Goes behind the list but in front of the main background. Image links to a character render in the parenthesis after background. Add or remove the word "contain" (without quotations) after background-size if you want them to be fit or not fit into the entire page. */ #inlineContent { background: url() no-repeat scroll right bottom transparent; background-size: ; display: inline-block !important; height: 100%; left: 0 !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 100%; z-index: -1 !important; } |
| Is there a way to change to color of the shared anime, search, ect. icons in the top right-hand corner? I thought it would be the the lines here... .hide { background-color:rgba(248, 162, 200, 0.701961); background-position:50% 50%; background-repeat:no-repeat no-repeat; background-size:cover; border:1px solid #FFFFFF; border-bottom-left-radius:7px; border-bottom-right-radius:7px; border-top-left-radius:7px; border-top-right-radius:0; display:inline-block !important; height:55px; margin-left:33px; margin-top:-65px; position:absolute; width:35px; } .hide:hover { background-color:transparent; background-repeat:no-repeat no-repeat; background-size:cover; border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:20px; border-top-right-radius:20px; box-shadow:rgba(63, 52, 60, 0.54902) 0 0 8px 8px; margin-left:-140px; padding-right:150px; padding-top:220px !important; position:absolute; z-index:1; } ...but changing them did nothing. Any help would be greatly appreciated |
ona5200 said: Is there a way to change to color of the shared anime, search, ect. icons in the top right-hand corner? I thought it would be the the lines here... .hide { background-color:rgba(248, 162, 200, 0.701961); background-position:50% 50%; background-repeat:no-repeat no-repeat; background-size:cover; border:1px solid #FFFFFF; border-bottom-left-radius:7px; border-bottom-right-radius:7px; border-top-left-radius:7px; border-top-right-radius:0; display:inline-block !important; height:55px; margin-left:33px; margin-top:-65px; position:absolute; width:35px; } .hide:hover { background-color:transparent; background-repeat:no-repeat no-repeat; background-size:cover; border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:20px; border-top-right-radius:20px; box-shadow:rgba(63, 52, 60, 0.54902) 0 0 8px 8px; margin-left:-140px; padding-right:150px; padding-top:220px !important; position:absolute; z-index:1; } ...but changing them did nothing. Any help would be greatly appreciated Thats your pink bar import (top of CSS), you have to take codes from there and write over the changes. Some of those top bar codes can't be written over in the CSS edit box, so if they don't work you have to import them to your list (recently updated topic). |
Shishio-kun said: ona5200 said: Is there a way to change to color of the shared anime, search, ect. icons in the top right-hand corner? I thought it would be the the lines here... .hide { background-color:rgba(248, 162, 200, 0.701961); background-position:50% 50%; background-repeat:no-repeat no-repeat; background-size:cover; border:1px solid #FFFFFF; border-bottom-left-radius:7px; border-bottom-right-radius:7px; border-top-left-radius:7px; border-top-right-radius:0; display:inline-block !important; height:55px; margin-left:33px; margin-top:-65px; position:absolute; width:35px; } .hide:hover { background-color:transparent; background-repeat:no-repeat no-repeat; background-size:cover; border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:20px; border-top-right-radius:20px; box-shadow:rgba(63, 52, 60, 0.54902) 0 0 8px 8px; margin-left:-140px; padding-right:150px; padding-top:220px !important; position:absolute; z-index:1; } ...but changing them did nothing. Any help would be greatly appreciated Thats your pink bar import (top of CSS), you have to take codes from there and write over the changes. Some of those top bar codes can't be written over in the CSS edit box, so if they don't work you have to import them to your list (recently updated topic). OOOOOH, Thanks for the help. Editing just the pictures seem easy enough and since I have it backed up no harm in messing with it. *Edit* Yea very easy, Thank again for your help. |
ona5200Apr 12, 2014 9:26 PM
| So, The alignment on many of the titles is odd, and inconsistent. http://oi61.tinypic.com/2hwmkib.jpg As you can see in the image, some of them appear underneath the images, and some appear just barely to the right of them. Also, the score, started date, and finished date are all out of place. I've tried copying this no tags fix to the top of my CSS code: @import "https://dl.dropboxusercontent.com/u/78340470/Club%20layouts/Featured/MagicaNoTagsFix.css"; But that didn't work either... Does anybody know what could be causing this? |
vigorousjammerApr 24, 2014 6:08 PM
::End of Transmission:: What have I been watching? Click here and find out on my viewing blog, "Vigorous Viewing" |
vigorousjammer said: My guess is that it's caused by the fact that you have different list settings i.e. what to show not all lists support any settings without editing.So, The alignment on many of the titles is odd, and inconsistent. http://oi61.tinypic.com/2hwmkib.jpg As you can see in the image, some of them appear underneath the images, and some appear just barely to the right of them. Also, the score, started date, and finished date are all out of place. I've tried copying this no tags fix to the top of my CSS code: @import "https://dl.dropboxusercontent.com/u/78340470/Club%20layouts/Featured/MagicaNoTagsFix.css"; But that didn't work either... Does anybody know what could be causing this? |
         |
| I've made major updates to all versions of this layout. The most important change is I fixed the annoying glitch (see here) in Google Chrome where you get a gap in your list table when you have too many columns! Plus, there's a NEW version with ALL the magical girls on it, and they appear on their own individual category pages- just click the side buttons to make that girl appear! Improved original versions You can get and reinstall the improved versions of the original layouts from the first page of this topic. I've replaced all the original codes with the updates. New version with all 5 magical girls! 1 magical girl is on her respective category according to what the side buttons show. So if you click the button with Sayaka on it, you'll go to the Sayaka page (dropped anime). I can't add this to the first post since IMG is broken still, so I'll link it here: All the improvements with visual examples: Adding the update to your customized Colorful layouts I know alot of people customize this layout, and there's no patch you can simply add so you get only the improvements and keep your customizations. But in these improved versions, I've moved all the image and color codes to the top of the CSS. So you should have an easy time replacing the images and colors in these improved defaults so they look like your customized version but with all the improvements! Did I miss something? I looked over all these layouts, but let me know if I overlooked something here so I can make the proper changes fast. |
Shishio-kunMay 30, 2014 8:31 PM
| I've created two new manga versions of this layout! Thanks HolyPotato for the manga buttons reskins. New manga version with all 5 magical girls! Each magical girl is in the background for her respective category according to what the side buttons show. So if you click the button with Sayaka on it, you'll go to the Sayaka page (dropped manga). I can't add this to the first post since IMG is broken still, so I'll link it here: Clean manga version A version for manga lists with no magical girl in the background. |
Shishio-kunJun 5, 2014 11:32 AM
Heimdell said: All the links are down for me, can you do something ? Thanks There won't be a alternative place to download the linked layouts in this topic for a bit- but you can get the Madoka ver from the front post (see bottom). And on the front page of the club, is an alternative to the missing covers and toolbar. |
| Hi, I am currently using this layout but some of the import urls are not working (Dropbox error 404/509), particularly the ones for fixed left menu buttons, randomly changing renders and top icon bar, also for the thumbnails. Can anyone please provide a possible fix or alternative source for the css codes? Thank you. (I have generated my own css for the thumbnails using Blink, but have no idea what to do about the others.) |
| Sorry to be a bother,but none of the links are working for me,whenever I click on the link above the screenshot to view the CSS code,it says: Error (404) We can't find the page you're looking for. Check out our Help Center and forums for help, or head back to home. Is it my laptop(i'm using a Chromebook) that isn't letting me see the CSS-code or are the links not working right now? By the way,this layout is so cute and amazing :D |
Seashell-Xion said: Sorry to be a bother,but none of the links are working for me,whenever I click on the link above the screenshot to view the CSS code,it says: Error (404) We can't find the page you're looking for. Check out our Help Center and forums for help, or head back to home. Is it my laptop(i'm using a Chromebook) that isn't letting me see the CSS-code or are the links not working right now? By the way,this layout is so cute and amazing :D No the links are just dead, see Site Problems on the front page top or stickies in the forum for explanation. In the future the links will be restored but I'm updating other topics right now and its real time consuming. You can still get the original Madoka one from the spoiler at the bottom of the first post I believe, and then add the top bar you want from the topbar topic linked on the front page (those are all fixed). The dark pink one used in this layout is there |
Shishio-kun said: Seashell-Xion said: Sorry to be a bother,but none of the links are working for me,whenever I click on the link above the screenshot to view the CSS code,it says: Error (404) We can't find the page you're looking for. Check out our Help Center and forums for help, or head back to home. Is it my laptop(i'm using a Chromebook) that isn't letting me see the CSS-code or are the links not working right now? By the way,this layout is so cute and amazing :D No the links are just dead, see Site Problems on the front page top or stickies in the forum for explanation. In the future the links will be restored but I'm updating other topics right now and its real time consuming. You can still get the original Madoka one from the spoiler at the bottom of the first post I believe, and then add the top bar you want from the topbar topic linked on the front page (those are all fixed). The dark pink one used in this layout is there Oh ok, thank you very much !!! ^_^ |
SpiritHazel said: I can´t find the dropbox page, it´s says Error (404) :S You have to use the spoiler code at the bottom of the OP (see previous posts before yours) and add the render you want. Then add topbars and covers from other topics. Site problems and fixes sticky, and forum index sticky, both also linked on the front page- they'll help with that alot. You need to use those till whenever I update this topic, I would hope after exams (this week). |
| #inlineContent { background: url(http://i.imgur.com/ySWfIXW.png http://i.imgur.com/4M34eu4.png http://i.imgur.com/oRvoKr5.png http://i.imgur.com/AfeIdHX.png http://i.imgur.com/yOyaozk.png http://i.imgur.com/DD77Pw6.png http://i.imgur.com/s6v57lb.png http://i.imgur.com/aRlZg1P.png ) no-repeat scroll right bottom transparent; background-size: ; display: inline-block !important; height: 100%; left: 0 !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 100%; z-index: -1 !important; } Read more at http://myanimelist.net/forum/?topicid=606489#Lk7iDa0o7HLeaPTo.99 can i put multiple link for ramdomly shows ?? |
LouiseWhite said: #inlineContent { background: url(http://i.imgur.com/ySWfIXW.png http://i.imgur.com/4M34eu4.png http://i.imgur.com/oRvoKr5.png http://i.imgur.com/AfeIdHX.png http://i.imgur.com/yOyaozk.png http://i.imgur.com/DD77Pw6.png http://i.imgur.com/s6v57lb.png http://i.imgur.com/aRlZg1P.png ) no-repeat scroll right bottom transparent; background-size: ; display: inline-block !important; height: 100%; left: 0 !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 100%; z-index: -1 !important; } Read more at http://myanimelist.net/forum/?topicid=606489#Lk7iDa0o7HLeaPTo.99 can i put multiple link for ramdomly shows ?? That won't work. But I've fixed up this layout a lot and there are new source links; there's a anime version with the random girl link in the first post you can use |
| I've made a lot of dramatic updates the first post- * new versions of the layouts with working cover and top bar links * links to the layouts are restored * added the links to the manga versions |
| I have modified this layout to change the way the covers pop out, as well as a few other minor things. Modified sections: Full code for reference: Would someone please explain how to move the edit button to the right of the anime title? Or how to make it so that tags display 24 pixels down when logged in and 10 pixels down when logged out? EDIT: changed lines are highlighted in bold |
ixsetfMar 9, 2015 5:51 PM
| I don't have a signature. |
| Um, Maybe a stupid question but how do you take the little mini picture's next to the names of the anime on the list off the code? I would really just like the list as it would be less cluttered. Thanks. |
“To run with the wolf was to run in the shadows, the dark ray of life, survival and instinct. A fierceness that was both proud and lonely, a tearing, a howling, a hunger and thirst. Blessed are they who hunger and thirst. A strength that would die fighting, kicking, screaming, that wouldn't stop until the last breath had been wrung from its body. The will to take one's place in the world. To say 'I am here.' To say 'I am.”  |
Punk434says said: Hi, great tutorial! Never thought I could do anything like this so thank you! One question: How do I change the top right corner of my list? maybe pick something from this topic |
Punk434says said: Think you'll find it here.Thanks! I have one more issue :P After finishing my manga list, most display images of the manga don't show, and for the ones that do show, they are the wrong ones and they're for anime. Could you please help me fix this? |
Pico-tanJan 11, 2016 11:27 AM
|
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 |
7812 |
by mtsRhea
»»
Apr 21, 5:25 AM |
|
» [CSS- MODERN] ⭐ Minimal Dashboard layout by 5cm ~ Compact and convenient! ( 1 2 3 )Shishio-kun - Sep 4, 2020 |
121 |
by Pokitaru
»»
Apr 21, 3:25 AM |
|
» [CSS-MODERN] Change list text/font colors on any list layoutShishio-kun - May 4, 2021 |
3 |
by hideso
»»
Apr 20, 4:33 PM |
|
» [CSS] [VIDEO GUIDE] ⭐️ How to change fonts on a list layoutShishio-kun - Jul 15, 2019 |
17 |
by hideso
»»
Apr 20, 4:03 PM |
|
» [CSS][Modern] ☀️ Endless Summer Layout by Cateinya ( 1 2 3 4 5 ... Last Page )Cateinya - Aug 18, 2016 |
309 |
by hideso
»»
Apr 20, 3:56 PM |