Report Shishio-kun's Profile

Hm, 15% is a decent number of requests. :P Makes sense though, most custom layouts make use of fonts and there's definitely interest from users when it comes to customizing themes (I've seen a few questions about it).

You're probably right to keep each video to a single topic, keeps it more manageable eh. Well, I look forwards to your next installment. :)

It might have been useful to add some info about the font-family property. You mention that it only shows installed fonts, but you can also add fonts through @import that will show for anyone. Google Fonts is the easiest way to do this. You also used to be able to add your own easily through @font-face, but now you must put the font-face inside of an @import due to MAL's security nonsense. :<

It also sprung to mind that it might have been worth having a section about display modes as well. For instance, some display modes don't work with certain CSS properties. Table displays (the list rows are all part of a table display) don't play nicely with positioning (and some other properties I'm forgetting right now). This can be fixed by switching them to "display: block" or "inline-block", but this then breaks a lot of other stuff without completely switching away from table display. I'm not sure how I would condense this information into a managable bite-size piece, but I'm pretty sure it could be done with some time to mull it over.

Personally, I would have spent more time on the format of CSS so that people could start writing from scratch with greater ease. That said, I don't think I would have had trouble creating a layout by following your video, copying from inspect element should work 99% of the time. And perhaps more focus could have been spared for displaying the resources that you can use to find new CSS properties and how to learn their depths, but it's not a major flaw.

Overall I think this would definitely make me more confident were I a beginner. You covered the major properties that people will be looking for, and that's the important bit. :) The main criticism I have is that the lack of formatting information may make writing or debugging code somewhat of an ordeal for some people. I hope more people will begin coding because of this though, sometimes all you need is someone to give a bit of guidance before you can really start and this video should do great for that.

I think it's really good, since it covers a lot of the basics while still being quite easy to understand and reproduce (the examples help a lot with that).

Below are some things that came to mind while watching the video. I don't know if they can be useful for your layout making video or if they should be subject to a separated and more advanced one (I'll let you judge that).

The W3Schools Selector page (here) should be mentioned as it explains a lot:
- what selectors are: patterns to select elements of a page
- the different types of selectors (using "." class / "#" id / [...] attributes etc.)
- how to construct a selector (using space / > / , / + / ~ etc.)
It also links to a page where you can test the different selectors and see what they select (here)

When you inspect a webpage, you can click the target-like icon on the left of a selector to see all the elements that are selected. This can be really useful to check if you are correctly selecting what you want (and only these elements, not also unwanted ones).

The !important annotation can be used to quickly fix a property that does not work, but it should not be overused (because when everything is important, then nothing is important anymore ^^). Instead a quick explanation on how priority works for properties could help:
- in the same CSS file and using the same selectors, the property which is defined last is the one applied
- when using different selectors, the property with the most specific selector is the one applied

The z-index property is actually really tricky to use. Basically, when you set it to an element of a page, all of its children will be positioned accordingly. So if you have a second element that you set behind the first one, there will be no way to put its children in front of the children from the first element. I remember this page (here) helped me a lot when I was trying to make it work for one of my layouts. There are also various extensions for browsers that allow you to view the page in 3d to exactly see the indexes used.

When troubleshooting, you can check/uncheck individual properties in the inspector to see if they are applied or not. You can also see if it is overridden by another definition elsewhere (the property is crossed out), if the definition is incorrect (warning icon), etc.

I don't know if you already talked about this in another video, but you can use custom fonts by importing them like you do with CSS files, so it will work for everyone accessing your list. For example I use fonts from https://fonts.google.com/ in my layouts. They directly give you the @ import line and how to specify the font in CSS.
MAL also already uses the FontAwesome font for icons that can be reused in the CSS (I suppose you can import other fonts for icons as well).

Another useful tool for designers is this website (here) that allows interactive generation for box-shadows, gradients and more.

Finally, I think it could be a good idea to remind people to cross-check their layouts in different browsers to see if they work as intended, even for new designers (I think chrome and Firefox only are fine, maybe adding Edge when it switches to chromium). This way it will prevent a lot of future problem after they shared their designs with other people not using the same browser.

W3Schools is a very helpful resource. :D Especially their CSS property reference. There are some more comprehensive resources (Mozilla MDN for instance), but they're so much harder to read. :/

The data-query is the trick used to specify status-specific CSS (watching, completed, etc). It's used in a good few list designs, some of which you've modified. :) For instance, the list background being changed:

That's only for modern lists though. For classic, I am pretty sure you can do this with the "header_cw" and so forth classes, although I don't know of a simple way to target the all anime page (I can think of a couple complicated ways though). A lot of people seem to enjoy the list-specific banners (they're fun :D) so it might be worth a mention. You can slap the data-query onto the start of just about any selector and it will probably work, assuming it doesn't start from ":root", "html", or "body". Since the data-query is a modifier of "body", it'd need to be placed directly after without any spaces, like in the example above.

Flex display is a bit hard to explain, but it's a very handy tool for far less headache-inducing code. I use it on everything I make these days. You can see it on Clarity and Brink both. The list items' ".list-table-data" sections are set to flex display, while the child ".data" elements are given "order" properties to rearrange them into the order I want. So "order: 1" is the first, "order: 90" is after that, and we could have an "order: 2" or "order: 30" to place it in between those two. If child items are not given an "order" then they are placed preceeding the first ordered item. Clarity used to use margin-left and margin-right for this, and it was excruciatingly finnicky; Change one value and half the layout would break since all the values were inter-reliant. Now it's so much easier. >_> Flex also allows you to instantly reverse items using "flex-direction: row-reverse". I found CSS-Tricks guide on Flex very useful when I was a novice at it. Once you've jumped the first hurdle of figuring out why setting an item to flex just broke your layout (probably just needs "flex-wrap: wrap"), it's far easier than using other methods such as "float: left" or "display: inline-block" with "text-align: center. In my opinion, anyhow.

Hmm, that's a good question. There are a lot of tricks I enjoy using, but I'm not sure how many people would need. I'm sure they'll figure out a lot of it in time if they continue doing CSS.

Although one thing that is a must-have for advanced CSS-only modification are pseudo elements, AKA :before and :after codes. Without access to the HTML, it's the only way to insert or replace text and can be useful for adding images/renders and many other visual effects too. Wouldn't have been able to make any of my themes the way they are now without using pseudo elements (icons, text, decoration, you name it). The most obvious example is probably Tilt, since all the angled edges are made with pseudo elements.

The :hover modifier is also something that may not be obvious to people that haven't worked with CSS before, and is rather required. :)

A MAL-specific trick which could be worth mentioning is the [data-query*='status":7'] trick for making code only work on specific lists. There's also [data-owner=""] and [data-owner="1"] that are probably not worth the mention, but I've made use of them in the past several times for fixes or tweaks that I only want the logged-in list owner to see (or not see).

I also find "pointer-events: <none|auto>" very useful, especially when making dropdown menus. I generally pair it with opacity or similar effects. You can see that on the "Order" button on Brink. Another use is disabling links, i.e. tags, which is helpful for review-style boxes. Would I say it's necessary for a designer? Perhaps not, but it's one of my favourite CSS properties now I know of it. In the vein of basic CSS properties that took too long for me to make full use of, transform and filter. They're both handy for more heavy effects, such as blur and greyscale (filter), or rotating and scaling (transform).

Something else I love using is "display: flex" on a parent element with "order: #" on the children. It's perfect for rearranging items while avoiding the mess of positioning rules you'd have otherwise. But, that may be hard to consisely explain, especially as flex display comes with a lot of other behavioural changes that often require many other properties to get it how you want.

This became more of "my favourite CSS properties", but hopefully it still proves somewhat useful. I can't think of anything else right now but I'll let you know if I remember anything useful. Good work on the new video by the way! :D

Thanks! It's from a new visual novel by Zeiva and Nitarou, they always make awesome art!

Cuuute <3

Yes, this is one of them. Ty.

It wasn't there.

Hi, do you still have those realistic Mikasa pictures? There was one of her face and one with abs.

Oh no! Progress loss is the absolute worst. D: Fingers crossed it goes smoothly this run-around!

No worries about the feedback, hopefully the audio plays nicely next time. :)

It is indeed very hard to write good tutorials. I look forwards to the video though, should be very informative for the newbies. :D

Yeah, audio can be a pain. Sounds awesome though, an up to date and detailed guide on inspect element would be fantastic - I can see myself linking many a user to it, since it's kinda a necessity for CSS modification (currently I link to your text guide). And more contests are always welcome! It might make me actually create something haha.

Sounds as though you've been on the grind huh! Well, I'm no audiophile but I can definitely let you know what I think. Just send it my way whenever you're ready. :)

Where'd you find that :o