New
Jul 23, 2014 11:35 AM
#181
I've been tweaking this layout for my personal taste, and thought I would show you guys how it ended up and also share the code of my tweaks. I use the Japan top bar, dark theme and the long covers addon. How it looks: http://i.imgur.com/J5HSQNL.png List of changes I made:
CSS code (make sure you change the cover generator code): /* Square Layout u531355 - 2012 Anime Style */ /* 1) Generated covers More info on Fellow Writer: http://myanimelist.net/forum/?topicid=1163417 */ @import url(http://mal-fellow-writer.appspot.com/anime/Blazeflack/?covers=http://dl.dropbox.com/u/49469857/MAL/premade/formats/covers/more); /* 2) Base layout */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/style.css); /* 3) Top-bar icons */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/bars/japan/bar.css); /* 4) Layout theme */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/themes/dark/theme.css); /* 5) Addons - Add as many as you want */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/addons/longcovers/addon.css); @import url(https://dl.dropboxusercontent.com/u/176854663/MAL/Square%20Layout/tweaks.css); @import url(https://dl.dropboxusercontent.com/u/176854663/MAL/Square%20Layout/nostatus.css); /* 6) Options */ /* Determines the number of covers on each row, it should be a multiple of 242px */ #mal_control_strip, #list_surround {max-width: 968px;} /* Header picture */ #inlineContent {background-image: url();} /* Default picture when no cover is found */ .hide {background-image: url();} /* Links color */ a {color: rgb(0, 179, 255);} /* More info on Square Layout on http://myanimelist.net/forum/?topicid=459189 */ My tweaks are in the tweaks.css file and the code inside it is documented: /* Layout Tweaks */ /* Fix horizontal scroll on menu buttons START */ #mal_cs_listinfo div a, #mal_cs_links div a, #mal_cs_otherlinks div a { line-height: 16px; overflow-x: visible; overflow-y: visible; white-space: normal; word-wrap: break-word; } /* Fix horizontal scroll on menu buttons END */ /* Make room for "Priority" sorting button START */ .header_cw + table, .header_completed + table, .header_onhold + table, .header_dropped + table, .header_ptw + table { width: 536px; } .table_header:nth-of-type(6) { display: inline; } #searchBox { width: 125px !important; } #mal_cs_powered { left: 536px; } /* Make room for "Priority" sorting button END */ /* Center status header (watching/completed etc.) START */ .header_title { padding-left: 0px; } /* Center status header (watching/completed etc.) END */ /* Resize info boxes on covers START */ .td1:first-of-type, .td2:first-of-type { width: 37px; } .td1 a[title="Anime Information"] + small, .td2 a[title="Anime Information"] + small { position: relative; margin-left: auto; margin-right: auto; left: auto; width: 76px; } .td1:nth-of-type(4)[width="50"], .td2:nth-of-type(4)[width="50"] { width: 37px; } /* Resize info boxes on covers END */ /* Allow long title names without being cut off START */ .animetitle { max-height: none; } /* Allow long title names without being cut off END */ /* Create a "Priority" info box on covers START */ .td1:nth-of-type(6)[width="80"]:before, .td2:nth-of-type(6)[width="80"]:before { content: "Prioritya"; white-space: pre; } .td1:nth-of-type(6)[width="80"], .td2:nth-of-type(6)[width="80"] { top: 40px; left: 11px; width: 37px; text-align: center; display: block; } /* Create a "Priority" info box on covers END */ /* Reposition category menu (watching, complated etc.) START */ #list_surround > table:first-of-type { position: static; top: 462px; margin-left: auto; margin-right: auto; } /* Reposition category menu (watching, complated etc.) END */ /* Fix position of topbar sorting buttons by decreasing right margin when using "Bar on Right" addon START*/ .header_cw + table, .header_completed + table, .header_onhold + table, .header_dropped + table, .header_ptw + table { margin-right: 150px; } /* Fix position of topbar sorting buttons by decreasing right margin when using "Bar on Right" addon END*/ /* Theme Tweaks */ /* Set a global fixed background START */ body { background-image: url(https://dl.dropboxusercontent.com/u/176854663/MAL/Square%20Layout/background2.jpg); background-size: cover; background-attachment: fixed; } /* Set a global fixed background END */ /* Make header background transparent START */ #inlineContent { background-color: rgba(26, 26, 26, 0); border-bottom-color: rgba(1,1,1,0); } /* Make header background transparent END */ /* Make category menu background transparent START */ #list_surround > table:first-of-type { background-color: rgba(0,0,0,0); } /* Make category menu background transparent END */ /* Make background behind covers semi-transparent START */ #list_surround, input[type=text] { background-color: rgba(1,1,1,.4); } /* Make background behind covers semi-transparent END */ /* Make background behind menu bar semi-transparent START */ #mal_control_strip tbody { background-color: rgba(1,1,1,.4); } /* Make background behind menu bar semi-transparent END */ /* Change background color of currently selected category START */ .status_selected { background-color: rgb(33, 33, 33); } /* Change background color of currently selected category END */ Optional: if you want to keep status headers then remove the following line: @import url(https://dl.dropboxusercontent.com/u/176854663/MAL/Square%20Layout/nostatus.css); Changelog:
|
removed-userAug 4, 2014 11:40 AM
Jul 23, 2014 12:10 PM
#182
Oh thats very nice dude. I better tell you before your comment is buried under the member card vote topics lol. I'll try to add it in with these others later! http://myanimelist.net/forum/?topicid=1226163&show=0#post1 |
Jul 23, 2014 3:05 PM
#183
Shishio-kun said: Oh thats very nice dude. I better tell you before your comment is buried under the member card vote topics lol. I'll try to add it in with these others later! http://myanimelist.net/forum/?topicid=1226163&show=0#post1 Cool, didn't know that thread existed until now. Thanks for pointing me to it :) |
Jul 23, 2014 10:55 PM
#184
Yea your tweaks look awesome! If I add that on to what I have now it would fit perfectly. |
Jul 24, 2014 5:58 AM
#185
Aichiro said: Yea your tweaks look awesome! If I add that on to what I have now it would fit perfectly. Thanks :). There was a small placement issue when using "Bar on Right" and I noticed you use that in your list. I have fixed the issue now though so you should be good to go :) |
Jul 24, 2014 7:19 AM
#186
Lol thanks man!! I was trying to fix it for like an hour last night thinking my font sizes where the problem. Edit: Wait Nvm my problem is different for everthing else is perfect it's just I can't figure out what's causing this: http://i.imgur.com/83bxhpW.png It's probably something on my end. |
AichiroJul 24, 2014 7:28 AM
Jul 24, 2014 8:50 AM
#187
Aichiro said: Lol thanks man!! I was trying to fix it for like an hour last night thinking my font sizes where the problem. Edit: Wait Nvm my problem is different for everthing else is perfect it's just I can't figure out what's causing this: http://i.imgur.com/83bxhpW.png It's probably something on my end. It seems to be caused by an edit you made in theme.css You added font-family: 'Aladin',cursive; font-size: 15px; font-weight: normal; to #mal_cs_listinfo div a, #mal_cs_links div a, #mal_cs_otherlinks div a, .table_headerLink, .status_not_selected, .header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw, .category_totals, #grand_totals, #copyright { You never noticed the issue yourself because the text was being kept in the center, so it didn't show. But looking at your manga list the issue is clear for visitors: I'm looking into a fix for you. I also noticed your bar is now positioned to the far left in your anime list, causing some issues with your sorting buttons, but that must be from you playing around with the code I guess? Edit: To fix the text issue you should move your custom code font-family: 'Aladin',cursive; font-size: 15px; font-weight: normal; Before: #mal_cs_listinfo div a, #mal_cs_links div a, #mal_cs_otherlinks div a, .table_headerLink, .status_not_selected, .header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw, .category_totals, #grand_totals, #copyright { background-color: rgb(26, 26, 26); background-image: -moz-linear-gradient(center top , rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%); font-family: 'Aladin',cursive; font-size: 15px; font-weight: normal; } #mal_cs_listinfo div a:hover, #mal_cs_links div a:hover, #mal_cs_otherlinks div a:hover, .table_headerLink:hover, .status_not_selected:hover { background-image: -moz-linear-gradient(center bottom , rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%); } After: #mal_cs_listinfo div a, #mal_cs_links div a, #mal_cs_otherlinks div a, .table_headerLink, .status_not_selected, .header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw, .category_totals, #grand_totals, #copyright { background-color: rgb(26, 26, 26); background-image: -moz-linear-gradient(center top , rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%); } #mal_cs_listinfo div a:hover, #mal_cs_links div a:hover, #mal_cs_otherlinks div a:hover, .table_headerLink:hover, .status_not_selected:hover { background-image: -moz-linear-gradient(center bottom , rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%); font-family: 'Aladin',cursive; font-size: 15px; font-weight: normal; } |
removed-userJul 24, 2014 9:12 AM
Jul 24, 2014 9:27 AM
#189
Happy to help, glad you liked my changes. I noticed you don't have the "Priority" sorting button visible, but it looks like you have made your own edit to enable the "Rated" sorting instead? Edit: Nvm, the reason you have the "Rated" sorting button instead of "Priority" is because you have enabled the "Rating" column instead of "Priority" in your list settings. |
removed-userJul 24, 2014 9:37 AM
Jul 25, 2014 6:19 AM
#190
I Seem To Have A Problem With This Layout. :| Same Goes For All The Other Layouts Here's The Images ---> Anyone Know The Problem? :/ |
Jul 25, 2014 7:25 AM
#191
You haven't told us what the problem is. What you think is a problem may not be thought of as a problem for us. Describe your issue in detail, that way people will be able to help you. |
Jul 25, 2014 9:41 AM
#192
I Installed 2-3 Different Layouts But They Don't Appear Properly As Shown In The Pics That Were Made By The Person. Look At The Above Pics. There Should Be 5 Columns In The Layout But I Only See 3. The Header Is Not In The Middle, Lelouch's Photo Is Bigger Than It Should Appear. In Another Layout I Couldn't See The Buttons That Were To Direct Me To Watching, Completed...... After I Zoomed Out I Could See The Buttons. In Another Layout The Anime Lists Came Behind The Buttons. Even After I Resized The Anime List It Didn't Have Borders In The End = Half Complete. In Another Layout It Fit Perfectly Except For The Buttons. The Buttons Came Above The Top Bar. If You Want I Can Add Images And Show You The Problem :| |
Jul 25, 2014 10:35 AM
#193
Read the first post in this thread and take special note to step 6. It explains how you get different amount of pictures per row. To make the status header text be centered, add the following css: .header_title { padding-left: 0px; } I don't know what you mean by "Lelouch's Photo Is Bigger Than It Should Appear." |
Jul 25, 2014 10:47 AM
#194
Thanks For The Helping The Head Problem :D Shouldn't Lelouch's Pic Look Like This? ---> https://dl.dropboxusercontent.com/u/49469857/MAL/premade/square/addons/baronright/preview.jpg Instead Of Looking Like This? http://i.imgur.com/sxOGt7s.jpg |
Jul 25, 2014 12:36 PM
#195
I'm still not sure what you're talking about. Do you mean the top bar being positioned further to the right? If so then you should read the first post again, it covers that too. If you mean it is zoomed in, then that is something you did in your browser. Reset the zoom back to default to make it look like it should. |
Jul 25, 2014 8:32 PM
#196
This Is How It Looks When I Zoom Out To 50% ---> This Is How It Look When Zoom Is In Default ---> |
Jul 26, 2014 6:32 AM
#197
Well your list looks fine on my end, so it has to be something you did in your own browser. This is getting off topic though, you don't really need help with the Square Layout but rather need help resetting your zoom level in your browser. I suggest you google around for a solution related to your choice of browser. |
removed-userJul 26, 2014 8:26 AM
Jul 26, 2014 7:35 AM
#198
k Will Do :D |
Jul 26, 2014 10:49 AM
#199
It could also be that your screen resolution is low. |
Aug 3, 2014 8:01 AM
#200
Hey Blazeflack ! Can you make a version without the header ? That'd look awesome ! Nice job man :) |
Aug 4, 2014 8:46 AM
#201
You mean without the "Watching" / "Plan to Watch" status at the top of the images section? I like that it looks cleaner without the status headers, so I'm going to use that myself as well. It will be in a separate file so people who want to keep the status headers can choose to not import this file. Add the following code below the tweaks.css import: @import url(https://dl.dropboxusercontent.com/u/176854663/MAL/Square%20Layout/nostatus.css); How it looks now: http://i.imgur.com/J5HSQNL.png I edited my original post to reflect this change: http://myanimelist.net/forum/?topicid=459189&show=180#msg32872265 If this wasn't what you had in mind then let me know, I can probably accommodate your request through an "addon" css file. |
removed-userAug 4, 2014 11:09 AM
Aug 5, 2014 6:05 AM
#202
When new covers will be added and some old ones will be updated?:) |
[size=0] |
Aug 5, 2014 7:26 AM
#203
SViper said: When new covers will be added and some old ones will be updated?:) You should consider generating your own covers. Fellow Writer is a really awesome tool, removing the hassle of manually updating your code. From the Fellow Writer thread: Which means everybody can use the following to generate his covers with the more selector: @import url(http://mal-fellow-writer.appspot.com/type/username/?covers=http://dl.dropbox.com/u/49469857/MAL/premade/formats/covers/more); Replace "type" and "username" in that code: type is either "anime" or "manga" without quotes username is your MAL username |
removed-userAug 5, 2014 7:29 AM
Aug 5, 2014 8:26 AM
#204
Blazeflack said: SViper said: When new covers will be added and some old ones will be updated?:) You should consider generating your own covers. Fellow Writer is a really awesome tool, removing the hassle of manually updating your code. From the Fellow Writer thread: Which means everybody can use the following to generate his covers with the more selector: @import url(http://mal-fellow-writer.appspot.com/type/username/?covers=http://dl.dropbox.com/u/49469857/MAL/premade/formats/covers/more); Replace "type" and "username" in that code: type is either "anime" or "manga" without quotes username is your MAL username Thanks:) |
SViperAug 5, 2014 8:42 AM
[size=0] |
Aug 6, 2014 11:52 AM
#205
My bad Blazeflack I should have been more specific ._. Sorry ... I meant the animetitle-score-type-progress-... bar a the top. Again sorry for the misunderstanding. |
Aug 7, 2014 8:13 AM
#206
Hazanka said: My bad Blazeflack I should have been more specific ._. Sorry ... I meant the animetitle-score-type-progress-... bar a the top. Again sorry for the misunderstanding. Oh so you want it completely gone? Simply add the following CSS at the bottom of your code: #mal_control_strip, .header_cw + table, .header_completed + table, .header_onhold + table, .header_dropped + table, .header_ptw + table { display:none; } If you would like to move the image section further up now, add the following code as well: #list_surround { margin-top: 200px; } You can use any value you want, the higher the value the lower on the screen the image section will be. |
Aug 7, 2014 12:57 PM
#207
The first CSS didn't work :l I still have this bar |
TyrelAug 30, 2014 12:14 PM
Aug 7, 2014 1:41 PM
#208
Hazanka said: The first CSS didn't work :l I still have this bar Then the CSS wasn't added properly. Can you post your entire CSS box from MAL? |
Aug 7, 2014 2:21 PM
#209
mmmm nevermind :p I kinda like it the way it is right now :D Sorry but I have a little question :p How can I redefine the default section (Currently watching, Onhold...) that is shown when people visit my list ? |
HazankaAug 7, 2014 4:24 PM
Aug 7, 2014 4:41 PM
#210
In your list settings: http://myanimelist.net/editprofile.php?go=listpreferences |
Aug 30, 2014 4:36 PM
#211
(sorry if my english is bad) Hi, I have this Layout for months, but today it looks strange: https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-xpf1/v/t35.0-12/10614875_900808873266053_1076205898_o.jpg?oh=a558ec5b4b4fc7ec4cfa4009681b233d&oe=5403B841&__gda__=1409537873_58dc8c1c852e2461970db74574ac7f1b And I dont know why. I was trying to relog my account, different Internet browser, but it still looks like this... Can you help me please? Again.. sorry for englužr skill My friends have the same problem |
Aug 30, 2014 5:25 PM
#212
RadenCZ said: not to be rude or anything... but have you read the front page?(sorry if my english is bad) Hi, I have this Layout for months, but today it looks strange: https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-xpf1/v/t35.0-12/10614875_900808873266053_1076205898_o.jpg?oh=a558ec5b4b4fc7ec4cfa4009681b233d&oe=5403B841&__gda__=1409537873_58dc8c1c852e2461970db74574ac7f1b And I dont know why. I was trying to relog my account, different Internet browser, but it still looks like this... Can you help me please? Again.. sorry for englužr skill My friends have the same problem |
Aug 30, 2014 5:47 PM
#213
At the time of this post images from the Dropbox are NOT working. Message when trying to access files in the css: Error (509) This account's public links are generating too much traffic and have been temporarily disabled! |
smashdex5Aug 30, 2014 6:50 PM
Aug 30, 2014 6:11 PM
#214
Woah, woah, woah, what happened? The layout looks like this now http://puu.sh/beO2e/d48d6f3986.jpg |
Aug 30, 2014 7:40 PM
#215
Bradherley said: Woah, woah, woah, what happened? The layout looks like this now http://puu.sh/beO2e/d48d6f3986.jpg Looks like U5's dropbox crashed too, thats where he was holding Square layout codes that can't be hosted on MAL. |
Aug 30, 2014 7:41 PM
#216
RadenCZ said: (sorry if my english is bad) Hi, I have this Layout for months, but today it looks strange: https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-xpf1/v/t35.0-12/10614875_900808873266053_1076205898_o.jpg?oh=a558ec5b4b4fc7ec4cfa4009681b233d&oe=5403B841&__gda__=1409537873_58dc8c1c852e2461970db74574ac7f1b And I dont know why. I was trying to relog my account, different Internet browser, but it still looks like this... Can you help me please? Again.. sorry for englužr skill My friends have the same problem The fixes for poster don't work for square layout. Also I tried switching to other layouts and it seems others also have their problems as well. |
Aug 31, 2014 7:15 AM
#217
Aug 31, 2014 7:36 AM
#218
Aug 31, 2014 8:11 AM
#219
When U5 re-posts the links, you should download and host them in your own dropbox and then import those files in your layout. That will at least safeguard you from any future issues of this kind. |
Aug 31, 2014 9:15 AM
#220
Nanet said: RadenCZ said: (sorry if my english is bad) Hi, I have this Layout for months, but today it looks strange: https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-xpf1/v/t35.0-12/10614875_900808873266053_1076205898_o.jpg?oh=a558ec5b4b4fc7ec4cfa4009681b233d&oe=5403B841&__gda__=1409537873_58dc8c1c852e2461970db74574ac7f1b And I dont know why. I was trying to relog my account, different Internet browser, but it still looks like this... Can you help me please? Again.. sorry for englužr skill My friends have the same problem The fixes for poster don't work for square layout. Also I tried switching to other layouts and it seems others also have their problems as well. Poster fixes aren't supposed to be for this layout, they're two completely different ones although look similar (we both made them independently from nothing and use different files). |
Aug 31, 2014 8:49 PM
#222
Great, it looks like the format seems to be back up. However, the header picture seems to be missing. Any fix? EDIT: Nevermind, it fixed on it's own! I am a happy ducky. |
EnharmonicAug 31, 2014 8:59 PM
Sep 21, 2014 6:33 PM
#223
What happened to this desing? |
~I am just one sadist who supports friends~ |
Sep 21, 2014 6:45 PM
#224
I'm sorry if the answer is somewhere obvious But I've been looking around and I cant seem to find a solution to fix my list I can't say I've had any problems with it The covers although do take there time to update and as of late just disappear for some of them Well today the list is just a mess I tried to update the covers But it seems the layout is also pretty busted Again my bad if the solution is already out there Here's how it looks right now http://i.imgur.com/L2gUOZ0.png Here's the code thingy [ spoiler]/* Square Layout u531355 - 2012 */ /* 1) Generated covers */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/anime.css); /* 2) Base layout */ @import url(http://dl.dropboxusercontent.com/s/fpu26kravwjvjhg/style.css); /* 3) Top-bar icons */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/bars/japan/bar.css); /* 4) Layout theme */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/themes/dark/theme.css); /* 5) Addons - Add as many as you want */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/addons/longcovers/addon.css); /* 6) Options */ /* Determines the number of covers on each row, it should be a multiple of 242px */ body {max-width: 1452px;} /* Header picture NO NEED TO EDIT*/ #inlineContent {background-image: url(http://i.imgur.com/v6TuxE6.jpg);} /* Background Image */ body {background-image:url(http://i.imgur.com/AUIAcsS.png);} /* Default picture when no cover is found */ .hide {background-image: url();} /* Links color */ a {color: rgb(255, 255, 255);} /* More infos on http://myanimelist.net/forum/?topicid=459189 */ [/ spoiler] |
Sep 21, 2014 11:10 PM
#225
Sep 21, 2014 11:24 PM
#226
Sep 22, 2014 8:38 AM
#227
MoonXArtemis said: were the codes erased?? i just read on the style before I changed it that i had to save the files on my own drop box...can u please reupload them so I can do that. I only noticed that now. Thanks!. Same here... pls I will import the CSS from my Dropbox. It reads that, "This account's public links are generating too much traffic and have been temporarily disabled!" |
Sep 22, 2014 8:44 AM
#228
Marhuto said: for the love of god, you read that but not ny reply right after?MoonXArtemis said: were the codes erased?? i just read on the style before I changed it that i had to save the files on my own drop box...can u please reupload them so I can do that. I only noticed that now. Thanks!. Same here... pls I will import the CSS from my Dropbox. It reads that, "This account's public links are generating too much traffic and have been temporarily disabled!" |
Sep 22, 2014 1:27 PM
#229
Oiomi-chan said: The thing with non-limited ones are that either you pay or you do not have the same control over your files. Github is completely free and you've got complete control on what you upload and what can be downloaded. It's far better than dropbox and also far more secure, so it should really be considered to be honest! Sitenote: It's also way faster than dropbox. |
Sep 22, 2014 7:27 PM
#230
@all: Check the front page (find the Lelouch pic) for an alternative code of the Square layout (basically the same style) to use in the meantime or if this layout ever crashes again. Since it doesn't use dropbox links for the layout CSS it won't crash. The covers are the only part that use a public dropbox llnk, and you can make your own (also mentioned on front page): http://myanimelist.net/clubs.php?cid=19736 |
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 |