Forum Settings
Forums
Top
  >  
Forum
  >  
Shishio's Custom MyAnimeList
  >  
Shishio's Custom MyAnimeList D...
  >  
[CSS - Modern] 🍰 Clarity by V....
RecentWatchedIgnoredSearch Forum

[CSS - Modern] 🍰 Clarity by V.L

New
Apr 19, 2018 12:31 AM
#1
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2197
This is a custom layout for modern template lists. If you don't know how to install the codes, click here to view the Beginner's Tutorial.

If there are problems: install the latest version, or check the Repair Thread for patches and updates (found here).

All premade modern layouts can be found in the gallery by clicking here, and more ways to customize your list can be found here.




Introduction

The default list design didn't resonate with me and I wished for a bit more flair than that small image banner provided. So, I started messing around and after a couple of months this is what became of the idea, albeit less refined than now. I've since improved the code to accomodate as much customization as possible. Without a doubt, this is the theme I have put the most work into. I hope you have fun with it!

Theme Specifications & Highlights:
  • Works on modern anime and manga lists.
  • Supports all list columns.
  • Light and dark themes.
  • Customisable cover image, character image, profile picture, and name text.
  • Modifications for anyone's needs: horizontal tags, section headers, colours, tag descriptions, and more.





FAQ & Help

Will you add X/Y feature?

The layout is broken?

The layout displays in the editor but not on the actual list?

How do I uninstall a modification?

Why are the add/edit pages so bright when using dark mode?

Where can I find banner images and character renders?

I want to edit the theme, but I can't read your code?

I have a question or issue that isn't covered here?


If you have any feedback, I welcome replies. I don't respond to everything but I do read and appreciate it.

Changelog • My Other List Designs • Source Code
Valerio_LyndonJan 14, 12:20 PM
Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
Reply Disabled for Non-Club Members
Pages (25) [1] 2 3 » ... Last »
May 5, 2018 7:01 PM
#2
KaeUBW

Offline
May 2012
739
Thanks a lot. I'll be using this on my manga list.

I despise woke people.
May 19, 2018 6:39 AM
#3
Ernost
Offline
Apr 2018
6
Great theme, thank you for this.

Just had a small problem, the large cover previews on hover does not seem to be working for me. This is what my css looks like:

@import url(https://malcat-gen.appspot.com/series?preset=dataimagelinkbefore);

@import url(https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Theme%20-%20Compressed.css);


@import url(https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Mod%20-%20Dark%20Mode%20Compressed.css);

.status-menu:after {
	background-image: url(https://myanimelist.cdn-dena.com/images/userimages/7123306.jpg
);
}

#cover-image-container:after {
	content: "Ernost";
}

@import url(https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Mod%20-%20Hover%20Image%20Compressed.css);
May 19, 2018 1:08 PM
#4
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2197
Ernost_Axios said:
Great theme, thank you for this.

Just had a small problem, the large cover previews on hover does not seem to be working for me. This is what my css looks like:

@import url(https://malcat-gen.appspot.com/series?preset=dataimagelinkbefore);

@import url(https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Theme%20-%20Compressed.css);


@import url(https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Mod%20-%20Dark%20Mode%20Compressed.css);

.status-menu:after {
	background-image: url(https://myanimelist.cdn-dena.com/images/userimages/7123306.jpg
);
}

#cover-image-container:after {
	content: "Ernost";
}

@import url(https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Mod%20-%20Hover%20Image%20Compressed.css);
Ah, the problem is that all import statements have to be at the top of the code. Since the last import is after some other stuff it breaks it. Moving it fixes the issue. This is how it looks after the correction (I also removed a line-break on the background-image line. It didn't seem to break the code immediately but could potentially cause issues).
@import url(https://malcat-gen.appspot.com/series?preset=dataimagelinkbefore);

@import url(https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Theme%20-%20Compressed.css);

@import url(https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Mod%20-%20Dark%20Mode%20Compressed.css);

@import url(https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Mod%20-%20Hover%20Image%20Compressed.css);

.status-menu:after {
	background-image: url(https://myanimelist.cdn-dena.com/images/userimages/7123306.jpg);
}

#cover-image-container:after {
	content: "Ernost";
}

I realize now that I never mentioned that in the original post so that's definitely my fault there, I will fix that oversight very soon. Thanks for bringing this to my attention. :) Let me know if anything is still causing issue!
Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
May 19, 2018 10:03 PM
#5
Ernost
Offline
Apr 2018
6
It works now. Thank you for your help! :)
May 19, 2018 11:18 PM
#6
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2197
Ernost_Axios said:
It works now. Thank you for your help! :)
I'm happy to hear it's in working order. :3
Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
May 26, 2018 7:48 PM
#7
nicasiodechia

Offline
Apr 2014
895
It looks amazing, going to use it. Thank you!
May 27, 2018 1:26 PM
#8
GoofBrush
Offline
Aug 2017
1
Thank you! Great theme.
I was wondering, how did you get an "information box" to pop up when you hover over a tag. [Like in your personal List]
May 27, 2018 6:21 PM
#9
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2197
nicasiodechia said:
It looks amazing, going to use it. Thank you!
I'm happy you like it! :)
Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
May 27, 2018 8:44 PM
#10
magiclikemike

Offline
Jun 2015
35
GoofBrush said:
Thank you! Great theme.
I was wondering, how did you get an "information box" to pop up when you hover over a tag. [Like in your personal List]


Also really curious about this.

Also, is there anyway to have the 'comments' section of the info pop up underneath of the cover when scrolling by, so they are apparent without having to click more information?
May 27, 2018 9:14 PM
#11
OtakuLife_
Offline
Mar 2017
5
Ahh this looks so good! I'm going to use this on my list, thank you for the design!
May 27, 2018 9:22 PM
#12
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2197
GoofBrush said:
Thank you! Great theme.
I was wondering, how did you get an "information box" to pop up when you hover over a tag. [Like in your personal List]
I actually have got this question several times now, so I've decided to add a guide to the main post for anyone to find. :) I just finished writing it, you can now find it at the bottom of the "Further Instructions" section. Keep in mind though that the way I add the tag descriptions requires modifying CSS everytime you want to add/change a description, so while I have tried my best to make the guide as simple as possible, if you haven't tweaked CSS before it might take a little bit of messing about.
Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
May 27, 2018 9:33 PM
#13
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2197
MagicLikeMike said:
GoofBrush said:
Thank you! Great theme.
I was wondering, how did you get an "information box" to pop up when you hover over a tag. [Like in your personal List]


Also really curious about this.

Also, is there anyway to have the 'comments' section of the info pop up underneath of the cover when scrolling by, so they are apparent without having to click more information?
I've added information about the personal tweaks I have on my list to the main post now, the tag descriptions are covered there now! :)

In regards to the second part of your question, no, I'm afraid not. I really, really wish they did as I use comments a lot and would love to have them displayed more obviously, but the way the lists work the comments data isn't even loaded until you click "More" for each entry. It's possible that this could be fixed with some manually activated script that generated CSS, but I don't have the knowledge to accomplish that right now, unfortunately.
Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
May 27, 2018 9:34 PM
#14
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2197
OtakuLife_ said:
Ahh this looks so good! I'm going to use this on my list, thank you for the design!
Thanks for commenting, glad you like it! :3
Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
May 27, 2018 9:44 PM
#15
magiclikemike

Offline
Jun 2015
35
Valerio_Lyndon said:
MagicLikeMike said:


Also really curious about this.

Also, is there anyway to have the 'comments' section of the info pop up underneath of the cover when scrolling by, so they are apparent without having to click more information?
I've added information about the personal tweaks I have on my list to the main post now, the tag descriptions are covered there now! :)

In regards to the second part of your question, no, I'm afraid not. I really, really wish they did as I use comments a lot and would love to have them displayed more obviously, but the way the lists work the comments data isn't even loaded until you click "More" for each entry. It's possible that this could be fixed with some manually activated script that generated CSS, but I don't have the knowledge to accomplish that right now, unfortunately.


Awesome to the first part, I’ll make sure to go look there for the info. Also, that is unfortunate about the comments, since they aren’t useful, but oh well.

Your list is killer. Thanks for the reply and the list in general.
May 27, 2018 10:02 PM
#16
Shishio-kun

Offline
Feb 2010
11293
@Valerio_Lyndon
I'd say this layout is a great success, good job!
May 27, 2018 10:34 PM
#17
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2197
Shishio-kun said:
@Valerio_Lyndon
I'd say this layout is a great success, good job!
Thank you, it's definitely my most popular. :)
Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
May 27, 2018 11:03 PM
#18
Noire

Offline
May 2011
53844
I love how simple a layout it can be and yet offer so much customization.
Aug 20, 2018 8:34 PM
#19
Shishio-kun

Offline
Feb 2010
11293
OK I'm going through all the modern layouts and editing the topics to make sure we're all standardized and using the same @import formats so other users can see the layouts (this will hopefully cut down on issues later).

I edited the code in the OP a bit to this, so other users and logged out ppl can see the CSS. I hope that's ok with everyone! I hate doing it but kinda have to do it for club member's sakes.

@\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Theme%20-%20Compressed.css";
Aug 25, 2018 5:07 PM
#20
Shishio-kun

Offline
Feb 2010
11293
dominatorrr said:
Help me https://www.youtube.com/watch?v=LjKVxfkbgIE&feature=youtu.be tags

Moved your post over here

Valerio_Lyndon's response:

Sorry, but I I don't quite see the issue. From what I can tell tags are exactly the same cross-browser, but you haven't added any tags to the anime you're currently watching so none appear. If you scroll down on the page or go to your completed list, you should see the same entries have the same tags in both Chrome and Firefox. You can just barely see the top of them in the video you sent.

Am I misunderstanding? If so, please explain exactly what you are trying to do and what the issue is.

Also, if the problems are theme-specific and not general help advice, it might be better to keep the posts to the theme threads, in this case: https://myanimelist.net/forum/?topicid=1723114
Aug 26, 2018 3:22 AM
#21
dominatorrr

Offline
Aug 2018
14
My bad :D
Aug 28, 2018 1:58 PM
#22
dominatorrr

Offline
Aug 2018
14
Why they are not in the middle https://imgur.com/wGXHxXf?
Aug 28, 2018 5:41 PM
#23
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2197
dominatorrr said:
Why they are not in the middle https://imgur.com/wGXHxXf?
Hm, I am not seeing the same results on my side. I'm gonna ask some questions to see if I can figure out what might be the problem, but if that doesn't work we'll have to go onto more annoying steps.

First, it kinda looks like you are using a screenshot program to view the list from an older version of a browser? If you are purposefully viewing the page from an older browser it's very possible there will be issues such as that.

If that is not the case, what is your browser and version? Is this issue affecting the public code currently on your list or were you tweaking the code on a private list when this happened?
Valerio_LyndonAug 28, 2018 8:23 PM
Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
Aug 28, 2018 11:17 PM
#24
dominatorrr

Offline
Aug 2018
14
Oops i use stylish :DDDDDDDD
Aug 31, 2018 3:40 AM
#25
AnimeFanUnknown

Offline
Jan 2018
6
Hey! I wanna use the hover thing. But I can't get it right :(

Can you fix the code I'm using? That would be great :D

The code I'm using right now:
@\import "https://fonts.googleapis.com/css?family=Oswald";
html{position:relative;min-height:100%}body{padding-bottom:64px;background:center/cover no-repeat fixed #efefef!important}a,a:hover{color:#1d439b}#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,.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-item .data.tags a.edit,.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{-webkit-transition:all .3s ease!important;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,.add-edit-more span a,.data.chapter span .link,.data.progress span .link,.data.season a,.data.title .link.sort,.data.volume span .link,.header-info a,.more-info .td1>div>a,a[class^=icon-add-]{-webkit-transition:all .15s ease!important;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:#fff!important;border-radius:13px;color:#323232!important;font:400 0/26px Arial,Verdana,sans-serif;text-indent:0;text-align:left;text-shadow:none;white-space:nowrap;vertical-align:top;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.2);-webkit-transition:all .3s ease!important;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:#1d439b!important;color:#fff!important}.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:#323232!important;font-size:14px!important;opacity:1!important}.list-menu-float .icon-menu:hover .text{color:#fff!important}.list-menu-float .icon-menu svg.icon{top:6px!important;left:6px!important;max-width:14px;max-height:14px;fill:#323232}[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:#323232;font-family:FontAwesome}[data-owner=""] .icon-menu.profile:hover:before{color:#fff}[data-owner=""] .icon-menu.profile:after{content:"Profile";position:absolute;top:0;left:26px;display:inline-block;height:26px;font-size:14px;color:#323232}[data-owner=""] .icon-menu.profile:hover:after{color:#fff}.header .header-title:hover:before,.icon-menu.quick-add:hover:before{color:#fff!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;font-size:0!important;opacity:1!important;pointer-events:none;overflow:visible;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:#323232!important;border:none!important;border-radius:0 13px 13px 0;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:hover .text .link-style-setting{left:13px!important}.icon-menu.setting .text a:hover{background:#1d439b!important}.header{display:-webkit-flex;display:-moz-flex;display:flex;height:36px;margin-top:282px}.header .header-title{position:static;-webkit-order:1;-moz-order:1;order:1;margin-left:155px;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:after{content:"Home";display:inline-block;height:26px!important;width:26px!important;font:14px/26px Arial,Verdana,sans-serif;color:#323232}#search-box:after,.cover-block:before,.list-block:after,.list-block:before,.status-menu:after{content:""}.header .header-title:hover:after{color:#fff}.header .header-menu{position:static;display:-webkit-flex;display:-moz-flex;display:flex;width:auto;height:26px;-webkit-order:2;-moz-order:2;order:2;margin-left:6px}.btn-menu{height:0;font-size:0!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}.btn-menu #header-menu-button{display:none}.header-info{position:static;width:auto!important;padding:0 8px;margin:0!important;font-size:12px;-webkit-order:2;-moz-order:2;order:2}.header-info a{color:#323232!important;text-decoration:none!important}.header-info a:hover{color:#1d439b!important}.header .header-menu .list-menu{position:static;-webkit-order:1;-moz-order:1;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:#323232}.header .header-menu .list-menu .icon-menu:hover svg.icon{fill:#fff}.btn-list-setting{display:none!important}.cover-block{position:absolute;top:0;left:0;width:100%;min-width:1060px;height:318px;background:center center/cover no-repeat #323232;z-index:-5}@media (max-width:1920px){.cover-block{background-image:url(http://i.imgur.com/30p9zca.jpg)}}@media (min-width:1921px){.cover-block{background-image:url(http://i.imgur.com/gqcj6sM.jpg)}}.cover-block .image-container{display:block!important;width:1060px;height:100%;padding:0;margin:0 auto;background:url(http://i.imgur.com/is2e80Q.png) right center/contain no-repeat}#cover-image-container .image-container{padding:0}.cover-block:before{position:absolute;bottom:0;left:0;display:block;width:100%;height:50px;background:-webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}#cover-image{display:none}@-webkit-keyframes name-slide{0%{top:12px;margin-left:-535px;opacity:0;letter-spacing:0;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}90%{top:55px;margin-left:-475px}100%{letter-spacing:15px;opacity:1;-webkit-animation-timing-function:cubic-bezier(0,0,.75,1);animation-timing-function:cubic-bezier(0,0,.75,1)}}@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)}}#cover-image-container:after{position:absolute;top:55px;left:50%;margin-left:-475px;white-space:pre;text-align:left;letter-spacing:15px;color:#fff;text-shadow:1px 4px 7px rgba(0,0,0,.45);font:700 60px/60px Oswald;text-transform:uppercase;-webkit-transform:scale(.9) perspective(350px) rotateY(8deg) rotateZ(-3deg);transform:scale(.9) perspective(350px) rotateY(8deg) rotateZ(-3deg);-webkit-animation:name-slide 3s 1 .5s backwards;animation:name-slide 3s 1 .5s backwards}.list-container{position:static;width:1060px;background:0 0!important;border:none}.list-block:after,.list-block:before{position:absolute;left:0;display:block;width:100%;min-width:1060px;z-index:30}.fixed~.list-block:after,.fixed~.list-block:before{z-index:40}.list-block:before{top:318px;height:64px;background:#fff}.list-block:after{top:382px;height:2px;background:-webkit-linear-gradient(top,rgba(0,0,0,.2),rgba(0,0,0,0));background:linear-gradient(to bottom,rgba(0,0,0,.2),rgba(0,0,0,0))}.status-menu-container.fixed~.list-block:before{position:fixed;top:0}.status-menu-container.fixed~.list-block:after{position:fixed;top:64px}.status-menu-container{position:relative;width:1060px;height:64px;background:0 0;border:none!important;z-index:35!important}.status-menu-container.fixed{z-index:45!important}.status-menu:after{position:absolute;top:-51px;left:-8px;width:150px;height:150px;background:center top/cover no-repeat #ddd;border:8px solid #fff;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{display:block!important}.status-menu-container:not(.fixed) .status-menu{margin:0 0 0 173px}.status-menu-container.fixed .status-menu{margin:0 0 0 71px}.status-menu .status-button{display:inline-block!important;height:32px;padding:16px 0!important;margin:0 15px!important;color:#9B9B9B!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:#787878!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:#ebebeb;border:2px solid #ddd}#search-box input{background:0 0;border:none;border-radius:13px;outline:0}#search-box.open input{text-indent:7.5px;line-height:20px}#search-box:after{position:absolute;right:0;top:0;width:0;height:22px;padding-right:22px;background:-webkit-linear-gradient(left,#ebebeb 2px,rgba(235,235,235,0) 9.5px,rgba(235,235,235,0) 142.5px,#ebebeb 150px) content-box;background:linear-gradient(to right,#ebebeb 2px,rgba(235,235,235,0) 9.5px,rgba(235,235,235,0) 142.5px,#ebebeb 150px) content-box;border:2px solid transparent;border-radius:13px;pointer-events:none;opacity:0}#search-box.open:after{width:150px;opacity:1}.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}.open~#search-button{pointer-events:none}#search-button i{color:#9b9b9b!important;font-size:18px;line-height:26px;transition:all .15s ease}.open~#search-button i{font-size:14px;line-height:24px}.status-button.all_anime:after{background:#4065BA!important}.status-button.reading:after,.status-button.watching:after{background:#2db039!important}.status-button.completed:after{background:#26448f!important}.status-button.onhold:after{background:#f9d457!important}.status-button.dropped:after{background:#a12f31!important}.status-button.plantoread:after,.status-button.plantowatch:after{background:#c3c3c3!important}.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;text-align:center;font-family:FontAwesome}.list-table>tbody:first-of-type:hover:after{background:#1d439b!important;color:#fff!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}.data,.data.status{padding:0!important}.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:0!important;height:26px!important;background:#323232!important;border-radius:13px 0 0 13px;margin-left:-13px;color:#fff!important;font:11px/26px Verdana,Arial,sans-serif!important;text-align:center!important;text-indent:-7.5px;opacity:0}.list-status-title .text,.list-table-header .header-title a.hover_info,.list-table-header .header-title.tags{display:none!important}.list-table-header .header-title a:hover{background:#1d439b!important}.list-table>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;font-size:10px;line-height:10px;color:#fff!important}.sort-icon.fa-sort-asc{top:2px}.sort-icon.fa-sort-desc{bottom:2px}.header-title.finished a,.header-title.started a,.header-title.title a{font-size:0!important}.header-title.finished a:after,.header-title.started a:after,.header-title.title a:after{font-size:11px!important}.header-title.title a:after{content:"Title"}.header-title.started a[href*="order=3"]:after{content:"Started"}.header-title.finished a[href*="order=2"]:after{content:"Finished"}.header-title.started a[href*="order=14"]:after{content:"Air Start"}.header-title.finished a[href*="order=15"]:after{content:"Air Finish"}.list-status-title{width:1060px!important;height:64px!important;margin-top:-64px;background:0 0!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;text-shadow:1px 1px 3px #000}.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:#323232!important;font-weight:700}.list-block{min-height:initial;margin:64px 0 0}.status-menu-container.fixed+.list-block{margin-top:128px!important}.list-unit{width:100%!important;margin:0}.list-table{border:none!important}.list-table[data-items="[]"]:after{content:"No entries found. Try another search query?";display:block;width:900px;background:#fff;border-radius:16px;margin:32px auto;color:#323232;font:16px/32px Arial,Verdana,sans-serif;text-align:center}.list-item{position:relative;display:block;width:100%;min-height:64px;max-width:1060px;border:none;margin-bottom:8px;background:#fff!important}.list-table-data{position:relative;display:-webkit-flex;display:-moz-flex;display:flex;-webkit-align-items:center;-moz-align-items:center;align-items:center;font-size:0}.data,.data.image a{display:block!important}.data{height:100%;border:none!important;-webkit-flex:0 0 auto;-moz-flex:0 0 auto;flex:0 0 auto;color:#323232;font-size:11px}.list-table .list-table-data .data a{color:#323232!important;text-decoration:none!important}.list-table .list-table-data a:not(.edit-disabled):hover{color:#787878!important}.data.number{position:relative;top:-22px;width:20px;height:20px;background:#fff;border-radius:10px;margin:0 -28px 0 8px;-webkit-order:1;-moz-order:1;order:1;line-height:20px;font-weight:700;z-index:1}.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.status{position:absolute;top:0;left:0;width:1px!important}.data.image{width:64px;height:64px;margin:4px 0 4px 8px;border-radius:50%;-webkit-order:1;-moz-order:1;order:1;overflow:hidden}.data.image a{position:relative}.data.image img{width:64px!important;height:auto!important;border:none!important;margin-top:32px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}@supports (object-fit:cover){.data.image img{height:64px!important;margin:0;object-fit:cover;transform:none}}.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.title,.data.type{position:relative;height:16px}.data.image a:hover:after{opacity:1}.data.type{top:-16px;width:92px;padding-left:8px!important;margin-right:-100px;-webkit-order:11;-moz-order:11;order:11;text-align:left!important;color:#bababa;line-height:16px;font-size:10px}.data.title{width:142px;padding:32px 0 0 8px!important;-webkit-order:12;-moz-order:12;order:12;-webkit-flex:1 0 auto;-moz-flex:1 0 auto;flex:1 0 auto;line-height:16px}.data.title .link.sort{position:absolute;top:16px;left:8px;display:inline-block;max-width:100%;padding-right:16px;overflow:hidden;-moz-box-sizing:border-box;box-sizing:border-box;line-height:16px;white-space:nowrap;text-overflow:ellipsis}.data.title .link.sort:hover{color:#1d439b!important}.content-status,.rereading,.rewatching{color:#bababa;font-size:10px!important}.icon-watch{display:none!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:#bababa}.data.score a,.data.score select{display:block;height:26px;border-radius:13px;line-height:26px}.data.title .add-edit-more span a{color:#bababa!important}.data.title .add-edit-more span a:hover{color:#646464!important}.data.score{position:relative;width:26px;height:26px;-webkit-order:13;-moz-order:13;order:13}.data.score a{width:26px;margin:0 0 0 auto;background:#ebebeb}.data.score a:not(.edit-disabled):hover{background:#323232;color:#fff!important}.data.score select{position:absolute;top:0;right:0;width:40px;background:#323232;color:#fff;box-shadow:none!important}.data.score select:focus{outline:0!important;box-shadow:0 2px 2px rgba(0,0,0,.3)}.data.chapter,.data.progress,.data.volume{width:92px;-webkit-order:15;-moz-order:15;order:15}.data.chapter{margin-top:-34px}.data.volume{margin:34px 0 0 -92px}.data.chapter span,.data.progress span,.data.volume span{color:#323232}.data.progress:before{content:"Progress:";color:#bababa}.data.chapter:before{content:"Chapters:";color:#bababa}.data.volume:before{content:"Volumes:";color:#bababa}.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:#9696eb;font-family:FontAwesome;font-size:13px}.data.priority{position:relative;width:92px;height:74px;margin-right:-92px;-webkit-order:14;-moz-order:14;order:14;background:#fff;color:#323232;line-height:74px;opacity:1;pointer-events:none;z-index:1}.data.magazine,.data.rated{-webkit-order:19;-moz-order:19;margin-right:4px}.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.rated{width:40px;order:19;-webkit-flex-shrink:1;-moz-flex-shrink:1;flex-shrink:1}.data.rated:before{content:"Rated:";display:block;color:#bababa}.data.magazine{width:90px;order:19;-webkit-flex-shrink:1;-moz-flex-shrink:1;flex-shrink:1}.data.magazine:before{content:"Magazine:";display:block;color:#bababa}.data.retail,.data.storage{width:60px;margin-right:4px;-webkit-order:19;-moz-order:19;order:19;-webkit-flex-shrink:1;-moz-flex-shrink:1;flex-shrink:1}.data.retail:before,.data.storage:before{content:"Storage:";display:block;color:#bababa}.data.season{width:92px;-webkit-order:20;-moz-order:20;order:20}.data.season:before{content:"Premiered:";display:block;color:#bababa}.data.licensor,.data.studio,.data.tags{width:120px;padding:3px 0!important;margin-right:8px;-webkit-order:21;-moz-order:21;order:21;-webkit-flex-shrink:1;-moz-flex-shrink:1;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:#ebebeb;border-radius:8.5px;color:#323232!important;font-size:11px!important;line-height:15px}.list-table-data .data.licensor span a:hover,.list-table-data .data.studio span a:hover,.list-table-data .data.tags span a:hover{background:#323232;color:#fff!important}.data.tags a.edit{position:absolute;top:0;right:0;width:5px!important;height:100%!important;background:#d9d9d9;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:rgba(50,50,50,0);font:0/20px FontAwesome;text-align:center}.data.tags a.edit:hover:after{color:#323232;font-size:14px}.data.tags textarea{position:absolute;top:50%;right:0;width:530px!important;height:64px!important;margin-top:-32px;border-color:#ddd;background:#ebebeb;outline-color:#4065BA!important;color:#111;resize:none;-moz-box-sizing:border-box;box-sizing:border-box;z-index:5}.data.airing-finished,.data.airing-started,.data.days,.data.finished,.data.started{position:relative;width:100px;height:14px;overflow:hidden;-webkit-order:25;-moz-order:25;order:25;color:#111;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 #9a9a9a;text-align:right;color:#bababa}.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:#111}.more-info .td1>div{margin:0}.more-info .td1>div>a{position:absolute;top:0;left:0;border-bottom:2px solid #4065ba}.list-table .more-info .more-content a{color:#323232!important}.list-table .more-info .more-content a:hover{color:#1d439b!important}.list-unit .loading-space{margin:14px 0 22px}.list-unit .loading-space #loading-spinner{width:20px;height:20px;margin:0 auto;color:#323232}#advanced-options{top:64px;width:910px;padding:32px 0;background:#fff;border:none;box-shadow:0 0 32px rgba(0,0,0,.5);color:#111}#advanced-options .advanced-options-button,#advanced-options .advanced-options-header,#advanced-options [class*="-widget"]{width:550px;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;-moz-box-sizing:border-box;box-sizing:border-box}#advanced-options .advanced-options-header:before{display:inline-block;width:69px;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:#323232;font:14px/1 FontAwesome;text-align:center;pointer-events:auto}#advanced-options .advanced-options-header .description:hover:before{color:#bababa}#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:#bababa!important;border-radius:13px;-moz-box-sizing:border-box;box-sizing:border-box;color:#111;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"] select:focus{background-color:#ebebeb!important}#advanced-options :disabled,#advanced-options input:disabled+label{opacity:.5;color:#323232!important}#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:70.5px;height:26px;padding:11px 7.5px 11px 0;border-right:2px solid #bababa;margin-right:7.5px;line-height:26px;text-align:right}#advanced-options .title input{width:387.5px!important}#advanced-options .airing-status select{width:197.5px!important}#advanced-options .producer select{width:387.5px!important}#advanced-options .aired-date span:nth-of-type(n+2){display:inline-block;width:40px;padding:0 3px 0 7.5px;border:1px solid #bababa;border-right:none;border-radius:13px 0 0 13px;margin-right:0!important;line-height:24px;font-style:italic}#advanced-options .aired-date span:nth-of-type(3){margin-left:7.5px!important}#advanced-options .aired-date .day,#advanced-options .aired-date .month,#advanced-options .aired-date .year{border-radius:0;padding:0 16px 0 7.5px;border-left-width:0}#advanced-options .aired-date .month,#advanced-options .aired-date .year{border-right:none}#advanced-options .aired-date .day{border-radius:0 13px 13px 0}#advanced-options .aired-date .year{width:60px!important}#advanced-options .aired-date .day,#advanced-options .aired-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:#111;line-height:14px;transition:all .15s ease}#advanced-options .sort-widget input[type=radio]:not(:disabled)+label:hover{background:#ebebeb!important}#advanced-options .sort-widget input[type=radio]:not(:disabled):checked+label{background:#bababa!important;border:1px solid #bababa}#advanced-options .sort-widget input[type=radio]:not(:checked)+label i{color:#323232}#advanced-options #fancybox-close,#advanced-options .advanced-options-button a{width:90px;height:26px;padding:0;background:#ebebeb;border-radius:13px;box-shadow:0 1px 2px rgba(0,0,0,.2);color:#111;line-height:26px;text-align:center}#footer-block:before,footer{position:absolute;width:100%}#advanced-options #fancybox-close:hover,#advanced-options .advanced-options-button a:hover,#fancybox-outer #fancybox-close:hover{background:#323232;color:#fff}#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}#fancybox-overlay{background:#000!important;opacity:.2!important}#fancybox-outer [class^=fancy-]{display:none}#fancybox-outer{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:#ebebeb;border:3px solid #fff;border-radius:13px;color:#323232;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}footer{bottom:0;left:0}#footer-block{min-width:1060px;height:32px;padding:16px 0;background:#fff}#footer-block:before{content:"";left:0;top:-2px;min-width:1060px;height:2px;background:-webkit-linear-gradient(bottom,rgba(0,0,0,.1),rgba(0,0,0,0));background:linear-gradient(to top,rgba(0,0,0,.1),rgba(0,0,0,0))}#copyright{padding:0;color:#9B9B9B;line-height:16px}#copyright:after{content:"\aList design by Valerio Lyndon.";white-space:pre}body .initialize-tutorial{position:fixed;top:0;left:0;display:block;width:40px;height:40px;padding:0;background:0 0!important;border:none!important;z-index:9999;pointer-events:none}body .initialize-tutorial:hover{pointer-events:auto}.initialize-tutorial:before{content:"";position:absolute;top:-40px;left:-45px;display:block;width:90px;height:80px;background:#fff;border-bottom:2px solid #4065BA;pointer-events:auto;transform:rotate(-45deg)}.initialize-tutorial:hover:before{display:none}.initialize-tutorial:after{content:"\f129";position:absolute;top:0;left:0;width:30px;height:30px;color:#111;font:20px/30px FontAwesome;z-index:1}.initialize-tutorial .initialize-tutorial__message{position:relative;width:450px;height:30px;padding:10px 10px 10px 30px;background:#fff;border-bottom:2px solid #4065BA;border-right:2px solid #4065BA;color:#111;line-height:15px;text-align:left;opacity:0;z-index:1}.initialize-tutorial:hover .initialize-tutorial__message{opacity:1}.initialize-tutorial .initialize-tutorial__message a{color:#111!important}
.status-menu:after {
background-image: url(https://myanimelist.cdn-dena.com/images/userimages/6910231.jpg);
}
#cover-image-container:after {
content: "AnimeFanUnknown\a";
}
Aug 31, 2018 10:38 PM
#26
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2197
AnimeFanUnknown said:
Hey! I wanna use the hover thing. But I can't get it right :(

Can you fix the code I'm using? That would be great :D

The code I'm using right now:
-snip-
So, you're trying to add the image on hover, is that right?


It should work as long as the import is at the top, before everything else:
@\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore";
@\import "https://fonts.googleapis.com/css?family=Oswald";
html{position:relative;min-height:100%}body{padding-bottom:64px;background:center/cover no-repeat fixed #efefef!important}a,a:hover{color:#1d439b}#adva
…


And the rest of the code would be after everything else:
…
#cover-image-container:after {
content: "AnimeFanUnknown\a";
}

/* "Clarity" Modification by Valerio Lyndon / Hover Image / Revision 0.1 */
.data.image{overflow:visible}.data.image a:before{content:"";position:absolute;top:50%;left:-166px;width:150px;height:0;margin-top:0;background-repeat:no-repeat;background-position:center;background-size:cover;border-radius:8px;box-shadow:0 0 2px #000;opacity:0;pointer-events:none;-webkit-transition:all .3s ease;transition:all .3s ease;z-index:50}.data.image a:after,.data.image img{border-radius:50%}.list-item:hover .data.image a:before{height:200px;margin-top:-100px;opacity:1}.data.image img{height:64px!important;margin:0;overflow:hidden;object-fit:cover;transform:none}


Here is your code with the image hover pieces added in: [Code]. It worked when I tried it, let me know if it does for you too.
Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
Sep 1, 2018 9:38 AM
#27
AnimeFanUnknown

Offline
Jan 2018
6
Thanks it worked :'D
Sep 3, 2018 1:54 PM
#28
dominatorrr

Offline
Aug 2018
14
dominatorrrSep 3, 2018 2:01 PM
Sep 9, 2018 4:44 AM
#29
Jokuc

Offline
Aug 2015
575
Such a great design! Clean and modern while having lots of customization! Cover popups, horizontal tags, favorite markers, tag descriptions. I love it!

Now, I have a little question. Is it possible to put the studio under premiered while keeping the horizontal tags? Like this:



Thanks!
JokucSep 9, 2018 4:51 AM
It's only a passing thing, this shadow. Even darkness must pass. A new day will come. And when the sun shines it will shine out the clearer.
Sep 9, 2018 8:13 PM
#30
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2197
Jokuc said:
Such a great design! Clean and modern while having lots of customization! Cover popups, horizontal tags, favorite markers, tag descriptions. I love it!

Now, I have a little question. Is it possible to put the studio under premiered while keeping the horizontal tags? Like this:



Thanks!
Thank you, I'm glad you're enjoying it. :)

I got a quick little trick working which I think should do exactly what you want.


As to the limitations of it, if the studio's section is empty it will look a little odd, as seen here: [Image]. Although now that I've noticed that I will likely push an update to the main theme to add something there (something like this: [Image]). Plus, if you have anything else that is stretching the height of the list row it will end up looking a bit odd, [Image], but this shouldn't happen with your current settings. As always it's possible there's something else I've not thought of, so let me know if you find anything wrong. :)

Here is the code, which can be placed anywhere below the imports. That said, if it doesn't work high up in the code, try placing it at the very bottom of the list code instead.

And in case I don't end up adding that empty studio dialogue or prefer this one, here is the code for it if you wish to add it in yourself (just keep in mind if I add it into the base theme it might conflict a little).
Valerio_LyndonSep 9, 2018 9:06 PM
Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
Sep 9, 2018 11:19 PM
#31
Jokuc

Offline
Aug 2015
575
Valerio_Lyndon said:
solution be here

Awesome! Though, as you said, anime with 3 studios do look a little odd.

I'm wondering, is it possible to set the distance between studio and bottom of the entry? It appears to me like there's some sort of minimum margin which also controls the overall height of the box. If I add a higher value to margin top here, the studio will move down as expected but the edge of the box will move with it.



Or maybe this is caused by some sort of padding? But how can the horizontal tags stay so close to the edge if that was the case..?

Anyway, I set the margin for season at 6 and 40 for studio (it's 35 in the screencap) and everything looks decent.
JokucSep 9, 2018 11:29 PM
It's only a passing thing, this shadow. Even darkness must pass. A new day will come. And when the sun shines it will shine out the clearer.
Sep 10, 2018 1:21 AM
#32
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2197
Jokuc said:
Valerio_Lyndon said:
solution be here

Awesome! Though, as you said, anime with 3 studios do look a little odd.

I'm wondering, is it possible to set the distance between studio and bottom of the entry? It appears to me like there's some sort of minimum margin which also controls the overall height of the box. If I add a higher value to margin top here, the studio will move down as expected but the edge of the box will move with it.



Or maybe this is caused by some sort of padding? But how can the horizontal tags stay so close to the edge if that was the case..?

Anyway, I set the margin for season at 6 and 40 for studio (it's 35 in the screencap) and everything looks decent.
As to the margin, it's a case of the studio box and margin being larger than the actual container, so it starts expanding to make space.

The bottom padding on each item is from the horizontal tags code, it's so that they don't overlap over everything. On the default list everything's centered normally, but I had to make some sacrifices to do the tags how I wanted. I forgot to mention the padding in the thread here though. There are some other ways I could have positioned the tags for a different appearance (for instance: [Image]) but I can't think of a good way to do it other than giving extra space at the bottom of each entry.

If you wanted stuff to look a bit more even then you could add padding to the top to match, but it'd result in a lot of empty space up top.
.list-table-data {
	padding-top: 11px;
}

Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
Sep 21, 2018 8:42 PM
#33
Noire

Offline
May 2011
53844
Is their a limit to cs code on MAL? I keep putting in the code and it ignores it.
Sep 21, 2018 8:56 PM
#34
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2197
Noire said:
Is their a limit to cs code on MAL? I keep putting in the code and it ignores it.
To my knowledge there is no limit, or rather, I have never hit it. I have the entire list CSS on my own list with no issues.

Could you post what you have in your custom CSS box?

Also, make sure to save your theme progress after so that it's remembered and applied.
Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
Sep 21, 2018 9:05 PM
#35
Noire

Offline
May 2011
53844
Valerio_Lyndon said:
Noire said:
Is their a limit to cs code on MAL? I keep putting in the code and it ignores it.
To my knowledge there is no limit, or rather, I have never hit it. I have the entire list CSS on my own list with no issues.

Could you post what you have in your custom CSS box?

Also, make sure to save your theme progress after so that it's remembered and applied.

This is what I have
The problem is my background won't load

I have also tried to modify the original CSS and I can't figure out what colors control what
[spoiler]
/**
* "Clarity" by Valerio Lyndon
* Revision 21.2 + MAL Shutdown Fixes 6
*/

/**
* TABLE OF CONTENTS : Use CTRL+F to find items quickly.
*
* IMPORTS
*
* OPTIMIZATIONS : Page-wide repeated code.
* Transitions
* Nav-Buttons
*
* PAGE-BASE : Page-wide properties & widths.
*
* HEADER
* Nav-Background
* Cover
* Avatar
* Nav-Main : Main Bar
* Nav-Buttons-Top : Located above main bar.
* Nav-Buttons-L : Below main bar on left. User menu.
* Nav-Buttons-R : Below main bar on right. Stats & Filters.
* Sort-By : Sort menu.
*
* LIST : Anime/manga listings.
* Base
* Status
* Image : Image/Number
* Title : Title/Type
* Score
* Progress
* Priority
* Rating
* Magazine
* Storage
* Season
* Tags : Tags/Studio/Licensors
* Dates : Started/Finished/Airing/Etc
* More-Info
*
* FOOTER
*
* OVERLAYS : Overlayed menus and iframes.
* Base
* iframes
* Filter-Menu
*
* MAL-SHUTDOWN-FIXES
*/





/*==============================*\
!IMPORTS
\*==============================*/

@\import "https://fonts.googleapis.com/css?family=Oswald";





/*==============================*\
!OPTIMIZATIONS @Transitions
\*==============================*/

.icon-menu:before,
.icon-menu:after,
.icon-menu svg,
.icon-menu.setting,
.icon-menu.setting .text,
.icon-menu.setting .text a,
.header .header-title:after,
.status-menu:after,
.fixed .status-menu:after,
.status-menu-container:not(.fixed) .status-menu,
.status-menu-container.fixed .status-menu,
.status-button:after,
#search-box,
#search-box input,
#search-box:after,
.list-table-header .header-title,
.list-table .list-table-header .header-title .link.sort,
.data.image .link:after,
.data.score a,
.data.progress,
.data.chapter,
.data.volume,
.data.tags a,
.data.studio a,
.data.licensor a,
.data.tags a.edit,
.data.tags a.edit:after,
.list-item .data.tags a.edit,
.data.priority,
#advanced-options .advanced-options-button a,
#fancybox-close
{
-webkit-transition: all 0.3s ease !important;
transition: all 0.3s ease !important;
}

#search-button i,
.header-info a,
.data.title .link.sort,
.data.progress span .link,
a[class^="icon-add-"],
.data.chapter span .link,
.data.volume span .link,
.add-edit-more span a,
.data.season a,
.more-info .td1 > div > a,
#advanced-options .advanced-options-header .description,
#advanced-options .advanced-options-header .description:before,
#advanced-options [class*="-widget"] input,
#advanced-options [class*="-widget"] select,
#advanced-options [class*="-widget"] label
{
-webkit-transition: all 0.15s ease !important;
transition: all 0.15s ease !important;
}



/*------------------------------*\
OPTIMIZATIONS @Nav-Buttons
\*------------------------------*/

.header .header-title,
.header-info,
.icon-menu,
.list-menu-float .icon-menu,
.icon-menu.quick-add:before,
.stats a,
.list-table > tbody:first-of-type:after
{
display: inline-block;
height: 26px !important;
width: 26px !important;
background: #fff !important;
border-radius: 13px;

color: #323232 !important;
font: normal 0/26px Arial, Verdana, sans-serif;
text-indent: 0;
text-align: left;
text-shadow: none;
white-space: nowrap;
vertical-align: top;

overflow: hidden;
box-shadow: 0px 1px 2px rgba(0,0,0,0.2);

-webkit-transition: all 0.3s ease !important;
transition: all 0.3s ease !important;
}

.header .header-title:hover,
.icon-menu:hover,
.list-menu-float .icon-menu:hover,
.stats a:hover
{
width: 100px !important;
background: #1d439b !important;

color: #fff !important;
}





/*==============================*\
!PAGE-BASE
\*==============================*/

html {
position: relative;

min-height: 100%;
}

body {
padding-bottom: 64px;
background: #efefef none no-repeat center / cover fixed !important;
background-image: url(https://i.imgur.com/8n91Uop.jpg) !important;
}

.list-container {
position: static;

width: 1060px;
background: none !important;
border: none;
}

.list-block {
min-height: initial;
margin: 64px 0 0 0;
}

.status-menu-container.fixed + .list-block {
margin-top: 128px !important;
}

.list-unit {
width: 100% !important;
margin: 0
}

.list-table {
border: none !important;
}


a, a:hover {
color: #1d439b;
}





/*==============================*\
!HEADER @Nav-Background
\*==============================*/

.list-block:before, .list-block:after {
content: "";
position: absolute;
left: 0;

display: block;
width: 100%;
min-width: 1060px;

z-index: 30;
}

.fixed ~ .list-block:before, .fixed ~ .list-block:after { z-index: 40; }
.list-block:before {
top: 318px;

height: 64px;
background: #fff;
}

.list-block:after {
top: 382px;

height: 2px;
background: -webkit-linear-gradient(top,rgba(0,0,0,0.2),rgba(0,0,0,0));
background: linear-gradient(to bottom,rgba(0,0,0,0.2),rgba(0,0,0,0));
}

.status-menu-container.fixed ~ .list-block:before {
position: fixed;
top: 0;
}

.status-menu-container.fixed ~ .list-block:after {
position: fixed;
top: 64px;
}



/*------------------------------*\
HEADER @Cover
\*------------------------------*/

.cover-block {
position: absolute;
top: 0;
left: 0;

width: 100%;
min-width: 1060px;
height: 318px;
background: #323232 no-repeat center center / cover scroll;

z-index:-5
}

/* Different images depending on page size. Meant to save a few KBs. */
@media (max-width: 1920px) {
.cover-block {
background-image: url(http://i.imgur.com/30p9zca.jpg);
}
}
@media (min-width: 1921px) {
.cover-block {
background-image: url(http://i.imgur.com/gqcj6sM.jpg);
}
}

/* Gradient */
.cover-block:before {
content: "";
position: absolute;
bottom: 0;
left: 0;

display: block;
width: 100%;
height: 50px;
background: -webkit-linear-gradient(bottom,rgba(0,0,0,0.5),rgba(0,0,0,0));
background: linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0));
}

/* Hide unnecessary container & change image button */
.btn-list-setting, #cover-image { display: none !important; }



/* - - - - - - - - - - - - - - -*\
Character Image
\*- - - - - - - - - - - - - - - */

.cover-block .image-container {
display: block !important;
width: 1060px;
height: 100%;
padding: 0;
background: url(https://i.imgur.com/g2kfraV.png) no-repeat right center / contain;
margin: 0 auto;
}


/* - - - - - - - - - - - - - - -*\
User Name
\*- - - - - - - - - - - - - - - */

#cover-image-container:after {
position: absolute;
top: 55px;
left: 50%;

margin-left: -475px;

color: #fff;
font: bold 60px/60px Oswald;
text-align: left;
letter-spacing: 15px;
text-shadow: 1px 4px 7px rgba(0,0,0,0.45);
text-transform: uppercase;
white-space: pre;

-webkit-transform: scale(0.9) perspective(350px) rotateY(8deg) rotateZ(-3deg);
transform: scale(0.9) perspective(350px) rotateY(8deg) rotateZ(-3deg);
-webkit-animation: name-slide 3s 1 0.5s backwards;
animation: name-slide 3s 1 0.5s backwards;
}

@-webkit-keyframes name-slide {
0% {
top: 12px;
margin-left: -535px;
opacity: 0;
letter-spacing: 0;

-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
90% {
top: 55px;
margin-left: -475px;
}
100% {
letter-spacing: 15px;
opacity: 1;

-webkit-animation-timing-function: cubic-bezier(0,0,.75,1);
animation-timing-function: cubic-bezier(0,0,.75,1);
}
}
@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 @Avatar
\*------------------------------*/

.status-menu:after {
content:"";
position: absolute;
top: -51px;
left: -8px;

width: 150px;
height: 150px;
background: #ddd no-repeat center top / cover;
border: 8px solid #fff;
border-radius: 50%;

opacity: 1;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
background-image: url(https://i.imgur.com/OMI5zva.png);
}

.fixed .status-menu:after {
top: 0px;

width: 48px;
height: 48px;

box-shadow: none;
}



/*------------------------------*\
HEADER @Nav-Buttons-Top
\*------------------------------*/

.header {
display: -webkit-flex;
display: -moz-flex;
display: flex;
height: 36px;
margin-top: 282px;
}

.header .header-menu {
position: static;

display: -webkit-flex;
display: -moz-flex;
display: flex;
width: auto;
height: 26px;
margin-left: 6px;

-webkit-order: 2;
-moz-order: 2;
order: 2;
}

.btn-menu {
height: 0;

font-size: 0 !important;
}

/* Remove unnecessary javascript dropdown button */
.btn-menu #header-menu-button { display: none; }


/* - - - - - - - - - - - - - - -*\
Home Button
\*- - - - - - - - - - - - - - - */

.header .header-title {
position: static;

margin-left: 155px;

-webkit-order: 1;
-moz-order: 1;
order: 1;

z-index: 1;
}

.header .header-title:before {
content: "\f015";
display: inline-block;

width: 26px;
background: none !important;

font-size: 14px;
font-family: FontAwesome;
text-align: center !important;
}

.header .header-title:hover:before {
color: #fff !important;
}

.header .header-title:after {
content: "Home";

display: inline-block;
height: 26px !important;
width: 26px !important;

font: 14px/26px Arial, Verdana, sans-serif;
color: #323232;
}

.header .header-title:hover:after {
color: #fff;
}


/* - - - - - - - - - - - - - - -*\
Anime/Mangalist Buttons
\*- - - - - - - - - - - - - - - */

.header .header-menu .list-menu {
position: static;
-webkit-order: 1;
-moz-order: 1;
order: 1;

display: inline-block;
height: 26px;
border: none;
background: none;
box-shadow: none;
}

.header .icon-menu.manga-list, .header .icon-menu.anime-list {
position: static;

padding: 0;
margin-right: 6px;

font-size: 0 !important;
font-weight: normal !important;
}

.header .icon-menu.manga-list .text, .header .icon-menu.anime-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: #323232;
}

.header .header-menu .list-menu .icon-menu:hover svg.icon { fill: #ffffff; }


/* - - - - - - - - - - - - - - -*\
Login/Affinity Menu
\*- - - - - - - - - - - - - - - */

.header-info {
position: static;

width: auto !important;
padding: 0 8px;
margin: 0 !important;
font-size: 12px;

-webkit-order: 2;
-moz-order: 2;
order: 2;
}

.header-info a {
color: #323232 !important;
text-decoration: none !important;
}

.header-info a:hover {
color: #1d439b !important;
}


/* - - - - - - - - - - - - - - -*\
Username Button (Avatar Link)
\*- - - - - - - - - - - - - - - */

.btn-menu a.username {
position: absolute;
left: 1px;
top: -7px;

display: block;
width: 150px;
height: 150px;
background: none;
border-radius: 50%;

font-size: 0;

z-index: 36;
}

.btn-menu span.username { display: none !important; }



/*------------------------------*\
HEADER @Nav-Main
\*------------------------------*/

.status-menu-container {
position: relative;

width: 1060px;
height: 64px;
background: none;
border: none !important;

z-index: 35 !important;
}
.status-menu-container.fixed { z-index: 45 !important; }

.status-menu {
display: block !important;
}

.status-menu-container .status-menu { margin: 0 0 0 173px; }
.status-menu-container.fixed .status-menu { margin: 0 0 0 71px; }

.status-menu .status-button {
display: inline-block !important;
height: 32px;
padding: 16px 0 !important;
margin: 0 15px !important;

color: #9B9B9B !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: #787878 !important;
}

.status-button.all_anime:after { background: #4065BA !important; }
.status-button.watching:after,
.status-button.reading:after { background: #2db039 !important; }
.status-button.completed:after { background: #26448f !important; }
.status-button.onhold:after { background: #f9d457 !important; }
.status-button.dropped:after { background: #a12f31 !important; }
.status-button.plantowatch:after,
.status-button.plantoread:after { background: #c3c3c3 !important; }


/* - - - - - - - - - - - - - - -*\
Search-Bar
\*- - - - - - - - - - - - - - - */

.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: #ebebeb;
border: 2px solid #ddd;
}

#search-box input {
background: none;
border: none;
border-radius: 13px;
outline: none;
}

#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;
}
.open ~ #search-button {
pointer-events: none;
}

#search-button i {
color: #9b9b9b !important;
font-size: 18px;
line-height: 26px;

transition: all 0.15s ease;
}

.open ~ #search-button i {
font-size: 14px;
line-height: 24px;
}

/* Adds gradiented edges for smooth appearance on overflowing text. */
#search-box:after {
content: "";
position: absolute;
right: 0;
top: 0;

width: 0;
height: 22px;
padding-right: 22px;
background: -webkit-linear-gradient(left, #ebebeb 2px, rgba(235, 235, 235, 0) 9.5px, rgba(235, 235, 235, 0) 142.5px, #ebebeb 150px) content-box;
background: linear-gradient(to right, #ebebeb 2px, rgba(235, 235, 235, 0) 9.5px, rgba(235, 235, 235, 0) 142.5px, #ebebeb 150px) content-box;
border: 2px solid transparent;
border-radius: 13px;

pointer-events: none;
opacity: 0;
}

#search-box.open:after {
width: 150px;
opacity: 1;
}



/*------------------------------*\
HEADER @Nav-Buttons-L
\*------------------------------*/

.list-menu-float {
position: relative;
top: auto;

display: block;
width: 904px;
height: 0;
padding-left: 155px;
margin: 0 auto;
border: none;
background: none;

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: #323232 !important;
font-size: 14px !important;

opacity: 1 !important;
}

.list-menu-float .icon-menu:hover .text {
color: #fff !important;
}

.list-menu-float .icon-menu svg.icon {
top: 6px !important;
left: 6px !important;

max-width: 14px;
max-height: 14px;

fill: #323232;
}


/* - - - - - - - - - - - - - - -*\
Profile Button
\*- - - - - - - - - - - - - - - */

/* List-Owner */

[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: none !important;
border-radius: 50%;

font-size: 0;

box-shadow: none;
}

/* Non-List-Owner */

[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: #323232;
font-family: FontAwesome;
}

[data-owner=""] .icon-menu.profile:hover:before {
color: #fff;
}

[data-owner=""] .icon-menu.profile:after {
content: "Profile";
position:absolute;
top: 0;
left: 26px;

display: inline-block;
height: 26px;

font-size: 14px;

color: #323232;
}

[data-owner=""] .icon-menu.profile:hover:after {
color: #fff;
}


/* - - - - - - - - - - - - - - -*\
Quick Add Button
\*- - - - - - - - - - - - - - - */

.icon-menu.quick-add svg {
display: none;
}

.icon-menu.quick-add:before {
content: "\f067";

background: none !important;

font-size: 14px;
text-align: center;
font-family: FontAwesome;

box-shadow: none;
}

.icon-menu.quick-add:hover:before {
color: #fff !important;
}


/* - - - - - - - - - - - - - - -*\
Settings Button
\*- - - - - - - - - - - - - - - */

.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: #323232 !important;
border: none !important;
border-radius: 0 13px 13px 0;

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:hover .text .link-style-setting { left: 13px !important; }

.icon-menu.setting .text a:hover { background: #1d439b !important; }



/*------------------------------*\
HEADER @Nav-Buttons-R
\*------------------------------*/

.list-status-title {
width: 1060px !important;
height: 64px !important;
margin-top: -64px;
background: none !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 0;

font-size: 0;
line-height: 13px !important;
text-shadow: 1px 1px 3px #000;
}

.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: none !important;

color: #323232 !important;
font-weight: bold;
}



/*------------------------------*\
HEADER @Sort-By
\*------------------------------*/

.list-table > tbody:first-of-type {
[
Sep 21, 2018 9:22 PM
#36
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2197
Noire said:
Valerio_Lyndon said:
To my knowledge there is no limit, or rather, I have never hit it. I have the entire list CSS on my own list with no issues.

Could you post what you have in your custom CSS box?

Also, make sure to save your theme progress after so that it's remembered and applied.

This is what I have
The problem is my background won't load
-snip-
I have also tried to modify the original CSS and I can't figure out what colors control what
-snip-
Your custom image background won't load or no images at all won't load? Because I notice your CSS was missing a few closing brackets (these things: "}" ), which was breaking your custom images, but the default images still worked fine. Here's your code with that fix: [Link] And here's how it looks when I apply the code.


As to colours, they're rather scattered around. I would love to have an easily customisable colour palette, however that is not how it currently works, and will likely not be how it works in the future (probably). At the moment, if you're looking to customize a specific part of the page the best method would be to find the element on the page using Inspect Element, and then search for the selector in the CSS of my theme to further customize it. If it's your first time tweaking CSS it will be a lot of trial and error, and I would recommend using W3Schools to find out more about inidivudual CSS properties, and reading about the basic format of CSS before writing any code (I don't have a source for this right now but could write up something myself or find one later if requested). :)

EDIT: You could also take a look at the dark mode code to see how I changed the colours myself, but it is really kind of a mess to look at right now and not well documented on which colours do what things. But with some messing about you might find it useful for changing the colours, you could change one colour at a time and see what it changes. I only recommend this if you're really into the idea of changing the colours though as it really is quite messy (I have yet to get around to cleaning it up like the main theme has been as it's difficult to organize).

If you had any questions past there I'm afraid they were cut off as MAL forum messages do indeed have a character limit (and it's very annoying).
Valerio_LyndonSep 21, 2018 9:28 PM
Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
Sep 21, 2018 9:26 PM
#37
Noire

Offline
May 2011
53844
Where is it I apply this for where the animes are to be transparent?
background-color:rgba(0,0,0,0.6)
Sep 21, 2018 9:31 PM
#38
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2197
Noire said:
Where is it I apply this for where the animes are to be transparent?
background-color:rgba(0,0,0,0.6)
This should do it:
.list-item {
  background-color: rgba(0,0,0,0.6) !important;
}
Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
Sep 21, 2018 9:33 PM
#39
Noire

Offline
May 2011
53844
Now its all good thank you
Sep 30, 2018 11:18 AM
#41
Lenkin

Offline
Mar 2017
57
Is there a way to change the colour of the highlighted anime name from the "royalblue" default? I've added a colour changing hover, but I'd like to have the highlighted text a different colour to default one.

Also, while i'm here, can you change the thickness of the status colours to be thicker? (the ones to the left of the anime picture that border it)

Code is below:

I've done no CSS before so any explaination would be handy
Sep 30, 2018 2:55 PM
#42
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2197
Lenkin said:
Is there a way to change the colour of the highlighted anime name from the "royalblue" default? I've added a colour changing hover, but I'd like to have the highlighted text a different colour to default one.

Also, while i'm here, can you change the thickness of the status colours to be thicker? (the ones to the left of the anime picture that border it)

Code is below:

I've done no CSS before so any explaination would be handy
If you wanted to change the text colour when hovering over the text itself, use this code.
/* ===================================
List item title hover colour */
.data.title .link.sort:hover { color: #ffffff !important; }
Or, if you want the text colour to change when hovering over the entire list row (but be a different colour to the rest of your current hover), use this code:
/* ===================================
List item title hover colour */
.list-table-data:hover .title .link { color: #ffffff !important; }
I've used #ffffff, pure white, as a placeholder colour here. But you can change it to anything.

Changing the thickness of the status section is pretty simple. You would use this code, and change the number to anything you wanted. The theme's default is 1px (1 pixel) but you can really make it whatever you wish! I've set it to 2 here, so it would be twice as wide as before.
/* ===================================
Change width of status colour */
.data.status { width: 2px !important; }


Make sure to always apply new, more important code to the bottom of your CSS so that it has a lower chance of conflicts.
Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
Oct 1, 2018 8:07 AM
#43
Lenkin

Offline
Mar 2017
57
Thanks, this was what I needed.
Oct 11, 2018 3:04 AM
#44
bnhershy

Offline
Dec 2012
4
For anyone who wants Hover Covers, but only wants them when hovering the cover circle, add this to the bottom of your code instead of the one posted above:

bnhershyOct 11, 2018 3:08 AM
Oct 13, 2018 10:48 PM
#45
bnhershy

Offline
Dec 2012
4
Btw, if anyone has a good way to make the Hover Tag Description auto-adjust to the text length, that would be a great help seeing as even Valerio's list doesn't have that code. Cheers to whoever has one.
Oct 13, 2018 10:55 PM
#46
Shishio-kun

Offline
Feb 2010
11293
bnhershy said:
For anyone who wants Hover Covers, but only wants them when hovering the cover circle, add this to the bottom of your code instead of the one posted above:



Oh very nice! Thanks for sharing.
Oct 20, 2018 2:04 AM
#47
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2197
bnhershy said:
Btw, if anyone has a good way to make the Hover Tag Description auto-adjust to the text length, that would be a great help seeing as even Valerio's list doesn't have that code. Cheers to whoever has one.
Hey there! Until you brought it up, I hadn't considered revisiting auto-width since it wasn't initially important to me. But after reading your question I thought of a way to auto-scale the width. It retains a maximum width (since too large would look weird in my opinion, it could be removed though) but has no minimum. Since I did only finish writing this about 10 minutes ago (I.E has not been heavily tested) and it uses a couple of methods I generally stray away from, let me know if there's any issue with it. But I hope that does what you want. :)



Here's the code for it, in normal and modified sizes. It's an updated version of the tag description base from the top post so should be used to replace the old one you have if possible.

I notice you changed the width of the tags to 250px on your list, so use this second spoiler if you want to keep the size and make the process a little faster.
Valerio_LyndonOct 20, 2018 2:09 AM
Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
Oct 20, 2018 3:28 AM
#48
bnhershy

Offline
Dec 2012
4
Valerio_Lyndon said:
Hey there! Until you brought it up, I hadn't considered revisiting auto-width since it wasn't initially important to me. But after reading your question I thought of a way to auto-scale the width. It retains a maximum width (since too large would look weird in my opinion, it could be removed though) but has no minimum. Since I did only finish writing this about 10 minutes ago (I.E has not been heavily tested) and it uses a couple of methods I generally stray away from, let me know if there's any issue with it. But I hope that does what you want. :)


Here's the code for it, in normal and modified sizes. It's an updated version of the tag description base from the top post so should be used to replace the old one you have if possible.


Hey, so I've tested it out and as per the code, it works quite well, but has the same shortcoming of why i changed the tag width to 250px in the first place, which is the code processes before text alignment, so there are still gaps on the right if a word was too big to fit on the line.



I'll try see if there's a way to remedy this, but if you have any ideas, let me know.
Cheers for the help thus far.
Oct 20, 2018 4:21 AM
#49
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2197
bnhershy said:
Valerio_Lyndon said:
Hey there! Until you brought it up, I hadn't considered revisiting auto-width since it wasn't initially important to me. But after reading your question I thought of a way to auto-scale the width. It retains a maximum width (since too large would look weird in my opinion, it could be removed though) but has no minimum. Since I did only finish writing this about 10 minutes ago (I.E has not been heavily tested) and it uses a couple of methods I generally stray away from, let me know if there's any issue with it. But I hope that does what you want. :)


Here's the code for it, in normal and modified sizes. It's an updated version of the tag description base from the top post so should be used to replace the old one you have if possible.


Hey, so I've tested it out and as per the code, it works quite well, but has the same shortcoming of why i changed the tag width to 250px in the first place, which is the code processes before text alignment, so there are still gaps on the right if a word was too big to fit on the line.



I'll try see if there's a way to remedy this, but if you have any ideas, let me know.
Cheers for the help thus far.
Hmm. I can see why you want to get rid of it, but I'm pretty sure there isn't a way around it; it's just the way CSS handles text as far as I know (well, in this specific use-case at least). Not that I haven't been wrong before, there may be a way around it that I don't know. At any rate, I unfortunately can't think of anything to solve the line break just now, but I'll let you know if I have an epiphany or discover something new.

Apologies I couldn't be of more help with this.
Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
Nov 25, 2018 6:52 PM
#50
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2197
myanimeusername said:
Hi, I'm pretty sure I did everything correctly and the light version works fine, however when I put the extra @\import in for the dark mode it doesn't look right for me..

This is my css for the dark mode:
@\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Mod%20-%20Dark%20Mode%20Compressed.css";
@\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Theme%20-%20Compressed.css";
.status-menu:after {
background-image: url(https://myanimelist.cdn-dena.com/images/userimages/7585872.jpg);
}
#cover-image-container:after {
content: "Alfie\a Marshall";
}

It would be greatly appreciated if you could help :3
Ah, the dark mode import should be below the main theme import. That way the priority is correct and it should display correctly.

My apologies for the trouble, the instructions aren't clear enough. I thought I had corrected this a while ago but it appears I hadn't saved the changes. I appreciate pointing it out so I can correct it for the future. :)
Valerio_LyndonNov 25, 2018 7:25 PM
Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
Reply Disabled for Non-Club Members
Pages (25) [1] 2 3 » ... Last »
See All Discussions

More topics from this board

» [CSS - CLASSIC] Wishes of the heart ~ XXXholic layout by Hahaido

Shishio-kun - Dec 27, 2015

8 by Valerio_Lyndon »»
Apr 12, 7:34 PM

» [CSS-MODERN] ⭐️ Takana_No_Hana's Layouts

Shishio-kun - Jun 5, 2021

6 by NemuSanjou »»
Apr 9, 7:21 PM

» [MODERN - CSS] ⭐ Sailor Moon layout by 5cm

Shishio-kun - Sep 7, 2020

34 by Y3337 »»
Mar 31, 11:45 PM

» [BBCODE + VIDEO GUIDE] ⭐️ Full list of BBcodes and BBcode setups on MAL ( 1 2 3 4 )

Shishio-kun - Feb 3, 2012

158 by KeyiOs »»
Mar 28, 8:32 AM

» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2023 updates!) ( 1 2 3 4 5 ... Last Page )

Shishio-kun - Jul 21, 2017

351 by claymorwan »»
Mar 28, 5:56 AM

MoreTop Anime

  1. 1 Sousou no Frieren
  2. 2 Fullmetal Alchemist: Brotherhood
  3. 3 Steins;Gate
  4. 4 Gintama°
  5. 5 Shingeki no Kyojin Season 3 Part 2

MoreTop Airing Anime

  1. 1 One Piece
  2. 2 Hibike! Euphonium 3
  3. 3 Kono Subarashii Sekai ni Shukufuku wo! 3
  4. 4 Yuru Camp△ Season 3
  5. 5 Tensei shitara Slime Datta Ken 3rd Season

MoreMost Popular Characters

  1. 1 Lamperouge, Lelouch
  2. 2 Levi
  3. 3 Monkey D., Luffy
  4. 4 Lawliet, L
  5. 5 Roronoa, Zoro
It’s time to ditch the text file.
Keep track of your anime easily by creating your own list.
Sign Up Login