FANDOM


  • Hello. I'd hate to ask another question again, but I was wondering what code needs to go inside of a template to create borders for infobox text. I do not want all the text in borders, just where it has the name of the page (in the infobox), General Information, and Product information. I have done a little web searching on this topic but both pages I have visited make it unclear where the code should be placed, and what is used for formatting. I know I need to create a seperate template for this (possibly CSS page?) I just don't know which code goes where. (Link to infobox template here)

    Overall, the end result should be an outline around the specified text, and the color should be able to be edited. Similar to this photo, just with English text.

    Other useful pages for this are:

    Wikia CSS

    Themes CSS

      Loading editor
    • Do you want the color to be fully cusotmizable (i.e. each time you use the template you choose) or do you want it to be set differently for each character (like your colors schemes)?

        Loading editor
    • I would like it to be a part of the color schemes if that is possible. (And to have the option to enable/disable the freature for each infobox).

      Is there any other information I need to provide?

        Loading editor
    • Unfortunately, theme-source is the only way to dyamically assign a class to a portable infobox. Therefore, we can't use a separate parameter as a border toggle. However, what we can do is use a standard format to how the parameter input is modified to accomplish the toggle. The CSS will need to be added to Themes.css just like the other theme cusotmizations we already made. It will also require you to revise the current CSS. Let's do that first. First, you will need to rewrite all of the CSS parts that are ".pi-theme-<theme-source>" to "[class*="pi-theme-<theme-source>"]". For example, you currently have:

      /*-------------*/
      /*--GENERAL C--*/
      /*-------------*/
      .pi-theme-default,
      .pi-theme-black0,
      .pi-theme-company,
      .pi-theme-technology,
      .pi-theme-website,
      /*-------------*/
      /*--VOCALOID1--*/
      /*-------------*/
      .pi-theme-meiko,
      .pi-theme-kaito,
      /*-------------*/
      /*--CV SERIES--*/
      /*-------------*/
      .pi-theme-hatsune-miku,
      .pi-theme-kagamine,
      .pi-theme-kagamine-len,
      .pi-theme-kagamine-rin,
      .pi-theme-megurine-luka { 
          border-color: #999; 
      }

      You would need to change it to this:

      /*-------------*/
      /*--GENERAL C--*/
      /*-------------*/
      .pi-theme-default,
      .pi-theme-black0,
      .pi-theme-company,
      .pi-theme-technology,
      .pi-theme-website,
      /*-------------*/
      /*--VOCALOID1--*/
      /*-------------*/
      [class*="pi-theme-meiko"],
      [class*="pi-theme-kaito"],
      /*-------------*/
      /*--CV SERIES--*/
      /*-------------*/
      [class*="pi-theme-hatsune-miku"],
      [class*="pi-theme-kagamine"],
      [class*="pi-theme-kagamine-len"],
      [class*="pi-theme-kagamine-rin"],
      [class*="pi-theme-megurine-luka"] { 
          border-color: #999; 
      }

      Next, to add the actual text border, something like this:

      .pi-theme-hatsune-miku-border .pi-title,
      .pi-theme-hatsune-miku-border .pi-header {
          text-shadow: -2px 0 0 red, 2px 0 0 red, 0 -2px 0 red, 0 2px 0 red;
      }

      Now, if the template is used like this:

      {{Infobox synth
        | theme = hatsune miku
      }}
      

      It should appear as it currently does. However, if the template is used like this:

      {{Infobox synth
        | theme = hatsune miku border
      }}
      

      The text in the areas you specified should have the border around them.

      I would also like to note that I am not sure why Bunai Di has "theme="default"" in your template. At the very least, I would give it a more meaningful value like "theme="synth"". If the reason it is "default" is because you want to apply it to all infoboxes, then you don't need to use the theme attribute at all. Just write generic CSS that targets all infoboxes.

        Loading editor
    • I followed your directions, and even remoced the word default and replaced it with synth (in the infobox synth template). There are still issues though. The templates have now reverted back to the default lime green color.

      I changed every theme name in the original infobox to (name of page) border, but they're entirely lime green. I reverted Miku's theme back to the original theme name. Now only the infobox title has the assigned color, and the rest is lime green with a red shadow over the words. It's a good start though.

      I am wondering what I have done incorrectly.

        Loading editor
    • If you replace "theme="default"" with "theme="synth"", then you need to change that in your CSS as well. Anything that is ".pi-theme-default" needs to change to ".pi-theme-synth". Apologies, I guess I didn't make that clear.

        Loading editor
    • Okay, then I will revert the text back to the original word.

      Is there anything else that needs to be changed? The results are not what I expected, and the theme colors are not showing in the infoboxes. Now the boxes are all the "default" color.

      Also, I did not make myself clear on what I would like the text to look like.

      I would like the text to look like this I don't want a shadow, simply something like a "white meme text border" on the text in the infobox. Without the colored hilight. It might be possible that the CSS on the wikia does not support that yet

        Loading editor
    • UPDATE: I was able to change the outline color from red to white by changing red to #fff.

      Now all that needs to be fixed is applying the default themes to this setting, and that's that.

      Second Update: turns out I had to move the text border code under the color code in the theme code in CSS. If you would like to check it out you can.

      Thanks! I figured a little bit out on my own this time.

        Loading editor
    • I am glad to hear you were able to figure it out on your own.

        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.