Board Thread:Support Requests - Getting Technical/@comment-36009152-20190707223135/@comment-9605025-20190818001624

For details on selectors, I suggest you take a look here. In short, CSS allows you to combine selectors into compound selectors. Concatenating selectors together without a space acts as. For example, lets say you have  and. Then the compound selector  will select any elemetns that meet the criteria for both selectors. Joining selectors using a comma acts as. For example,  selects elements that meet the criteria for at least one of those selectors. As I said, the page I linked to should be able to describe more of the details. In the case of the CSS we just changed, we have: This is how the elements are selected. The CSS "looks" for an element that is a portable infobox, has been assigned to the character type, and has been assigned to the Ritsuka-Uenoyama theme. It then looks at all of its children (a.k.a. direct descendents). For example, if C is in B and B is in A, then B is a child of A and C is a child of B and a descendent of A but not a child of A. The CSS applies to all children that are an even-numbered child (2nd, 4th, 6th, ...) and are neither a group or image collection. The CSS is then applied to the children of groups and image collections that are the children of the infobox. Lastly, the CSS is applied to children of image collections that are children of groups that are children of the infobox. Selectors also have something called specificity which helps determine which properties get applied in the case of conflicting CSS rules. To learn more about specificity, take a look here. If you are interested, I could also provide a quick breakdown of how that works.

By the way, when typing this reply, I noticed a mistake in the character-specific CSS I gave you. Please change from this: to this: Now onto the CSS property assignments. Yes, you are correct in what they are doing. Each of the two CSS rules assigns a particular background gradient to particular elements. The two rules work together to get that "wavy background" you end up seeing in the final product.

The purpose of the multiple assignments for  is to increase browser compatibility. Because CSS and HTML are constantly being updated and changed,  wasn't always a thing. However, while it was still under consideration, some browser developers decided to go ahead and implement a prototype version for their own browser and/or a package used by other browsers. Since it was not yet official, they use what is called a vendor prefix. For example, in,   is the vendor prefix and   is the actual CSS function. This vendor prefix allowed browsers that use the webkit "library" to implement the function before the specifications were finalized and officially released. In the event that a browser supports multiple vendor prefixes and/or the vendor prefix version and the non-prefixed version, the last-stated assignment is used. We order the vendor prefixes the way we do such that, if a browser supports the official version, it will use that over any vendor-prefixed version. The most common vendor prefixes are  (various browsers),   (Mozilla Firefox),   (Microsoft Internet Explorer), and   (Opera).

I am responding to your questions sequentially so I apologize if my reply seems all over the place. It seems to me that your next few questions may be answered by what I have already typed. If not, please let me know.

Regarding the episode infoboxes, your are correct. Regarding your question, we must assign the type to the infobox ourselves. Since we are using a template, this means we have to palce it in the template code. Here is a snippet of the character infobox code, I trust you will be able to figure it out from this: 