FANDOM


  • I am an admin on this wiki and I'd like to change the current Infobox theme.

    I saw this template could be perfect for the wiki. However, I can't move it to my wiki since I'm on a mobile device (My computer's battery crashed). I could try writing it, but it's proven to be hard.

    Would you be willing to help me? Please?

      Loading editor
    • You can't just view the wiki in desktop mode on your mobile device?

        Loading editor
    • Yes, I can. It's just that I can't copy and paste the CSS code on my mobile device. I can only do it on PC.

      And if I did have that code, I could make some changes to it.

        Loading editor
    • That is interesting. I am not aware of any restrictions that prevent users from editing CSS using a mobile device. Either way, only admins can edit site CSS, so there isn't much anyone else can really do to help. UNless, what you meant was you are having trouble finding the CSS. We could help with that.

        Loading editor
    • Actually, now I can't decide. I originally chose this template, because I wanted each character to be color-coded, but I discarded it since the spaces were too large. I then saw the Love Live one, and I thought it also looked good, but I wasn't sure how to change some parameters without messing it up.

        Loading editor
    • If you want each character to be color coded, then the other one is definitely better. Plus, it i a portable infobox so it should look better on mobile.

        Loading editor
    • Alright. I wrote the code, but it doesn't seem to work. The template still looks the same...

        Loading editor
    • Wait, I think I am getting confused. For some reason, I thought the first template you mentioned was not a portable infobox. However, I just checked and it is. Which one do you prefer the most?

        Loading editor
    • The Love Live one. Actually, I thought I would combine both aspects of each template...

        Loading editor
    • I see. Might I suggest an edit to the infobox first? Assuming I am correct in understanding that you want the color to depend on the character:

      <infobox type="character" theme-source="theme">
      

      To copy the general style from the Love Live wiki, use the following CSS. It is a modified version of what they have.

      .portable-infobox.type-character {
          width: 275px;
          background: #f9f2f9;
          border-collapse: separate;
          padding: 3px;
          border: 1px solid #fb4092;
          border-radius: 2px;
      }
       
      .portable-infobox.type-character .pi-title {
          background: #fb4092;
          color: #f9f2f9;
          text-align: center;
          font-weight: bold;
      }
       
      .portable-infobox.type-character .pi-image {
          background: -moz-linear-gradient(top,  rgba(253,179,212,0.4) 0%, rgba(253,179,212,0) 100%); /* FF3.6-15 */
          background: -webkit-linear-gradient(top,  rgba(253,179,212,0.4) 0%,rgba(253,179,212,0) 100%); /* Chrome10-25, Safari5.1-6 */
          background: linear-gradient(to bottom,  rgba(253,179,212,0.4) 0%,rgba(253,179,212,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
          margin: 2px 0;
          height: 240px;
          overflow: hidden;
          border-bottom: 1px solid #fb4092;
      }
       
      .portable-infobox.type-character .pi-image:hover{
          height: 100%;
          overflow: hidden;
      }
       
      .portable-infobox.type-character .pi-caption {
          text-align: center;
          padding: 0px;
          border-bottom: 1px solid #bbbbbb;
      }
       
      .portable-infobox.type-character .pi-header {
          background: #fb4092;
          border: solid #fb4092;
          text-align: center;
          color: #f9f2f9;
          padding: 1px 1px;
          margin: 1px 0;
      }
       
      .portable-infobox.type-character .pi-data {
          padding: 1px 0px;
          border-width: 0px;
      }
       
      .portable-infobox.type-character .pi-data:last-of-type,
      .portable-infobox.type-character .pi-group { 
          border-bottom: none;
      }
       
      .portable-infobox.type-character .pi-data:last-of-type + .pi-group {
          border-top: none;
      }
       
      .portable-infobox.type-character .pi-data-value {
          padding: 0 2px;
      }
       
      .portable-infobox.type-character .pi-data-label {
          background: #fdb3d4;
          border: solid #fdb3d4;
          border-width: 1px 3px;
          text-align: right;
      }
       
      .portable-infobox.type-character .pi-horizontal-group .pi-header {
          text-align: center;
          background: #fc8bbd;
      }
       
      .portable-infobox.type-character .pi-horizontal-group .pi-data-label {
          padding: 0;
          margin: 1px 0;
          text-align: center;
      }

      The above CSS is the generic CSS that handles the default appearance of the character infoboxes. To customize the colors for a specific infobox, we need only to change the color values depending on the assigned theme. To do this, you will use CSS such as the following where you will replace "mytheme" with the actual theme name and all of the color codes with the actual colors you want to use.

      .portable-infobox.type-character.pi-theme-mytheme {
          background-color: #f9f2f9;
          border-color: #fb4092;
      }
       
      .portable-infobox.type-character.pi-theme-mytheme .pi-title {
          background-color: #fb4092;
          color: #f9f2f9;
      }
       
      .portable-infobox.type-character.pi-theme-mytheme .pi-image {
          background-image: -moz-linear-gradient(top,  rgba(253,179,212,0.4) 0%, rgba(253,179,212,0) 100%); /* FF3.6-15 */
          background-image: -webkit-linear-gradient(top,  rgba(253,179,212,0.4) 0%,rgba(253,179,212,0) 100%); /* Chrome10-25, Safari5.1-6 */
          background-image: linear-gradient(to bottom,  rgba(253,179,212,0.4) 0%,rgba(253,179,212,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
          border-bottom-color: #fb4092;
      }
       
      .portable-infobox.type-character.pi-theme-mytheme .pi-caption {
          border-bottom-color: #bbbbbb;
      }
       
      .portable-infobox.type-character.pi-theme-mytheme .pi-header {
          background-color: #fb4092;
          border-color: #fb4092;
          color: #f9f2f9;
      }
       
      .portable-infobox.type-character.pi-theme-mytheme .pi-data-label {
          background-color: #fdb3d4;
          border-color: #fdb3d4;
      }
       
      .portable-infobox.type-character.pi-theme-mytheme .pi-horizontal-group .pi-header {
          background-color: #fc8bbd;
      }

      There is another user I am also helping do this sort of customization. If you want to take a look at that thread, it is Thread:1694226.

        Loading editor
    • I tried it and... it works well.

        Loading editor
    • I am seeing the default colors but I can't seem to find a page that uses a cusotmized color scheme. Have you tried the color-coding aspect yet?

        Loading editor
    • Yes. About that, check out the Emma page.

        Loading editor
    • I assume you want to change the tab colors as well?

        Loading editor
    • Yes.

        Loading editor
    • .portable-infobox.type-character.pi-theme-mytheme .pi-image-collection-tabs {
          background-color: red;
      }
       
      .portable-infobox.type-character.pi-theme-mytheme .pi-image-collection-tabs .current {
          background-color: blue;
      }
        Loading editor
    • It looks good so far. Just a little tweak here and there and we're done.

        Loading editor
    • Andrewds1021 wrote:
      .portable-infobox.type-character.pi-theme-mytheme .pi-image-collection-tabs {
          background-color: red;
      }
       
      .portable-infobox.type-character.pi-theme-mytheme .pi-image-collection-tabs .current {
          background-color: blue;
      }

      I have a problem, the "current" tab should be dark green, but it's not.

        Loading editor
    • Using the CSS from my example, you are missing the space between ".pi-theme-mytheme" and ".pi-image-collection-tabs".

        Loading editor
    • Now I have another problem... On the "Latest apperarance" section, the color is lavender and not green.

        Loading editor
    • Set a background color for ".portable-infobox.type-character.pi-theme-Emma .pi-horizontal-group-item.pi-data-value:nth-child(even)".

        Loading editor
    • No, wait...

      The two sections could be white, with a border between them.

        Loading editor
    • In that case:

      .portable-infobox.type-character.pi-theme-Emma .pi-horizontal-group-item.pi-data-value:not(:first-child) {
          background: none;
          border-left: 1px solid #48d381;
      }
        Loading editor
    • Is there a way to put a border below?

        Loading editor
    • If you want the left border for all character infoboxes, remove ".pi-theme-Emma" from the CSS rule's selector. As for the bottom border:

      .portable-infobox.type-character .pi-horizontal-group {
          border-bottom: 1px solid #bbbbbb;
      }
        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.