Forum Settings
Forums
New
Reply Disabled for Non-Club Members
Pages (7) « First ... « 3 4 [5] 6 7 »
Jul 23, 2014 11:35 AM
Offline
Jul 2018
561912
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:

  • Change link color.
  • Change top bar menu buttons hover text so it no longer causes scrollbars (more info).
  • Make room for Priority sorting button in the top bar so you can sort your plan to watch list by priority.
  • Center status text (Watching / Completed etc.).
  • Removed status headers for a more clean look (Optional).
  • Resize info boxes on covers, to allow the "Status" info box (Airing, Rewatching) to show without linebreak.
  • Remove max-height from titles, in order to show entire anime/manga title when they have very long titles.
  • Create a "Priority" info box on covers, which will show in your "Plan to Watch" list (make sure you enable the priority column in your list settings).
  • Reposition the category menu (Watching, Completed etc.).
  • Use 1 background that covers the entire screen.
  • Make header area background transparent.
  • Make top bar and cover background semi-transparent.
  • Make the currently selected category slightly more noticeable by using a lighter background.


CSS code (make sure you change the cover generator code):


My tweaks are in the tweaks.css file and the code inside it is documented:


Optional: if you want to keep status headers then remove the following line:


Changelog:
  • August 4th - Remove "Watching" / "Completed" etc. status headers for a more clean look (Optional, remove the nostatus.css import line if you want to keep status headers).
  • July 14th - Fix position of top bar sorting buttons when using "Bar on Right" addon.
removed-userAug 4, 2014 11:40 AM
Jul 23, 2014 12:10 PM

Offline
Feb 2010
12626
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
Offline
Jul 2018
561912
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

Offline
Nov 2012
688
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
Offline
Jul 2018
561912
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

Offline
Nov 2012
688
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
Offline
Jul 2018
561912
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:


After:
removed-userJul 24, 2014 9:12 AM
Jul 24, 2014 9:16 AM

Offline
Nov 2012
688
Holy shit it worked!! Thanks man!!
Jul 24, 2014 9:27 AM
Offline
Jul 2018
561912
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

Offline
Oct 2013
51
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
Offline
Jul 2018
561912
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

Offline
Oct 2013
51
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
Offline
Jul 2018
561912
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

Offline
Oct 2013
51
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
Offline
Jul 2018
561912
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

Offline
Oct 2013
51
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
Offline
Jul 2018
561912
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

Offline
Oct 2013
51
k Will Do :D
Jul 26, 2014 10:49 AM
Offline
Jul 2018
561912
It could also be that your screen resolution is low.
Aug 3, 2014 8:01 AM

Offline
Jan 2013
108
Hey Blazeflack !
Can you make a version without the header ? That'd look awesome !

Nice job man :)
Aug 4, 2014 8:46 AM
Offline
Jul 2018
561912
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

Offline
Jul 2013
196
When new covers will be added and some old ones will be updated?:)
[size=0]
[/size]
Aug 5, 2014 7:26 AM
Offline
Jul 2018
561912
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

Offline
Jul 2013
196
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]
[/size]
Aug 6, 2014 11:52 AM

Offline
Jan 2013
108
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
Offline
Jul 2018
561912
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

Offline
Jan 2013
108
The first CSS didn't work :l I still have this bar
TyrelAug 30, 2014 12:14 PM
Aug 7, 2014 1:41 PM
Offline
Jul 2018
561912
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

Offline
Jan 2013
108
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
Aug 30, 2014 4:36 PM

Offline
Nov 2013
26
(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

Offline
Aug 2013
520
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
not to be rude or anything... but have you read the front page?




Aug 30, 2014 5:47 PM
Offline
Jun 2014
5
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

Offline
Feb 2013
97
Woah, woah, woah, what happened? The layout looks like this now

http://puu.sh/beO2e/d48d6f3986.jpg

Aug 30, 2014 7:40 PM

Offline
Feb 2010
12626
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

Offline
Aug 2014
4095
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

Offline
May 2012
25849
Yea it seems the dropbox links are out, it would be better if you'd upload it to a non limited filehost or something like that, also couldn't they be uploaded to a github repo for easy accessing/updating?
Aug 31, 2014 7:36 AM

Offline
Aug 2013
520
The thing with non-limited ones are that either you pay or you do not have the same controle over your files.




Aug 31, 2014 8:11 AM
Offline
Jul 2018
561912
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

Offline
Feb 2010
12626
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 10:59 AM

Offline
Oct 2013
650
Is there any chance to reupload the css files?
Aug 31, 2014 8:49 PM

Offline
Aug 2014
4095
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

Offline
Jan 2014
9272
What happened to this desing?
~I am just one sadist who supports friends~
Sep 21, 2014 6:45 PM
Offline
Aug 2012
1
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

Offline
Jul 2011
3028
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!.
Sep 21, 2014 11:24 PM

Offline
Aug 2013
520
@last three
The dropbox containing this layout has crashed again. It will fix it self in a few days and shishio is going to look into if he can solve it before then.




Sep 22, 2014 8:38 AM

Offline
Aug 2012
2024
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!"
I never go back on my words... that's my NINDO... MY NINJA WAY!!!
Visit my deviantART Gallery
Sep 22, 2014 8:44 AM

Offline
Aug 2013
520
Marhuto said:
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!"
for the love of god, you read that but not ny reply right after?




Sep 22, 2014 1:27 PM

Offline
May 2012
25849
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

Offline
Feb 2010
12626
@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
Reply Disabled for Non-Club Members
Pages (7) « First ... « 3 4 [5] 6 7 »

More topics from this board

» theme help

threat - 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 Fixes

Shishio-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 Lists

YasminaRegina - 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
It’s time to ditch the text file.
Keep track of your anime easily by creating your own list.
Sign Up Login