Forum Settings
Forums
New
Jun 21, 2013 5:14 PM
#1

Offline
May 2012
1921
This is a gallery topic for CSS layouts, a preview list of all premade layouts in the club can be found here:
http://myanimelist.net/forum/?topicid=318587



Thanks to these users for helping to repair these layouts in 2019:
evilcorn
PrOxAnto
DooMWhite
Acans
thenonamezzz
Valerio_lyndon




Layouts I've made for public use. Many of them are reskins, I know. If there are any problems drop a msg in this topic.


Please be aware you should have following settings, cause most of the list work on these.

For anime



For Manga


If a topbar is missing or broken, try to get it from this topic:
https://myanimelist.net/forum/?topicid=449097


FIXED ANIME LIST LAYOUTS























FIXED MANGA LIST LAYOUTS









BROKEN ANIME LIST LAYOUTS








































BROKEN MANGA LIST LAYOUTS


























How can I edit my Favorites? - obsolete -


Shishio-kunDec 6, 2020 4:39 PM
Reply Disabled for Non-Club Members
Pages (5) [1] 2 3 » ... Last »
Jun 22, 2013 3:40 AM
#2
Offline
Sep 2009
1
O_O Thanks man. I really apreciate this topic. I can take my layout back, but if you remember my layout was in Spanish >.<
Jun 29, 2013 10:17 PM
#3

Offline
Mar 2013
9
Thank you so Much! Really Loving the Layouts you are making! , you are Awesome! :D
Jul 1, 2013 3:47 PM
#4

Offline
May 2013
3965
I'm going to use one of them! I'll be sure to give credits in my info, thank you :p
smellslikeshitJul 1, 2013 4:08 PM
Jul 1, 2013 4:05 PM
#5
Jul 1, 2013 6:09 PM
#6

Offline
Oct 2012
249
My top 3 favorites are definitely One Piece, SAO, then the one pink hair girl :)
You did a good job on these dude, can't wait to see your next one :D
Jul 1, 2013 6:11 PM
#7
Offline
Jul 2012
9405
I like your lists. Wish your steins;gate list would be manga code. I love that the most.
Jul 6, 2013 12:46 PM
#8

Offline
May 2012
1921
GoldenBRS said:
I like your lists. Wish your steins;gate list would be manga code. I love that the most.


Done. There was already a Steins;Gate manga version but didnt thought there would be anyone who wants it lol

Anyway check first post!
Jul 6, 2013 7:20 PM
#9
Offline
Jul 2012
9405
SylakentH_ said:
GoldenBRS said:
I like your lists. Wish your steins;gate list would be manga code. I love that the most.


Done. There was already a Steins;Gate manga version but didnt thought there would be anyone who wants it lol

Anyway check first post!


Thanks!
Aug 6, 2013 8:08 PM

Offline
May 2013
3965
Is there a way to delete the photo thingies where when you hover over an anime
Shishio-kunAug 13, 2013 7:33 AM
Aug 13, 2013 7:41 AM

Offline
Feb 2010
11294
Debin said:
Is there a way to delete the photo thingies where when you hover over an anime


It depends on the layout, for the One Piece layout you're using you need to take out sections of code that say .hide in the title like for example:

:hover + .hide {
background-repeat: no-repeat !important;
background-size: 242px 284px !important;
display: block !important;
height: 274px;
position: fixed;
right: calc(67% + 70px) !important;
top: 232px;
transform: rotate(-20deg);
width: 242px;
z-index: 2;
}

and can also remove the lines at the top that have CSS for foxgirls and premade anime/manga near the top for additional cleanup.
Sep 7, 2013 5:47 AM

Offline
Jul 2012
4544
Awesome lists, thanks!
Oct 13, 2013 7:10 AM

Offline
Jan 2012
638
I'm going to use one. Thank you very much and good job~
If you win, you live. If you lose, you die. If you don't fight, you can't win! — Eren Yaeger
Jan 7, 2014 2:15 PM

Offline
May 2012
1921
Still waiting for IMG code to return so I can upload my last list layout.. ~_~
Jan 7, 2014 2:41 PM

Offline
Feb 2010
11294
SylakentH_ said:
Still waiting for IMG code to return so I can upload my last list layout.. ~_~


Yeah it makes updating topics a very difficult situation. If you don't, your topic is behind and ppl have to look elsewhere for updates, and be inconvenienced. If you do, your topic becomes confusing and inconvenient anyways, and you must still fix it in the future whenever this update happens. Furthermore, topics without pics simply get less attn or use than those that do have pics. Either way, you're screwed and its unfair to everyone!

I'm reminded of this classic NSFW line!
Jan 12, 2014 8:52 AM

Offline
May 2012
1921
Shishio-kun said:


Yeah it makes updating topics a very difficult situation. If you don't, your topic is behind and ppl have to look elsewhere for updates, and be inconvenienced. If you do, your topic becomes confusing and inconvenient anyways, and you must still fix it in the future whenever this update happens. Furthermore, topics without pics simply get less attn or use than those that do have pics. Either way, you're screwed and its unfair to everyone!

I'm reminded of this classic NSFW line!


MAL should fix it asap.
It's really inconvenient, many clubs (cards related) are now on hiatus due to this problem and yeah especially this club needs the IMG code.
Jan 26, 2014 10:40 AM
Offline
Aug 2013
21
Hey, I got the One Piece anime list design and it's great, but every time I scroll over an anime, the tag box thingy shows a weird "t ide" thing. What do I do to get rid of it. Picture: prntscr(dot)com(slash)2msz94 --Sorry, I'm not sure of these links are allowed, so I used the () method.

Edit: I went to Google Incognito mode to check out if it shows the "t ide" thing, and it didn't show. Is it visible only to me?
Jan 26, 2014 3:56 PM

Offline
Apr 2012
181
http://puu.sh/6zq8Z.png

this is how I see my list with your code.

that "t ide" I think is the "edit" link but for some reason appear weird and in the other side, idk if only in Chrome or in other browser as well, as I only test it loged in Opera.
Jan 30, 2014 1:06 AM
Luny Tunes

Offline
Feb 2012
7835
Hello. I really LOVE the Ai Fuyuumi layout and I'd like to use it! Would it be OK to request a manga list version of it?

Also, if possible, would it be alright to request to modify its CSS a bit so it could use the thumbnail cover style like this?? The style is similar with my manga list that uses DVD covers too although I didn't make that layout and I would like to try a new one.

Thank you in advance! :)
Jan 30, 2014 3:28 AM

Offline
May 2012
1921
LunyRed said:
Hello. I really LOVE the Ai Fuyuumi layout and I'd like to use it! Would it be OK to request a manga list version of it?

Also, if possible, would it be alright to request to modify its CSS a bit so it could use the thumbnail cover style like this?? The style is similar with my manga list that uses DVD covers too although I didn't make that layout and I would like to try a new one.

Thank you in advance! :)


Of course you can. I'll modify it when I'm back home just wait :)

EDIT:

ok here is the code. I adjusted it partly to your actual mangalist

Preview
http://i.imgur.com/YQtXN6z.png

Code
SylakentHJan 30, 2014 8:50 AM
Jan 30, 2014 7:21 PM
Luny Tunes

Offline
Feb 2012
7835
I love it! :) Thank you so much!! Really appreciate it.

http://i.minus.com/i57pOkMVVG3yI.jpg
http://i.minus.com/iSmw3mi34o5CI.jpg

Although it appears that my screen resolution is not big enough to see all the category buttons.
Jan 30, 2014 7:42 PM

Offline
Feb 2010
11294
LunyRed said:
I love it! :) Thank you so much!! Really appreciate it.

http://i.minus.com/i57pOkMVVG3yI.jpg
http://i.minus.com/iSmw3mi34o5CI.jpg

Although it appears that my screen resolution is not big enough to see all the category buttons.


Not my layout but I thought all these style buttons were supposed to be cut off a little on the side; it seems to do this on every resolution I zoom in and out to

edit: oh wait I see the bottom buttons are cut off! Maybe thats what you meant. You can readjust them for your resolution by adjusting the top codes in this set. You can add these to your CSS edit box

#list_surround .status_selected, #list_surround .status_not_selected {

top: 175px;
}
#list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected {

top: 279px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected {

top: 424px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {

top: 526px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {

top: 628px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {

top: 730px;
}

Shishio-kunJan 30, 2014 7:49 PM
Jan 31, 2014 12:51 AM
Luny Tunes

Offline
Feb 2012
7835
Ah yeah, I meant some buttons are cut off from the bottom and I can't even see the "All Manga" button. ^^;

I copied that and placed it in my CSS box but only the "Reading" and "Completed" buttons moved up, leaving a gap between "Completed" and "On Hold". I had to restore it back in the meantime. I'll put the screenshot later since I'm very busy atm, sorry. >_<
Jan 31, 2014 1:14 AM

Offline
Feb 2010
11294
Thats cuz I didn't adjust the top in the bottom four buttons, I thought you'd to move them up yourself. the six codes each individually control the buttons for reading, completed, hold, dropped, ptr, and all in that order

Even if you move the buttons up they might not have enough room, but you can use height codes on the first two so there's less room taken up and its not too cramped, example:

#list_surround .status_selected, #list_surround .status_not_selected {
top: 108px;
height: 89px !important;
}
#list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected {
top: 199px;
height: 89px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected {
top: 290px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
top: 380px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
top: 471px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
top: 562px;
}

Jan 31, 2014 4:53 AM

Offline
May 2012
1921
LunyRed said:
Ah yeah, I meant some buttons are cut off from the bottom and I can't even see the "All Manga" button. ^^;

I copied that and placed it in my CSS box but only the "Reading" and "Completed" buttons moved up, leaving a gap between "Completed" and "On Hold". I had to restore it back in the meantime. I'll put the screenshot later since I'm very busy atm, sorry. >_<


Send you a msg maybe it helped
Feb 1, 2014 6:11 AM
Luny Tunes

Offline
Feb 2012
7835
As of now, I could see all the category buttons in my manga list even if the "All Manga" button is slightly cut off from my screen, which is no big deal.

http://i2.minus.com/igYY7iLKcWFde.png
http://i4.minus.com/iUmBPU9Fzt4LL.png

Thanks again for helping, Shishio-kun and SylakentH_! I really appreciate it. :)
Feb 8, 2014 9:01 PM
Offline
May 2013
17
is it possible for you to make the Haganai layout public?
Feb 9, 2014 10:10 AM

Offline
May 2012
1921
aznballer1 said:
is it possible for you to make the Haganai layout public?


I'll try to make this public asap. wanted to open a topic for this

Edit

Haganai layout is now public
Check topic: http://myanimelist.net/forum/?topicid=894731&show=0#post1
SylakentHFeb 11, 2014 7:35 AM
Mar 14, 2014 5:10 PM
Offline
Oct 2012
3
Awesome SAO theme!

Can you do for Manga style too?
Mar 16, 2014 2:37 AM

Offline
Jul 2013
2676
Hey SylakentH_
Could you please make a manga list version from the style used in my current anime list?




Thanks a lot!
Mar 16, 2014 6:00 AM

Offline
May 2012
1921
SlippinBaller said:
Awesome SAO theme!

Can you do for Manga style too?

SandyBoi said:
Hey SylakentH_
Could you please make a manga list version from the style used in my current anime list?




Thanks a lot!


@SlippinBaller
SAO Theme ver 1



@SandyBoi
SAO Theme ver 2 Sandy

SylakentHMar 16, 2014 7:19 AM
Mar 16, 2014 9:25 AM
Offline
Oct 2012
3
Thanks man, awesome!
Mar 16, 2014 6:25 PM

Offline
Jul 2013
2676
Thanks man :D
Mar 16, 2014 6:53 PM
Offline
Jul 2018
564612
Going to use the Steins;Gate layout. Thanks!
Mar 31, 2014 1:20 AM

Offline
Aug 2013
6
Hey I've been using your Steins;Gate theme for a long time now and loving it a lot! Just recently I saw that you can use a favorite system inside of the list. So far I have figured it out and have some animes favorited except Fullmetal Alchemist: Brotherhood. For some odd reason the list doesn't want to favorite Fullmetal Alchemist or Fullmetal Alchemist: Brotherhood. I tried pasting the code in various spots between different favorites but didn't change anything. If you can help solve this, it would mean a lot thanks.
Signature removed. Please follow the signature rules, as defined in the Site & Forum Guidelines.
Mar 31, 2014 2:56 PM

Offline
Aug 2013
520
@Jaszters
fixed it :P




Mar 31, 2014 9:30 PM

Offline
Aug 2013
6
The new code still didn't highlight Fullmetal Alchemist as a new favorite :( This new code made the list all weird as well. I really appreciate you helping me out though :D
Signature removed. Please follow the signature rules, as defined in the Site & Forum Guidelines.
Apr 1, 2014 12:00 AM

Offline
Aug 2013
520
Thats weird... what browser do u use?
Because I tested it before posting and it worked and I only edited the favourite section...




Apr 1, 2014 1:24 AM
Apr 1, 2014 10:09 AM

Offline
Aug 2013
6
Okay this is really weird. I reverted my list back to the old code, but now there is a My Little Pony popping up on the list saying, " Hi! This is my list now, Thanks!" Is my list being removed? The my little pony picture pops up on the list then fades away after like 10 seconds. My manga list has the pony showing up there too even though I didn't change anything. Is the creator fixing his list while this is going on? Am I being trolled?
Signature removed. Please follow the signature rules, as defined in the Site & Forum Guidelines.
Apr 1, 2014 3:11 PM

Offline
May 2012
1921
Jazters said:
Okay this is really weird. I reverted my list back to the old code, but now there is a My Little Pony popping up on the list saying, " Hi! This is my list now, Thanks!" Is my list being removed? The my little pony picture pops up on the list then fades away after like 10 seconds. My manga list has the pony showing up there too even though I didn't change anything. Is the creator fixing his list while this is going on? Am I being trolled?


If you didnt realize it yet, it's just a April Fools prank :)
Apr 1, 2014 11:21 PM

Offline
Aug 2013
6
Oh thank god. I thought my list was being trolled/ removed by someone. xD
Signature removed. Please follow the signature rules, as defined in the Site & Forum Guidelines.
Apr 20, 2014 5:55 AM

Offline
May 2012
1921
ThreePointer said:
Hey can you make the Little Busters into a Manga theme? Please! >.<


Sure. Check post http://myanimelist.net/forum/?topicid=618961&show=20#msg29347931 :)
May 23, 2014 11:20 PM

Offline
Jun 2013
709
Hey thanks for showing off your animelist layouts it helped me alot in making mine! But if fails in comparison to the original creator! :P

Jun 1, 2014 7:47 AM

Offline
May 2012
1921
*One Piece Layout fix*

Ok, fixed a css problem involving the category buttons of the One Piece layout. Users weren't able to change category pages due to the problem.
Should be fixed by now.
Jul 26, 2014 5:58 PM

Offline
May 2012
1921
If anyone finds problems involving the layouts listed here I would really appreciate it if they were posted here so I can take a look at them and maybe other people as well.
Oct 12, 2014 10:03 AM
Offline
Feb 2014
4
Hey, i really like the little busters themed manga list but theres a slight problem :/ instead of having "Plan to read" it says "Plan to watch". Being a CSS dummy, i have no idea how to change that. Could you please help? Thanks!

[spoiler] contains the code for little busters manga list

@import "https://dl.dropboxusercontent.com/u/102421246/MAL/CSS/TopBarReduxGreen.css";
@import "http://dl.dropbox.com/u/49469857/MAL/premade/manga.css";
@import "http://fonts.googleapis.com/css?family=Autour+One";
@import "http://fonts.googleapis.com/css?family=Patrick+Hand+SC";
* {
text-decoration: none;
}
body {
background-attachment: fixed;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-image: url("http://www.emptyblue.it/data/wallpaper/LittleBusters/little_busters_everyone.jpg");
background-position: 0 83%;
background-repeat: no-repeat no-repeat;
background-size: cover;
font-family: Autour One;
}
#inlineContent {
background-image: url("");
background-repeat: no-repeat no-repeat;
display: inline-block !important;
height: 3000px !important;
left: 0 !important;
margin: auto !important;
position: fixed;
top: 0 !important;
width: 3000px !important;
z-index: -4 !important;
}
#list_surround {
background-attachment: scroll;
background-image: url("http://i.imgur.com/wQOU6p5.png");
background-position: 50% 16%;
background-repeat: no-repeat no-repeat;
background-size: 800px auto;
font-size: 13px;
height: 250px;
left: 0;
margin: 0 auto;
padding-bottom: 10px;
padding-top: 283px;
position: absolute;
right: 0;
top: 21px;
width: 900px;
}
.td1, .td2 {
background-color: rgba(119, 177, 137, 0.6);
height: 65px;
padding: 2px;
transition: background-color 0.5s linear 0s;
}
tr:hover [class^="td"] {
background-color: rgba(38, 135, 252, 0.7);
transition: all 0.4s linear 0s;
}
a, .table_header, .category_totals {
color: #FFFFFF;
text-shadow: none;
}
a:hover {
text-decoration: underline;
text-shadow: 1px 2px 3px #000000 !important;
}
.table_header a {
color: #FFFFFF;
}
.table_header {
background-color: rgba(79, 124, 55, 0.8);
padding: 3px;
text-align: center;
}
.table_header:nth-of-type(3) {
padding-right: 9px;
text-align: center;
}
.table_header:first-of-type {
border-top-left-radius: 10px;
}
.table_header:nth-of-type(2) {
padding-left: 39px;
text-align: left;
z-index: 6;
}
.table_header:nth-of-type(4) {
padding-right: 5px;
}
.table_header:nth-of-type(5) {
border-top-right-radius: 10px;
padding-right: 7px;
}
.category_totals {
background-color: rgba(79, 124, 55, 0.8);
border-radius: 0 0 10px 10px;
height: 40px;
padding: 3px;
text-align: center;
}
.td1:nth-of-type(1), .td2:nth-of-type(1) {
color: #FFFFFF;
}
.td1:nth-of-type(2), .td2:nth-of-type(2) {
padding-left: 42px;
text-align: left;
vertical-align: top;
width: 639px;
}
.td1:nth-of-type(3), .td2:nth-of-type(3) {
color: #FFFFFF;
padding-right: 11px !important;
vertical-align: top;
}
.td1:nth-of-type(4), .td2:nth-of-type(4) {
color: #FFFFFF;
padding-right: 10px;
vertical-align: top;
}
.td1:nth-of-type(5), .td2:nth-of-type(5) {
color: #FFFFFF;
padding-right: 8px;
vertical-align: top;
}
.animetitle + small {
color: #FFFF00;
font-size: 12px !important;
font-weight: bold;
left: 4%;
margin-top: 66px;
padding-right: 2px;
text-overflow: ellipsis;
z-index: 1;
}
[cellspacing="0"] {
line-height: 17px;
}
.category_totals:hover {
background-color: rgba(196, 30, 14, 0.7);
color: #FFFFFF;
}
#grand_totals {
background-color: rgba(79, 124, 55, 0.8);
border: 0 none;
border-radius: 10px;
box-shadow: 0 0 15px 0 #FFFFFF inset;
color: #FFFFFF;
line-height: 20px;
min-height: 20px;
padding: 8px;
text-align: center;
vertical-align: middle;
}
.status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a {
color: rgba(0, 0, 0, 0);
display: block;
font-size: 0;
height: 113px;
width: 263px;
}
.status_selected {
display: block;
}
.status_not_selected {
display: block;
}
.status_not_selected {
opacity: 0.7;
transition: all 0.4s ease 0s;
}
.status_not_selected:hover {
color: rgba(0, 0, 0, 0);
opacity: 1;
transition: all 0.4s ease 0s;
}
#list_surround .status_selected, #list_surround .status_not_selected {
background-clip: padding-box !important;
background-color: rgba(0, 0, 0, 0);
background-image: url("http://i62.tinypic.com/2h55xjq.png");
background-position: 0 0;
background-repeat: no-repeat no-repeat;
background-size: 100% auto;
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 10px;
display: block;
left: -450px;
padding: 0;
position: absolute;
top: 60px;
width: 263px;
}
#list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected {
background-image: url("http://i62.tinypic.com/2h55xjq.png");
background-position: 100% 20%;
top: 180px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected {
background-image: url("http://i62.tinypic.com/2h55xjq.png");
background-position: 0 40%;
top: 300px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
background-image: url("http://i62.tinypic.com/2h55xjq.png");
background-position: 100% 60%;
top: 420px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
background-image: url("http://i62.tinypic.com/2h55xjq.png");
background-position: 0 80%;
top: 540px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
background-image: url("http://i62.tinypic.com/2h55xjq.png");
background-position: 100% 100%;
top: 660px;
}
[class^="header_"] * {
background-repeat: no-repeat no-repeat;
font-size: 0;
height: 200px;
line-height: 24px;
padding-bottom: 4px;
text-align: right;
vertical-align: bottom;
}
.header_title {
border-radius: 4px;
color: #FFFFFF;
display: inline-block;
font-style: italic;
height: auto;
padding: 0 8px 0 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.header_cw {
background-color: rgba(0, 0, 0, 0);
background-image: url("http://i60.tinypic.com/1y5q1k.png");
background-position: 50% 150px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 0;
margin-top: -50px;
}
.header_completed {
background-color: rgba(0, 0, 0, 0);
background-image: url("http://i.imgur.com/xqwnTt5.png");
background-position: 50% 150px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 0;
margin-top: -100px;
}
.header_onhold {
background-color: rgba(0, 0, 0, 0);
background-image: url("http://i.imgur.com/80gqkum.png");
background-position: 50% 150px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 0;
margin-top: -100px;
}
.header_dropped {
background-color: rgba(0, 0, 0, 0);
background-image: url("http://i.imgur.com/xMvAM2j.png");
background-position: 50% 150px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 0;
margin-top: -100px;
}
.header_ptw {
background-color: rgba(0, 0, 0, 0);
background-image: url("http://i.imgur.com/wfRvQHM.png");
background-position: 50% 150px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 0;
margin-top: -100px;
}
.hide {
background-color: rgba(248, 162, 200, 0.7);
background-position: 50% 50%;
background-repeat: no-repeat no-repeat;
background-size: cover;
border: 1px solid #FFFFFF;
border-radius: 5px;
display: inline-block !important;
height: 55px;
margin-left: 30px;
margin-top: -61px;
position: absolute;
transition: all 0.25s ease-in-out 0s;
width: 35px;
}
.hide:hover {
background-color: rgba(0, 0, 0, 0);
background-repeat: no-repeat no-repeat;
background-size: cover;
border-radius: 20px;
box-shadow: 0 0 8px 8px #FFFFFF;
margin-left: -218px;
padding-right: 150px;
padding-top: 220px !important;
position: absolute;
z-index: 20;
}
.hide:hover:after {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
content: " ";
height: 65px;
left: 42px;
position: absolute;
top: 0;
width: 247px;
z-index: 20;
}
.td1:nth-of-type(6), .td2:nth-of-type(6) {
background-attachment: scroll;
background-color: rgba(0, 0, 0, 0) !important;
background-image: none;
background-position: 0 0;
background-repeat: repeat repeat;
border-radius: 10px;
color: #FFFFFF;
display: inline-block;
font-family: Patrick Hand SC;
font-size: 14px;
height: 50px;
left: 89px;
line-height: 16px !important;
margin-left: -16px;
margin-top: 18px;
padding: 5px;
position: absolute;
width: 740px;
z-index: 2;
}
.table_header:nth-of-type(6) {
display: none;
}
span[id*="tagRow"] {
display: block !important;
}
span[id*="tagLinks"] {
display: none !important;
}
.td1 div, .td2 div {
color: rgba(0, 0, 0, 0);
padding-left: 4px;
}
.td1 div small a:first-of-type, .td2 div small a:first-of-type {
color: #FFFFFF;
float: right;
position: relative;
right: 23px;
top: 0;
}
.td1 div small a:last-of-type, .td2 div small a:last-of-type {
color: rgba(0, 0, 0, 0);
display: none;
float: right;
position: relative;
right: 59px;
}
#copyright, #copyright:hover {
background-color: rgba(79, 124, 55, 0.8);
border-radius: 10px;
bottom: 0;
color: #FFFFFF;
padding: 4px;
width: 100%;
}
#copyright:before {
color: #FFFFFF;
content: " Original Design by TheHolyPotato, redesigned by SylakentH_";
font-size: 12px;
padding-right: 10px;
}
#copyright:after {
color: #FFD700;
content: " ";
padding-left: 20px;
}
#copyright a {
}
@media all and (max-device-width: 1366px) {
#list_surround {
left: 300px !important;
width: 750px;
}
.td1:nth-of-type(6), .td2:nth-of-type(6) {
margin-top: 25px;
width: 640px;
}
.td1:nth-of-type(2), .td2:nth-of-type(2) {
width: 517px;
}
#list_surround .status_selected, #list_surround .status_not_selected {
left: -400px;
}
}
Oct 12, 2014 10:30 AM

Offline
May 2012
1921
thecookiemonster said:
Hey, i really like the little busters themed manga list but theres a slight problem :/ instead of having "Plan to read" it says "Plan to watch". Being a CSS dummy, i have no idea how to change that. Could you please help? Thanks!



Thanks for noticing! Fixed the problem and updated the first post.

Check this link for the right css https://dl.dropboxusercontent.com/u/102421246/MAL/CSS/Lists/Manga/LB%28Manga%29.css
Oct 18, 2014 5:26 AM

Offline
May 2012
1921
Important announcement

My dropbox just crashed but was able to "fix" it. Please keep in mind this might happen again in some time. Due to RL and other stuff I probably wont be able to reupload all the links because of the quantity of items I would have to upload and fix.

I'll try to come up with a solution to prevent this kind of inconvenience. I am really sorry
Nov 10, 2014 2:20 PM

Offline
May 2013
15
I LOVE YOUR BAKEMONOGATARI LAYOUT!!! <3 <3
is it ok if u edit it to also be a manga manga layout ??
Reply Disabled for Non-Club Members
Pages (5) [1] 2 3 » ... Last »

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 layout

Shishio-kun - May 4, 2021

3 by hideso »»
Apr 20, 4:33 PM

» [CSS] [VIDEO GUIDE] ⭐️ How to change fonts on a list layout

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