Forum Settings
Forums
Pages (2) [1] 2 »
Must be a Club Member to Reply 
#1
Mar 11, 2012 11:59 AM

Offline
Joined: Feb 2010
Posts: 4432
This layout is custom CSS. If you don't know how to install it, use the easy starter tutorial: Beginner's Tutorial

For more layouts check the Full list of Premade Layouts.

More useful topics: All CSS tutorials * Fixing or changing covers * Changing headers



This easy-to-use layout by Veriti is one of the most popular premade layouts on MAL! The code for each layout type is linked below.

Steins;Gate (anime lists)


Code: http://pasted.co/899233d6


Madoka Magica (anime lists)


Code: http://pasted.co/2210d2fe


Itsuka Tenma no Kuro Usagi (manga lists)
An edited version by Miketsukami-kun.


Code: http://pasted.co/c83dd061



Fixes for broken 2015 layouts




Changing the color of the topbar or list tables

You can change the color under TOP BAR SETTINGS and ROW COLORS and change the settings after background-color.

If the color codes are unfamiliar to you, you can easily pick new colors here:
http://www.css3maker.com/css-3-rgba.



Using the anime list style on a manga list

.status_not_selected a, .status_selected a {
background-image: url("http://i.imgur.com/4rtZb.png");
}

.header_title {
background-image: url("http://i.imgur.com/qNxEE.png");
}


You can add these codes to the bottom of your CSS to add the manga headers and bottom bar to the anime list style layout, making it manga-appropriate.


If the headers are too dark for your layout style, you can try this re-colored headers by Andun:
.status_not_selected a, .status_selected a {
background-image: url("http://i.imgur.com/4rtZb.png");
}

.header_title {
background-image: url("http://i.imgur.com/O3wuXFA.png");
}
Modified by Shishio-kun, Dec 31, 2015 6:55 PM
 
#2
Mar 12, 2012 4:18 PM

Offline
Joined: Aug 2010
Posts: 1641
Nice Layout!
 
#3
Mar 23, 2012 6:21 AM

Offline
Joined: Sep 2011
Posts: 220
It's really cool layout. I made manga list based on this anime list layout althought I still have to do a new image for the links since it says watching and not reading.
This is how it looks like, the background is from Itsuka Tenma no Kuro Usagi.
 
#4
Mar 23, 2012 7:12 AM

Offline
Joined: Nov 2011
Posts: 303
@ Miketsukami

You can use one I made:
http://s006.radikal.ru/i215/1203/3d/e55cca9f51ff.png

I was just too lazy to adjust headers 'cause I forgot to save PSD of 'em lol
 
#5
Mar 23, 2012 8:48 AM

Offline
Joined: Sep 2011
Posts: 220
@VeriTi

Thanks, I'll use it.
 
#6
Mar 23, 2012 11:17 AM

Offline
Joined: Feb 2010
Posts: 4432
 
#7
Apr 20, 2012 4:34 PM
 
#8
Apr 20, 2012 10:47 PM

Offline
Joined: Nov 2011
Posts: 303
I have also made a manga version a while ago, preserving my original style and theme:
http://pastebin.com/QbgKta17
 
#9
Apr 20, 2012 11:43 PM
 
May 27, 2012 2:39 PM
Forum Moderator
Offline
Joined: Apr 2010
Posts: 7415
Nice list decided to use it for my manga list as well but ran into a few problems while editing it.
I changed the background and refitted the list to the the right side and changed the width to 550px.
The first problem i got is that the headers at the bottom need to be adjusted in width as well.
How do i change it and is it even possible?
The second problem is that when i scroll up the list goes over the menu bar at the top.
Here i image of what i mean.
I think i put the code for changing the list size at the wrong place which is at the bottom of the CCS code.
 
May 28, 2012 5:02 AM

Offline
Joined: Nov 2011
Posts: 303
@ Aversa
The second problem can be fixed just by:
#mal\_control\_strip{z-index:100}

The first one is much worse to deal with. The problem is that my layout was designed with centered 950px width block in mind and this is specified in "math part" so you have to make a lot of changes here and re-import this part. Also you'll probably have to make a navigation pane sprite for these specs by yourself because mine is, yes, 1000px wide
 
May 28, 2012 11:00 AM
Forum Moderator
Offline
Joined: Apr 2010
Posts: 7415
VeriTi said:
@ Aversa
The second problem can be fixed just by:
#mal_control_strip{z-index:100}

The first one is much worse to deal with. The problem is that my layout was designed with centered 950px width block in mind and this is specified in "math part" so you have to make a lot of changes here and re-import this part. Also you'll probably have to make a navigation pane sprite for these specs by yourself because mine is, yes, 1000px wide
The second problem is solved thank you for the help.

The first one sounds pretty hard but i noticed a link from you with a explanation about sprite and also a link to a page called Spriteme.
Which had a add-on for sprites and a demo on how it works.
So i will try making my own or try editing yours.

Thank you for your reaction.
 
May 28, 2012 11:56 AM

Offline
Joined: Apr 2009
Posts: 159
Maybe you can just add this:
#list_surround br + :nth-child(2) {left: 50px;}
or this:
#list_surround br + :nth-child(2) {right: 25px;}
So you don't resize the headers but still see all of it
Modified by u531355, May 28, 2012 12:01 PM
 
Jun 12, 2012 5:24 PM
Offline
Joined: Jan 2010
Posts: 17
Looks amazing!
 
Jul 11, 2012 9:34 PM

Offline
Joined: Dec 2011
Posts: 1384
Thank you.

Modded it so it has an Eureka Seven bg. :D
 
Jul 12, 2012 9:16 AM

Offline
Joined: Mar 2009
Posts: 132
Beautiful! I want to use the Steins Gate style, But i have a problem :(. When i clic On Hold, Watching, etc. the page reloads again. :( Same problem with the Mahou one :(
 
Jul 16, 2012 6:07 PM

Offline
Joined: Feb 2010
Posts: 4432
Maguita said:
Beautiful! I want to use the Steins Gate style, But i have a problem :(. When i clic On Hold, Watching, etc. the page reloads again. :( Same problem with the Mahou one :(


Hmm I can't think of any reason but if you put the Steins Gate layout back up on your list we can look at it. I'm sure it'll be fixable!
 
Jul 17, 2012 2:35 PM

Offline
Joined: Mar 2009
Posts: 132
Ok, i´ll put it back now. Thank You!
Modified by Maguita, Jul 17, 2012 2:42 PM
 
Jul 17, 2012 5:29 PM

Offline
Joined: Feb 2010
Posts: 4432
Maguita said:
Ok, i´ll put it back now. Thank You!


Sorry but when I click on the links I didn't see it reloading, so it must be something only you're seeing. Does it reload just once or multiple times or go back to the page it was just on? Do any other layouts do this?

Maybe log in and out, or mess around with your http://myanimelist.net/editprofile.php?go=listpreferences settings and see if anything clears it up! Also it might be something to do with your browser or computer. Sorry its hard to know!
 
Jul 17, 2012 8:55 PM

Offline
Joined: Mar 2009
Posts: 132
Just once and it happens with the other layouts too :(. Only the classic Miku Style works good :(. Thanks anyway Shishio!! :) I´ll see what i can do :)

By the way, i was going to ask you how to add borders to my actual list and found that info in the Customize Your List post! Thank You for all your tutorials and all! great job Shishio!

Now let´s see if i can do something with my super ugly headers :P
Modified by Maguita, Jul 18, 2012 6:09 AM
 
Jul 19, 2012 6:19 AM

Offline
Joined: Feb 2010
Posts: 4432
Maguita said:
Just once and it happens with the other layouts too :(. Only the classic Miku Style works good :(. Thanks anyway Shishio!! :) I´ll see what i can do :)

By the way, i was going to ask you how to add borders to my actual list and found that info in the Customize Your List post! Thank You for all your tutorials and all! great job Shishio!

Now let´s see if i can do something with my super ugly headers :P


Hmm I wish I knew why it reloads, the layouts are not supposed to do that. Does it reload back to the previous page or stay on the right category? Maybe you can try to narrow it down by shutting off programs on your com temporally like the MAL updater to see if that causes it, if you can't narrow it down to a browser doing the problem. Restart your com after you do that tho, cuz it can cause funny issues..
 
Jul 23, 2012 11:49 PM

Offline
Joined: Nov 2011
Posts: 753
The list takes about 4 or 5 seconds to load due to the import. Is there any way to speed it up?
 
Jul 24, 2012 12:22 AM

Offline
Joined: Feb 2010
Posts: 4432
AzureBlues said:
The list takes about 4 or 5 seconds to load due to the import. Is there any way to speed it up?


There are slow and down times, plus it depends on your internet speed and distance from where the import is hosted. Did you try to make your own import for it? Then you can load it from your own Dropbox or something.
 
Jul 24, 2012 12:48 AM

Offline
Joined: Nov 2011
Posts: 753
Shishio-kun said:
AzureBlues said:
The list takes about 4 or 5 seconds to load due to the import. Is there any way to speed it up?


There are slow and down times, plus it depends on your internet speed and distance from where the import is hosted. Did you try to make your own import for it? Then you can load it from your own Dropbox or something.

I ended up doing that and the wait time dropped considerably, thanks!
Although there is still a brief delay, do you have any other tips for optimizing the code? I made very little modifications to the original.
I was also thinking of making the list itself wider, as I want to keep the drop down images but they clip with the titles. I tried increasing the width of the list but I was not able to expand the bar on the bottom so it looked asymmetrical.
Modified by AzureBlues, Jul 24, 2012 1:39 AM
 
Jul 27, 2012 2:53 PM

Offline
Joined: Feb 2010
Posts: 4432
AzureBlues said:
Shishio-kun said:
AzureBlues said:
The list takes about 4 or 5 seconds to load due to the import. Is there any way to speed it up?


There are slow and down times, plus it depends on your internet speed and distance from where the import is hosted. Did you try to make your own import for it? Then you can load it from your own Dropbox or something.

I ended up doing that and the wait time dropped considerably, thanks!
Although there is still a brief delay, do you have any other tips for optimizing the code? I made very little modifications to the original.
I was also thinking of making the list itself wider, as I want to keep the drop down images but they clip with the titles. I tried increasing the width of the list but I was not able to expand the bar on the bottom so it looked asymmetrical.


I don't have any tips for that except to host it yourself as you did, I think its perfect how it is. You could mess around with the transition time and type on the DVD display to make it look smoother if thats something youre after.
 
Jul 30, 2012 3:47 AM

Offline
Joined: Nov 2011
Posts: 303
@ AzureBlues
Merge all @imports (except for anime titles) and current code into a single CSS file and then use service like http://www.csscompressor.com/ or http://www.generateit.net/css-optimize/ for compressing CSS. It should help (the results will depend on internet speed a lot though)
 
Aug 20, 2012 6:04 PM
Offline
Joined: Nov 2010
Posts: 8
Cool list!!
 
Sep 3, 2012 11:48 AM

Offline
Joined: Jul 2009
Posts: 2
Hello! I am new here and my list changed a lot thanks to you guys. I have a question. In the CSS of this layout header titles are one picture.

.header_title {
background-image: url("http://i.imgur.com/GZWCk.png");
}

Where are you define what part of picture should be used. I want to make my own titles so can you tell me somethink more about it.
 
Sep 3, 2012 11:56 PM

Offline
Joined: Jul 2008
Posts: 1515
Delanov said:
Hello! I am new here and my list changed a lot thanks to you guys. I have a question. In the CSS of this layout header titles are one picture.

.header_title {
background-image: url("http://i.imgur.com/GZWCk.png");
}

Where are you define what part of picture should be used. I want to make my own titles so can you tell me somethink more about it.


well there are 2 ways one would be spliting up the headers and linking individually
or
using the provided and add this into ur code
/* This is the MATH part of the layout. Don't touch it unless you know what you're doing */
@import url(http://veriti.opendrive.com/files/OV81MjgxODZfN0NiSlU/mal_general.css);

inside is the stuff defines what to parts to use

zZz correct me if im wrong , im bad @ this
 
Sep 7, 2012 2:30 PM

Offline
Joined: Jun 2012
Posts: 400
I really really appreciate this, but I just have one question. At the bottom of the list where it says "tv: 10 ONA: 3" and on, is there a way to change the color scheme or something on that, it makes me feel like i'm watching a 3d movie without glasses, haha.

 
Sep 7, 2012 2:59 PM

Offline
Joined: Feb 2010
Posts: 4432
Arakura said:
I really really appreciate this, but I just have one question. At the bottom of the list where it says "tv: 10 ONA: 3" and on, is there a way to change the color scheme or something on that, it makes me feel like i'm watching a 3d movie without glasses, haha.


Its a text shadow effect. This should remove it (add to the bottom of your CSS edit box):

.category_totals {
text-shadow: none !important;
}
 
Sep 7, 2012 11:08 PM

Offline
Joined: Jun 2012
Posts: 400
Ok thanks so much

 
Sep 11, 2012 11:07 PM

Offline
Joined: Jun 2012
Posts: 693
Hello Shishio, thanks for this awesome CSS layout.
Could I have your help? I used this layout for a while, but some hours ago, as you can see from this link, it stopped working and not it's a mess:
http://myanimelist.net/animelist/Wallace93
The buttons don't show anymore, and the background image is bugged.
How can I solve this? I didn't touch nothing in the CCS menu.. Thanks for the help.
 
Sep 12, 2012 12:10 AM

Offline
Joined: Apr 2012
Posts: 182
Is the import of the VeriTi's open drive, 'cause not only your list but all with the top bar and the category menu bar import.
 
Oct 19, 2012 1:44 PM

Offline
Joined: Jun 2012
Posts: 400
Yea, this is broken (Is that the word...?)

You are probably right abou the open drive because nothing else changed about the code, it just messed up, so it must have been an external sourcing issue

 
Nov 18, 2012 12:37 AM
Offline
Joined: May 2012
Posts: 20
Shishio-kun said:
AzureBlues said:
The list takes about 4 or 5 seconds to load due to the import. Is there any way to speed it up?


There are slow and down times, plus it depends on your internet speed and distance from where the import is hosted. Did you try to make your own import for it? Then you can load it from your own Dropbox or something.


Is there an easy way to do this? I have great internet speed yet it takes me like 15 seconds to load up my list.
 
Nov 18, 2012 3:52 AM

Offline
Joined: Nov 2011
Posts: 303
xXl337KiLLeRX said:
Is there an easy way to do this? I have great internet speed yet it takes me like 15 seconds to load up my list.

I wrote a dropbox tutorial, it's here, so use it to import all of your stylesheet. Then look at it and find two lines:
@import url(http://veriti.opendrive.com/files/OV81MjgxODZfN0NiSlU/mal_general.css);
@import url(http://veriti.opendrive.com/files/OV81MjgxODdfcXZZMkg/mal_top_bar.css);

Replace each of these lines with contents of the text file you'll find when you open each link.
 
Nov 24, 2012 11:22 PM
Offline
Joined: May 2012
Posts: 20
 
Nov 25, 2012 2:02 AM

Offline
Joined: Nov 2011
Posts: 303
@xXl337KiLLeRX
Works for me 100% good, what's the issue you have?
 
Nov 25, 2012 12:45 PM
Offline
Joined: May 2012
Posts: 20
VeriTi said:
@xXl337KiLLeRX
Works for me 100% good, what's the issue you have?


Seems like it got fixed before you saw my list because my list is woking again now. It was the same thing that happened before, the whole list got super
long
What happened in the past with Wallace:
Wallace93 said:
Hello Shishio, thanks for this awesome CSS layout.
Could I have your help? I used this layout for a while, but some hours ago, as you can see from this link, it stopped working and not it's a mess:
http://myanimelist.net/animelist/Wallace93
The buttons don't show anymore, and the background image is bugged.
How can I solve this? I didn't touch nothing in the CCS menu.. Thanks for the help.
 
Nov 25, 2012 1:04 PM

Offline
Joined: Feb 2012
Posts: 44
using it and love it:)
thank you!
 
Dec 20, 2012 4:41 PM

Offline
Joined: Feb 2010
Posts: 4432
It seems the import links at the top died for some reason. They may come back in the future but for now replace those top four lines of code (seen here)..



Delete and replace those lines of code with these, and keep them at the top too:


/* Math part of the layout, don't change unless you know what you're doing */
@import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/MahouCSS.css";
/* Top bar */
@import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css";


It should fix it plus it will have less lag issues, since its Dropbox not Opendrive which tends to have some downtime now and then. The fix is for people using the manga list version as well!
 
Dec 20, 2012 4:48 PM
Offline
Joined: Jul 2012
Posts: 543
thank you
 
Jan 6, 2013 12:43 AM
Tranquillo

Offline
Joined: Feb 2012
Posts: 2708
Is there any way to shift the list to left without making the links on the top bar unusable. I already made the list width smaller but every time I try to shift the list to left the links on the top bar become unusable.

Edit: Never mind just saw one of the earlier post on the first page.
Modified by Rainmaker, Jan 6, 2013 1:07 AM
 
Oct 6, 2013 11:09 AM
Offline
Joined: Jul 2013
Posts: 35
Right now Im trying to edit this background but I can't seem to change the wallpaper. I want to use everything on this layout but I want to change the wallpaper to something else but I don't know how any helps?

http://myanimelist.net/animelist/Extalias

This is my code right now trying to change the background please tell me if something I did is wrong
 
Oct 6, 2013 11:49 AM

Offline
Joined: Feb 2010
Posts: 4432
The line in bold below was edited from what it originally was and is now interfering with your background-image code, so just delete it. Should work after that.

taken from the top of your css
/* Math part of the layout, don't change unless you know what you're doing */
@import "https://dl.dropboxusercontent.com/u/78340470/anime.css";
@import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css";
@import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/MahouCSS.css";
/* Top bar */
@import "https://dl.dropbox.com/s/8vjos6cpj8yo4ek/RedTopBar.css";
@import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css";

body{
/Set up a background image:
background-image: url(http://i.imgur.com/YmsakKF.jpg);

/* Set up a point of transformation. This is the point
* of image that should always be at the top and
* preserve it's location at these offsets.
* If you don't understand how it works, 50% 50% should
* be ok in most cases. Default: point to Okabe's face.
*/
background-position: 60% 18%;
 
Feb 2, 2014 4:26 PM
Offline
Joined: Sep 2013
Posts: 9
Just wanted to inform you that your dropbox account got temporarily disabled due to high traffic on your public files, so the layout looks pretty weird now. ^^
 
Feb 2, 2014 6:30 PM

Offline
Joined: Feb 2010
Posts: 4432
Ladyfingers said:
Just wanted to inform you that your dropbox account got temporarily disabled due to high traffic on your public files, so the layout looks pretty weird now. ^^


Should be fixed now. I changed the links and they un-suspended my account (you're allowed only once tho..) I hope MAL no longer makes any more site changes and gets the spambots under control, or else I will no longer be able to host these files for free
 
Feb 3, 2014 12:39 AM
Offline
Joined: Sep 2013
Posts: 9
thank you, yes everything is fixed now :)
 
May 18, 2014 5:24 AM

Offline
Joined: Mar 2014
Posts: 3282
Thanks for a great layout :D
Signature removed. Please follow the signature rules, as defined in the Site & Forum Guidelines.
 
Pages (2) [1] 2 »