New
Jan 17, 2016 4:21 PM
#1
feb9: new headers, new top bar and other fixes a simple colourful & minimalistic list layout based on sunnysummerday's crayon theme goal: to make it look as minimalistic and similar to the seasonal anime page with crayon's theme optimized to view in: chrome compatibility: chrome (perfect) firefox (good?) opera (good?) specs: ✿; for anime lists only ✿; showing one category when you open list ✿; tags on hover (optional) ✿; tested in chrome (works) ✿; tested in firefox (works) ✿; colorful & minimalistic ✿; custom scroll bar (only works in chrome!) ✿; no "more" button ✿; unique edit button (the green color below anime covers) ✿; can mark favorite animes (optional) code click here for the code (copy and paste everything!) raw version: (copy and paste everything inside the code) @import "https://dl.dropboxusercontent.com/s/epj4r1j1vc71e9t/topbarnew.css"; @import "https://dl.dropboxusercontent.com/s/2ldizjis5mg7bnw/crayon_mal.css"; body { background: #eaeaea url("http://colourlovers.com.s3.amazonaws.com/images/patterns/3445/3445180.png") repeat fixed 0 0 !important; font-family: Segoe UI !important; font-size: 13px !important; text-transform: lowercase !important; } #list_surround { top: -0.5em !important; } .table_header:nth-of-type(2) { background: #f0f8fc none repeat scroll 0 0 !important; border-left: 335px solid #f0f8fc !important; border-radius: 4px; color: #606160 !important; display: block !important; font-family: Segoe UI !important; font-size: 15px !important; font-style: normal !important; font-weight: normal !important; height: 17px; left: 0; margin: auto !important; padding: 5px 10px 9px 15px !important; position: absolute !important; top: 113px !important; width: 685px !important; } .table_header:nth-of-type(3) { background: transparent none repeat scroll 0 0 !important; color: #606160 !important; display: block !important; font-family: Segoe UI !important; font-size: 15px !important; font-weight: normal !important; height: 17px; left: 440px; margin: auto !important; padding: 5px 10px 9px 15px !important; position: absolute !important; text-align: center !important; top: 113px !important; } .table_header:nth-of-type(4) { background: transparent none repeat scroll 0 0 !important; color: #606160 !important; display: block !important; font-family: Segoe UI !important; font-size: 15px !important; font-weight: bold; height: 17px; left: 500px; margin: auto !important; padding: 5px 10px 9px 15px !important; position: absolute !important; text-align: center !important; top: 113px !important; } .table_header:nth-of-type(5) { background: transparent none repeat scroll 0 0 !important; color: #606160 !important; display: block !important; font-family: Segoe UI !important; font-size: 15px !important; font-weight: bold; height: 17px; left: 560px; margin: auto !important; padding: 5px 10px 9px 15px !important; position: absolute !important; text-align: center !important; top: 113px !important; } .table_header:nth-of-type(7) { background: transparent none repeat scroll 0 0 !important; color: #606160 !important; display: block !important; font-family: Segoe UI !important; font-size: 15px !important; font-weight: normal !important; height: 17px; left: 645px !important; letter-spacing: normal !important; margin: auto !important; padding: 5px 10px 9px 15px !important; position: absolute !important; top: 113px !important; width: 50px !important; } .table_header:nth-of-type(2) a:hover { color: #6bbfe3 !important; transition: all 0.2s ease 0s; } .table_header:nth-of-type(3) a:hover { color: #6bbfe3 !important; transition: all 0.2s ease 0s; } .table_header:nth-of-type(4) a:hover { color: #6bbfe3 !important; transition: all 0.2s ease 0s; } .table_header:nth-of-type(5) a:hover { color: #6bbfe3 !important; transition: all 0.2s ease 0s; } .table_header:nth-of-type(7) a:hover { color: #6bbfe3 !important; transition: all 0.2s ease 0s; } .table_header:nth-of-type(3) a { border-bottom: none !important; font-style: normal !important; font-weight: normal !important; letter-spacing: 1px; } .table_header:nth-of-type(4) a { border-bottom: none !important; font-style: normal !important; font-weight: normal !important; letter-spacing: 1px; } .table_headerLink strong { border-bottom: none !important; font-weight: normal !important; letter-spacing: 1px; } .table_header:nth-of-type(5) a { border-bottom: none !important; font-style: normal !important; font-weight: normal !important; letter-spacing: 1px; } .table_header:nth-of-type(7) a { border-bottom: none !important; font-style: normal !important; font-weight: normal !important; letter-spacing: 1px; } .animetitle { background-color: white !important; border-left: 1px solid #d8d8d8; border-radius: 10px 10px 0 0 !important; border-right: 1px solid #d8d8d8; border-top: 1px solid #d8d8d8; font-size: 15px; font-weight: 700 !important; height: 20px !important; left: 3px !important; letter-spacing: 0.7px; overflow: hidden !important; padding: 5px; position: absolute; text-align: center !important; text-overflow: ellipsis !important; top: 6px; white-space: nowrap !important; width: 226px !important; } .td1[align="center"][width="50"], .td2[align="center"][width="50"] { background: #efefef none repeat scroll 0 0; border-left: 1px solid #d8d8d8; border-right: 1px solid #d8d8d8; color: #7f7f7f !important; font-size: 11px !important; left: 3px; letter-spacing: 1px; padding: 5px; position: absolute; text-indent: 45%; top: 37px; width: 226px; } #list_surround .hide { background-position: center center !important; background-repeat: no-repeat !important; background-size: inherit; border-bottom: 1px solid #d8d8d8; border-left: 1px solid #d8d8d8; border-radius: 0 0 10px 10px !important; border-right: 1px solid #d8d8d8; float: left; height: 261px !important; margin-left: -236px; margin-right: 11px; margin-top: 29px; position: relative; width: 236px !important; z-index: 0 !important; } .td1 a.List_LightBox, .td2 a.List_LightBox { background: rgba(107, 200, 174, 0.75) none repeat scroll 0 0 !important; border: medium none; color: transparent !important; left: -35px; position: absolute; top: 279px !important; visibility: visible !important; width: 236px; } .td1[align="center"][width="45"], .td2[align="center"][width="45"] { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: rgb(249, 249, 249) none repeat scroll 0 0; border-bottom: 1px solid #d8d8d8; border-image: none; border-left: 1px solid #d8d8d8; border-radius: 0 0 10px 10px !important; border-right: 1px solid #d8d8d8; border-top: medium none !important; color: rgb(88, 88, 88) !important; font-family: segoe ui !important; font-size: 11px; font-weight: 700; left: 3px !important; padding-bottom: 3px; padding-left: 17px !important; padding-right: 3px; padding-top: 3px; position: absolute; text-align: left !important; top: 299px; width: 214px !important; } .status_selected a, .status_not_selected a { background: #ffbc68 none repeat scroll 0 0 !important; border: medium none !important; border-radius: 4px !important; color: white !important; display: block !important; font-size: 0 !important; font-style: normal !important; font-weight: normal !important; letter-spacing: 1px; padding: 5px 7px !important; transition: all 0.2s ease 0s; } .status_selected [href*="status=1"], .status_not_selected [href*="status=1"] { background-image: url("http://puu.sh/n1lra/725ea17364.png") !important; background-position: calc(14%) center !important; background-repeat: no-repeat !important; width: 165px !important; } .status_selected [href*="status=1"]:hover, .status_not_selected [href*="status=1"]:hover { background-image: url("http://puu.sh/n1lra/725ea17364.png") !important; background-position: calc(14%) center !important; background-repeat: no-repeat !important; } .status_selected [href*="status=2"], .status_not_selected [href*="status=2"] { background-image: url("http://puu.sh/n1mju/81326715a6.png") !important; background-position: calc(14%) center !important; background-repeat: no-repeat !important; width: 165px !important; } .status_selected [href*="status=2"]:hover, .status_not_selected [href*="status=2"]:hover { background-image: url("http://puu.sh/n1mju/81326715a6.png") !important; background-position: calc(14%) center !important; background-repeat: no-repeat !important; } .status_selected [href*="status=3"], .status_not_selected [href*="status=3"] { background-image: url("http://puu.sh/n1mod/fe5f56d261.png") !important; background-position: calc(14%) center !important; background-repeat: no-repeat !important; width: 165px !important; } .status_selected [href*="status=3"]:hover, .status_not_selected [href*="status=3"]:hover { background-image: url("http://puu.sh/n1mod/fe5f56d261.png") !important; background-position: calc(14%) center !important; background-repeat: no-repeat !important; } .status_selected [href*="status=4"], .status_not_selected [href*="status=4"] { background-image: url("http://puu.sh/n1moS/ef19ad9c3b.png") !important; background-position: calc(14%) center !important; background-repeat: no-repeat !important; width: 165px !important; } .status_selected [href*="status=4"]:hover, .status_not_selected [href*="status=4"]:hover { background-image: url("http://puu.sh/n1moS/ef19ad9c3b.png") !important; background-position: calc(14%) center !important; background-repeat: no-repeat !important; } .status_selected [href*="status=6"], .status_not_selected [href*="status=6"] { background-image: url("http://puu.sh/n1mpg/ef12c455bb.png") !important; background-position: calc(14%) center !important; background-repeat: no-repeat !important; width: 165px !important; } .status_selected [href*="status=6"]:hover, .status_not_selected [href*="status=6"]:hover { background-image: url("http://puu.sh/n1mpg/ef12c455bb.png") !important; background-position: calc(14%) center !important; background-repeat: no-repeat !important; } .status_selected [href*="status=7"]::after, .status_not_selected [href*="status=7"]::after { content: " " !important; } .status_selected [href*="status=7"], .status_not_selected [href*="status=7"] { background-image: url("http://puu.sh/n1mpB/1e47840aaa.png") !important; background-position: calc(49%) center !important; background-repeat: no-repeat !important; width: 101px !important; } .status_selected [href*="status=7"]:hover, .status_not_selected [href*="status=7"]:hover { background-image: url("http://puu.sh/n1mpB/1e47840aaa.png") !important; background-position: calc(49%) center !important; background-repeat: no-repeat !important; } .status_selected a::after, .status_not_selected a::after { content: attr(title); font-size: 14px !important; line-height: 27px; margin-left: -36px !important; position: absolute; text-align: center !important; } .status_selected a, .status_not_selected a { animation-duration: 0.1s; height: 28px !important; margin: -84px auto !important; z-index: 50; } .status_selected a:hover { background-color: #e8608c !important; } .status_selected a, .status_selected a:visited { animation-duration: 0.1s; background: #e8608c none repeat scroll 0 0 !important; border-bottom: 2px dashed #e8608c !important; border-radius: 4px !important; color: white !important; } .status_not_selected a:hover { animation-duration: 0.1s; background: #6bbfe3 none repeat scroll 0 0 !important; border: medium none !important; color: white !important; } body::after { display: none; } .td1:nth-of-type(1), .td2:nth-of-type(1) { display: none !important; } .header_cw:hover { box-shadow: 0 0 4px #6bbfe3 !important; transition: all 0.4s ease 0s !important; } .header_completed:hover { box-shadow: 0 0 4px #6bbfe3 !important; transition: all 0.4s ease 0s !important; } .header_onhold:hover { box-shadow: 0 0 4px #6bbfe3 !important; transition: all 0.4s ease 0s !important; } .header_dropped:hover { box-shadow: 0 0 4px #6bbfe3 !important; transition: all 0.4s ease 0s !important; } .header_ptw:hover { box-shadow: 0 0 4px #6bbfe3 !important; transition: all 0.4s ease 0s !important; } .header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw { border: medium none !important; font-style: normal !important; font-weight: normal !important; top: -86px !important; } #inlineContent { background-color: darkred; background-image: url("http://puu.sh/n1Gor/8d48a0c748.png") !important; background-position: center -159px !important; background-repeat: no-repeat !important; border: medium none !important; border-radius: 9px; box-shadow: 0 0 2px rgba(65, 65, 65, 0.3) !important; display: none !important; height: 124px !important; left: 0; margin-bottom: auto !important; margin-left: auto !important; margin-right: auto !important; position: absolute; text-align: center !important; top: -165px; width: 1018px; } #inlineContent::after { content: " "; } .td1[width="70"], .td2[width="70"] { color: #7f7f7f !important; font-size: 11px !important; left: 15% !important; letter-spacing: 1px !important; position: absolute !important; top: 42px !important; transform: translate(-15%) !important; } #copyright:hover::after { background-image: none; color: #fff !important; font-size: 13px !important; font-style: italic !important; height: auto !important; padding: 5px; text-align: left !important; transition: all 0.12s ease-in 0.1s; width: 900px !important; } covers add this on top of everything: @import "http://mal-fellow-writer.appspot.com/anime/username/?covers=https://dl.dropbox.com/u/49469857/MAL/premade/formats/covers/more"; options to be ticked ☑ numbers ☑ score ☑ type ☑ episodes ☑ rating (optional) ☐ start/end dates ☐ total days watched ☐ storage ☑ tags ☐ priority please tick tags even if you are not going to use it or else the layout won't work! don't forget to change default status selected to watching! (or anything else, just make sure it's not show all) tags (optional) optional, but the list looks even better with tags! (tick tags option in preferences even if you are not going to use it) as you can see in the image, the list is compatible with tags and appears on hover. there's a script which adds genres to the tags automatically just in one click! please install it and update your tags. it actually adds a button which says "update all" but this list has a unique top bar so it doesn't appear. please change the list layout to something else (preferably the default one) just to update tags and then back to this! mark favorite anime (optional) you can add a mark to your favorite anime in the list itself! it looks something like this: code for it: /* favorite anime mark */ .animetitle[href*="9989"]:before, .animetitle[href*="11111"]:before { border-left: 3px dotted #e8608c; color: #e8608c; content: " "; padding-left: 5px; } replace the numbers inside " " with the anime's number. you'll know the anime number when you open it's anime page or hover over it. for example, http://myanimelist.net/anime/269/Bleach. 269 is it's number. replace the number inside " " with it and it'll work. :) make sure you add this code to the very bottom of your code. additional bg's even more?! click here or here! credits: ✿; sunnysummerday for the mal theme and seasonal anime page coding which lead to the idea of this layout ✿; recuvan for helping me fix bugs and top bar ✿; deividas for tags code and icons ✿; nymphiae for scroll bar code ✿; shishio-kun's club for other small codes which helped me questions, feedback, comments: ✿; this layout was tested in chrome, firefox and works fine ✿; any questions, feedback, criticism, etc is welcome. ✿; solely based on seasonal anime page with crayon theme ✿; was actually made for personal use but decided to share it! ✿; the code is probably a mess. sorry, i'm not that experienced with codes. ✿; you are free to edit, take anything as long as you credit/don't remove the credits. ✿; hope you like the layout; etc: message me if you find any bugs and i will try my best to fix them for you! |
removed-userFeb 9, 2016 2:07 PM
Jan 17, 2016 5:17 PM
#2
Good job man! This layout looks really fresh! |
removed-userJan 17, 2016 5:24 PM
Jan 17, 2016 10:59 PM
#3
looks really nice! meshes with sunny's theme perfectly c: |
Jan 18, 2016 9:21 AM
#5
Looks neat! Though I still think the black looks out of place >.> |
Jan 18, 2016 10:00 AM
#6
Love said: compatibility: chrome (perfect) firefox (almost perfect?) I've just optimized it so it should work well on Chrome, Edge, Firefox, Opera and Safari. |
removed-userJan 18, 2016 10:04 AM
Jan 22, 2016 10:03 AM
#9
update! - changed the black bar since people complained it looked out of place - sorting links have been fixed - covers look more "high quality" now |
Jan 23, 2016 8:55 PM
#10
Woah, really amazing. I've just installed @sunnysummerday design then I saw this and added it. My pages look so wonderful now. Thanks so much! <3 Some questions: (1) I can't seem to find where to change the "love's anime list" to my user name. I must be looking at the wrong file but not sure. :/ (2) Is it possible to have the "total" box aligned differently, for example right-aligned or center-aligned? Just for a bit of style. If it's not possible that's okay though. :) (3) The sorting method texts seem different in terms of bold, check my list to see that some text seems bolder than the others. |
phio_chanJan 23, 2016 10:15 PM
Jan 23, 2016 11:47 PM
#11
phio_chan said: Woah, really amazing. I've just installed @sunnysummerday design then I saw this and added it. My pages look so wonderful now. Thanks so much! <3 Some questions: (1) I can't seem to find where to change the "love's anime list" to my user name. I must be looking at the wrong file but not sure. :/ (2) Is it possible to have the "total" box aligned differently, for example right-aligned or center-aligned? Just for a bit of style. If it's not possible that's okay though. :) (3) The sorting method texts seem different in terms of bold, check my list to see that some text seems bolder than the others. it's in the code: #inlinecontent::after { color: #606060 !important; content: "love\'s anime list"; font-size: 15px !important; font-style: normal !important; font-weight: normal !important; letter-spacing: normal !important; padding: 5px 10px 9px 15px !important; } change the content to whatever you like. 2] err do you mean the category totals? it's already center aligned tho? o.o edit: oh i get what you mean now, you can't align it. it will be next to the covers. for example check my list. it's basically a cover too. add a new anime entry to your watching list and it will be beside the totals (in your list). that's how it works. 3] ah yes, the sorting method text, i'll fix it today. need to fix the text, not supposed to be bold so stay tuned for updates. ;x |
Jan 24, 2016 12:27 AM
#12
Love said: phio_chan said: Woah, really amazing. I've just installed @sunnysummerday design then I saw this and added it. My pages look so wonderful now. Thanks so much! <3 Some questions: (1) I can't seem to find where to change the "love's anime list" to my user name. I must be looking at the wrong file but not sure. :/ (2) Is it possible to have the "total" box aligned differently, for example right-aligned or center-aligned? Just for a bit of style. If it's not possible that's okay though. :) (3) The sorting method texts seem different in terms of bold, check my list to see that some text seems bolder than the others. it's in the code: #inlinecontent::after { color: #606060 !important; content: "love\'s anime list"; font-size: 15px !important; font-style: normal !important; font-weight: normal !important; letter-spacing: normal !important; padding: 5px 10px 9px 15px !important; } change the content to whatever you like. 2] err do you mean the category totals? it's already center aligned tho? o.o edit: oh i get what you mean now, you can't align it. it will be next to the covers. for example check my list. it's basically a cover too. add a new anime entry to your watching list and it will be beside the totals (in your list). that's how it works. 3] ah yes, the sorting method text, i'll fix it today. need to fix the text, not supposed to be bold so stay tuned for updates. ;x Perfect, thanks a lot! Now it works. No worries about the 'total' box and the sorting method text, take your time. Again thanks a lot for the codes! :D |
Jan 24, 2016 5:14 AM
#13
phio_chan said: Perfect, thanks a lot! Now it works. No worries about the 'total' box and the sorting method text, take your time. Again thanks a lot for the codes! :D fixed the sorting method text now :) hope you like it! |
Jan 24, 2016 5:38 AM
#14
Love said: phio_chan said: Perfect, thanks a lot! Now it works. No worries about the 'total' box and the sorting method text, take your time. Again thanks a lot for the codes! :D fixed the sorting method text now :) hope you like it! Thanks a lot! Though I still see it bold in my list. Do I need to update the codes or something? I did clear browser's history, cache, and cookies before checking my list again. |
Jan 24, 2016 5:45 AM
#15
phio_chan said: Love said: phio_chan said: Perfect, thanks a lot! Now it works. No worries about the 'total' box and the sorting method text, take your time. Again thanks a lot for the codes! :D fixed the sorting method text now :) hope you like it! Thanks a lot! Though I still see it bold in my list. Do I need to update the codes or something? I did clear browser's history, cache, and cookies before checking my list again. i updated the code in my first post. copy n paste the code again. it doesn't auto-update ;c p.s: if you want this delicious change to the headers, let me know. i designed it for myself, so literally there's 2 versions of the headers. if you like this one, i can give you the code for it. |
Jan 24, 2016 5:56 AM
#16
Love said: phio_chan said: Love said: phio_chan said: Perfect, thanks a lot! Now it works. No worries about the 'total' box and the sorting method text, take your time. Again thanks a lot for the codes! :D fixed the sorting method text now :) hope you like it! Thanks a lot! Though I still see it bold in my list. Do I need to update the codes or something? I did clear browser's history, cache, and cookies before checking my list again. i updated the code in my first post. copy n paste the code again. it doesn't auto-update ;c p.s: if you want this delicious change to the headers, let me know. i designed it for myself, so literally there's 2 versions of the headers. if you like this one, i can give you the code for it. Sorry! I really didn't think about updating the code. ;__; It works and looks pretty now, thanks a lot! Ooh, your header version looks delicious indeed! I'm still enjoying the current layout though so I'll probably poke you later when I need the change. Or you can PM me the codes! Thanks again. <3 |
Jan 24, 2016 11:14 AM
#17
#OffTopic It looks nice with darker backgrounds imho |
Jan 24, 2016 3:05 PM
#18
@sunnysummerday - calm your nips, suonny 。◕ ‿ ◕。 |
Feb 9, 2016 9:57 AM
#19
update: new headers, new top bar and other fixes please copy and paste the new code, edited in the first post! |
Feb 9, 2016 12:08 PM
#20
Nice work and beautiful implementation for the layout! Well done. |
Webmaster of Anime Wallpapers HD |
Feb 9, 2016 6:18 PM
#21
Feb 9, 2016 8:26 PM
#22
Ooh, thank you, I'm using this now... |
Feb 9, 2016 9:16 PM
#23
phio_chan said: Looking great as always, @Love! Though the top menu doesn't appear to me (only 'Search' is visible, the other text is missing from that line). Another stupid question, I guess we need to sign up at colourlover to be able to download more patterns? um it's supposed to be that way, no text so we can see the pretty colors at the top when we scroll d: and er, not really. you need to open a pattern and click inspect element and copy the link in "background-image" till .png |
Feb 9, 2016 9:18 PM
#24
good job!! not using it but it looks cute. |
Feb 9, 2016 11:04 PM
#25
Love said: phio_chan said: Looking great as always, @Love! Though the top menu doesn't appear to me (only 'Search' is visible, the other text is missing from that line). Another stupid question, I guess we need to sign up at colourlover to be able to download more patterns? um it's supposed to be that way, no text so we can see the pretty colors at the top when we scroll d: and er, not really. you need to open a pattern and click inspect element and copy the link in "background-image" till .png Ah okay lol, sorry for the stupid question. I guess it'll take time to get used to the new design, though I like it as much as the old one. ;) Thank you again! edit: Ah, didn't realize the text appears when you hover at the color blocks. It didn't work that way previously, that's why I was confused lol. |
phio_chanFeb 10, 2016 6:14 AM
Nov 12, 2016 1:45 PM
#26
Seems like the anime cover's are missing again ono not sure if that's why but the complete list goes a little over a anime box and the anime list/score is a little weird ( http://sta.sh/0173bou3m4pc ) the only that might have change is chrome's newest update which made stuff alot bigger |
More topics from this board
» Share Your YouTube Channel/Videos! ( 1 2 3 4 5 ... Last Page )nin-tendo - Dec 16, 2022 |
362 |
by nin-tendo
»»
Yesterday, 11:56 AM |
|
» Protect or punish?DollzchanAi - Apr 18 |
4 |
by DollzchanAi
»»
Yesterday, 6:15 AM |
|
» BL reference in Tomodachi LifeKinspie13 - Apr 24 |
4 |
by Kinspie13
»»
Apr 24, 9:41 PM |
|
» How to Export/Backup Your Anime List Automatically! (TamperMonkey Script)hacker09 - May 18, 2020 |
3 |
by Vapor_AU
»»
Apr 24, 8:41 PM |
|
» advice for someone returning to artCrystepsi - Apr 4 |
5 |
by haaku-san
»»
Apr 24, 4:21 PM |