New
This topic has been locked and is no longer available for discussion.
Jun 10, 2020 12:12 AM
#251
3miL said: I found a snipping tool in my dad's laptop this is what I can make atm, is that good enough? Yeah this tells me you're using a 1366px wide laptop :D So you can try using this code to have the gif become clickable on that screen. If there's other screens we can add other codes @\import "https://dl.dropboxusercontent.com/s/cvop0e358e05oo6/ShelterV1.css"; @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore"; } /*ALL*/ body[data-query*='"status":7'] { background-image: url(https://image.myanimelist.net/ui/NMhxKjGdQ21NnPG4rzwny079TmWQ9LmHBtnxt3CWsQldK8VduYKDlSntkUd87AH8); } /* **Your desired avatar **Note that the best resolution is 120px * 120px */ .cover-block::after {background-image: url(https://image.myanimelist.net/ui/uDqA5Hj63XC4_7-Zz2-uSq8wIIvCIpJo8zfc1aKq-QM);} /* Your name that displays next to the avatar ** Replace content with "display:none;" if you want to get rid of it */ .cover-block::before { content: "Seizon Senryaku";} .header .username:before { background: transparent; content: ""; display: block; position: absolute; top: 20px; left: -940px; width: 150px; height: 140px; } |
Jun 10, 2020 12:18 AM
#252
I see. There isn't a one way solution to it? That's a screencap taken from my phone I'll apply it now, thanks edit: still doesn't work |
3miLJun 10, 2020 12:40 AM
Jun 10, 2020 1:11 AM
#253
@3miL Wait so you're not using the laptop to view your list? You're using your phone? That explains a lot. Now I need a screencap of your list from your phone to make the right measurements, since you're using a different resolution and it looks like MAL is zoomed out on your phone. Without that screencap, I have to guess then the right codes to make this work for your phone. You can try them both out and see if one of them works. Guess 1: @\import "https://dl.dropboxusercontent.com/s/cvop0e358e05oo6/ShelterV1.css"; @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore"; } /*ALL*/ body[data-query*='"status":7'] { background-image: url(https://image.myanimelist.net/ui/NMhxKjGdQ21NnPG4rzwny079TmWQ9LmHBtnxt3CWsQldK8VduYKDlSntkUd87AH8); } /* **Your desired avatar **Note that the best resolution is 120px * 120px */ .cover-block::after {background-image: url(https://image.myanimelist.net/ui/uDqA5Hj63XC4_7-Zz2-uSq8wIIvCIpJo8zfc1aKq-QM);} /* Your name that displays next to the avatar ** Replace content with "display:none;" if you want to get rid of it */ .cover-block::before { content: "Seizon Senryaku";} .header .username:before { background: transparent; content: ""; display: block; position: absolute; top: 20px; left: -460px; width: 150px; height: 140px; } Guess 2: @\import "https://dl.dropboxusercontent.com/s/cvop0e358e05oo6/ShelterV1.css"; @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore"; } /*ALL*/ body[data-query*='"status":7'] { background-image: url(https://image.myanimelist.net/ui/NMhxKjGdQ21NnPG4rzwny079TmWQ9LmHBtnxt3CWsQldK8VduYKDlSntkUd87AH8); } /* **Your desired avatar **Note that the best resolution is 120px * 120px */ .cover-block::after {background-image: url(https://image.myanimelist.net/ui/uDqA5Hj63XC4_7-Zz2-uSq8wIIvCIpJo8zfc1aKq-QM);} /* Your name that displays next to the avatar ** Replace content with "display:none;" if you want to get rid of it */ .cover-block::before { content: "Seizon Senryaku";} .header .username:before { background: transparent; content: ""; display: block; position: absolute; top: 20px; left: -800px; width: 150px; height: 140px; } If those guesses don't work, here's how to do it yourself. This will put a red square on your list. You have to change the number after left (which is 800px now) to a number that moves the red square over the animated pic. When you find the right number you change "red" to "transparent". Then the animated pic will be clickable as you want. @\import "https://dl.dropboxusercontent.com/s/cvop0e358e05oo6/ShelterV1.css"; @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore"; } /*ALL*/ body[data-query*='"status":7'] { background-image: url(https://image.myanimelist.net/ui/NMhxKjGdQ21NnPG4rzwny079TmWQ9LmHBtnxt3CWsQldK8VduYKDlSntkUd87AH8); } /* **Your desired avatar **Note that the best resolution is 120px * 120px */ .cover-block::after {background-image: url(https://image.myanimelist.net/ui/uDqA5Hj63XC4_7-Zz2-uSq8wIIvCIpJo8zfc1aKq-QM);} /* Your name that displays next to the avatar ** Replace content with "display:none;" if you want to get rid of it */ .cover-block::before { content: "Seizon Senryaku";} .header .username:before { background: red; content: ""; display: block; position: absolute; top: 20px; left: -800px; width: 150px; height: 140px; } Otherwise if none of this works I need a screencap from your phone of your list so I can make the right measurements. |
Jun 10, 2020 1:15 AM
#254
@3mil There is another "one solution" as an alternative which I can think of, which I'm trying to avoid since it means recoding the layout which I want to avoid |
Jun 10, 2020 1:32 AM
#255
@3mil Here's another version of your code you can try. Please try this too because this might work best. It puts the clickable part on the same place on screen sizes, not sure about phones tho :/ @\import "https://dl.dropboxusercontent.com/s/cvop0e358e05oo6/ShelterV1.css"; @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore"; } /*ALL*/ body[data-query*='"status":7'] { background-image: url(https://image.myanimelist.net/ui/NMhxKjGdQ21NnPG4rzwny079TmWQ9LmHBtnxt3CWsQldK8VduYKDlSntkUd87AH8); } /* **Your desired avatar **Note that the best resolution is 120px * 120px */ .cover-block::after {background-image: url(https://image.myanimelist.net/ui/uDqA5Hj63XC4_7-Zz2-uSq8wIIvCIpJo8zfc1aKq-QM);} /* Your name that displays next to the avatar ** Replace content with "display:none;" if you want to get rid of it */ .cover-block::before { content: "Seizon Senryaku";} .header .header-menu{ position: fixed; z-index: 99 !important; } .header .username:before { background: transparent; content: ""; display: block; position: fixed; top: 20px; left: calc(50% - 450px); width: 150px; height: 140px; } .list-table .list-table-data .data.title{ z-index: 100 !important; } |
Jun 10, 2020 1:39 AM
#256
Shishio-kun said: Otherwise if none of this works I need a screencap from your phone of your list so I can make the right measurements. I do use both to view but yeah I mostly use my phone to view it as I stream there but since I edit the css on the laptop, I check it here too I'll try to use all those that you sent rn |
Jun 10, 2020 1:50 AM
#257
Shishio-kun said: @3mil There is another "one solution" as an alternative which I can think of, which I'm trying to avoid since it means recoding the layout which I want to avoid I'm going to go with this one you sent me: Shishio-kun said: If those guesses don't work, here's how to do it yourself. This will put a red square on your list. You have to change the number after left (which is 800px now) to a number that moves the red square over the animated pic. When you find the right number you change "red" to "transparent". Then the animated pic will be clickable as you want. I tried the first two guesses and this Shishio-kun said: @3mil Here's another version of your code you can try. Please try this too because this might work best. It puts the clickable part on the same place on screen sizes, not sure about phones tho :/ @\import "https://dl.dropboxusercontent.com/s/cvop0e358e05oo6/ShelterV1.css"; @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore"; } /*ALL*/ body[data-query*='"status":7'] { background-image: url(https://image.myanimelist.net/ui/NMhxKjGdQ21NnPG4rzwny079TmWQ9LmHBtnxt3CWsQldK8VduYKDlSntkUd87AH8); } /* **Your desired avatar **Note that the best resolution is 120px * 120px */ .cover-block::after {background-image: url(https://image.myanimelist.net/ui/uDqA5Hj63XC4_7-Zz2-uSq8wIIvCIpJo8zfc1aKq-QM);} /* Your name that displays next to the avatar ** Replace content with "display:none;" if you want to get rid of it */ .cover-block::before { content: "Seizon Senryaku";} .header .header-menu{ position: fixed; z-index: 99 !important; } .header .username:before { background: transparent; content: ""; display: block; position: fixed; top: 20px; left: calc(50% - 450px); width: 150px; height: 140px; } .list-table .list-table-data .data.title{ z-index: 100 !important; } but neither of them worked. My Mangalist gif (the chaika one) links to my profile, will it help if I send you the css on that one? @\import "https://fonts.googleapis.com/css?family=Oswald"; @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore"; /* BANNER BACKGROUND To change background images: Delete what's in the parenthesis. Upload the new background to Imgur or a similar site, then copy the direct link (or Original GIF link if it's animated) and paste it into the parenthesis. Save. */ :root { --banner: url(https://24.media.tumblr.com/30325414a720dd7f92260af896a4f9ae/tumblr_mvut9wUL9Z1r3rdh2o1_500.gif) !important;} /* BANNER TEXT*/ :root { --name: "Party Time" !Important; } /* BANNER AVATAR (BOTTOM LEFT PIC) */ :root { --avatar: url(https://imgur.com/gCAwgav.gif) !important;} /* BANNER CHARACTER (RIGHT PIC)*/ :root { --character: url(https://cdn140.picsart.com/321921542060201.gif) !important; } /* WALLPAPER */ body:before{ background-image: url(NONE); } /* LEFT CHARACTER BY LIST */ footer:before { background-image: url(NONE) !important; } /* RIGHT CHARACTER BY LIST */ footer:after { background-image: url(NONE) !important; } /* TABLE COLORS*/ :root { /* Generic Colours */ --pbg: rgba(163, 65, 220, 0.95); --bg: rgba(163, 65, 220, 0.95); } /* OTHER CODES*/ body:before { width: 100%; height: 100%; display: block; position: fixed; left: 0; top:0; content: ""; } #search-box:after,.open~#search-button{pointer-events:none}:root{--name:none;--avatar:none;--banner:url(https://i.imgur.com/VoPJz2S.jpg);--character:url(https://i.imgur.com/6IPyngH.png);--pbg:#efefef;--bg:#fff;--text:#323232;--text-h:#787878;--text-dim:#bababa;--text-dim-h:#646464;--text-dark:#111;--icon:#323232;--accent:#4065ba;--btn-bg:#ebebeb;--btn-bg-h:#323232;--btn-head-bg-h:#1d439b;--btn-text-h:#fff;--bg-dark:#ddd;--text-head:#9b9b9b;--text-head-h:#787878;--watching:#2db039;--completed:#26448f;--onhold:#f9d457;--dropped:#a12f31;--plantowatch:#c3c3c3;--cover-bg:#323232;--edit-btn:#d9d9d9;--checkmark:#9696eb}#advanced-options .advanced-options-button a,#fancybox-close,#search-box,#search-box input,#search-box:after,.data.chapter,.data.image .link:after,.data.licensor a,.data.priority,.data.progress,.data.score a,.data.studio a,.data.tags a,.data.tags a.edit:after,.data.volume,.fixed .status-menu:after,.header .header-title:after,.icon-menu svg,.icon-menu.setting,.icon-menu.setting .text,.icon-menu.setting .text a,.icon-menu:after,.icon-menu:before,.list-table .list-table-header .header-title .link.sort,.list-table-header .header-title,.status-button:after,.status-menu-container.fixed .status-menu,.status-menu-container:not(.fixed) .status-menu,.status-menu:after{transition:all .3s ease!important}#advanced-options .advanced-options-header .description,#advanced-options .advanced-options-header .description:before,#advanced-options [class*="-widget"] input,#advanced-options [class*="-widget"] label,#advanced-options [class*="-widget"] select,#search-button i,.header-info a,.list-table-data a,.more-info .td1>div>a{transition:all .15s ease!important}.header .header-title,.header-info,.icon-menu,.icon-menu.quick-add:before,.list-menu-float .icon-menu,.list-table>tbody:first-of-type:after,.stats a{display:inline-block;height:26px!important;width:26px!important;background:var(--bg)!important;border-radius:13px;color:var(--text)!important;font:400 0/26px Arial,Verdana,sans-serif;text-indent:0;text-align:left;white-space:nowrap;vertical-align:top;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:all .3s ease!important}.header .header-title:hover,.icon-menu:hover,.list-menu-float .icon-menu:hover,.stats a:hover{width:100px!important;background:var(--btn-head-bg-h)!important;color:var(--btn-text-h)!important}html{position:relative;min-height:100%}body{padding-bottom:64px;background:var(--pbg) no-repeat center / cover fixed!important}.list-container{position:static;width:100%;background:0 0!important;border:none}.list-block{width:1060px;min-height:initial;margin:64px auto 0}.status-menu-container.fixed+.list-block{margin-top:128px!important}.list-unit{width:100%!important;margin:0}.cover-block,.cover-block:before{left:0;width:100%;position:absolute}.list-table{border:none!important}a,a:hover{color:var(--accent)}.initialize-tutorial{display:none!important}.cover-block{top:0;z-index:-5;min-width:1060px;height:318px;background:center center/cover no-repeat var(--cover-bg);background-image:var(--banner)}.cover-block:before{content:"";bottom:0;display:block;height:50px;background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}#cover-image,.btn-list-setting{display:none!important}.cover-block .image-container{display:block!important;width:1060px;height:100%;padding:0;background:right center/contain no-repeat var(--character);margin:0 auto}#cover-image-container:after{content:var(--name);position:absolute;top:55px;left:50%;margin-left:-475px;color:#fff;font:700 60px/60px Oswald;text-align:left;letter-spacing:15px;text-shadow:1px 4px 7px rgba(0,0,0,.45);text-transform:uppercase;white-space:pre;transform:scale(.9) perspective(350px) rotateY(8deg) rotateZ(-3deg);animation:name-slide 3s 1 .5s backwards}@keyframes name-slide{0%{top:12px;margin-left:-535px;opacity:0;letter-spacing:0;animation-timing-function:ease-out}90%{top:55px;margin-left:-475px}100%{letter-spacing:15px;opacity:1;animation-timing-function:cubic-bezier(0,0,.75,1)}}.header{display:flex;height:36px;margin-top:282px}.header .header-menu{position:static;display:flex;width:auto;height:26px;margin-left:6px;order:2}.btn-menu{height:0;font-size:0!important}.btn-menu #header-menu-button{display:none}.header .header-title{position:static;margin-left:155px;order:1;z-index:1}.header .header-title:before{content:"\f015";display:inline-block;width:26px;background:0 0!important;font-size:14px;font-family:FontAwesome;text-align:center!important}.header .header-title:hover:before{color:var(--btn-text-h)!important}.header .header-title:after{content:"Home";display:inline-block;height:26px!important;width:26px!important;font:14px/26px Arial,Verdana,sans-serif;color:var(--text)}#search-box:after,.status-menu:after{content:""}.header .header-title:hover:after{color:var(--btn-text-h)}.header .header-menu .list-menu{position:static;order:1;display:inline-block;height:26px;border:none;background:0 0;box-shadow:none}.header .icon-menu.anime-list,.header .icon-menu.manga-list{position:static;padding:0;margin-right:6px;font-size:0!important;font-weight:400!important}.header .icon-menu.anime-list .text,.header .icon-menu.manga-list .text{position:static!important;font:14px/26px Arial,Verdana,sans-serif;vertical-align:top}.header .header-menu .list-menu .icon-menu svg.icon{position:static;max-width:14px;max-height:14px;padding:6px;fill:var(--text)}.header .header-menu .list-menu .icon-menu:hover svg.icon{fill:var(--btn-text-h)}.header-info{position:static;width:auto!important;padding:0 8px;margin:0!important;font-size:12px;order:2}.header-info a{color:var(--text)!important;text-decoration:none!important}.header-info a:hover{color:var(--text-h)!important}.btn-menu a.username{position:absolute;left:1px;top:-7px;display:block;width:150px;height:150px;background:0 0;border-radius:50%;font-size:0;z-index:36}.btn-menu span.username{display:none!important}.status-menu-container{position:relative;z-index:35!important;width:100%;min-width:1060px;height:64px;background:0 0;border:none!important}.status-menu-container.fixed{z-index:45!important}.status-menu-container:after,.status-menu-container:before{content:"";position:absolute;left:0;z-index:-1;display:block;width:100%}.status-menu-container:before{top:0;height:64px;background:var(--bg)}.status-menu-container:after{top:64px;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.2),rgba(0,0,0,0))}.status-menu{position:relative;display:block!important;width:1060px;padding:0 0 0 173px;margin:0 auto;box-sizing:border-box}.fixed .status-menu{padding:0 0 0 71px}.status-menu:after{position:absolute;top:-51px;left:-8px;width:150px;height:150px;background:center top/cover no-repeat var(--bg-dark);background-image:var(--avatar);border:8px solid var(--bg);border-radius:50%;opacity:1;box-shadow:0 1px 2px rgba(0,0,0,.2)}.fixed .status-menu:after{top:0;width:48px;height:48px;box-shadow:none}.status-menu .status-button{display:inline-block!important;height:32px;padding:16px 0!important;margin:0 15px!important;color:var(--text-head)!important;font-size:17.6px!important;line-height:30px;white-space:nowrap;font-family:Oswald!important;text-transform:uppercase;letter-spacing:1px}.status-menu .status-button.on{color:var(--text-head-h)!important}.status-button.all_anime:after{background:var(--accent)!important}.status-button.reading:after,.status-button.watching:after{background:var(--watching)!important}.status-button.completed:after{background:var(--completed)!important}.status-button.onhold:after{background:var(--onhold)!important}.status-button.dropped:after{background:var(--dropped)!important}.status-button.plantoread:after,.status-button.plantowatch:after{background:var(--plantowatch)!important}.status-menu-container .search-container{top:19px;right:0}#search-box{padding-right:22px;border:2px solid transparent;border-radius:13px;margin-top:0!important}#search-box.open{width:150px!important;background:var(--btn-bg);border:2px solid var(--bg-dark)}#search-box input{background:0 0;border:none;border-radius:13px;outline:0}#search-box.open input{text-indent:7.5px;line-height:20px}.status-menu-container .search-container #search-button{position:absolute;right:0;top:0;width:26px;height:26px;border-radius:13px;margin-top:0;text-align:center}#search-button i{color:var(--text-head)!important;font-size:18px;line-height:26px}.open~#search-button i{font-size:14px;line-height:24px}#search-box:after{position:absolute;right:0;top:0;width:0;height:22px;padding-right:22px;background:linear-gradient(to right,var(--btn-bg) 2px,transparent 9.5px,transparent 142.5px,var(--btn-bg) 150px) content-box;border:2px solid transparent;border-radius:13px;opacity:0}#search-box.open:after{width:150px;opacity:1}.list-menu-float{position:relative;top:auto;display:block;width:904px;height:0;padding-left:155px;margin:0 auto;border:none;background:0 0;text-align:left;font-size:0;z-index:38}.icon-menu,.list-menu-float form{display:inline-block!important}.list-menu-float .icon-menu{top:74px;margin:0 6px 0 0}.list-menu-float .icon-menu .text{top:0!important;left:26px!important;display:inline-block;width:auto!important;height:26px;color:var(--text)!important;font-size:14px!important;opacity:1!important}.list-menu-float .icon-menu:hover .text{color:var(--btn-text-h)!important}.list-menu-float .icon-menu svg.icon{top:6px!important;left:6px!important;max-width:14px;max-height:14px;fill:var(--text)}.list-menu-float .icon-menu:hover svg.icon{fill:var(--btn-text-h)}[data-owner="1"] .list-menu-float .icon-menu.profile{position:absolute;left:1px;top:-43px;display:block!important;width:150px!important;height:150px!important;background:0 0!important;border-radius:50%;font-size:0;box-shadow:none}[data-owner=""] .icon-menu.profile{background-image:none!important}[data-owner=""] .icon-menu.profile:before{content:"\f007";position:absolute;top:0;left:0;display:block;width:26px;height:26px;font-size:14px;line-height:26px;text-align:center;color:var(--text);font-family:FontAwesome}[data-owner=""] .icon-menu.profile:hover:before{color:var(--btn-text-h)}[data-owner=""] .icon-menu.profile:after{content:"Profile";position:absolute;top:0;left:26px;display:inline-block;height:26px;font-size:14px;color:var(--text)}[data-owner=""] .icon-menu.profile:hover:after{color:var(--btn-text-h)}.icon-menu.quick-add:hover:before,.icon-menu.setting .text a{color:var(--btn-text-h)!important}.icon-menu.quick-add svg{display:none}.icon-menu.quick-add:before{content:"\f067";background:0 0!important;font-size:14px;text-align:center;font-family:FontAwesome;box-shadow:none}.icon-menu.setting{overflow:visible}.icon-menu.setting:hover{width:26px!important}.icon-menu.setting .text{top:-2px!important;left:0!important;width:240px!important;height:26px!important;padding:2px 0;overflow:visible;font-size:0!important;opacity:1!important;pointer-events:none;z-index:-1}.icon-menu.setting:hover .text{pointer-events:auto}.icon-menu.setting .text a{position:absolute!important;top:2px!important;left:13px!important;width:0!important;height:26px!important;background:var(--btn-bg-h)!important;border:none!important;border-radius:0 13px 13px 0;overflow:hidden;font:14px/26px Arial,Verdana,sans-serif!important;text-indent:7.5px;text-align:center;white-space:nowrap;opacity:0!important}.icon-menu.setting:hover .text a{width:120px!important;border-radius:0 13px 13px 0;opacity:1!important}.icon-menu.setting:hover .text .link-list-setting{left:120px!important}.icon-menu.setting .text a:hover{background:var(--btn-head-bg-h)!important}.list-status-title{width:1060px!important;height:64px!important;margin-top:-64px;background:0 0!important}.list-status-title .text{display:none!important}.list-status-title .stats{position:absolute;top:10px;right:32px!important;display:block;width:auto;height:26px!important;border-radius:0 0 26px;font-size:0;line-height:13px!important}.stats a{margin:0 0 0 6px!important;font:14px/26px Arial,Verdana,sans-serif}.stats a i{width:26px;text-align:center}.list-stats{position:absolute;top:416px;width:1060px!important;background:0 0!important;color:var(--text)!important;font-weight:700}.list-table>tbody:first-of-type{position:relative;top:-26px;margin-top:-30px;left:1032px;display:block;width:30px;height:30px;background:0 0!important;z-index:39}.list-table>tbody:first-of-type:after{content:"\f0dc";position:absolute;top:0;right:0;margin:2px;font-size:14px;font-family:FontAwesome;text-align:center}.list-table>tbody:first-of-type:hover:after{background:var(--btn-head-bg-h)!important;color:var(--btn-text-h)!important}.list-table-header{position:absolute;top:0;right:15px;display:block;width:auto;height:26px;padding:2px 0;font-size:0;white-space:nowrap;pointer-events:none;z-index:-1}.list-table>tbody:first-of-type:hover .list-table-header{pointer-events:auto}.list-table-header .header-title{position:relative;display:inline-block!important;width:auto!important;height:auto!important;padding:0!important;border:none!important;background:0 0!important;font-weight:400!important}.list-table>tbody:first-of-type:hover .header-title{opacity:1}.list-table-header .header-title a{display:block!important;width:13px!important;height:26px!important;background:var(--btn-bg-h)!important;border-radius:13px 0 0 13px;margin-left:-13px;overflow:hidden;box-sizing:border-box;color:var(--btn-text-h)!important;font:11px/26px Verdana,Arial,sans-serif!important;text-align:center!important;text-indent:-7.5px;white-space:normal!important;opacity:0}.list-table-header .header-title a.hover_info,.list-table-header .header-title.tags{display:none!important}tbody:first-of-type:hover .list-table-header .header-title.finished a,tbody:first-of-type:hover .list-table-header .header-title.started a{padding:0 13px}.data,.data.status{padding:0!important}.list-table-header .header-title a:hover{background:var(--btn-head-bg-h)!important}tbody:first-of-type:hover .list-table-header .header-title a{width:80px!important;opacity:1}.list-table-header .header-title a .sort-icon{position:absolute;left:50%;width:10px;height:10px;margin-left:-5px;color:inherit!important;font-size:10px;line-height:10px}.sort-icon.fa-sort-asc{top:2px}.sort-icon.fa-sort-desc{bottom:2px}.header-title.title a{font-size:0!important}.header-title.title a:after{content:"Title";font-size:11px!important}.list-item{position:relative;display:block;width:100%;background:var(--bg)!important;border:none;margin-bottom:8px}.list-table-data{position:relative;display:flex;max-width:1060px;min-height:64px;align-items:center;font-size:0}.data{display:block!important;border:none!important;flex:0 0 auto;color:var(--text);font-size:11px}.list-table .list-table-data .data a{color:var(--text)!important;text-decoration:none!important}.list-table .list-table-data a:not(.edit-disabled):hover{color:var(--text-h)!important}.list-unit .loading-space{margin:14px 0 22px}.list-unit .loading-space #loading-spinner{width:20px;height:20px;margin:0 auto;color:var(--text)}.list-table[data-items="[]"]:after{content:"No entries found. Perhaps your search terms are too restrictive?";display:block;width:900px;background:var(--bg);border-radius:16px;margin:32px auto;color:var(--text);font:16px/32px Arial,Verdana,sans-serif;text-align:center}.data.status{position:absolute;top:0;left:0;width:1px!important;height:100%}.data.image{width:64px;height:64px;border-radius:50%;margin:4px 0 4px 8px;overflow:hidden;order:1}.data.image a{position:relative;display:block!important}.data.image img{width:64px!important;height:64px!important;border:none!important;object-fit:cover}.data.image a:after{content:"\f14c";position:absolute;top:0;left:0;display:block;width:100%;height:100%;background:rgba(0,0,0,.5);font-family:FontAwesome;color:#fff;font-size:30px;line-height:64px;opacity:0}.data.image a:hover:after{opacity:1}.data.number{position:relative;top:-22px;width:20px;height:20px;background:var(--bg);border-radius:10px;margin:0 -28px 0 8px;order:1;line-height:20px;font-weight:700;z-index:1}.data.title,.data.type{height:16px;line-height:16px}.list-item:nth-child(n+101) .data.number{text-indent:-7px}.list-item:nth-child(n+1001) .data.number{width:27px;margin-right:-35px}.list-item:nth-child(n+10001) .data.number{width:34px;margin-right:-42px}.data.title{position:relative;width:142px;padding:32px 0 0 8px!important;order:12;flex:1 0 auto}.data.title .link.sort{position:absolute;top:16px;left:8px;display:inline-block;max-width:100%;padding-right:16px;overflow:hidden;box-sizing:border-box;line-height:16px;white-space:nowrap;text-overflow:ellipsis}.list-table .list-table-data .title .link:hover{color:var(--accent)!important}.content-status,.rereading,.rewatching{color:var(--text-dim)!important;font-size:10px!important}.content-status:before,.rereading:before,.rewatching:before{content:"["}.content-status:after,.rereading:after,.rewatching:after{content:"] - "}.add-edit-more{display:inline;float:none!important;color:var(--text-dim)}.list-table .list-table-data .title .add-edit-more a{color:var(--text-dim)!important}.list-table .list-table-data .title .add-edit-more a:hover{color:var(--text-dim-h)!important}.icon-watch{display:none!important}.data.type{position:relative;top:-16px;width:92px;padding-left:8px!important;margin-right:-100px;order:11;text-align:left!important;color:var(--text-dim);font-size:10px}.data.score a,.data.score select{display:block;height:26px;border-radius:13px;line-height:26px}.data.score{position:relative;width:26px;height:26px;order:13}.data.score a{width:26px;background:var(--btn-bg);margin:0 0 0 auto}.list-table .list-table-data .score a:not(.edit-disabled):hover{background:var(--btn-bg-h);color:var(--btn-text-h)!important}.data.score select{position:absolute;top:0;right:0;width:40px;background:var(--btn-bg-h);color:var(--btn-text-h);box-shadow:none!important}.data.score select:focus{outline:0!important;box-shadow:0 2px 2px rgba(0,0,0,.3)}.data.chapter input,.data.progress input,.data.tags textarea,.data.volume input{border:1px solid var(--bg-dark);outline-color:var(--accent)!important;box-sizing:border-box}.data.chapter,.data.progress,.data.volume{width:92px;order:15}.data.chapter{margin-top:-34px}.data.volume{margin:34px 0 0 -92px}.data.chapter span,.data.progress span,.data.volume span{color:var(--text)}.data.progress:before{content:"Progress:";color:var(--text-dim)}.data.chapter:before{content:"Chapters:";color:var(--text-dim)}.data.volume:before{content:"Volumes:";color:var(--text-dim)}.data.chapter span:only-of-type:after,.data.progress span:only-of-type:after,.data.volume span:only-of-type:after{content:" \f058";position:relative;top:1px;color:var(--checkmark);font-family:FontAwesome;font-size:13px}.data.chapter input,.data.progress input,.data.volume input{height:15px;padding:0 1px;background:var(--btn-bg);color:var(--text-dark);font:11px Verdana,Arial,sans-serif}.data.priority{position:relative;width:92px;height:74px;background:var(--bg);margin-right:-92px;order:14;color:var(--text);line-height:74px;opacity:1;pointer-events:none;z-index:1}.status:not(.plantowatch):not(.plantoread)~.data.priority{display:none!important}.list-item:hover .data.priority{opacity:0}.data.priority:before{content:"\f0a2";font-family:FontAwesome}.data.magazine,.data.rated,.data.retail,.data.season,.data.storage{margin-right:4px;order:19;flex-shrink:1}.data.rated{width:40px}.data.magazine{width:90px}.data.retail,.data.storage{width:72px}.data.season{width:92px;order:20}.data.magazine:before,.data.rated:before,.data.retail:before,.data.season:before,.data.storage:before{display:block;color:var(--text-dim)}.data.rated:before{content:"Rated:"}.data.magazine:before{content:"Magazine:"}.data.retail:before,.data.storage:before{content:"Storage:"}.data.season:before{content:"Premiered:"}.data.season:empty:after{content:"Unknown";display:block;color:var(--text-dim)}.data.licensor,.data.studio,.data.tags{width:120px;padding:3px 0!important;margin-right:8px;order:21;flex-shrink:1}.data.licensor span,.data.studio span,.data.tags span{display:block;padding:1px 0;font-size:0!important;line-height:0}.data.licensor a,.data.studio a,.data.tags a:not(.edit){display:block;padding:1px;background:var(--btn-bg);border-radius:8.5px;color:var(--text)!important;font-size:11px!important;line-height:15px}.list-table .list-table-data .licensor span a:hover,.list-table .list-table-data .studio span a:hover,.list-table .list-table-data .tags span a:hover{background:var(--btn-bg-h);color:var(--btn-text-h)!important}.data.licensor:empty:before,.data.studio:empty:before{display:block;padding:1px;color:var(--text-dim);font-size:10px;line-height:15px;white-space:pre}.data.studio:empty:before{content:"Unknown\aStudio"}.data.licensor:empty:before{content:"Unknown\aLicensor"}.data.tags textarea{position:absolute;top:50%;right:4px;z-index:5;width:530px!important;height:64px!important;background:var(--btn-bg);margin-top:-32px;resize:none;color:var(--text)}.data.tags a.edit{position:absolute;top:0;right:0;width:5px!important;height:100%!important;background:var(--edit-btn);text-align:left!important;font-size:0!important;opacity:0;z-index:1}.list-item:hover .data.tags a.edit{opacity:.7}.list-item:hover .data.tags a.edit:hover{width:25px!important;opacity:1}.data.tags a.edit:after{content:"\f040";position:absolute;top:50%;right:0;width:100%;height:20px;margin-top:-10px;color:var(--text);font:0/20px FontAwesome;text-align:center;opacity:0}.data.tags a.edit:hover:after{font-size:14px;opacity:1}.data.airing-finished,.data.airing-started,.data.days,.data.finished,.data.started{position:relative;width:100px;height:14px;overflow:hidden;order:25;color:var(--text);font-size:9px;line-height:14px;text-align:left!important;text-overflow:ellipsis}.data.started{top:-20px}.data.finished{top:0;margin-left:-100px}.data.days{top:20px;margin-left:-100px}.data.airing-started{top:-10px}.data.airing-finished{top:10px;margin-left:-100px}.data.airing-finished:before,.data.airing-started:before,.data.days:before,.data.finished:before,.data.started:before{display:inline-block;width:29px;padding-right:4px;border-right:1px solid var(--text-dim);text-align:right;color:var(--text-dim)}.data.started:before{content:"Start"}.data.finished:before{content:"End"}.data.days:before{content:"Days"}.anime .data.airing-started:before{content:"Aired"}.manga .data.airing-started:before{content:"Issued"}.data.airing-finished:before{content:"to"}.more-info{border:none!important}.more-info .td1{position:relative;padding-top:23px;color:var(--text-dark)}#footer-block:before,.more-info .td1>div>a,footer{position:absolute;left:0}.more-info .td1>div{margin:0}.more-info .td1>div>a{top:0;border-bottom:2px solid var(--accent)}.list-table .more-info .more-content a{color:var(--text-dark)!important}.list-table .more-info .more-content a:hover{color:var(--accent)!important}footer{bottom:0;width:100%}#footer-block{min-width:1060px;height:32px;padding:16px 0;background:var(--bg)}#footer-block:before{content:"";top:-2px;width:100%;min-width:1060px;height:2px;background:linear-gradient(to top,rgba(0,0,0,.1),rgba(0,0,0,0))}#copyright{padding:0;color:var(--text-head);line-height:16px}#copyright:after{content:"\aList design by Valerio Lyndon.";white-space:pre}#fancybox-overlay{background:#000!important;opacity:.2!important}#fancybox-outer [class^=fancy-]{display:none}#fancybox-outer{background:var(--bg)!important;box-shadow:0 0 32px rgba(0,0,0,.5)}#fancybox-outer #fancybox-close{top:-13px;right:-13px;width:16px;height:16px;padding:2px;background:var(--btn-bg);border:3px solid var(--btn-text-h);border-radius:13px;color:var(--text);text-align:center;box-shadow:0 1px 2px rgba(0,0,0,.2)}#fancybox-outer #fancybox-close:after{content:"\f00d";display:block;margin-top:-1px;font:16px/1 FontAwesome}#fancybox-outer #fancybox-close:hover{background:var(--text);color:var(--btn-text-h)}#advanced-options{top:64px;width:910px;padding:32px 0;background:var(--bg);border:none;box-shadow:0 0 32px rgba(0,0,0,.5);color:var(--text-dark)}#advanced-options .advanced-options-button,#advanced-options .advanced-options-header,#advanced-options [class*="-widget"]{width:100%;padding:0;border:none}#advanced-options .filter-widget:last-of-type,#advanced-options .sort-widget:last-of-type{padding-bottom:0}#advanced-options .filter,#advanced-options .sort{padding-bottom:32px}#advanced-options .advanced-options-header{font-size:0;line-height:26px;box-sizing:border-box}#advanced-options .advanced-options-header:before{display:inline-block;width:249px;height:100%;padding-bottom:7.5px;font-size:16px;line-height:26px;text-align:right}#advanced-options .filter .advanced-options-header:before{content:"Filter"}#advanced-options .sort .advanced-options-header:before{content:"Sort"}#advanced-options .advanced-options-header .description{display:inline-block;width:20px;margin:0;color:transparent;white-space:nowrap;vertical-align:top;transition:all .15s ease;pointer-events:none}#advanced-options .advanced-options-header .description:hover{color:inherit;pointer-events:auto}#advanced-options .advanced-options-header .description:before{content:"\f059";display:inline-block;width:20.5px;color:var(--icon);font:14px/1 FontAwesome;text-align:center;pointer-events:auto}#advanced-options .advanced-options-header .description:hover:before{color:var(--text-dim)}#advanced-options [class*="-widget"]{font-size:0;line-height:1;white-space:nowrap}#advanced-options [class*="-widget"]>*{font-size:12px;vertical-align:top}#advanced-options [class*="-widget"] .widget-header{width:250.5px;height:26px;padding:11px 7.5px 11px 0;border-right:2px solid var(--text-dim);margin-right:7.5px;line-height:26px;text-align:right}#advanced-options [class*="-widget"] span{line-height:26px}#advanced-options [class*="-widget"] input,#advanced-options [class*="-widget"] label,#advanced-options [class*="-widget"] select,#advanced-options [class*="-widget"] span:not(.widget-header){height:26px;margin:11px 0;border-color:var(--text-dim)!important;border-radius:13px;box-sizing:border-box;color:var(--text-dark);font-size:12px}#advanced-options [class*="-widget"] input,#advanced-options [class*="-widget"] select{padding:0 7.5px;background:0 0;outline:0}#advanced-options [class*="-widget"] select{padding-right:16px;background:url(https://i.imgur.com/hFijppc.png) center right/16px auto no-repeat}#advanced-options [class*="-widget"] input:focus,#advanced-options [class*="-widget"] option,#advanced-options [class*="-widget"] select:focus{background-color:var(--btn-bg)!important}#advanced-options :disabled,#advanced-options input:disabled+label{opacity:.5;color:var(--text)!important}#advanced-options .title input{width:387.5px!important}#advanced-options .filter-widget[class*="-status"] select{width:197.5px!important}#advanced-options .magazine select,#advanced-options .producer select{width:387.5px!important}#advanced-options .filter-widget[class*="-date"] span:nth-of-type(n+2){display:inline-block;width:40px;padding:0 3px 0 7.5px;border:1px solid var(--text-dim);border-right:none;border-radius:13px 0 0 13px;margin-right:0!important;line-height:24px;font-style:italic}#advanced-options .filter-widget[class*="-date"] span:nth-of-type(3){margin-left:7.5px!important}#advanced-options .filter-widget[class*="-date"] .day,#advanced-options .filter-widget[class*="-date"] .month,#advanced-options .filter-widget[class*="-date"] .year{border-radius:0;padding:0 16px 0 7.5px;border-left-width:0}#advanced-options .filter-widget[class*="-date"] .month,#advanced-options .filter-widget[class*="-date"] .year{border-right:none}#advanced-options .filter-widget[class*="-date"] .day{border-radius:0 13px 13px 0}#advanced-options .filter-widget[class*="-date"] .year{width:60px!important}#advanced-options .filter-widget[class*="-date"] .day,#advanced-options .filter-widget[class*="-date"] .month{width:45px!important}#advanced-options .aired-season .year{width:60px!important}#advanced-options .aired-season .season{width:130px!important;margin-left:7.5px}#advanced-options .first select,#advanced-options .second select{width:190px!important}#advanced-options .sort-widget input[type=radio]+label{width:92.25px!important;border-radius:13px;margin-left:7.5px;background:0 0!important;color:var(--text-dark);line-height:14px;transition:all .15s ease}#advanced-options .sort-widget input[type=radio]:not(:disabled)+label:hover{background:var(--btn-bg)!important}#advanced-options .sort-widget input[type=radio]:not(:disabled):checked+label{background:var(--text-dim)!important;border:1px solid var(--text-dim);color:var(--bg)!important}#advanced-options .sort-widget input[type=radio]:not(:checked)+label i{color:var(--icon)}#advanced-options #fancybox-close,#advanced-options .advanced-options-button a{width:90px;height:26px;padding:0;background:var(--btn-bg);border-radius:13px;box-shadow:0 1px 2px rgba(0,0,0,.2);color:var(--text-dark);line-height:26px;text-align:center}#advanced-options #fancybox-close:hover,#advanced-options .advanced-options-button a:hover{background:var(--btn-bg-h);color:var(--btn-text-h)}#advanced-options .advanced-options-button .btn-apply{margin:0 0 0 -106px}#advanced-options .advanced-options-button .btn-clear{margin:0 0 0 8px}#advanced-options #fancybox-close{left:50%;top:auto;bottom:32px;border:none;margin-left:53px}#advanced-options .btn-apply:before{content:"\f00c ";font-family:FontAwesome}#advanced-options .btn-clear:before{content:"\f12d ";font-family:FontAwesome}#advanced-options #fancybox-close:after{content:"\f00d Close";font:12px/26px Arial,FontAwesome,sans-serif} /* "Clarity" Modification by Valerio Lyndon / Hover Image / Revision 0.2 */ .data.image{overflow:visible}.data.image a:before{content:"";position:absolute;top:50%;left:-166px;z-index:50;width:150px;height:0;background:center/cover no-repeat var(--bg-dark);border-radius:8px;box-shadow:0 0 2px #000;opacity:0;pointer-events:none;transition:all .3s ease}.list-item:hover .data.image a:before{top:calc(50% - 100px);height:200px;opacity:1}.data.image a:after,.data.image img{border-radius:50%} .cover-block { z-index: 25; } .header { z-index: 30; } footer:before, footer:after { content: ""; position: fixed; top: 0; z-index: -1; width: calc(50% - 538px); min-width: 262px; height: 100%; background: transparent no-repeat center bottom / contain scroll; } /* Left Render */ footer:before { right: calc(100% - (50% - 538px)); background-position: left bottom; } /* Right Render */ footer:after { left: calc(100% - (50% - 538px)); background-position: right bottom; } So I actually thought about that before and tried to understand what was it that made the gif a link but when I tried it it messed up the animelist. Good thing I keep a copy of the CSS on my notepad before messing with it. Shishio-kun said: @3mil There is another "one solution" as an alternative which I can think of, which I'm trying to avoid since it means recoding the layout which I want to avoid Yes I really like the layout too. Hopefully there's a way we can go about this without doing that |
Jun 10, 2020 12:06 PM
#258
@3miL OK I see now, the list looks different for you than for me so that's why none of my codes were working for you but they were working for me :/ Try this then I tested it a lot. btw this is only for the phone. We have to add another code later for the laptop but lets get the phone thing taken care of first @_@ @\import "https://dl.dropboxusercontent.com/s/cvop0e358e05oo6/ShelterV1.css"; @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore"; } /*ALL*/ body[data-query*='"status":7'] { background-image: url(https://image.myanimelist.net/ui/NMhxKjGdQ21NnPG4rzwny079TmWQ9LmHBtnxt3CWsQldK8VduYKDlSntkUd87AH8); } /* **Your desired avatar **Note that the best resolution is 120px * 120px */ .cover-block::after {background-image: url(https://image.myanimelist.net/ui/uDqA5Hj63XC4_7-Zz2-uSq8wIIvCIpJo8zfc1aKq-QM);} /* Your name that displays next to the avatar ** Replace content with "display:none;" if you want to get rid of it */ .cover-block::before { content: "Seizon Senryaku";} .list-menu-float .icon-menu.profile:after { background: transparent !important; content: ""; display: block; position: fixed !important; top: 20px; left: 15%; width: 140px !important; height: 140px !important; visibility: visible !important; opacity: 1 !important;} |
Jun 10, 2020 4:59 PM
#259
Shishio-kun said: *** Might be unintentional but it actually works both ways this time lol, thanks. :D the only difference I see is when I press the gif on my phone, even on the right side it shows the drop-down with the links to the profile, anime-mangalist and such but it pretty much does the job, I even clicked the sides of the gif on my laptop and it works so well. Really sorry for the trouble and again thanks Shishio! :) |
Jun 10, 2020 5:55 PM
#260
3miL said: Shishio-kun said: *** Might be unintentional but it actually works both ways this time lol, thanks. :D the only difference I see is when I press the gif on my phone, even on the right side it shows the drop-down with the links to the profile, anime-mangalist and such but it pretty much does the job, I even clicked the sides of the gif on my laptop and it works so well. Really sorry for the trouble and again thanks Shishio! :) Great :D yes it works both ways because of the left percentage I guess D: |
Jun 17, 2020 11:45 AM
#261
Hi, so i did everything as in your video and everything is working fine, I just noticed that for some reason in my list i have 5 anime per row while in your video you had 6. Do you perhaps know how to fix this? It just looks a bit wrong all to the side like that, my ocd tells me it must be symmetric. |
Jun 17, 2020 12:46 PM
#262
CheesyMike said: Hi, so i did everything as in your video and everything is working fine, I just noticed that for some reason in my list i have 5 anime per row while in your video you had 6. Do you perhaps know how to fix this? It just looks a bit wrong all to the side like that, my ocd tells me it must be symmetric. You have 6 on my screen, maybe your screen size is smaller than mine or you zoomed yours in. You can adjust it with the zoom option in your browser. |
Jun 17, 2020 12:56 PM
#263
Shishio-kun said: CheesyMike said: Hi, so i did everything as in your video and everything is working fine, I just noticed that for some reason in my list i have 5 anime per row while in your video you had 6. Do you perhaps know how to fix this? It just looks a bit wrong all to the side like that, my ocd tells me it must be symmetric. You have 6 on my screen, maybe your screen size is smaller than mine or you zoomed yours in. You can adjust it with the zoom option in your browser. ahhh silly mistake, thank you anyway! |
Jul 5, 2020 3:35 AM
#264
https://dl.dropboxusercontent.com/s/9vlr4omtcg449zd/Steiner1411_MAL.css. This one seems to be broken or not optimised for mobile. It looks weird |
Jul 6, 2020 3:23 PM
#265
Phuckeury said: https://dl.dropboxusercontent.com/s/9vlr4omtcg449zd/Steiner1411_MAL.css. This one seems to be broken or not optimised for mobile. It looks weird It doesn't look broken on PC. It works for me on phone too. It just takes a lot of zooming around. btw most if not all list layouts in this club were made with desktops and laptops in mind. Custom list CSS generally isn't made for the "Request Desktop" feature on mobile devices. I don't know of any layout specifically optimized for mobile. MAL has mobile view for lists which replaces the custom CSS with their own mobile-friendly custom CSS for the lists. And once you've switched to desktop mode on phone, I'm not sure how you switch back to mobile view either. |
Shishio-kunJul 6, 2020 3:47 PM
Jul 26, 2020 12:19 PM
#266
Is it possible to repair images that you once had in your "About Me" section if they are from tinypic ? Also the forum signature/banner, the one below this post. I pasted the link into Wayback Machine but it says 'No URL has been captured for this domain' |
Jul 26, 2020 2:05 PM
#267
TheDarkAngel said: Is it possible to repair images that you once had in your "About Me" section if they are from tinypic ? Also the forum signature/banner, the one below this post. I pasted the link into Wayback Machine but it says 'No URL has been captured for this domain' Do you have the image URLs? Try to paste them here. Sometimes you can paste them into Google Images and find them if they aren't on Wayback. But if they aren't on Wayback they might be lost |
Jul 28, 2020 10:41 AM
#268
Shishio-kun said: TheDarkAngel said: Is it possible to repair images that you once had in your "About Me" section if they are from tinypic ? Also the forum signature/banner, the one below this post. I pasted the link into Wayback Machine but it says 'No URL has been captured for this domain' Do you have the image URLs? Try to paste them here. Sometimes you can paste them into Google Images and find them if they aren't on Wayback. But if they aren't on Wayback they might be lost http://i65.tinypic.com/2hci6pj.png http://i66.tinypic.com/5uoig5.gif[/img][/url] http://i63.tinypic.com/sc3xfk.gif[/img][/url] http://i65.tinypic.com/28h3ciq.gif[/img][/url] http://i67.tinypic.com/28s0y8g.gif[/img][/url] http://i64.tinypic.com/wqymg5.gif[/img][/url] Managed to get the signature back, but I can't find any of the links from above on wayback machine. |
Jul 28, 2020 3:10 PM
#269
TheDarkAngel said: Shishio-kun said: TheDarkAngel said: Is it possible to repair images that you once had in your "About Me" section if they are from tinypic ? Also the forum signature/banner, the one below this post. I pasted the link into Wayback Machine but it says 'No URL has been captured for this domain' Do you have the image URLs? Try to paste them here. Sometimes you can paste them into Google Images and find them if they aren't on Wayback. But if they aren't on Wayback they might be lost http://i65.tinypic.com/2hci6pj.png http://i66.tinypic.com/5uoig5.gif[/img][/url] http://i63.tinypic.com/sc3xfk.gif[/img][/url] http://i65.tinypic.com/28h3ciq.gif[/img][/url] http://i67.tinypic.com/28s0y8g.gif[/img][/url] http://i64.tinypic.com/wqymg5.gif[/img][/url] Managed to get the signature back, but I can't find any of the links from above on wayback machine. They're not showing up on Google Images either, I can't think of any where else online to search so I think they're gone :/ You can try to also search your own profile URL on Wayback and Google Images and see what that brings up |
Jul 29, 2020 2:59 AM
#270
Shishio-kun said: TheDarkAngel said: Shishio-kun said: TheDarkAngel said: Is it possible to repair images that you once had in your "About Me" section if they are from tinypic ? Also the forum signature/banner, the one below this post. I pasted the link into Wayback Machine but it says 'No URL has been captured for this domain' Do you have the image URLs? Try to paste them here. Sometimes you can paste them into Google Images and find them if they aren't on Wayback. But if they aren't on Wayback they might be lost http://i65.tinypic.com/2hci6pj.png http://i66.tinypic.com/5uoig5.gif[/img][/url] http://i63.tinypic.com/sc3xfk.gif[/img][/url] http://i65.tinypic.com/28h3ciq.gif[/img][/url] http://i67.tinypic.com/28s0y8g.gif[/img][/url] http://i64.tinypic.com/wqymg5.gif[/img][/url] Managed to get the signature back, but I can't find any of the links from above on wayback machine. They're not showing up on Google Images either, I can't think of any where else online to search so I think they're gone :/ You can try to also search your own profile URL on Wayback and Google Images and see what that brings up Tested out by searching the profile aswell in wayback machine, nothing found. Atleast got the signature, thanks a bunch for taking your time :) |
Sep 1, 2020 6:59 PM
#271
So...uh, hi I'm having a problem with my layout I have those things on the and normaly they stay hidden unless the mouse hovers over it I don't know how to fix this, even tought i've tried, but maybe i'm just dumb My list is on the classic template and this is my code: @import url(https://storage.live.com/items/4A07C1EEED420167%21170); @\import "https://malscraper.azurewebsites.net/covers/auto/presets/more"; @import url(https://malcat-gen.appspot.com/series?preset=more); @import url(http://storage.live.com/items/4A07C1EEED420167%21150); /* BACKGROUND IMAGE This is the main background image for the whole page. Change the image link to the background you want! If you're not seeing a background, make sure you are copied the entire CSS code or added any new background image codes correctly. Also your image link may be broken, try uploading a new background then! */ body { background-image: url(https://i.imgur.com/HqvBMNG.png); background-attachment: fixed; background-size: cover; } /* HEADER COLOR AND FONT These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc). if you don't want a solid color there, go to the line that starts with background-color and replace it the color type (blue for example) with the word "transparent" (no quotations). */ .header_title { background-color:black; color:white; font-family:Times New Roman; font-size:25px; } /* SUB-HEADERS BACKGROUND COLOR COLOR Below each main header is the sub-header which says Score, Episodes, Tags, etc. */ .table_header { border-style: solid !important; border-width: 3px; border-color: black; background-color:#CC0000; } /* ANIME/MANGA TITLE FONTS This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc. */ .animetitle, .animetitle:visited { color:white; font-family:Helvitica; font-size:15px; } /* LIST FONTS This is the type and color for more of the numbers, links, and words on the list itself! */ .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color:white; font-family:Lucida Grande; } /* LIST WIDTH Use this to increase the width of your list! */ #list_surround { width:570px; } /* SIDE HEADERS The headers on the side */ #list_surround .status_selected, #list_surround .status_not_selected { -webkit-background-clip:padding-box !important; background-clip:padding-box !important; background-color:transparent; background-image:url(https://ia801402.us.archive.org/29/items/watchingH/watchingSH.png); background-position:0 0; background-repeat:no-repeat no-repeat; background-size:contain; border:1px solid #000; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; display:block; left:20px; padding:0; position:fixed; top:100px; width:250px; } #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(https://ia801402.us.archive.org/29/items/watchingH/completedSH.png); background-position:100% 0; top:176px; } #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(https://ia801402.us.archive.org/29/items/watchingH/on-holdSH.png); background-position:0 0; top:252px; } #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(https://ia801402.us.archive.org/29/items/watchingH/droppedSH.png); background-position:100% 0; top:328px; } #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(https://ia801402.us.archive.org/29/items/watchingH/plan-to-watchSH.png); background-position:0 0; top:404px; } #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(https://i.imgur.com/i2eGZnF.png); background-position:100% 0; top:480px; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color:transparent; display:block; font-size:0; height:75px; width:250px; } .status_selected a{ height:75px; width:250px; display:block; visibility:visible; background-color: transparent; position:fixed; border:1px solid #000; } .status_not_selected { -webkit-transition:all 0.4s ease 0s; display:block; left:-110px !important; opacity:0.7; transition:all 0.4s ease 0s; } .status_not_selected:hover{ -webkit-transition:all 0.4s ease 0s; color:transparent; left:-8px !important; opacity:1; transition:all 0.4s ease 0s; } .status_selected a[href*="status=1"] { top:100px !important; left:-8px !important; display: block!important; background-image:url(https://ia801402.us.archive.org/29/items/watchingH/watchingSH.png); position:fixed; } .status_selected a[href*="status=2"] { top:176px !important; left:-8px !important; display: block!important; background-image:url(https://ia801402.us.archive.org/29/items/watchingH/completedSH.png); position:fixed; } .status_selected a[href*="status=3"] { top:252px !important; left:-8px !important; display: block!important; background-image:url(https://ia801402.us.archive.org/29/items/watchingH/on-holdSH.png); position:fixed; } .status_selected a[href*="status=4"] { top:328px !important; left:-8px !important; display: block!important; background-image:url(https://ia801402.us.archive.org/29/items/watchingH/droppedSH.png); position:fixed; } .status_selected a[href*="status=6"] { top:404px !important; left:-8px !important; display: block!important; background-image:url(https://ia801402.us.archive.org/29/items/watchingH/plan-to-watchSH.png); position:fixed; } .status_selected a[href*="status=7"] { top:480px !important; left:-8px !important; display: block!important; background-image:url(https://i.imgur.com/i2eGZnF.png); position:fixed; } /* LIST COLOR The numbers in parenthesis below control the color of your list background itself. The first number is the amount of red, the second amount of green, third blue, and each can be set to a maximum of 255 and minimum of 0. The 4th number in parenthesis is the opacity amount, which can be set from .0 (invisible) to 1 (completely opaque). For more info on RGBA color see this tutorial: http://myanimelist.net/forum/?topicid=440525 */ .category_totals, .td1, .td2, #grand_totals, #copyright { background-color: rgba(55,55,55,.5); } /* ROW HOVER COLOR Change the color you see on a row only when you put your cursor over it with this code, you use the same color change style as in the above code. */ tr:hover [class^=td] { background-color: rgba(80, 50, 225, 0.9) !important; } /* REPOSITION MAIN BACKGROUND Change the position your background starts on your screen from with the two properties after "background-position" below. You replace 'center' and '43%' with two other properties, they can be any of the following: left, top, bottom, right, or center. So if you want your background to start from the center of the screen, use "center center" after background- position in the code below, replacing "center 43%". If you want it to start from the top and left, use "top left" If you want it to start from the top and center, use "top center". If you want it to start from the right and top, use "right top" If you want it to start from the right and bottom, use "right bottom" and so forth... Additionally, you can change "left" to a % to determine how far left or right the background starts from. For example "30% top" will start the background from the top but 30% of the pic's width from the left of the layout. You can also change top to a % to change the amount you want to start it from the top or bottom. */ body{ background-position: center 43%;} /* HEADER LIST CURRENTLY WATCHING HEADER This is the header above currently watching/reading. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_cw { background-image:url(https://archive.org/download/watchingH/watchingH.png); height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* COMPLETED HEADER This is the header above your anime/manga that's completed. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_completed { background-image:url(https://ia801402.us.archive.org/29/items/watchingH/completedH.png); height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* ON-HOLD HEADER This is the header above your animes/mangas on-hold. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_onhold { background-image:url(https://ia801402.us.archive.org/29/items/watchingH/on-holdH.png); height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* DROPPED HEADER This is the header above your dropped animes/mangas. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_dropped { background-image:url(https://ia801402.us.archive.org/29/items/watchingH/droppedH.png); height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* PLAN TO WATCH HEADER This is the header above the anime/manga you plan to see or read on your list. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_ptw { background-image:url(https://ia601402.us.archive.org/29/items/watchingH/plan-to-watchH.png); height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* REMOVE HEADER COLOR You need this code to remove the default background colors from the header and override any related codes. You're supposed to use your own images or the default ones for the header, so this color is set to transparent so it won't get in the way. If you want the color back for some reason, remove this section. */ .header_title { background-color: transparent !important; } /* OTHER CODES Stuff I had to add after site changes. You need this otherwise the headers won't be visible. */ tbody {background-color: transparent; background-image: none;} /* REMOVE HEADER TEXT These codes remove the original text like "Completed" and "Currently Watching" from each category on the list. Some people will want the text gone so they can have their own custom logos. But if you want the text back, you have to remove this whole section. It shouldn't affect the images in any way. */ .header_title { color: gray !important; color: transparent !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; } /* CODES (REPLACEMENT FOR "CSS FOR FOXGIRLS" IMPORT) Used to remove the more button (which no longer works after using the code above to show covers). Also helps with settings for the tag hover option if you use that. */ #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(3), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(4), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(5), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(6), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(7), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(8) { display: tab\le-cell; } #list_surround small a:last-of-type { display: none !important; } .animetitle + small { visibility: visible !important; } #list_surround a[href*="http://myanimelist.net/panel.php?go=edit"], #list_surround a[href*="http://myanimelist.net/editlist.php?type="], #list_surround a[href*="http://myanimelist.net/panel.php?go=add"] { visibility: visible !important; margin-right: 10px } .td1:nth-of-type(6) small, .td2:nth-of-type(6) small, .td1:nth-of-type(5) small, .td2:nth-of-type(5) small, .td1:nth-of-type(4) small, .td2:nth-of-type(4) small { visibility: visible !important; } .td1:nth-of-type(6) small:hover, .td2:nth-of-type(6) small:hover, .td1:nth-of-type(5) small:hover, .td2:nth-of-type(5) small:hover, .td1:nth-of-type(4) small:hover, .td2:nth-of-type(4) small:hover{ text-decoration: underline; } /* COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS). Left and top adjust the position it appears on screen. Control the height and width of the pic with height and width. Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. Increase height and width to make the pics bigger. Delete border-style: solid; to remove the border. */ .hide { background-color: rgba(104, 102, 103, 0.75); background-position: 50% 20% !important; background-repeat: no-repeat !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: block !important; height: 515px; left: 990px; position: fixed; top: 15px; width: 234px; padding: 79px 40px 10px 10px; background-size: 250px !important; visibility: hidden; opacity: 0; } /* PREVIEW MSG ABOVE COVERS Remove content: "preview"; to remove the PREVIEW text. Change the text in quotations after content to what you want it to say above your cover pic. Top and width controls the position of the text. */ .hide:before { background: transparent; color: white; content: "Review"; padding-bottom: 5px; position: absolute; text-align: center; width: 255px; top: 5px; border-radius: 25px 25px 0 0; } /* MINI REVIEW (HOVER TAG) Move the area around with the left and top codes. Adjust the surrounding area of the tags by adjusting the padding. Control the height and width of the section with the height and width codes. If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial: http://myanimelist.net/forum/?topicid=563993 */ td[class^='td']:nth-of-type(6) { visibility: hidden; opacity: 0; left: 1000px; position: fixed; top: 460px; font-size: 16px; width: 245px; color: white !important; z-index: 1; background: transparent !important; } /* TAG TEXT COLOR*/ tr:hover td[class^='td']:nth-of-type(6) a { color: white !important; } /* OTHER SETTINGS */ :hover + .hide , tr:hover td[class^='td']:nth-of-type(6){ visibility: visible; opacity: 1; } /* REMOVE HEADER Deletes the header Tags which isn't necessary. */ .table_header:nth-of-type(6) { display: none !important; } /* REMOVE TAG EDIT BUTTON Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags. */ td:nth-of-type(6) small { display: none; } /* GOOGLE CHROME FIX Adjust this amount 50px at a time (more or less) if your columns are uneven in Chrome, until your columns are even. */ @media screen and (-webkit-min-device-pixel-ratio:0) { td[class^='td']:nth-of-type(2) { width: 400px !important;} } /*OTHER CODES Important codes for the layout's setup. Don't mess with these unless you know exactly what you're doing. If you want to customize more on the page, use the link at the top of this CSS, or ask in my club! */ body { font-weight: light; background-repeat: no-repeat; background-color: black; } #list_surround { position: absolute !important; left: 400px !important; margin:auto; background-image:url(); } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:red; text-decoration:underline; } .category_totals, .td1, .td2, #grand_totals, #copyright { border-width:0; padding:2px; } .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:black; border-width:0; padding:2px; } #copyright:after { content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs or info."; } .status_selected { background-color:black; padding:2px; color:white; text-decoration: blink; } .status_not_selected { background-color:black; padding:2px; color:white; } .status_selected a{ color:cyan; } .status_not_selected a{ color:white; } .thickbox { color:cyan; font-family:fantasy; font-size:12px; } .header_title { height:28px; padding:2px; } .table_header { border-width:0; font-weight:bold; padding:2px; } .category_totals { height:30px; } #copyright, #grand_totals { text-align: center; margin:0 auto; } tr:hover [class^=td] { -moz-transition: .2s linear; -webkit-transition: .2s linear; -o-transition: .2s linear; } |
Sep 1, 2020 9:00 PM
#272
AraujoDaisuki said: So...uh, hi I'm having a problem with my layout I have those things on the and normaly they stay hidden unless the mouse hovers over it I don't know how to fix this, even tought i've tried, but maybe i'm just dumb My list is on the classic template and this is my code: @import url(https://storage.live.com/items/4A07C1EEED420167%21170); @\import "https://malscraper.azurewebsites.net/covers/auto/presets/more"; @import url(https://malcat-gen.appspot.com/series?preset=more); @import url(http://storage.live.com/items/4A07C1EEED420167%21150); /* BACKGROUND IMAGE This is the main background image for the whole page. Change the image link to the background you want! If you're not seeing a background, make sure you are copied the entire CSS code or added any new background image codes correctly. Also your image link may be broken, try uploading a new background then! */ body { background-image: url(https://i.imgur.com/HqvBMNG.png); background-attachment: fixed; background-size: cover; } /* HEADER COLOR AND FONT These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc). if you don't want a solid color there, go to the line that starts with background-color and replace it the color type (blue for example) with the word "transparent" (no quotations). */ .header_title { background-color:black; color:white; font-family:Times New Roman; font-size:25px; } /* SUB-HEADERS BACKGROUND COLOR COLOR Below each main header is the sub-header which says Score, Episodes, Tags, etc. */ .table_header { border-style: solid !important; border-width: 3px; border-color: black; background-color:#CC0000; } /* ANIME/MANGA TITLE FONTS This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc. */ .animetitle, .animetitle:visited { color:white; font-family:Helvitica; font-size:15px; } /* LIST FONTS This is the type and color for more of the numbers, links, and words on the list itself! */ .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color:white; font-family:Lucida Grande; } /* LIST WIDTH Use this to increase the width of your list! */ #list_surround { width:570px; } /* SIDE HEADERS The headers on the side */ #list_surround .status_selected, #list_surround .status_not_selected { -webkit-background-clip:padding-box !important; background-clip:padding-box !important; background-color:transparent; background-image:url(https://ia801402.us.archive.org/29/items/watchingH/watchingSH.png); background-position:0 0; background-repeat:no-repeat no-repeat; background-size:contain; border:1px solid #000; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; display:block; left:20px; padding:0; position:fixed; top:100px; width:250px; } #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(https://ia801402.us.archive.org/29/items/watchingH/completedSH.png); background-position:100% 0; top:176px; } #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(https://ia801402.us.archive.org/29/items/watchingH/on-holdSH.png); background-position:0 0; top:252px; } #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(https://ia801402.us.archive.org/29/items/watchingH/droppedSH.png); background-position:100% 0; top:328px; } #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(https://ia801402.us.archive.org/29/items/watchingH/plan-to-watchSH.png); background-position:0 0; top:404px; } #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(https://i.imgur.com/i2eGZnF.png); background-position:100% 0; top:480px; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color:transparent; display:block; font-size:0; height:75px; width:250px; } .status_selected a{ height:75px; width:250px; display:block; visibility:visible; background-color: transparent; position:fixed; border:1px solid #000; } .status_not_selected { -webkit-transition:all 0.4s ease 0s; display:block; left:-110px !important; opacity:0.7; transition:all 0.4s ease 0s; } .status_not_selected:hover{ -webkit-transition:all 0.4s ease 0s; color:transparent; left:-8px !important; opacity:1; transition:all 0.4s ease 0s; } .status_selected a[href*="status=1"] { top:100px !important; left:-8px !important; display: block!important; background-image:url(https://ia801402.us.archive.org/29/items/watchingH/watchingSH.png); position:fixed; } .status_selected a[href*="status=2"] { top:176px !important; left:-8px !important; display: block!important; background-image:url(https://ia801402.us.archive.org/29/items/watchingH/completedSH.png); position:fixed; } .status_selected a[href*="status=3"] { top:252px !important; left:-8px !important; display: block!important; background-image:url(https://ia801402.us.archive.org/29/items/watchingH/on-holdSH.png); position:fixed; } .status_selected a[href*="status=4"] { top:328px !important; left:-8px !important; display: block!important; background-image:url(https://ia801402.us.archive.org/29/items/watchingH/droppedSH.png); position:fixed; } .status_selected a[href*="status=6"] { top:404px !important; left:-8px !important; display: block!important; background-image:url(https://ia801402.us.archive.org/29/items/watchingH/plan-to-watchSH.png); position:fixed; } .status_selected a[href*="status=7"] { top:480px !important; left:-8px !important; display: block!important; background-image:url(https://i.imgur.com/i2eGZnF.png); position:fixed; } /* LIST COLOR The numbers in parenthesis below control the color of your list background itself. The first number is the amount of red, the second amount of green, third blue, and each can be set to a maximum of 255 and minimum of 0. The 4th number in parenthesis is the opacity amount, which can be set from .0 (invisible) to 1 (completely opaque). For more info on RGBA color see this tutorial: http://myanimelist.net/forum/?topicid=440525 */ .category_totals, .td1, .td2, #grand_totals, #copyright { background-color: rgba(55,55,55,.5); } /* ROW HOVER COLOR Change the color you see on a row only when you put your cursor over it with this code, you use the same color change style as in the above code. */ tr:hover [class^=td] { background-color: rgba(80, 50, 225, 0.9) !important; } /* REPOSITION MAIN BACKGROUND Change the position your background starts on your screen from with the two properties after "background-position" below. You replace 'center' and '43%' with two other properties, they can be any of the following: left, top, bottom, right, or center. So if you want your background to start from the center of the screen, use "center center" after background- position in the code below, replacing "center 43%". If you want it to start from the top and left, use "top left" If you want it to start from the top and center, use "top center". If you want it to start from the right and top, use "right top" If you want it to start from the right and bottom, use "right bottom" and so forth... Additionally, you can change "left" to a % to determine how far left or right the background starts from. For example "30% top" will start the background from the top but 30% of the pic's width from the left of the layout. You can also change top to a % to change the amount you want to start it from the top or bottom. */ body{ background-position: center 43%;} /* HEADER LIST CURRENTLY WATCHING HEADER This is the header above currently watching/reading. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_cw { background-image:url(https://archive.org/download/watchingH/watchingH.png); height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* COMPLETED HEADER This is the header above your anime/manga that's completed. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_completed { background-image:url(https://ia801402.us.archive.org/29/items/watchingH/completedH.png); height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* ON-HOLD HEADER This is the header above your animes/mangas on-hold. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_onhold { background-image:url(https://ia801402.us.archive.org/29/items/watchingH/on-holdH.png); height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* DROPPED HEADER This is the header above your dropped animes/mangas. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_dropped { background-image:url(https://ia801402.us.archive.org/29/items/watchingH/droppedH.png); height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* PLAN TO WATCH HEADER This is the header above the anime/manga you plan to see or read on your list. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_ptw { background-image:url(https://ia601402.us.archive.org/29/items/watchingH/plan-to-watchH.png); height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* REMOVE HEADER COLOR You need this code to remove the default background colors from the header and override any related codes. You're supposed to use your own images or the default ones for the header, so this color is set to transparent so it won't get in the way. If you want the color back for some reason, remove this section. */ .header_title { background-color: transparent !important; } /* OTHER CODES Stuff I had to add after site changes. You need this otherwise the headers won't be visible. */ tbody {background-color: transparent; background-image: none;} /* REMOVE HEADER TEXT These codes remove the original text like "Completed" and "Currently Watching" from each category on the list. Some people will want the text gone so they can have their own custom logos. But if you want the text back, you have to remove this whole section. It shouldn't affect the images in any way. */ .header_title { color: gray !important; color: transparent !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; } /* CODES (REPLACEMENT FOR "CSS FOR FOXGIRLS" IMPORT) Used to remove the more button (which no longer works after using the code above to show covers). Also helps with settings for the tag hover option if you use that. */ #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(3), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(4), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(5), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(6), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(7), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(8) { display: tab\le-cell; } #list_surround small a:last-of-type { display: none !important; } .animetitle + small { visibility: visible !important; } #list_surround a[href*="http://myanimelist.net/panel.php?go=edit"], #list_surround a[href*="http://myanimelist.net/editlist.php?type="], #list_surround a[href*="http://myanimelist.net/panel.php?go=add"] { visibility: visible !important; margin-right: 10px } .td1:nth-of-type(6) small, .td2:nth-of-type(6) small, .td1:nth-of-type(5) small, .td2:nth-of-type(5) small, .td1:nth-of-type(4) small, .td2:nth-of-type(4) small { visibility: visible !important; } .td1:nth-of-type(6) small:hover, .td2:nth-of-type(6) small:hover, .td1:nth-of-type(5) small:hover, .td2:nth-of-type(5) small:hover, .td1:nth-of-type(4) small:hover, .td2:nth-of-type(4) small:hover{ text-decoration: underline; } /* COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS). Left and top adjust the position it appears on screen. Control the height and width of the pic with height and width. Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. Increase height and width to make the pics bigger. Delete border-style: solid; to remove the border. */ .hide { background-color: rgba(104, 102, 103, 0.75); background-position: 50% 20% !important; background-repeat: no-repeat !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: block !important; height: 515px; left: 990px; position: fixed; top: 15px; width: 234px; padding: 79px 40px 10px 10px; background-size: 250px !important; visibility: hidden; opacity: 0; } /* PREVIEW MSG ABOVE COVERS Remove content: "preview"; to remove the PREVIEW text. Change the text in quotations after content to what you want it to say above your cover pic. Top and width controls the position of the text. */ .hide:before { background: transparent; color: white; content: "Review"; padding-bottom: 5px; position: absolute; text-align: center; width: 255px; top: 5px; border-radius: 25px 25px 0 0; } /* MINI REVIEW (HOVER TAG) Move the area around with the left and top codes. Adjust the surrounding area of the tags by adjusting the padding. Control the height and width of the section with the height and width codes. If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial: http://myanimelist.net/forum/?topicid=563993 */ td[class^='td']:nth-of-type(6) { visibility: hidden; opacity: 0; left: 1000px; position: fixed; top: 460px; font-size: 16px; width: 245px; color: white !important; z-index: 1; background: transparent !important; } /* TAG TEXT COLOR*/ tr:hover td[class^='td']:nth-of-type(6) a { color: white !important; } /* OTHER SETTINGS */ :hover + .hide , tr:hover td[class^='td']:nth-of-type(6){ visibility: visible; opacity: 1; } /* REMOVE HEADER Deletes the header Tags which isn't necessary. */ .table_header:nth-of-type(6) { display: none !important; } /* REMOVE TAG EDIT BUTTON Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags. */ td:nth-of-type(6) small { display: none; } /* GOOGLE CHROME FIX Adjust this amount 50px at a time (more or less) if your columns are uneven in Chrome, until your columns are even. */ @media screen and (-webkit-min-device-pixel-ratio:0) { td[class^='td']:nth-of-type(2) { width: 400px !important;} } /*OTHER CODES Important codes for the layout's setup. Don't mess with these unless you know exactly what you're doing. If you want to customize more on the page, use the link at the top of this CSS, or ask in my club! */ body { font-weight: light; background-repeat: no-repeat; background-color: black; } #list_surround { position: absolute !important; left: 400px !important; margin:auto; background-image:url(); } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:red; text-decoration:underline; } .category_totals, .td1, .td2, #grand_totals, #copyright { border-width:0; padding:2px; } .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:black; border-width:0; padding:2px; } #copyright:after { content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs or info."; } .status_selected { background-color:black; padding:2px; color:white; text-decoration: blink; } .status_not_selected { background-color:black; padding:2px; color:white; } .status_selected a{ color:cyan; } .status_not_selected a{ color:white; } .thickbox { color:cyan; font-family:fantasy; font-size:12px; } .header_title { height:28px; padding:2px; } .table_header { border-width:0; font-weight:bold; padding:2px; } .category_totals { height:30px; } #copyright, #grand_totals { text-align: center; margin:0 auto; } tr:hover [class^=td] { -moz-transition: .2s linear; -webkit-transition: .2s linear; -o-transition: .2s linear; } Try adding this to the bottom of your CSS .status_not_selected { opacity:0; } Is that what you're trying to do? |
Sep 1, 2020 9:15 PM
#273
Shishio-kun said: AraujoDaisuki said: So...uh, hi I'm having a problem with my layout I have those things on the and normaly they stay hidden unless the mouse hovers over it I don't know how to fix this, even tought i've tried, but maybe i'm just dumb My list is on the classic template and this is my code: @import url(https://storage.live.com/items/4A07C1EEED420167%21170); @\import "https://malscraper.azurewebsites.net/covers/auto/presets/more"; @import url(https://malcat-gen.appspot.com/series?preset=more); @import url(http://storage.live.com/items/4A07C1EEED420167%21150); /* BACKGROUND IMAGE This is the main background image for the whole page. Change the image link to the background you want! If you're not seeing a background, make sure you are copied the entire CSS code or added any new background image codes correctly. Also your image link may be broken, try uploading a new background then! */ body { background-image: url(https://i.imgur.com/HqvBMNG.png); background-attachment: fixed; background-size: cover; } /* HEADER COLOR AND FONT These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc). if you don't want a solid color there, go to the line that starts with background-color and replace it the color type (blue for example) with the word "transparent" (no quotations). */ .header_title { background-color:black; color:white; font-family:Times New Roman; font-size:25px; } /* SUB-HEADERS BACKGROUND COLOR COLOR Below each main header is the sub-header which says Score, Episodes, Tags, etc. */ .table_header { border-style: solid !important; border-width: 3px; border-color: black; background-color:#CC0000; } /* ANIME/MANGA TITLE FONTS This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc. */ .animetitle, .animetitle:visited { color:white; font-family:Helvitica; font-size:15px; } /* LIST FONTS This is the type and color for more of the numbers, links, and words on the list itself! */ .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color:white; font-family:Lucida Grande; } /* LIST WIDTH Use this to increase the width of your list! */ #list_surround { width:570px; } /* SIDE HEADERS The headers on the side */ #list_surround .status_selected, #list_surround .status_not_selected { -webkit-background-clip:padding-box !important; background-clip:padding-box !important; background-color:transparent; background-image:url(https://ia801402.us.archive.org/29/items/watchingH/watchingSH.png); background-position:0 0; background-repeat:no-repeat no-repeat; background-size:contain; border:1px solid #000; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; display:block; left:20px; padding:0; position:fixed; top:100px; width:250px; } #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(https://ia801402.us.archive.org/29/items/watchingH/completedSH.png); background-position:100% 0; top:176px; } #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(https://ia801402.us.archive.org/29/items/watchingH/on-holdSH.png); background-position:0 0; top:252px; } #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(https://ia801402.us.archive.org/29/items/watchingH/droppedSH.png); background-position:100% 0; top:328px; } #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(https://ia801402.us.archive.org/29/items/watchingH/plan-to-watchSH.png); background-position:0 0; top:404px; } #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(https://i.imgur.com/i2eGZnF.png); background-position:100% 0; top:480px; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color:transparent; display:block; font-size:0; height:75px; width:250px; } .status_selected a{ height:75px; width:250px; display:block; visibility:visible; background-color: transparent; position:fixed; border:1px solid #000; } .status_not_selected { -webkit-transition:all 0.4s ease 0s; display:block; left:-110px !important; opacity:0.7; transition:all 0.4s ease 0s; } .status_not_selected:hover{ -webkit-transition:all 0.4s ease 0s; color:transparent; left:-8px !important; opacity:1; transition:all 0.4s ease 0s; } .status_selected a[href*="status=1"] { top:100px !important; left:-8px !important; display: block!important; background-image:url(https://ia801402.us.archive.org/29/items/watchingH/watchingSH.png); position:fixed; } .status_selected a[href*="status=2"] { top:176px !important; left:-8px !important; display: block!important; background-image:url(https://ia801402.us.archive.org/29/items/watchingH/completedSH.png); position:fixed; } .status_selected a[href*="status=3"] { top:252px !important; left:-8px !important; display: block!important; background-image:url(https://ia801402.us.archive.org/29/items/watchingH/on-holdSH.png); position:fixed; } .status_selected a[href*="status=4"] { top:328px !important; left:-8px !important; display: block!important; background-image:url(https://ia801402.us.archive.org/29/items/watchingH/droppedSH.png); position:fixed; } .status_selected a[href*="status=6"] { top:404px !important; left:-8px !important; display: block!important; background-image:url(https://ia801402.us.archive.org/29/items/watchingH/plan-to-watchSH.png); position:fixed; } .status_selected a[href*="status=7"] { top:480px !important; left:-8px !important; display: block!important; background-image:url(https://i.imgur.com/i2eGZnF.png); position:fixed; } /* LIST COLOR The numbers in parenthesis below control the color of your list background itself. The first number is the amount of red, the second amount of green, third blue, and each can be set to a maximum of 255 and minimum of 0. The 4th number in parenthesis is the opacity amount, which can be set from .0 (invisible) to 1 (completely opaque). For more info on RGBA color see this tutorial: http://myanimelist.net/forum/?topicid=440525 */ .category_totals, .td1, .td2, #grand_totals, #copyright { background-color: rgba(55,55,55,.5); } /* ROW HOVER COLOR Change the color you see on a row only when you put your cursor over it with this code, you use the same color change style as in the above code. */ tr:hover [class^=td] { background-color: rgba(80, 50, 225, 0.9) !important; } /* REPOSITION MAIN BACKGROUND Change the position your background starts on your screen from with the two properties after "background-position" below. You replace 'center' and '43%' with two other properties, they can be any of the following: left, top, bottom, right, or center. So if you want your background to start from the center of the screen, use "center center" after background- position in the code below, replacing "center 43%". If you want it to start from the top and left, use "top left" If you want it to start from the top and center, use "top center". If you want it to start from the right and top, use "right top" If you want it to start from the right and bottom, use "right bottom" and so forth... Additionally, you can change "left" to a % to determine how far left or right the background starts from. For example "30% top" will start the background from the top but 30% of the pic's width from the left of the layout. You can also change top to a % to change the amount you want to start it from the top or bottom. */ body{ background-position: center 43%;} /* HEADER LIST CURRENTLY WATCHING HEADER This is the header above currently watching/reading. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_cw { background-image:url(https://archive.org/download/watchingH/watchingH.png); height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* COMPLETED HEADER This is the header above your anime/manga that's completed. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_completed { background-image:url(https://ia801402.us.archive.org/29/items/watchingH/completedH.png); height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* ON-HOLD HEADER This is the header above your animes/mangas on-hold. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_onhold { background-image:url(https://ia801402.us.archive.org/29/items/watchingH/on-holdH.png); height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* DROPPED HEADER This is the header above your dropped animes/mangas. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_dropped { background-image:url(https://ia801402.us.archive.org/29/items/watchingH/droppedH.png); height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* PLAN TO WATCH HEADER This is the header above the anime/manga you plan to see or read on your list. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_ptw { background-image:url(https://ia601402.us.archive.org/29/items/watchingH/plan-to-watchH.png); height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* REMOVE HEADER COLOR You need this code to remove the default background colors from the header and override any related codes. You're supposed to use your own images or the default ones for the header, so this color is set to transparent so it won't get in the way. If you want the color back for some reason, remove this section. */ .header_title { background-color: transparent !important; } /* OTHER CODES Stuff I had to add after site changes. You need this otherwise the headers won't be visible. */ tbody {background-color: transparent; background-image: none;} /* REMOVE HEADER TEXT These codes remove the original text like "Completed" and "Currently Watching" from each category on the list. Some people will want the text gone so they can have their own custom logos. But if you want the text back, you have to remove this whole section. It shouldn't affect the images in any way. */ .header_title { color: gray !important; color: transparent !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; } /* CODES (REPLACEMENT FOR "CSS FOR FOXGIRLS" IMPORT) Used to remove the more button (which no longer works after using the code above to show covers). Also helps with settings for the tag hover option if you use that. */ #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(3), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(4), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(5), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(6), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(7), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(8) { display: tab\le-cell; } #list_surround small a:last-of-type { display: none !important; } .animetitle + small { visibility: visible !important; } #list_surround a[href*="http://myanimelist.net/panel.php?go=edit"], #list_surround a[href*="http://myanimelist.net/editlist.php?type="], #list_surround a[href*="http://myanimelist.net/panel.php?go=add"] { visibility: visible !important; margin-right: 10px } .td1:nth-of-type(6) small, .td2:nth-of-type(6) small, .td1:nth-of-type(5) small, .td2:nth-of-type(5) small, .td1:nth-of-type(4) small, .td2:nth-of-type(4) small { visibility: visible !important; } .td1:nth-of-type(6) small:hover, .td2:nth-of-type(6) small:hover, .td1:nth-of-type(5) small:hover, .td2:nth-of-type(5) small:hover, .td1:nth-of-type(4) small:hover, .td2:nth-of-type(4) small:hover{ text-decoration: underline; } /* COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS). Left and top adjust the position it appears on screen. Control the height and width of the pic with height and width. Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. Increase height and width to make the pics bigger. Delete border-style: solid; to remove the border. */ .hide { background-color: rgba(104, 102, 103, 0.75); background-position: 50% 20% !important; background-repeat: no-repeat !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: block !important; height: 515px; left: 990px; position: fixed; top: 15px; width: 234px; padding: 79px 40px 10px 10px; background-size: 250px !important; visibility: hidden; opacity: 0; } /* PREVIEW MSG ABOVE COVERS Remove content: "preview"; to remove the PREVIEW text. Change the text in quotations after content to what you want it to say above your cover pic. Top and width controls the position of the text. */ .hide:before { background: transparent; color: white; content: "Review"; padding-bottom: 5px; position: absolute; text-align: center; width: 255px; top: 5px; border-radius: 25px 25px 0 0; } /* MINI REVIEW (HOVER TAG) Move the area around with the left and top codes. Adjust the surrounding area of the tags by adjusting the padding. Control the height and width of the section with the height and width codes. If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial: http://myanimelist.net/forum/?topicid=563993 */ td[class^='td']:nth-of-type(6) { visibility: hidden; opacity: 0; left: 1000px; position: fixed; top: 460px; font-size: 16px; width: 245px; color: white !important; z-index: 1; background: transparent !important; } /* TAG TEXT COLOR*/ tr:hover td[class^='td']:nth-of-type(6) a { color: white !important; } /* OTHER SETTINGS */ :hover + .hide , tr:hover td[class^='td']:nth-of-type(6){ visibility: visible; opacity: 1; } /* REMOVE HEADER Deletes the header Tags which isn't necessary. */ .table_header:nth-of-type(6) { display: none !important; } /* REMOVE TAG EDIT BUTTON Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags. */ td:nth-of-type(6) small { display: none; } /* GOOGLE CHROME FIX Adjust this amount 50px at a time (more or less) if your columns are uneven in Chrome, until your columns are even. */ @media screen and (-webkit-min-device-pixel-ratio:0) { td[class^='td']:nth-of-type(2) { width: 400px !important;} } /*OTHER CODES Important codes for the layout's setup. Don't mess with these unless you know exactly what you're doing. If you want to customize more on the page, use the link at the top of this CSS, or ask in my club! */ body { font-weight: light; background-repeat: no-repeat; background-color: black; } #list_surround { position: absolute !important; left: 400px !important; margin:auto; background-image:url(); } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:red; text-decoration:underline; } .category_totals, .td1, .td2, #grand_totals, #copyright { border-width:0; padding:2px; } .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:black; border-width:0; padding:2px; } #copyright:after { content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs or info."; } .status_selected { background-color:black; padding:2px; color:white; text-decoration: blink; } .status_not_selected { background-color:black; padding:2px; color:white; } .status_selected a{ color:cyan; } .status_not_selected a{ color:white; } .thickbox { color:cyan; font-family:fantasy; font-size:12px; } .header_title { height:28px; padding:2px; } .table_header { border-width:0; font-weight:bold; padding:2px; } .category_totals { height:30px; } #copyright, #grand_totals { text-align: center; margin:0 auto; } tr:hover [class^=td] { -moz-transition: .2s linear; -webkit-transition: .2s linear; -o-transition: .2s linear; } Try adding this to the bottom of your CSS .status_not_selected { opacity:0; } Is that what you're trying to do? Unfortunatly no, that just ends up hidding all of the side bars (excluding the last one), the only thing i want to do is get the last one like to the first 5 |
Sep 1, 2020 9:29 PM
#274
AraujoDaisuki said: the only thing i want to do is get the last one like to the first 5 What do you mean by this exactly? I don't understand at all what you're trying to fix. This is how your list looks to me. Is it the same for you? Nothing looks broken, except for the missing currently watching header. Is that what you're referring to? What will the list look like when its fixed in your view? |
Sep 1, 2020 9:46 PM
#275
Shishio-kun said: What do you mean by this exactly? I don't understand at all what you're trying to fix. I just figured out that the thing that's bothering me is not a bug, is a feature. Aparently this particular design keeps the category selected sticking out, I'm sorry to bother you, but i guess i can figure this out on my own |
Sep 1, 2020 10:48 PM
#276
AraujoDaisuki said: Shishio-kun said: What do you mean by this exactly? I don't understand at all what you're trying to fix. I just figured out that the thing that's bothering me is not a bug, is a feature. Aparently this particular design keeps the category selected sticking out, I'm sorry to bother you, but i guess i can figure this out on my own OH I see what you mean now. You don't want the All tab sticking out on the All Anime page and the Current tab sticking out on the Current page, and so forth. It seems like you got a change like you want, good job :D If you want to remove the tab completely, you can try opacity: 0; or display: none; for the tab you want gone (which is probably status selected) |
Sep 1, 2020 10:55 PM
#277
Shishio-kun said: OH I see what you mean now. You don't want the All tab sticking out on the All Anime page and the Current tab sticking out on the Current page, and so forth. It seems like you got a change like you want, good job :D I'm still figuring it out, the border keeps getting in the way, but thanks anyway |
Sep 1, 2020 10:59 PM
#278
AraujoDaisuki said: I'm still figuring it out, the border keeps getting in the way, but thanks anyway Nervermind, I figured it out |
Sep 1, 2020 11:21 PM
#279
AraujoDaisuki said: AraujoDaisuki said: I'm still figuring it out, the border keeps getting in the way, but thanks anyway Nervermind, I figured it out Awesome! Congrats :D |
Sep 1, 2020 11:26 PM
#280
Thanks man |
Sep 3, 2020 10:56 AM
#281
Hi... So, recently i changed my layout for this one https://dl.dropboxusercontent.com/s/dhx5muizdr4h44a/BooksyMAL.css and it works okay on the anime list but for some reason the manga list is broken and i can't figure out how to fix it |
Sep 3, 2020 2:34 PM
#282
harushin said: Hi... So, recently i changed my layout for this one https://dl.dropboxusercontent.com/s/dhx5muizdr4h44a/BooksyMAL.css and it works okay on the anime list but for some reason the manga list is broken and i can't figure out how to fix it For some reason its not working in Chrome. I don't know why, but try this adding this as an additional import at the top? @\import "https://dl.dropboxusercontent.com/s/xkier4ibskg0lny/mangalist.css"; you might have to install this for a CSS that only applies to your manga list on this page so it doesn't interfere with the anime list, but I'm not sure yet |
Sep 3, 2020 5:34 PM
#283
Shishio-kun said: For some reason its not working in Chrome. I don't know why, but try this adding this as an additional import at the top? @\import "https://dl.dropboxusercontent.com/s/xkier4ibskg0lny/mangalist.css"; you might have to install this for a CSS that only applies to your manga list on this page so it doesn't interfere with the anime list, but I'm not sure yet I did all of this but still doesn't work, is there anything else I can do? Also, sorry for the trouble |
Sep 3, 2020 6:47 PM
#284
harushin said: Shishio-kun said: For some reason its not working in Chrome. I don't know why, but try this adding this as an additional import at the top? @\import "https://dl.dropboxusercontent.com/s/xkier4ibskg0lny/mangalist.css"; you might have to install this for a CSS that only applies to your manga list on this page so it doesn't interfere with the anime list, but I'm not sure yet I did all of this but still doesn't work, is there anything else I can do? Also, sorry for the trouble Is it still not working now? It seems to be working for me in Chrome at the moment Can you screenshot what it looks like for you exactly? |
Sep 3, 2020 9:41 PM
#285
Shishio-kun said: Is it still not working now? It seems to be working for me in Chrome at the moment Can you screenshot what it looks like for you exactly? For me it looks like this. At the top everything is almost fine, just the number of chapters are messed up but at the bottom of the page it doesn't work at all |
Sep 3, 2020 10:47 PM
#286
harushin said: Shishio-kun said: Is it still not working now? It seems to be working for me in Chrome at the moment Can you screenshot what it looks like for you exactly? For me it looks like this. At the top everything is almost fine, just the number of chapters are messed up but at the bottom of the page it doesn't work at all OK I see, the volumes and chapters text is clashing. The layout wasn't designed for volumes and chapters both on at the same time, so add this code to the bottom of the CSS to move volumes down a bit :D td.data.volume {margin-top: 15px; position: absolute;} What exactly isn't working at the bottom? I can't find any problem at the bottom and this is what I see (after adding the codes above). |
Sep 4, 2020 12:27 PM
#287
Shishio-kun said: OK I see, the volumes and chapters text is clashing. The layout wasn't designed for volumes and chapters both on at the same time, so add this code to the bottom of the CSS to move volumes down a bit :D td.data.volume {margin-top: 15px; position: absolute;} What exactly isn't working at the bottom? I can't find any problem at the bottom and this is what I see (after adding the codes above). Ah, I see it. I will try this one the connection issue with MAL is fixed. Thank you so much for your help! |
Sep 12, 2020 7:49 PM
#288
I spent about 2 hours customizing a layout last week, and when i went to look at the CSS, everything reverted back to the defaults. Is there a way I can like revert it back, or am I just going to have to recreate it? |
Sep 12, 2020 10:59 PM
#289
d-how9 said: I spent about 2 hours customizing a layout last week, and when i went to look at the CSS, everything reverted back to the defaults. Is there a way I can like revert it back, or am I just going to have to recreate it? Did you save over your CSS changes at any point? This would mean yes, it's gone unless you saved your original CSS somewhere because MAL didn't. But it seems currently you're on this theme maybe your updated custom layout is on the Default Theme or another theme. You should look between them all and see if one of them has your updated layout. You might have switched to the White Blue theme which has the default custom layout and saved, so your list has the default custom layout. Meanwhile, your updated layout could be on another theme. Hope that makes sense its hard to explain. check all the 10 themes to see if the style you want is still there and switch back to it if so https://myanimelist.net/ownlist/style |
Sep 12, 2020 11:24 PM
#290
Shishio-kun said: d-how9 said: I spent about 2 hours customizing a layout last week, and when i went to look at the CSS, everything reverted back to the defaults. Is there a way I can like revert it back, or am I just going to have to recreate it? Did you save over your CSS changes at any point? This would mean yes, it's gone unless you saved your original CSS somewhere because MAL didn't. But it seems currently you're on this theme It looks like its gone, I'll just have to recreate it. Thank you for your help :) maybe your updated custom layout is on the Default Theme or another theme. You should look between them all and see if one of them has your updated layout. You might have switched to the White Blue theme which has the default custom layout and saved, so your list has the default custom layout. Meanwhile, your updated layout could be on another theme. Hope that makes sense its hard to explain. check all the 10 themes to see if the style you want is still there and switch back to it if so https://myanimelist.net/ownlist/style |
Sep 20, 2020 2:11 AM
#291
hey guys can you take a look at my anime list and tell me why the images are blurry ? |
Sep 20, 2020 2:39 AM
#292
zHyDra said: Private list. Publicize your list or check the "fix for any issue" found: [here].hey guys can you take a look at my anime list and tell me why the images are blurry ? |
Sep 20, 2020 2:49 AM
#293
Valerio_Lyndon said: zHyDra said: Private list. Publicize your list or check the "fix for any issue" found: [here].hey guys can you take a look at my anime list and tell me why the images are blurry ? unfortunately i'm beginner in this and i couldn't understand your blog :) |
Sep 20, 2020 3:48 PM
#294
zHyDra said: Since your animelist is public now, it should be working. But if it isn't, or you want to private your list again, you can add this CSS to the very top of your code.Valerio_Lyndon said: zHyDra said: hey guys can you take a look at my anime list and tell me why the images are blurry ? unfortunately i'm beginner in this and i couldn't understand your blog :) @\import "https://dl.dropboxusercontent.com/s/71mrsl1iz0z11p2/animelist_dataimagelinkbefore.css"; @\import "https://dl.dropboxusercontent.com/s/dpqglnr3slmgp7t/mangalist_dataimagelinkbefore.css"; |
Sep 20, 2020 7:45 PM
#295
Valerio_Lyndon said: ok i will try it thanks <3zHyDra said: Since your animelist is public now, it should be working. But if it isn't, or you want to private your list again, you can add this CSS to the very top of your code.Valerio_Lyndon said: zHyDra said: Private list. Publicize your list or check the "fix for any issue" found: [here].hey guys can you take a look at my anime list and tell me why the images are blurry ? unfortunately i'm beginner in this and i couldn't understand your blog :) @\import "https://dl.dropboxusercontent.com/s/71mrsl1iz0z11p2/animelist_dataimagelinkbefore.css"; @\import "https://dl.dropboxusercontent.com/s/dpqglnr3slmgp7t/mangalist_dataimagelinkbefore.css"; |
Oct 9, 2020 3:50 PM
#296
Suddenly not a single image is loading in my list? Tried 2 different browsers. Did something break in general??? I tried deleting @import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore" But that did nothing. I remember that extra line being the solution many years ago. EDIT: Strangely adding these lines at the top make it work again: @import "https://dl.dropboxusercontent.com/s/71mrsl1iz0z11p2/animelist_dataimagelinkbefore.css"; @import "https://dl.dropboxusercontent.com/s/dpqglnr3slmgp7t/mangalist_dataimagelinkbefore.css"; Very strange since it worked fine a few hours ago and yesterday without those lines. But it does seem to load the page much much slower. /* A Shelter layout for modern CSS (V2) by Takana_no_Hana ** Visit Shishio's club for more premade layouts ** You can customize a few things in this layout ** If you're interested in my layout, visit here: https://myanimelist.net/forum/?topicid=1524727 */ /*Layout codes, please leave this line intact when copying the whole thing. Don't touch it. */ @import "https://dl.dropboxusercontent.com/s/ge82a964xg2raj9/ShelterV2.css"; @import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore"; /* **You can change your list background here. **By default, there are 6 different backgrounds for each category **If you want to have only a single background, replace them all with the same image url. */ /*CURRENTLY WATCHING*/ body[data-query*='"status":1'] { background-image: url("https://wallpaperset.com/w/full/1/d/5/4215.jpg"); } /*COMPLETED*/ body[data-query*='"status":2'] { background-image: url("https://wallpaperset.com/w/full/1/d/5/4215.jpg"); } /*ON HOLD*/ body[data-query*='"status":3'] { background-image: url("https://wallpaperset.com/w/full/1/d/5/4215.jpg"); } /*DROPPED*/ body[data-query*='"status":4'] { background-image: url("https://wallpaperset.com/w/full/1/d/5/4215.jpg"); } /*PLANNED*/ body[data-query*='"status":6'] { background-image: url("https://wallpaperset.com/w/full/1/d/5/4215.jpg"); } /*ALL*/ body[data-query*='"status":7'] { background-image: url("https://wallpaperset.com/w/full/1/d/5/4215.jpg"); } /* **Your desired avatar **Note that the best resolution is 120px * 120px */ .cover-block::after {background-image: url("https://i.imgur.com/1yTyuej.jpg");} /* Your name that displays next to the avatar ** Replace content with "display:none;" if you want to get rid of it */ .cover-block::before { content: "Vree's Anime List"; } |
vreeOct 9, 2020 4:05 PM
Oct 9, 2020 8:22 PM
#297
Try using MAL it!, it worked for me. https://myanimelist.net/forum/?topicid=1775986 vree said: Suddenly not a single image is loading in my list? Tried 2 different browsers. Did something break in general??? I tried deleting @import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore" But that did nothing. I remember that extra line being the solution many years ago. EDIT: Strangely adding these lines at the top make it work again: @import "https://dl.dropboxusercontent.com/s/71mrsl1iz0z11p2/animelist_dataimagelinkbefore.css"; @import "https://dl.dropboxusercontent.com/s/dpqglnr3slmgp7t/mangalist_dataimagelinkbefore.css"; Very strange since it worked fine a few hours ago and yesterday without those lines. But it does seem to load the page much much slower. /* A Shelter layout for modern CSS (V2) by Takana_no_Hana ** Visit Shishio's club for more premade layouts ** You can customize a few things in this layout ** If you're interested in my layout, visit here: https://myanimelist.net/forum/?topicid=1524727 */ /*Layout codes, please leave this line intact when copying the whole thing. Don't touch it. */ @import "https://dl.dropboxusercontent.com/s/ge82a964xg2raj9/ShelterV2.css"; @import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore"; /* **You can change your list background here. **By default, there are 6 different backgrounds for each category **If you want to have only a single background, replace them all with the same image url. */ /*CURRENTLY WATCHING*/ body[data-query*='"status":1'] { background-image: url("https://wallpaperset.com/w/full/1/d/5/4215.jpg"); } /*COMPLETED*/ body[data-query*='"status":2'] { background-image: url("https://wallpaperset.com/w/full/1/d/5/4215.jpg"); } /*ON HOLD*/ body[data-query*='"status":3'] { background-image: url("https://wallpaperset.com/w/full/1/d/5/4215.jpg"); } /*DROPPED*/ body[data-query*='"status":4'] { background-image: url("https://wallpaperset.com/w/full/1/d/5/4215.jpg"); } /*PLANNED*/ body[data-query*='"status":6'] { background-image: url("https://wallpaperset.com/w/full/1/d/5/4215.jpg"); } /*ALL*/ body[data-query*='"status":7'] { background-image: url("https://wallpaperset.com/w/full/1/d/5/4215.jpg"); } /* **Your desired avatar **Note that the best resolution is 120px * 120px */ .cover-block::after {background-image: url("https://i.imgur.com/1yTyuej.jpg");} /* Your name that displays next to the avatar ** Replace content with "display:none;" if you want to get rid of it */ .cover-block::before { content: "Vree's Anime List"; } |
NhoemmsiOct 9, 2020 8:26 PM
Oct 12, 2020 2:35 AM
#298
I appreciate the guide, it really helped me out but I still had this problem where my preview lists, sometimes, not showing properly. When I go first to my "Anime List", it shows all the images but when I go to my "Manga List", it doesn't show any images at all. This problem occurs vise versa depending on which list I visit first. Sorry maybe I'm just dumb but is there any solutions for this? |
Oct 14, 2020 1:19 AM
#299
Jii-sama said: I appreciate the guide, it really helped me out but I still had this problem where my preview lists, sometimes, not showing properly. When I go first to my "Anime List", it shows all the images but when I go to my "Manga List", it doesn't show any images at all. This problem occurs vise versa depending on which list I visit first. Sorry maybe I'm just dumb but is there any solutions for this? Not quite sure why this is happening, as you have everything setup correctly. I assume it is a problem with the generator as it has been having problems recently. You can either wait to see if it fixes itself, or try a couple of things. First option, add this line directly below the two "@\import" lines you currently have: @\import "https://malscraper.azurewebsites.net/covers/manga/Jii-sama/presets/dataimagelinkbefore"; That might help. If that doesn't help and you want to fully fix it, you can add this line in the same manner. But, I don't recommend this unless you're 100% sure you need to as it will increase the page loading time. @\import "https://dl.dropboxusercontent.com/s/dpqglnr3slmgp7t/mangalist_dataimagelinkbefore.css"; If neither of these fixes the problem, then I probably missed something and I'll have to take another look. |
Oct 15, 2020 8:20 AM
#300
Valerio_Lyndon said: Jii-sama said: I appreciate the guide, it really helped me out but I still had this problem where my preview lists, sometimes, not showing properly. When I go first to my "Anime List", it shows all the images but when I go to my "Manga List", it doesn't show any images at all. This problem occurs vise versa depending on which list I visit first. Sorry maybe I'm just dumb but is there any solutions for this? Not quite sure why this is happening, as you have everything setup correctly. I assume it is a problem with the generator as it has been having problems recently. You can either wait to see if it fixes itself, or try a couple of things. First option, add this line directly below the two "@\import" lines you currently have: @\import "https://malscraper.azurewebsites.net/covers/manga/Jii-sama/presets/dataimagelinkbefore"; That might help. If that doesn't help and you want to fully fix it, you can add this line in the same manner. But, I don't recommend this unless you're 100% sure you need to as it will increase the page loading time. @\import "https://dl.dropboxusercontent.com/s/dpqglnr3slmgp7t/mangalist_dataimagelinkbefore.css"; If neither of these fixes the problem, then I probably missed something and I'll have to take another look. Hey! Thanks for the creative response. I followed your first recommendation and it did the job very well done! I removed it afterwards to see what the problem really is and somehow, it went back to normal like it never had a problem in the first place. I don't know if this will ensure the codes longevity but be that as it may, I still have your options available to use so I'll take that in mind. My gratitudes~ |
This topic has been locked and is no longer available for discussion.
More topics from this board
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
381 |
by KabukiChouNights
»»
Sep 13, 10:56 AM |
|
» theme helpthreat - Jul 5 |
5 |
by Zaryf
»»
Aug 21, 5:46 AM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1261 |
by KiranaStarr
»»
Aug 16, 5:48 PM |
|
» [CSS] ⭐️ Customize your List Cursor + Cursor FixesShishio-kun - Mar 8, 2021 |
30 |
by Shishio-kun
»»
Jul 28, 3:17 AM |
|
» How To Have Different Banner/Cover image & Background Image For Manga & Anime ListsYasminaRegina - Jul 25 |
2 |
by YasminaRegina
»»
Jul 26, 1:02 AM |