FANDOM


  • For the Given Wiki can the CSS be provided on how to achieve the look for the character infoboxes? Each character has a different colour scheme on a template though the infobox may be better as a portable infobox with the look gained with CSS applied to it.

    The Given anime is due to air on this Thursday 11th of July so probably ideal to have this established to lay nicer groundwork for the wiki for that time.

      Loading editor
    • Can't recall specifics off the top of my head but converting to a portable infobox would require significantly different CSS selectors than what you would use for your current situation. It would probably be easiest to make a test infobox first to test out the CSS and then do similar things for the other infoboxes. Once it has been figured out for one infobox, the difference will probably only be the color. Either way, you probably want to use the theme-source attribute.

      The basic portable infobox code would probably look something like this.

      <infobox type="character" theme-source="name">
        <image source="image" />
        <title source="name" />
      <!-- more stuff here -->
      </infobox>
      
        Loading editor
    • Mafuyu infobox color scheme

      Converted it to a portable one which didn't carry over the color but that can be the Character Infobox.

      Mafuyu's was the one deleted in the conversion from a template to the portable infobox but the design can be seen in the image:

      Please may you tell me what CSS needs to be applied to the new portable infobox to get these looks for the other characters used in the templates:

        Loading editor
    • .portable-infobox.type-character .pi-image,
      .portable-infobox.type-character .pi-title,
      .portable-infobox.type-character .pi-secondary-background,
      .portable-infobox.type-character .pi-data-label {
          color: black;
          background-color: #e5e5e5;
          background-image: -webkit-linear-gradient(#e5e5e5, #cccccc);
          background-image: -moz-linear-gradient(#e5e5e5, #cccccc);
          background-image: -o-linear-gradient(#e5e5e5, #cccccc);
          background-image: linear-gradient(#e5e5e5, #cccccc);
      }
      .portable-infobox.type-character .pi-data {
          padding: 0;
          color: black;
      }
      .portable-infobox.type-character .pi-data-label,
      .portable-infobox.type-character .pi-data-value {
          padding: 10px 14px;
      }

      Let's start with this for the general case, fine-tune it, and then work on the specific cases.


      Edit:

      With the alternating gradients, do you actually want each row to have that exact gradient or do you want whichever rows are showed to have a continuous "wave" of color?

        Loading editor
    • Thank you so much, just passed that on. Having the exact gradient as the template design is probably best for each character yet what would a continuous wave of color look like?

        Loading editor
    • Your current templates alternate the direction of the gradient based on the position when all information is shown. For example, let's say you have a template with five rows. Rows 1, 3, and 5 go from color A to color B and rows 2 and 4 go from B to A. However, this does not account for which rows are shown. So, for example, it you have only data for rows 2 and 4, the infobox displays as two rows each going from B to A. If you have data for only rows 1, 3, and 5, the infobox shows as three rows each going from A to B. If you have data for rows 1, 2, and 3, the infobox shows as three rows with color going from A to B, from B to A, and lastly from A to B. This last one is what I mean by a "wave".

        Loading editor
    • Got it, let’s go for the one that will result in the mismatched colors. The ‘Kanji’ and ‘Romaji’ have the dark area below and above respectively connecting. For ‘Gender’ and ‘Age’ the light areas connect, ‘Height’ and ‘Birthday’ have dark at the top of their squares, that’s all good it makes the infobox unique and is the original design in mind so that one would be best.

      The CSS has been added which has kind of got the character infobox for the characters who are not having a custom made one. Is that a good foundation to begin adding the colors for the main cast? Like which CSS would need to be added so the portable infobox looks like this mixed color blue one for Ritsuka and the orange pink one for Mafuyu in the image above and that? Is it also CSS that will curve the image at the top for characters, and allows for the image gallery at the end of the infobox?

        Loading editor
    • So, just to make sure I am clear...

      Ritsuka Uenoyama has kanji, romanji, gender, and age but not alias (witch would be between romanji and gender). What you want is to perfectly duplicate the part where kanji and romanji share the black side, gender and page share the blue side, and there is a sudden change from blue to black between romanji and gender?

      The general case is not quite done yet. But after that, it should be as simple as adding the theme selector and assigning a difference color set; that is it.


      Edit:

      Just so you know, if that is the way you want to colors, it is entirely doable but probably not as simple as the other way.

        Loading editor
    • Yes that's all good, though alias will end up being used for many characters since they are referred to by nicknames and shortened versions of their names, perhaps the general idea was to have a random assortment of some light colors are connecting, some dark are, some are not. Don't think the order is too important like kanji and romaji exactly don't have to connect at the dark side, just so long as overall some of the rectangles were.

      If it turns out to be important, and like 'Role' and 'Instrument' do have to connect a certain way I'm sure I can help with tweaking it once I am familiar with how it is made. So don't worry to much about making sure the connecting colors are a certain way do what is easiest there, having the infobox achieve the same look as the template using CSS like with the overall colors for each character, image shape and that is the best course of action.

        Loading editor
    • Okay, well the easiest is to have a continuous wave rather than assign gradients to specific rows. Here is a revised general CSS.

      .portable-infobox.type-character,
      .portable-infobox.type-character .pi-title,
      .portable-infobox.type-character .pi-secondary-background {
          color: black;
          background-color: #e5e5e5;
      }
      .portable-infobox.type-character > :not(:last-child),
      .portable-infobox.type-character .pi-group > :not(:last-child) {
          border-bottom: 1px solid #999999;
      }
      .portable-infobox.type-character > :nth-child(even):not(.pi-group),
      .portable-infobox.type-character > .pi-group:nth-child(even) > :nth-child(odd),
      .portable-infobox.type-character > .pi-group:nth-child(odd) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#e5e5e5 25%, #cccccc 75%);
          background-image: -moz-linear-gradient(#e5e5e5 25%, #cccccc 75%);
          background-image: -o-linear-gradient(#e5e5e5 25%, #cccccc 75%);
          background-image: linear-gradient(#e5e5e5 25%, #cccccc 75%);
      }
      .portable-infobox.type-character > :nth-child(odd):not(.pi-group),
      .portable-infobox.type-character > .pi-group:nth-child(odd) > :nth-child(odd),
      .portable-infobox.type-character > .pi-group:nth-child(even) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#cccccc 25%, #e5e5e5 75%);
          background-image: -moz-linear-gradient(#cccccc 25%, #e5e5e5 75%);
          background-image: -o-linear-gradient(#cccccc 25%, #e5e5e5 75%);
          background-image: linear-gradient(#cccccc 25%, #e5e5e5 75%);
      }
      .portable-infobox.type-character .pi-data {
          padding: 0;
      }
      .portable-infobox.type-character .pi-data-label,
      .portable-infobox.type-character .pi-data-value {
          padding: 10px 14px;
      }
      .portable-infobox.type-character .pi-data-value {
          background-color: white;
      }
      .portable-infobox.type-character [data-source="image gallery"] .pi-data-value {
          width: 100%;
          text-align: center;
          line-height: 20px;
          font-size: 16px;
          background-color: transparent;
      }
      .portable-infobox.type-character [data-source="image gallery"] .pi-data-value a {
          color: black;
      }

      Here is the general form of how to do theme-specific colors. Replace "<name>" with the converted (ex. spaces are replaced with hyphens/dashes) value of the name parameter. Replace "<color a>" with the first color and "<color b>" with the second color.

      .portable-infobox.type-character.pi-theme-<name>,
      .portable-infobox.type-character.pi-theme-<name> .pi-title,
      .portable-infobox.type-character.pi-theme-<name> .pi-secondary-background {
          background-color: <color a>;
      }
      .portable-infobox.type-character.pi-theme-<name> > :nth-child(even):not(.pi-group),
      .portable-infobox.type-character.pi-theme-<name> > .pi-group:nth-child(even) > :nth-child(odd),
      .portable-infobox.type-character.pi-theme-<name> > .pi-group:nth-child(odd) > :nth-child(even) {
          background-image: -webkit-linear-gradient(<color a> 25%, <color b> 75%);
          background-image: -moz-linear-gradient(<color a> 25%, <color b> 75%);
          background-image: -o-linear-gradient(<color a> 25%, <color b> 75%);
          background-image: linear-gradient(<color a> 25%, <color b> 75%);
      }
      .portable-infobox.type-character.pi-theme-<name> > :nth-child(odd):not(.pi-group),
      .portable-infobox.type-character.pi-theme-<name> > .pi-group:nth-child(odd) > :nth-child(odd),
      .portable-infobox.type-character.pi-theme-<name> > .pi-group:nth-child(even) > :nth-child(even) {
          background-image: -webkit-linear-gradient(<color b> 25%, <color a> 75%);
          background-image: -moz-linear-gradient(<color b> 25%, <color a> 75%);
          background-image: -o-linear-gradient(<color b> 25%, <color a> 75%);
          background-image: linear-gradient(<color b> 25%, <color a> 75%);
      }

      Here is an example of theme-specific colors using Ritsuka Uenoyama assuming that the value of the name parameter is "Ritsuka Uenoyama". If no value is provided for name, then it will be treated as a generic character. We can change the controlling parameter if you want.

      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama .pi-title,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama .pi-secondary-background {
          background-color: #96c2ff;
      }
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > :nth-child(even):not(.pi-group),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > :nth-child(odd),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -moz-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -o-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: linear-gradient(#96c2ff 25%, #4f4d4e 75%);
      }
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > :nth-child(odd):not(.pi-group),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > :nth-child(odd),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#4f4d4e 25%, #96c2ff 75%);
          background-image: -moz-linear-gradient(#4f4d4e 25%, #96c2ff 75%);
          background-image: -o-linear-gradient(#4f4d4e 25%, #96c2ff 75%);
          background-image: linear-gradient(#4f4d4e 25%, #96c2ff 75%);
      }

      Edit:

      You may want to consider placing all of the infobox CSS in its own style-sheet and then import it. That way, your main style-sheet won't be cluttered with a ton of similar CSS.

        Loading editor
    • Wowee thank you tons, so if this first CSS is removed on the Given Wiki and replaced with this:

      .portable-infobox.type-character,
      .portable-infobox.type-character .pi-title,
      .portable-infobox.type-character .pi-secondary-background {
          color: black;
          background-color: #e5e5e5;
      }
      .portable-infobox.type-character > :not(:last-child),
      .portable-infobox.type-character .pi-group > :not(:last-child) {
          border-bottom: 1px solid #999999;
      }
      .portable-infobox.type-character > :nth-child(even):not(.pi-group),
      .portable-infobox.type-character > .pi-group:nth-child(even) > :nth-child(odd),
      .portable-infobox.type-character > .pi-group:nth-child(odd) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#e5e5e5 25%, #cccccc 75%);
          background-image: -moz-linear-gradient(#e5e5e5 25%, #cccccc 75%);
          background-image: -o-linear-gradient(#e5e5e5 25%, #cccccc 75%);
          background-image: linear-gradient(#e5e5e5 25%, #cccccc 75%);
      }
      .portable-infobox.type-character > :nth-child(odd):not(.pi-group),
      .portable-infobox.type-character > .pi-group:nth-child(odd) > :nth-child(odd),
      .portable-infobox.type-character > .pi-group:nth-child(even) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#cccccc 25%, #e5e5e5 75%);
          background-image: -moz-linear-gradient(#cccccc 25%, #e5e5e5 75%);
          background-image: -o-linear-gradient(#cccccc 25%, #e5e5e5 75%);
          background-image: linear-gradient(#cccccc 25%, #e5e5e5 75%);
      }
      .portable-infobox.type-character .pi-data {
          padding: 0;
      }
      .portable-infobox.type-character .pi-data-label,
      .portable-infobox.type-character .pi-data-value {
          padding: 10px 14px;
      }
      .portable-infobox.type-character .pi-data-value {
          background-color: white;
      }
      .portable-infobox.type-character [data-source="image gallery"] .pi-data-value {
          width: 100%;
          text-align: center;
          line-height: 20px;
          font-size: 16px;
          background-color: transparent;
      }
      .portable-infobox.type-character [data-source="image gallery"] .pi-data-value a {
          color: black;
      }

      That’s all good to have a portable infobox with the same appearance as this silver type template for all other characters that do not have an infobox unique to them, with the curved corner image space, and image gallery at the end as well?

      For the second CSS box, if it is decided that some light colours need to be connected in an order of some kind, name can be ‘age’ or any of the other values? Would you mind pointing out what the ex. spaces are, please? Am I working it right adding the values below if this one turns out is the one to be added?

      .portable-infobox.type-character.pi-theme-<age>,
      .portable-infobox.type-character.pi-theme-<age> .pi-title,
      .portable-infobox.type-character.pi-theme-<age> .pi-secondary-background {
          background-color: <color a>;
      }
      .portable-infobox.type-character.pi-theme-<height> > :nth-child(even):not(.pi-group),
      .portable-infobox.type-character.pi-theme-<height> > .pi-group:nth-child(even) > :nth-child(odd),
      .portable-infobox.type-character.pi-theme-<height> > .pi-group:nth-child(odd) > :nth-child(even) {
          background-image: -webkit-linear-gradient(<color a> 25%, <color b> 75%);
          background-image: -moz-linear-gradient(<color a> 25%, <color b> 75%);
          background-image: -o-linear-gradient(<color a> 25%, <color b> 75%);
          background-image: linear-gradient(<color a> 25%, <color b> 75%);
      }
      .portable-infobox.type-character.pi-theme-<birthday> > :nth-child(odd):not(.pi-group),
      .portable-infobox.type-character.pi-theme-<birthday> > .pi-group:nth-child(odd) > :nth-child(odd),
      .portable-infobox.type-character.pi-theme-<birthday> > .pi-group:nth-child(even) > :nth-child(even) {
          background-image: -webkit-linear-gradient(<color b> 25%, <color a> 75%);
          background-image: -moz-linear-gradient(<color b> 25%, <color a> 75%);
          background-image: -o-linear-gradient(<color b> 25%, <color a> 75%);
          background-image: linear-gradient(<color b> 25%, <color a> 75%);
      }

      As I am imagining it working, that would cause the age, height, and birthday as examples to have some same colors connecting, and they are continued for the rest of the 'hair color' and so forth?

      With the third, is it that the CSS will apply to the infobox on the page called ‘Ritsuka Uenoyama’, so if the page were renamed it wouldn’t anymore? That’s brilliant though, how would infobox CSS be placed on an own style sheet, and then import it?

      Otherwise if the previous infobox CSS is removed to make room for the first one from this message, then with the third one also copied underneath that for Ritsuka. Then a same one of that third one for Mafuyu, just replacing ‘Ritsuka-Uenoyama’ with each characters name for the seven characters so far and the color codes for their infoboxes, that would be all good to do?

        Loading editor
      1. It will be similar in style but not perfectly identical; that would require a lot of fine-tuning. As for the rounded corners, that is something that would still need to be added.
      2. I think you are misunderstanding what that CSS is doing. In order to get specific rows to match colors would require a line for CSS for each row for each custom page. It is doable but very cumbersome. The current solution simply looks at what is there and alternates the gradients. It doesn't care what is in row 1 and what is in row 2; it matches the colors regardless. "<name>" is referring to the value passed to the template as the name parameter. This is what sets the theme and thus the class that is used to identify the infobox. For example, if the user called the infobox as {{Character Inforbox|name=Hello}}, then "<name>" is "Hello" (making the class "pi-theme-Hello"). If it is called as {{Character Inforbox|name=Andrewds is the best user ever}} then "<name>" is "Andrewds-is-the-best-user-ever" (making the class "pi-theme-Andrewds-is-the-best-user-ever").
      3. It applies the CSS to any infobox with "name=Ritsuka Uenoyama"; it doesn't matter what the page name is. This is an example of how to use the CSS from #2.
      4. Yes.
        Loading editor
    • Should be superb with the overall colour and shape, thank you for the second CSS but really having each specific one match in a certain way, again the colour is simply more important!

      Andrewds1021 wrote:

      {{Character Inforbox|name=Andrewds is the best user ever}} then "<name>" is "Andrewds-is-the-best-user-ever" (making the class "pi-theme-Andrewds-is-the-best-user-ever").

      An infobox to be used on every wiki!

      That’s good about it applying to the infobox name, thought it was the page name where the infobox would like explode or something if the page was renamed.

      Okay I’ll copy and paste the first and third CSS. As the final touch if you wouldn’t mind looking into having the display image curved as well as the end ‘Image Gallery’ (if not already) that would be as close to the template which would be ideal!

        Loading editor
    • I am not quite sure what you are trying to say in your first paragraph. You can add this to the general CSS to get the curved corners:

      .portable-infobox.type-character {
          -webkit-border-radius: 2ex;
          -moz-border-radius: 2ex;
          border-radius: 2ex;
          overflow: hidden;
      }
        Loading editor
    • The first paragraph - basically thank you for the second CSS, good to have just in case but will use the first one since it should work nicer overall.

      Thank you again, will place that at the top so it looks like this?

      .portable-infobox.type-character {
          -webkit-border-radius: 2ex;
          -moz-border-radius: 2ex;
          border-radius: 2ex;
          overflow: hidden;
      }
      .portable-infobox.type-character,
      .portable-infobox.type-character .pi-title,
      .portable-infobox.type-character .pi-secondary-background {
          color: black;
          background-color: #e5e5e5;
      }
      .portable-infobox.type-character > :not(:last-child),
      .portable-infobox.type-character .pi-group > :not(:last-child) {
          border-bottom: 1px solid #999999;
      }
      .portable-infobox.type-character > :nth-child(even):not(.pi-group),
      .portable-infobox.type-character > .pi-group:nth-child(even) > :nth-child(odd),
      .portable-infobox.type-character > .pi-group:nth-child(odd) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#e5e5e5 25%, #cccccc 75%);
          background-image: -moz-linear-gradient(#e5e5e5 25%, #cccccc 75%);
          background-image: -o-linear-gradient(#e5e5e5 25%, #cccccc 75%);
          background-image: linear-gradient(#e5e5e5 25%, #cccccc 75%);
      }
      .portable-infobox.type-character > :nth-child(odd):not(.pi-group),
      .portable-infobox.type-character > .pi-group:nth-child(odd) > :nth-child(odd),
      .portable-infobox.type-character > .pi-group:nth-child(even) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#cccccc 25%, #e5e5e5 75%);
          background-image: -moz-linear-gradient(#cccccc 25%, #e5e5e5 75%);
          background-image: -o-linear-gradient(#cccccc 25%, #e5e5e5 75%);
          background-image: linear-gradient(#cccccc 25%, #e5e5e5 75%);
      }
      .portable-infobox.type-character .pi-data {
          padding: 0;
      }
      .portable-infobox.type-character .pi-data-label,
      .portable-infobox.type-character .pi-data-value {
          padding: 10px 14px;
      }
      .portable-infobox.type-character .pi-data-value {
          background-color: white;
      }
      .portable-infobox.type-character [data-source="image gallery"] .pi-data-value {
          width: 100%;
          text-align: center;
          line-height: 20px;
          font-size: 16px;
          background-color: transparent;
      }
      .portable-infobox.type-character [data-source="image gallery"] .pi-data-value a {
          color: black;
      }

      edit: the revised CSS with just the curved corner one at the start.

        Loading editor
    • The CSS to make the top image have curved corners have yet to be added but has the current one been added correctly? Here the mixed colours are not appearing.

        Loading editor
    • It seems you got the general idea. However, you still have the CSS from #4. You need to remove that.

        Loading editor
    • Sweet, that all seems to be in order and working perfectly for some characters so thank you there, has it all been added right for Mafuyu though? It is still showing up as the silver infobox.

        Loading editor
    • It isn't working because you have a space in your selectors. I did notice one issue with the alternating colors (applicable to all cases). Unfortunately, there isn't really a convenient way to fix it.

        Loading editor
    • Andrewds1021 wrote:
      It isn't working because you have a space in your selectors.

      Which are these?

      The blue CSS has applied for Ritsuka's infobox, Haruki's and others so is there a way to add that pink/orange colour for Mafuyu in the same manner?

        Loading editor
    • You have the CSS for Mafuyu already. The problem is you have a typo in the selectors; the space I mentioned in my previous reply.

        Loading editor
    • The selectors are the gaps here:

      table-infobox.type-character.pi-theme-Mafuyu -Sato,
      .portable-infobox.type-character.pi-theme-Mafuyu -Sato .pi-title,
      .portable-infobox.type-character.pi-theme-Mafuyu -Sato 
      

      So it should be

      table-infobox.type-character.pi-theme-Mafuyu-Sato,
      .portable-infobox.type-character.pi-theme-Mafuyu-Sato .pi-title,
      .portable-infobox.type-character.pi-theme-Mafuyu-Sato 
      
        Loading editor
    • Yes, exactly.

        Loading editor
    • Done that, and closed a gap between the .pi theme in the middle one, is everything for Mafuyu's infobox in the right layout now?

        Loading editor
    • That was in the previous one, also found another possible issue and added spaces before the > like so but the thing is Kaji's infobox was working just fine even without the gap but Mafuyu's still has not adopted it's custom look for the infobox's?

        Loading editor
    • Um, I think you may have misunderstood me. You want to remove the CSS that I provided in #4, not keep it. Unless there are changes you are trying to make at the same time as we are sorting this out. The spaces around ">" shouldn't make a difference.

        Loading editor
    • To make things even more fun the CSS has been edited and changed again.

      The idea was to have the customised colours for main characters (like blue for Ritsuka, pink orange for Mafuyu) or anyone else who needs one and silver style infoboxes for the rest of the characters.

      This is the complete CSS for infoboxes currently:

      /* Portable Infoboxes */
       
      .portable-infobox.type-character .pi-image,
      .portable-infobox.type-character .pi-title,
      .portable-infobox.type-character .pi-secondary-background,
      .portable-infobox.type-character .pi-data-label {
          color: black;
          background-color: #e5e5e5;
          background-image: -webkit-linear-gradient(#e5e5e5, #cccccc);
          background-image: -moz-linear-gradient(#e5e5e5, #cccccc);
          background-image: -o-linear-gradient(#e5e5e5, #cccccc);
          background-image: linear-gradient(#e5e5e5, #cccccc);
      }
      .portable-infobox.type-character .pi-data {
          padding: 0;
          color: black;
      }
      .portable-infobox.type-character .pi-data-label,
      .portable-infobox.type-character .pi-data-value {
          padding: 10px 14px;
      }
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama .pi-title,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama .pi-secondary-background {
          background-color: #96c2ff;
      }
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > :nth-child(even):not(.pi-group),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > :nth-child(odd),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -moz-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -o-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: linear-gradient(#96c2ff 25%, #4f4d4e 75%);
      }
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > :nth-child(odd):not(.pi-group),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > :nth-child(odd),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#4f4d4e 25%, #96c2ff 75%);
          background-image: -moz-linear-gradient(#4f4d4e 25%, #96c2ff 75%);
          background-image: -o-linear-gradient(#4f4d4e 25%, #96c2ff 75%);
          background-image: linear-gradient(#4f4d4e 25%, #96c2ff 75%);
      }
       
      .portable-infobox.type-character.pi-theme-Haruki-Nakayama,
      .portable-infobox.type-character.pi-theme-Haruki-Nakayama .pi-title,
      .portable-infobox.type-character.pi-theme-Haruki-Nakayama .pi-secondary-background {
          background-color: #F2C779;
      }
      .portable-infobox.type-character.pi-theme-Haruki-Nakayama > :nth-child(even):not(.pi-group),
      .portable-infobox.type-character.pi-theme-Haruki-Nakayama > .pi-group:nth-child(even) > :nth-child(odd),
      .portable-infobox.type-character.pi-theme-Haruki-Nakayama > .pi-group:nth-child(odd) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#F2C779 25%, #E5A26E 75%);
          background-image: -moz-linear-gradient(#F2C779 25%, #E5A26E 75%);
          background-image: -o-linear-gradient(#F2C779 25%, #E5A26E 75%);
          background-image: linear-gradient(#F2C779 25%, #E5A26E 75%);
      }
      .portable-infobox.type-character.pi-theme-Haruki-Nakayama > :nth-child(odd):not(.pi-group),
      .portable-infobox.type-character.pi-theme-Haruki-Nakayama > .pi-group:nth-child(odd) > :nth-child(odd),
      .portable-infobox.type-character.pi-theme-Haruki-Nakayama > .pi-group:nth-child(even) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#E5A26E 25%, #F2C779 75%);
          background-image: -moz-linear-gradient(#E5A26E 25%, #F2C779 75%);
          background-image: -o-linear-gradient(#E5A26E 25%, #F2C779 75%);
          background-image: linear-gradient(#E5A26E 25%, #F2C779 75%);
      }
       
      .portable-infobox.type-character.pi-theme-Mafuyu-Sato,
      .portable-infobox.type-character.pi-theme-Mafuyu-Sato .pi-title,
      .portable-infobox.type-character.pi-theme-Mafuyu-Sato .pi-secondary-background {
          background-color: #D96D63;
      }
      .portable-infobox.type-character.pi-theme-Mafuyu-Sato > :nth-child(even):not(.pi-group),
      .portable-infobox.type-character.pi-theme-Mafuyu-Sato > .pi-group:nth-child(even) > :nth-child(odd),
      .portable-infobox.type-character.pi-theme-Mafuyu-Sato > .pi-group:nth-child(odd) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#D96D63 25%, #E49376 75%);
          background-image: -moz-linear-gradient(#D96D63 25%, #E49376 75%);
          background-image: -o-linear-gradient(#D96D63 25%, #E49376 75%);
          background-image: linear-gradient(#D96D63 25%, #E49376 75%);
      }
      .portable-infobox.type-character.pi-theme-Mafuyu-Sato > :nth-child(odd):not(.pi-group),
      .portable-infobox.type-character.pi-theme-Mafuyu-Sato > .pi-group:nth-child(odd) > :nth-child(odd),
      .portable-infobox.type-character.pi-theme-Mafuyu-Sato > .pi-group:nth-child(even) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#E49376 25%, #D96D63 75%);
          background-image: -moz-linear-gradient(#E49376 25%, #D96D63 75%);
          background-image: -o-linear-gradient(#E49376 25%, #D96D63 75%);
          background-image: linear-gradient(#E49376 25%, #D96D63 75%);
      }
       
      .portable-infobox.type-character.pi-theme-Akihiko-Kaji,
      .portable-infobox.type-character.pi-theme-Akihiko-Kaji .pi-title,
      .portable-infobox.type-character.pi-theme-Akihiko-Kaji .pi-secondary-background {
          background-color: #6BACB2;
      }
      .portable-infobox.type-character.pi-theme-Akihiko-Kaji > :nth-child(even):not(.pi-group),
      .portable-infobox.type-character.pi-theme-Akihiko-Kaji > .pi-group:nth-child(even) > :nth-child(odd),
      .portable-infobox.type-character.pi-theme-Akihiko-Kaji > .pi-group:nth-child(odd) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#6BACB2 25%, #585453 75%);
          background-image: -moz-linear-gradient(#6BACB2 25%, #585453 75%);
          background-image: -o-linear-gradient(#6BACB2 25%, #585453 75%);
          background-image: linear-gradient(#6BACB2 25%, #585453 75%);
      }
      .portable-infobox.type-character.pi-theme-Akihiko-Kaji > :nth-child(odd):not(.pi-group),
      .portable-infobox.type-character.pi-theme-Akihiko-Kaji > .pi-group:nth-child(odd) > :nth-child(odd),
      .portable-infobox.type-character.pi-theme-Akihiko-Kaji > .pi-group:nth-child(even) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#585453 25%, #6BACB2 75%);
          background-image: -moz-linear-gradient(#585453 25%, #6BACB2 75%);
          background-image: -o-linear-gradient(#585453 25%, #6BACB2 75%);
          background-image: linear-gradient(#585453 25%, #6BACB2 75%);
      }

      Would you mind saying what needs to be removed or changed to achieve this?

        Loading editor
    • Your character-specific CSS is correct as far as I can tell. The issue is that you kept the wrong generic CSS.

      This is what you currently have, what I had in #4, and it should not be used.

      .portable-infobox.type-character .pi-image,
      .portable-infobox.type-character .pi-title,
      .portable-infobox.type-character .pi-secondary-background,
      .portable-infobox.type-character .pi-data-label {
          color: black;
          background-color: #e5e5e5;
          background-image: -webkit-linear-gradient(#e5e5e5, #cccccc);
          background-image: -moz-linear-gradient(#e5e5e5, #cccccc);
          background-image: -o-linear-gradient(#e5e5e5, #cccccc);
          background-image: linear-gradient(#e5e5e5, #cccccc);
      }
      .portable-infobox.type-character .pi-data {
          padding: 0;
          color: black;
      }
      .portable-infobox.type-character .pi-data-label,
      .portable-infobox.type-character .pi-data-value {
          padding: 10px 14px;
      }

      This is a combination of what I had in #10 and #14 and it should be used.

      .portable-infobox.type-character,
      .portable-infobox.type-character .pi-title,
      .portable-infobox.type-character .pi-secondary-background {
          color: black;
          background-color: #e5e5e5;
      }
      .portable-infobox.type-character {
          -webkit-border-radius: 2ex;
          -moz-border-radius: 2ex;
          border-radius: 2ex;
          overflow: hidden;
      }
      .portable-infobox.type-character > :not(:last-child),
      .portable-infobox.type-character .pi-group > :not(:last-child) {
          border-bottom: 1px solid #999999;
      }
      .portable-infobox.type-character > :nth-child(even):not(.pi-group),
      .portable-infobox.type-character > .pi-group:nth-child(even) > :nth-child(odd),
      .portable-infobox.type-character > .pi-group:nth-child(odd) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#e5e5e5 25%, #cccccc 75%);
          background-image: -moz-linear-gradient(#e5e5e5 25%, #cccccc 75%);
          background-image: -o-linear-gradient(#e5e5e5 25%, #cccccc 75%);
          background-image: linear-gradient(#e5e5e5 25%, #cccccc 75%);
      }
      .portable-infobox.type-character > :nth-child(odd):not(.pi-group),
      .portable-infobox.type-character > .pi-group:nth-child(odd) > :nth-child(odd),
      .portable-infobox.type-character > .pi-group:nth-child(even) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#cccccc 25%, #e5e5e5 75%);
          background-image: -moz-linear-gradient(#cccccc 25%, #e5e5e5 75%);
          background-image: -o-linear-gradient(#cccccc 25%, #e5e5e5 75%);
          background-image: linear-gradient(#cccccc 25%, #e5e5e5 75%);
      }
      .portable-infobox.type-character .pi-data {
          padding: 0;
      }
      .portable-infobox.type-character .pi-data-label,
      .portable-infobox.type-character .pi-data-value {
          padding: 10px 14px;
      }
      .portable-infobox.type-character .pi-data-value {
          background-color: white;
      }
      .portable-infobox.type-character [data-source="image gallery"] .pi-data-value {
          width: 100%;
          text-align: center;
          line-height: 20px;
          font-size: 16px;
          background-color: transparent;
      }
      .portable-infobox.type-character [data-source="image gallery"] .pi-data-value a {
          color: black;
      }
        Loading editor
    • Ooh, I did say to remove that #4 one yet whether the right one was removed, or re-added when having a play around to see what works best, at least you can clearly identify the specifics!

      Rather than go through each point correcting spaces or something, if the entire infobox CSS from lines 113-220 is deleted, and then this second section added to the CSS:

      .portable-infobox.type-character,
      .portable-infobox.type-character .pi-title,
      .portable-infobox.type-character .pi-secondary-background {
          color: black;
          background-color: #e5e5e5;
      }
      .portable-infobox.type-character {
          -webkit-border-radius: 2ex;
          -moz-border-radius: 2ex;
          border-radius: 2ex;
          overflow: hidden;
      }
      .portable-infobox.type-character > :not(:last-child),
      .portable-infobox.type-character .pi-group > :not(:last-child) {
          border-bottom: 1px solid #999999;
      }
      .portable-infobox.type-character > :nth-child(even):not(.pi-group),
      .portable-infobox.type-character > .pi-group:nth-child(even) > :nth-child(odd),
      .portable-infobox.type-character > .pi-group:nth-child(odd) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#e5e5e5 25%, #cccccc 75%);
          background-image: -moz-linear-gradient(#e5e5e5 25%, #cccccc 75%);
          background-image: -o-linear-gradient(#e5e5e5 25%, #cccccc 75%);
          background-image: linear-gradient(#e5e5e5 25%, #cccccc 75%);
      }
      .portable-infobox.type-character > :nth-child(odd):not(.pi-group),
      .portable-infobox.type-character > .pi-group:nth-child(odd) > :nth-child(odd),
      .portable-infobox.type-character > .pi-group:nth-child(even) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#cccccc 25%, #e5e5e5 75%);
          background-image: -moz-linear-gradient(#cccccc 25%, #e5e5e5 75%);
          background-image: -o-linear-gradient(#cccccc 25%, #e5e5e5 75%);
          background-image: linear-gradient(#cccccc 25%, #e5e5e5 75%);
      }
      .portable-infobox.type-character .pi-data {
          padding: 0;
      }
      .portable-infobox.type-character .pi-data-label,
      .portable-infobox.type-character .pi-data-value {
          padding: 10px 14px;
      }
      .portable-infobox.type-character .pi-data-value {
          background-color: white;
      }
      .portable-infobox.type-character [data-source="image gallery"] .pi-data-value {
          width: 100%;
          text-align: center;
          line-height: 20px;
          font-size: 16px;
          background-color: transparent;
      }
      .portable-infobox.type-character [data-source="image gallery"] .pi-data-value a {
          color: black;
      }

      Will that be all good for having each character infobox in the silver theme, and then the customised colours for the main characters?

        Loading editor
    • No, what I have in my last post is just the generic case. You want to keep all the character-specific CSS as-is. Here is your current CSS with the content to replace highlighted:

      /* Portable Infoboxes */
       
      .portable-infobox.type-character .pi-image,.portable-infobox.type-character .pi-title,.portable-infobox.type-character .pi-secondary-background,.portable-infobox.type-character .pi-data-label {    color: black;    background-color: #e5e5e5;    background-image: -webkit-linear-gradient(#e5e5e5, #cccccc);    background-image: -moz-linear-gradient(#e5e5e5, #cccccc);    background-image: -o-linear-gradient(#e5e5e5, #cccccc);    background-image: linear-gradient(#e5e5e5, #cccccc);}.portable-infobox.type-character .pi-data {    padding: 0;    color: black;}.portable-infobox.type-character .pi-data-label,.portable-infobox.type-character .pi-data-value {    padding: 10px 14px;}.portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama .pi-title,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama .pi-secondary-background {
          background-color: #96c2ff;
      }
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > :nth-child(even):not(.pi-group),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > :nth-child(odd),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -moz-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -o-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: linear-gradient(#96c2ff 25%, #4f4d4e 75%);
      }
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > :nth-child(odd):not(.pi-group),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > :nth-child(odd),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#4f4d4e 25%, #96c2ff 75%);
          background-image: -moz-linear-gradient(#4f4d4e 25%, #96c2ff 75%);
          background-image: -o-linear-gradient(#4f4d4e 25%, #96c2ff 75%);
          background-image: linear-gradient(#4f4d4e 25%, #96c2ff 75%);
      }
       
      .portable-infobox.type-character.pi-theme-Haruki-Nakayama,
      .portable-infobox.type-character.pi-theme-Haruki-Nakayama .pi-title,
      .portable-infobox.type-character.pi-theme-Haruki-Nakayama .pi-secondary-background {
          background-color: #F2C779;
      }
      .portable-infobox.type-character.pi-theme-Haruki-Nakayama > :nth-child(even):not(.pi-group),
      .portable-infobox.type-character.pi-theme-Haruki-Nakayama > .pi-group:nth-child(even) > :nth-child(odd),
      .portable-infobox.type-character.pi-theme-Haruki-Nakayama > .pi-group:nth-child(odd) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#F2C779 25%, #E5A26E 75%);
          background-image: -moz-linear-gradient(#F2C779 25%, #E5A26E 75%);
          background-image: -o-linear-gradient(#F2C779 25%, #E5A26E 75%);
          background-image: linear-gradient(#F2C779 25%, #E5A26E 75%);
      }
      .portable-infobox.type-character.pi-theme-Haruki-Nakayama > :nth-child(odd):not(.pi-group),
      .portable-infobox.type-character.pi-theme-Haruki-Nakayama > .pi-group:nth-child(odd) > :nth-child(odd),
      .portable-infobox.type-character.pi-theme-Haruki-Nakayama > .pi-group:nth-child(even) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#E5A26E 25%, #F2C779 75%);
          background-image: -moz-linear-gradient(#E5A26E 25%, #F2C779 75%);
          background-image: -o-linear-gradient(#E5A26E 25%, #F2C779 75%);
          background-image: linear-gradient(#E5A26E 25%, #F2C779 75%);
      }
       
      .portable-infobox.type-character.pi-theme-Mafuyu-Sato,
      .portable-infobox.type-character.pi-theme-Mafuyu-Sato .pi-title,
      .portable-infobox.type-character.pi-theme-Mafuyu-Sato .pi-secondary-background {
          background-color: #D96D63;
      }
      .portable-infobox.type-character.pi-theme-Mafuyu-Sato > :nth-child(even):not(.pi-group),
      .portable-infobox.type-character.pi-theme-Mafuyu-Sato > .pi-group:nth-child(even) > :nth-child(odd),
      .portable-infobox.type-character.pi-theme-Mafuyu-Sato > .pi-group:nth-child(odd) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#D96D63 25%, #E49376 75%);
          background-image: -moz-linear-gradient(#D96D63 25%, #E49376 75%);
          background-image: -o-linear-gradient(#D96D63 25%, #E49376 75%);
          background-image: linear-gradient(#D96D63 25%, #E49376 75%);
      }
      .portable-infobox.type-character.pi-theme-Mafuyu-Sato > :nth-child(odd):not(.pi-group),
      .portable-infobox.type-character.pi-theme-Mafuyu-Sato > .pi-group:nth-child(odd) > :nth-child(odd),
      .portable-infobox.type-character.pi-theme-Mafuyu-Sato > .pi-group:nth-child(even) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#E49376 25%, #D96D63 75%);
          background-image: -moz-linear-gradient(#E49376 25%, #D96D63 75%);
          background-image: -o-linear-gradient(#E49376 25%, #D96D63 75%);
          background-image: linear-gradient(#E49376 25%, #D96D63 75%);
      }
       
      .portable-infobox.type-character.pi-theme-Akihiko-Kaji,
      .portable-infobox.type-character.pi-theme-Akihiko-Kaji .pi-title,
      .portable-infobox.type-character.pi-theme-Akihiko-Kaji .pi-secondary-background {
          background-color: #6BACB2;
      }
      .portable-infobox.type-character.pi-theme-Akihiko-Kaji > :nth-child(even):not(.pi-group),
      .portable-infobox.type-character.pi-theme-Akihiko-Kaji > .pi-group:nth-child(even) > :nth-child(odd),
      .portable-infobox.type-character.pi-theme-Akihiko-Kaji > .pi-group:nth-child(odd) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#6BACB2 25%, #585453 75%);
          background-image: -moz-linear-gradient(#6BACB2 25%, #585453 75%);
          background-image: -o-linear-gradient(#6BACB2 25%, #585453 75%);
          background-image: linear-gradient(#6BACB2 25%, #585453 75%);
      }
      .portable-infobox.type-character.pi-theme-Akihiko-Kaji > :nth-child(odd):not(.pi-group),
      .portable-infobox.type-character.pi-theme-Akihiko-Kaji > .pi-group:nth-child(odd) > :nth-child(odd),
      .portable-infobox.type-character.pi-theme-Akihiko-Kaji > .pi-group:nth-child(even) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#585453 25%, #6BACB2 75%);
          background-image: -moz-linear-gradient(#585453 25%, #6BACB2 75%);
          background-image: -o-linear-gradient(#585453 25%, #6BACB2 75%);
          background-image: linear-gradient(#585453 25%, #6BACB2 75%);
      }
        Loading editor
    • Thank you, so the highlighted one what do I replace that with? That's the one that will have the other infoboxes in the silver design? Then of course I can see the named ones with their own customised CSS, I'll ask later what was wrong with Mafuyu's code previously since I thought it was the gaps before the > or something.

        Loading editor
    • Unless the highlighted one is to replace what is currently on the CSS page?

      Edited to add: added it, which has reapplied the looks for others - good! Yet back to the same issue I mentioned with what has gone wrong for Mafuyu's infobox since it's the regular silver one but should be the pink orange appearance.

        Loading editor
    • Yes, what you did was correct. Replace the highlighted CSS with the second box of CSS I have in #28. Regarding Mafuyu, we already addressed part of the problem in #22. That is what I meant when I was talking about the extra spaces. As I mentioned in #26, the spaces around ">" shouldn't make a difference. The reason why it still isn't working is because I failed to identify a second issue with the selector. The article page is "Mafuyu Sato" but the assigned value of "name" for the infobox is "Mafuyu Satou". The CSS class is based on the name parameter, not the page name. As such, you need to either add the "u" to the selectors or use the shorter spelling of the character's name for the infobox.

        Loading editor
    • Phew what a relief just took a wild guess with replacing that with whatever I saw first XD haaaha, did recognise the portable infobox type character so yes got that sorted. For future it could be worth deleting the yellow highlighted text, adding what needed to be added and say delete the infobox CSS and copy and paste all this, but fine here what with learning and identifying it all so that was also good!

      Andrewds1021 wrote:
      Regarding Mafuyu, we already addressed part of the problem in #22. That is what I meant when I was talking about the extra spaces.

      Saw to that having matched and checked it with the others, so was looking at the CSS as to what was wrong but was looking in the incorrect area. Nicely spotted about the Satou in the infobox name and that the CSS applies to that.

      With which name to use the tricky thing could have been that the Japanese spelling is "Satō" where the diacritic mark above the 'o' (fun fact the horizontal line above the o is called a macron) means the pronunciation is 'Satou'. Different places use different spellings of his name but now that I think about it people will see 'Sato' and see it as 'Sa tou' not 'Saytow' anyway. Yet the easy deciding factors, 'Sato' is the spelling in the anime and the official anime and source material so easy 'Sato' spelling all the way.

      On the CSS applying for the infobox not the page name, that is extra perfect. Thought it would be a good idea to have pages for the anime, manga and drama CD version of events. Can document any minute differences in the story, illustrate with manga and anime images respectively on the appropriate pages and the references will be neater. So good not to have three sets of the same CSS for 'Mafuyu Sato (Anime)' and so on... for all the characters. As interesting as it would be to triple the size of an already impressively detailed CSS page!

        Loading editor
    • Yes, I could have just pulled a replace in the CSS I posted and told you to recopy. However, as you stated, that is less conducive to learning what is actually going on. I tend to so things that way when a user just wants a solution and doesn't care to know how it works.

      Sounds like a reasonable decision. Although, you could actually use "Satō" is you wanted too. Both MediaWiki page names and CSS should support the "ō" character; though it would be a bit awkward typing the URL directly.

      Haha. Yeah.

      By the way, just to be clear, you are all set on the headers issue from your other thread?

        Loading editor
    • Andrewds1021 wrote:
      I tend to so things that way when a user just wants a solution and doesn't care to know how it works.

      But I doo care! The Satō is an option and redirects ‘Sato’ and ‘Satou’ could cover both, but with the wiki being an encyclopaedia must adhere to the official Sato one, but can bear the others in mind just in case.

      The headers are these ones? With what you had in mind should they be added to the Spiritpact Wiki to test what they look like?

        Loading editor
    • Not entirely sure what you are saying in your first paragraph. However, it sounds like you know what you are doing, so okay.

      Yes, that is the thread I was referring to. It sounded like you had already figured it out on your own. If that is the case, it shouldn't be too hard to simply transfer it to whatever other wiki you want.

        Loading editor
    • Ha, yes just thinking aloud that no matter what spelling there is it will be perfect any and all ways which is quite a nice situation to be in!

      I'll reply there since it's about the headers so nice to keep things in one area.

      Thank you again for making some lovely CSS designs so that hopefully now everyone can view them across whatever device they are using to see the portable infobox's.

      Later there may be designs being applied for the anime and manga infobox's, again finding the CSS to match the look of a template infobox, so there can be eve more fun filled CSS infobox's, whooo!

        Loading editor
    • Just to be clear, the custom CSS is only applies to the desktop view. Those viewing via mobile or the app won't see it.

        Loading editor
    • Wait wasn't that the whole point of portable infobox's Fandom decided to add everywhere?! XD

      Some good news in that it appears on the internet view on a phone, but as for the actual mobile view is there a way a design can appear for that?

        Loading editor
    • No. Anything that requires custom JS/CSS will not work in mobile view because Wikia intentionally does not apply custom JS/CSS in mobile view.

        Loading editor
    • That is actually horrible XD all the best designs ever are not and may not entirely in the future with the transfer to phones being used more, even be visible... 

      Are there plans to add design options for mobile views? Like if not JS/CSS is there anything else? Having every wiki on mobiles have the same identical bland look may be the latest fashion craze but don't see how it can hold up in the long term.

        Loading editor
    • Wikia hasn't said anything recently about adding more customization. Besides, as you said, uniformity and simplicity are the new in-thing. Wikia wants to get in on that so I doubt they will want to put resources into something that will directly counteract it.

        Loading editor
    • Of all the fads it had to be the most basic one going, still can hope customization can be gifted to the mobile appearance, which is definitely possible if it can be added to Discussions it can be added anywhere!

      Also all the more reason to make the most of the all the designs that can be made. On a similar note will the amazing new template with the avatar link and last edited script function on mobiles? Nothing major if not, still being kept obviously but if so at least it is a possibility customization can be considered for the future.

        Loading editor
    • If viewed through a mobile browser in desktop mode, yes. But in mobile view or in the app, no. Those solutions require custom JS, which is also not applied.

        Loading editor
    • Hopefully one day it can be applied on the mobile view and app since it looks so nice thanks to you helping adapt it to CSS for portable infobox's.

      Since it's infobox's if the episode and manga chapter ones need to be adapted shall I just return to this thread if the time ever comes?

        Loading editor
    • Yes, if this thread is still open. Community Central now uses LockForums to prevent replies to Forum threads that haven't see a reply in the last 60 days. However, the general idea is the same. Use a template parameter as the theme source and then, for each one, add the desired CSS to your site's CSS.

        Loading editor
    • The time has come… execute order 66, ha, but if you have a moment, here on seems good to use the CSS on a portable infobox to achieve this look for the episode infobox’s (looks like this on the article when filled out).

      The Episode Guide heading would be ideal as a link to the Episodes page, and then the List of Given Episodes at the bottom could be changed to Episode 1 Image Gallery with a link for the respective episode, that would look and work nice? Then of course in between is the Previous and Next ones that also have arrows but CSS could still cover that?


      A minor thing for the character infobox's; since more than one display image can be used, like here could the tabs be in the centre rather than on the left side? The remaining space filled with colour would be good.

      Could "Age 16" be on the right but also the first image people see? The appearance from the past would be first, being the earliest and all, and yet had to be switched since the infobox's have the left image be the default appearing one, could it be the right one instead? The same could be applied for SotE where either the manga or anime image could be the first to show.

        Loading editor
      1. Other than moving the links, I am not clear on what you want to do with the episode infobox.
      2. I don't believe there is a way to choose the default image. If could be done using custom JS but that seems like overkill to me. Is it really that critical? As for centering the tabs, if you want to do it for all infoboxes:
      .portable-infobox .pi-image-collection-tabs {
          text-align: center;
      }

      If just for character infoboxes:

      .portable-infobox.type-character .pi-image-collection-tabs {
          text-align: center;
      }
        Loading editor
    • Just as the characters infobox was a template before, what would the CSS be to achieve the look of the episode infobox so that could be applied to a portable infobox? Better a portable infobox with CSS used to have that look rather than a template as the episode one currently is.

      With the first image people see it's probably better they see the character look they would be most familiar with, like the anime or what they look like currently rather then viewing a past appearance or one in a different material. Especially for Seraph of the End where the novels have not yet been translated so was thinking it's better people see the anime version of the character rather than a past appearance in the light novels. So yes if the default image could be changed for an infobox that would be ideal that way for Ritsuka shown below since he was a child first that tab would be on the left, but the right image as he currently is should be shown. Same with Seraph of the End, the light novel events occurred first chronologically so on the left, but better people see the anime image first.

      Added the character one is it possible to have the top grey part the same color, blue in this case, as the rest of the infobox?

        Loading editor
      1. Ah. I see. I didn't stop to check what kind of template it was.
      2. In that case, why not just change the order? Who says it has to go from younger to older, why not older to younger? If the preferred image is by medium, even better. As far as I am aware, there is nothing that says the light novel image must come before the anime image. I honestly would suggest revising the image order rather than using JS to set the open tab. Besides, with the JS, there will probably still be a split second where the first tab will be displayed; it won't be seemless.
      3. Give this a try:
      .portable-infobox.type-character .pi-image-collection-tabs .current {
          background: none;
      }
      .portable-infobox.type-character > :nth-child(even):not(.pi-group):not(.pi-image-collection),.portable-infobox.type-character > .pi-group:nth-child(even) > :nth-child(odd):not(.pi-image-collection),.portable-infobox.type-character > .pi-group:nth-child(odd) > :nth-child(even):not(.pi-image-collection),.portable-infobox.type-character > .pi-image-collection:nth-child(even) .pi-image-collection-tabs,.portable-infobox.type-character > .pi-image-collection:nth-child(odd) .pi-image-collection-tab-content,.portable-infobox.type-character > .pi-group:nth-child(even) > .pi-image-collection:nth-child(even) .pi-image-collection-tab-content,.portable-infobox.type-character > .pi-group:nth-child(even) > .pi-image-collection:nth-child(odd) .pi-image-collection-tabs,.portable-infobox.type-character > .pi-group:nth-child(odd) > .pi-image-collection:nth-child(even) .pi-image-collection-tabs,.portable-infobox.type-character > .pi-group:nth-child(odd) > .pi-image-collection:nth-child(odd) .pi-image-collection-tab-content {    background-image: -webkit-linear-gradient(#e5e5e5 25%, #cccccc 75%);    background-image: -moz-linear-gradient(#e5e5e5 25%, #cccccc 75%);    background-image: -o-linear-gradient(#e5e5e5 25%, #cccccc 75%);    background-image: linear-gradient(#e5e5e5 25%, #cccccc 75%);}.portable-infobox.type-character > :nth-child(odd):not(.pi-group):not(.pi-image-collection),.portable-infobox.type-character > .pi-group:nth-child(odd) > :nth-child(odd):not(.pi-image-collection),.portable-infobox.type-character > .pi-group:nth-child(even) > :nth-child(even):not(.pi-image-collection),.portable-infobox.type-character > .pi-image-collection:nth-child(odd) .pi-image-collection-tabs,.portable-infobox.type-character > .pi-image-collection:nth-child(even) .pi-image-collection-tab-content,.portable-infobox.type-character > .pi-group:nth-child(odd) > .pi-image-collection:nth-child(odd) .pi-image-collection-tabs,.portable-infobox.type-character > .pi-group:nth-child(odd) > .pi-image-collection:nth-child(even) .pi-image-collection-tab-content,.portable-infobox.type-character > .pi-group:nth-child(even) > .pi-image-collection:nth-child(odd) .pi-image-collection-tab-content,.portable-infobox.type-character > .pi-group:nth-child(even) > .pi-image-collection:nth-child(even) .pi-image-collection-tabs {    background-image: -webkit-linear-gradient(#cccccc 25%, #e5e5e5 75%);    background-image: -moz-linear-gradient(#cccccc 25%, #e5e5e5 75%);    background-image: -o-linear-gradient(#cccccc 25%, #e5e5e5 75%);    background-image: linear-gradient(#cccccc 25%, #e5e5e5 75%);}

      I trust you can look at the existing CSS and figure out how to extend the highlighted lines to specific characters. Also note that the highlighted CSS should already exist and all you need to do is modify the selectors to match.

        Loading editor
    • I suppose so with it not having to be left to right, besides if there is a split second gap even if there were JS added then that settles the matter so I'll just change the order.

      portable-infobox.type-character - is this one the selector? Do I change 'character' to a character's name like 'Mafuyu Sato'? The layout is for each character here.

      extend the highlighted lines to specific characters which parts do I add under each character?

        Loading editor
    • For each character, add selectors to the analogous CSS rules. For example, this:

      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > :nth-child(even):not(.pi-group),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > :nth-child(odd),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -moz-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -o-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: linear-gradient(#96c2ff 25%, #4f4d4e 75%);
      }
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > :nth-child(odd):not(.pi-group),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > :nth-child(odd),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#4f4d4e 25%, #96c2ff 75%);
          background-image: -moz-linear-gradient(#4f4d4e 25%, #96c2ff 75%);
          background-image: -o-linear-gradient(#4f4d4e 25%, #96c2ff 75%);
          background-image: linear-gradient(#4f4d4e 25%, #96c2ff 75%);
      }

      Becomes this (new stuff highlighted):

      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > :nth-child(even):not(.pi-group),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > :nth-child(odd),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > :nth-child(even),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-image-collection:nth-child(even) .pi-image-collection-tabs,.portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-image-collection:nth-child(odd) .pi-image-collection-tab-content,.portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > .pi-image-collection:nth-child(even) .pi-image-collection-tab-content,.portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > .pi-image-collection:nth-child(odd) .pi-image-collection-tabs,.portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > .pi-image-collection:nth-child(even) .pi-image-collection-tabs,.portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > .pi-image-collection:nth-child(odd) .pi-image-collection-tab-content {    background-image: -webkit-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -moz-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -o-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: linear-gradient(#96c2ff 25%, #4f4d4e 75%);
      }
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > :nth-child(odd):not(.pi-group),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > :nth-child(odd),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > :nth-child(even),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-image-collection:nth-child(odd) .pi-image-collection-tabs,.portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-image-collection:nth-child(even) .pi-image-collection-tab-content,.portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > .pi-image-collection:nth-child(odd) .pi-image-collection-tabs,.portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > .pi-image-collection:nth-child(even) .pi-image-collection-tab-content,.portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > .pi-image-collection:nth-child(odd) .pi-image-collection-tab-content,.portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > .pi-image-collection:nth-child(even) .pi-image-collection-tabs {    background-image: -webkit-linear-gradient(#4f4d4e 25%, #96c2ff 75%);
          background-image: -moz-linear-gradient(#4f4d4e 25%, #96c2ff 75%);
          background-image: -o-linear-gradient(#4f4d4e 25%, #96c2ff 75%);
          background-image: linear-gradient(#4f4d4e 25%, #96c2ff 75%);
      }

      In case you haven't noticed the pattern yet:

      /* generic infobox rule */
      .portable-infobox.type-character /* more selector stuff */ {
          /* css property stuff */
      }
      /* specific character rule */
      .portable-infobox.type-character.pi-theme-/* character name */ /* more selector stuff */ {
          /* css property stuff */
      }
        Loading editor
    • Just so it’s all clear for myself, is this (changed to italic line) a selector – choosing the type of infobox.

      .portable-infobox.type-character >

      :nth-child(even):not(.pi-group):not(.pi-image-collection), (then what does this part do?)

      If the (even) is the dark shade, and the (odd) the light shade, are these two sections allowing the shade layout on the infobox, like the ‘Age’ and ‘Height’ to have that style? Then these two together, that is what is allowing the infobox design where it can have both light and dark shades connected?

      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > :nth-child(even):not(.pi-group),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > :nth-child(odd),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -moz-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -o-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: linear-gradient(#96c2ff 25%, #4f4d4e 75%);
      }
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > :nth-child(odd):not(.pi-group),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > :nth-child(odd),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#4f4d4e 25%, #96c2ff 75%);
          background-image: -moz-linear-gradient(#4f4d4e 25%, #96c2ff 75%);
          background-image: -o-linear-gradient(#4f4d4e 25%, #96c2ff 75%);
          background-image: linear-gradient(#4f4d4e 25%, #96c2ff 75%);
      }
      

      As for the colours (aware of the # colour codes and the percentage) what do these four do?

      • -webkit-linear-gradient
      • -moz-linear-gradient(
      • background-image:
      • -o-linear-gradient

      The six new lines for each character, that’s for each shade for both the tabs and the surrounding space at the top of the infobox.

      I can now see how names can be added with .pi-theme-character-name, but what is the css property stuff?

      As for the episode css, is character changed to episode

      .portable-infobox.type-episode > :nth-child(even):not(.pi-group):not(.pi-image-collection),.portable-infobox.type-episode > .pi-group:nth-child(even) > :nth-child(odd):not(.pi-image-collection),.portable-infobox.type-episode > .pi-group:nth-child(odd) > :nth-child(even):not(.pi-image-collection),

      and how does it tell ‘episode’ is the episode infobox, like is it case specific?

        Loading editor
    • 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 AND. For example, lets say you have <selector a> and <selector b>. Then the compound selector <selector a><selecctor b> will select any elemetns that meet the criteria for both selectors. Joining selectors using a comma acts as OR. For example, <selector a>, <selector b> 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:

      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > :nth-child(even):not(.pi-group):not(.pi-image-collection),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > :nth-child(odd):not(.pi-image-collection),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > :nth-child(even):not(.pi-image-collection),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-image-collection:nth-child(even) .pi-image-collection-tabs,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-image-collection:nth-child(odd) .pi-image-collection-tab-content,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > .pi-image-collection:nth-child(even) .pi-image-collection-tab-content,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > .pi-image-collection:nth-child(odd) .pi-image-collection-tabs,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > .pi-image-collection:nth-child(even) .pi-image-collection-tabs,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > .pi-image-collection:nth-child(odd) .pi-image-collection-tab-content {
          /* CSS property stuff */
      }

      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:

      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > :nth-child(even):not(.pi-group),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > :nth-child(odd),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > :nth-child(even),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-image-collection:nth-child(even) .pi-image-collection-tabs,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-image-collection:nth-child(odd) .pi-image-collection-tab-content,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > .pi-image-collection:nth-child(even) .pi-image-collection-tab-content,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > .pi-image-collection:nth-child(odd) .pi-image-collection-tabs,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > .pi-image-collection:nth-child(even) .pi-image-collection-tabs,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > .pi-image-collection:nth-child(odd) .pi-image-collection-tab-content {
          background-image: -webkit-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -moz-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -o-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: linear-gradient(#96c2ff 25%, #4f4d4e 75%);
      }
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > :nth-child(odd):not(.pi-group),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > :nth-child(odd),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > :nth-child(even),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-image-collection:nth-child(odd) .pi-image-collection-tabs,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-image-collection:nth-child(even) .pi-image-collection-tab-content,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > .pi-image-collection:nth-child(odd) .pi-image-collection-tabs,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > .pi-image-collection:nth-child(even) .pi-image-collection-tab-content,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > .pi-image-collection:nth-child(odd) .pi-image-collection-tab-content,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > .pi-image-collection:nth-child(even) .pi-image-collection-tabs {
          background-image: -webkit-linear-gradient(#4f4d4e 25%, #96c2ff 75%);
          background-image: -moz-linear-gradient(#4f4d4e 25%, #96c2ff 75%);
          background-image: -o-linear-gradient(#4f4d4e 25%, #96c2ff 75%);
          background-image: linear-gradient(#4f4d4e 25%, #96c2ff 75%);
      }

      to this:

      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > :nth-child(even):not(.pi-group):not(.pi-image-collection),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > :nth-child(odd):not(.pi-image-collection),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > :nth-child(even):not(.pi-image-collection),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-image-collection:nth-child(even) .pi-image-collection-tabs,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-image-collection:nth-child(odd) .pi-image-collection-tab-content,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > .pi-image-collection:nth-child(even) .pi-image-collection-tab-content,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > .pi-image-collection:nth-child(odd) .pi-image-collection-tabs,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > .pi-image-collection:nth-child(even) .pi-image-collection-tabs,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > .pi-image-collection:nth-child(odd) .pi-image-collection-tab-content {
          background-image: -webkit-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -moz-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -o-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: linear-gradient(#96c2ff 25%, #4f4d4e 75%);
      }
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > :nth-child(odd):not(.pi-group):not(.pi-image-collection),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > :nth-child(odd):not(.pi-image-collection),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > :nth-child(even):not(.pi-image-collection),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-image-collection:nth-child(odd) .pi-image-collection-tabs,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-image-collection:nth-child(even) .pi-image-collection-tab-content,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > .pi-image-collection:nth-child(odd) .pi-image-collection-tabs,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > .pi-image-collection:nth-child(even) .pi-image-collection-tab-content,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > .pi-image-collection:nth-child(odd) .pi-image-collection-tab-content,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > .pi-image-collection:nth-child(even) .pi-image-collection-tabs {
          background-image: -webkit-linear-gradient(#4f4d4e 25%, #96c2ff 75%);
          background-image: -moz-linear-gradient(#4f4d4e 25%, #96c2ff 75%);
          background-image: -o-linear-gradient(#4f4d4e 25%, #96c2ff 75%);
          background-image: linear-gradient(#4f4d4e 25%, #96c2ff 75%);
      }

      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 background-image is to increase browser compatibility. Because CSS and HTML are constantly being updated and changed, linear-gradient 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 -webkit-linear-gradient(), -webkit- is the vendor prefix and linear-gradient() 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 -webkit- (various browsers), -moz- (Mozilla Firefox), -ms- (Microsoft Internet Explorer), and -o- (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:

      <infobox type="character" theme-source="name">
      
        Loading editor
    • Thank you for the explanation and spotting the area that needs to be changed. For this CSS, if it were being added elsewhere, these three would need to be together:

      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > :nth-child(even):not(.pi-group):not(.pi-image-collection),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > :nth-child(odd):not(.pi-image-collection),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > :nth-child(even):not(.pi-image-collection),
      

      The top line would only work when a part of the others added?

      With adding the CSS to episode infobox's on the Given Wiki, it is to be added to a portable infobox. Like I would create a portable infobox with the information, and then CSS would be added to match the look of the template it currently is.

      Added it here and looks excellent, is there a way to change the other tab to a non grey color?

        Loading editor
    • Regarding the selectors:


      The way I write my compound CSS selectors, I use separate lines for separate parts of the , selector. Since this selector is equivalent to the logical operation OR, each part is independent of the others. In other words, no, a particular line is not dependent on the other to function properly. The only purpose of using this selector is to get away with needing only one rule instead of several. For example, what we currently have is this:

      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > :nth-child(even):not(.pi-group):not(.pi-image-collection),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > :nth-child(odd):not(.pi-image-collection),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > :nth-child(even):not(.pi-image-collection),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-image-collection:nth-child(even) .pi-image-collection-tabs,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-image-collection:nth-child(odd) .pi-image-collection-tab-content,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > .pi-image-collection:nth-child(even) .pi-image-collection-tab-content,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > .pi-image-collection:nth-child(odd) .pi-image-collection-tabs,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > .pi-image-collection:nth-child(even) .pi-image-collection-tabs,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > .pi-image-collection:nth-child(odd) .pi-image-collection-tab-content {
          background-image: -webkit-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -moz-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -o-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: linear-gradient(#96c2ff 25%, #4f4d4e 75%);
      }

      If we wanted to, we could get the same impact by doing this:

      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > :nth-child(even):not(.pi-group):not(.pi-image-collection) {
          background-image: -webkit-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -moz-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -o-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: linear-gradient(#96c2ff 25%, #4f4d4e 75%);
      }
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > :nth-child(odd):not(.pi-image-collection),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > :nth-child(even):not(.pi-image-collection) {
          background-image: -webkit-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -moz-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -o-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: linear-gradient(#96c2ff 25%, #4f4d4e 75%);
      }
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-image-collection:nth-child(even) .pi-image-collection-tabs,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-image-collection:nth-child(odd) .pi-image-collection-tab-content,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > .pi-image-collection:nth-child(even) .pi-image-collection-tab-content,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > .pi-image-collection:nth-child(odd) .pi-image-collection-tabs,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > .pi-image-collection:nth-child(even) .pi-image-collection-tabs,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > .pi-image-collection:nth-child(odd) .pi-image-collection-tab-content {
          background-image: -webkit-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -moz-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -o-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: linear-gradient(#96c2ff 25%, #4f4d4e 75%);
      }

      Or this:

      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > :nth-child(even):not(.pi-group):not(.pi-image-collection),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > :nth-child(odd):not(.pi-image-collection),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > :nth-child(even):not(.pi-image-collection),
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-image-collection:nth-child(even) .pi-image-collection-tabs {
          background-image: -webkit-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -moz-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -o-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: linear-gradient(#96c2ff 25%, #4f4d4e 75%);
      }
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-image-collection:nth-child(odd) .pi-image-collection-tab-content,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > .pi-image-collection:nth-child(even) .pi-image-collection-tab-content,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > .pi-image-collection:nth-child(odd) .pi-image-collection-tabs,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > .pi-image-collection:nth-child(even) .pi-image-collection-tabs,
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > .pi-image-collection:nth-child(odd) .pi-image-collection-tab-content {
          background-image: -webkit-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -moz-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -o-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: linear-gradient(#96c2ff 25%, #4f4d4e 75%);
      }

      Or this:

      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > :nth-child(even):not(.pi-group):not(.pi-image-collection) {
          background-image: -webkit-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -moz-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -o-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: linear-gradient(#96c2ff 25%, #4f4d4e 75%);
      }
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > :nth-child(odd):not(.pi-image-collection) {
          background-image: -webkit-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -moz-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -o-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: linear-gradient(#96c2ff 25%, #4f4d4e 75%);
      }
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > :nth-child(even):not(.pi-image-collection) {
          background-image: -webkit-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -moz-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -o-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: linear-gradient(#96c2ff 25%, #4f4d4e 75%);
      }
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-image-collection:nth-child(even) .pi-image-collection-tabs {
          background-image: -webkit-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -moz-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -o-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: linear-gradient(#96c2ff 25%, #4f4d4e 75%);
      }
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-image-collection:nth-child(odd) .pi-image-collection-tab-content {
          background-image: -webkit-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -moz-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -o-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: linear-gradient(#96c2ff 25%, #4f4d4e 75%);
      }
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > .pi-image-collection:nth-child(even) .pi-image-collection-tab-content {
          background-image: -webkit-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -moz-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -o-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: linear-gradient(#96c2ff 25%, #4f4d4e 75%);
      }
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(even) > .pi-image-collection:nth-child(odd) .pi-image-collection-tabs {
          background-image: -webkit-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -moz-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -o-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: linear-gradient(#96c2ff 25%, #4f4d4e 75%);
      }
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > .pi-image-collection:nth-child(even) .pi-image-collection-tabs {
          background-image: -webkit-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -moz-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -o-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: linear-gradient(#96c2ff 25%, #4f4d4e 75%);
      }
      .portable-infobox.type-character.pi-theme-Ritsuka-Uenoyama > .pi-group:nth-child(odd) > .pi-image-collection:nth-child(odd) .pi-image-collection-tab-content {
          background-image: -webkit-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -moz-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: -o-linear-gradient(#96c2ff 25%, #4f4d4e 75%);
          background-image: linear-gradient(#96c2ff 25%, #4f4d4e 75%);
      }

      And so on. I trust the last example shows a convincing case for why we use ,.


      Regarding the tab color: Did you copy the unhighlighted parts for the general CSS in #51?

        Loading editor
    • That was a good way of explaining it, reminded me of JS where instead of having each one indivusually, you could have them stacked and they would all work so long as they were in between the 

          ]
      })
      

      Added the unhighted part for Ritsuka's infobox and that works perfectly thanks.

      With these episode ones would it be:

       
      .portable-infobox.type-episode,
      .portable-infobox.type-episode .pi-title,
      .portable-infobox.type-episode .pi-secondary-background {
          color: black;
          background-color: #e5e5e5;
      }
      .portable-infobox.type-episode > :not(:last-child),
      .portable-infobox.type-episode .pi-group > :not(:last-child) {
          border-bottom: 1px solid #999999;
      }
      .portable-infobox.type-episode > :nth-child(even):not(.pi-group),
      .portable-infobox.type-episode > .pi-group:nth-child(even) > :nth-child(odd),
      .portable-infobox.type-episode > .pi-group:nth-child(odd) > :nth-child(even) {
          background-image: -webkit-linear-gradient(#e5e5e5 25%, #cccccc 75%);
          background-image: -moz-linear-gradient(#e5e5e5 25%, #cccccc 75%);
          background-image: -o-linear-gradient(#e5e5e5 25%, #cccccc 75%);
          background-image: linear-gradient(#e5e5e5 25%, #cccccc 75%);
      }


      Using the silver design characters use, with the Episode guide link, link to image gallery page and the Previous/Next areas?
        Loading editor
    • It depends on how much you want to share between the two type of infoboxes. In the 2nd part of #28 I have the current generic character CSS. If you want to have an identical look for the default episode infobox, than just duplicate all the selectors and change ".type-character" to ".type-episode". If you want special formatting for the episode guide link, we probably need to add another rule for that. It would probably be best to start building a test template so we can see how things look and work from there.

        Loading editor
    • That would be best, whatever the infobox template looks like, it's good to have that look as CSS applied to a portable infobox. The episode guide link would be really handy, if people choose one episode page there's a link to see all the others as well.

        Loading editor
    • Let me know when you have a test infobox up.

        Loading editor
    • In edit this has most of the features to be in the portable infobox. It just needs the Episode Guide to be a link to the episodes. At the bottom where "List of Given Episodes" is on the regular non portable infobox template currently on Episode 1, that could be a link to the respective episode image gallery.

        Loading editor
    • You should be able to add that using the navigation tag. Or perhaps I am misunderstanding what you are trying to ask for at the moment. By the way, since the episode infoboxes have a horizontal group, we may have to add some additional CSS so that those come out correctly.

        Loading editor
    • Which is the navigation tag? The portable infobox has what would be needed in it (airdate and that), it just needs the CSS so the portable infobox has the same look as the template (though being portable will appears better across devices).

      Would the CSS also need to be altered since there are arrows in it? And a different image gallery link for each episode. Like every episode would have the same episode infobox, the link at the bottom though would need to link to the appropriate image gallery though. Choosing the image gallery on episode 1 would lead to episode 1 image gallery, then on the episode 2 infobox, the image gallery link would lead to episode 2 image gallery and so forth.

        Loading editor
    • Hi, added this  for Mafuyu now that there are two images in his manga infobox and so now the code is good to be applied to colour the top heading same as Ritsuka's has been. Only it didn't add and transferred the middle tabs to the left, did I miss anything? 

        Loading editor
    • This is the navigation tag. From what I see, you don't yet have a field for the image gallery link. I believe this is the tag you want to use to add it.

      I don't think the arrows themselves would impact the CSS. If what you mean is the fact that the labels that include the arrows are side-by-side, then yes. That is what I was referring to has the horizontal group.

      What the sections link to shouldn't impact the CSS. For turning the header indo a link, try just using the normal link syntax. If that doesn't work, then you will probably have to switch to using a navigation tag instead and leave the horizontal group without a header tag. As for the image gallery, the navigation tag should be able to handle regular MediaWiki markup, including use of template parameters.

      The tabs thing seems to be resolve to me. I assume you figure it out yourself?

        Loading editor
    • Andrewds1021 wrote:
      This is the navigation tag. From what I see, you don't yet have a field for the image gallery link. I believe this is the tag you want to use to add it.

      So that is being included in the regular silver characters infobox, with characters changed to episodes and then that's everything for the Episode infobox and the same could apply to the manga ones.

      Presumably the headings just took time to load if I got everything I suppose so anyway.

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message
Community content is available under CC-BY-SA unless otherwise noted.