FANDOM


  • Hi, I am wondering how can I change the background of each infobox. I have already put this on the CSS:
     .portable-infobox.pi-background {
    
    
    
    
    }

    I could put background : image I want to use but that would change the background of all infoboxes when I have plans for each. How can I be able to do this separately? Make each infobox have their own image.  

      Loading editor
    • You can use portable infoboxes themes to set backgrounds individually. See Help:Infoboxes/CSS#Infobox themes for more information. ^^

        Loading editor
    • Aiihuan wrote:
      You can use portable infoboxes themes to set backgrounds individually. See Help:Infoboxes/CSS#Infobox themes for more information. ^^

      Ok, so I would have to add something like 

      <infobox theme-source ="location">

      but instead of locations I would put the changer, so if it's the name it would be theme-source="name"?

      Also, it does show the CSS: 

      .portable-infobox.pi-theme-africa {
         ...
      }
      


      But, how would I add the image inside or on the CSS? Would I use background-image: url()? is there a better way?

        Loading editor
    • Yes.
      And yes, you would have to use background-image: url().

        Loading editor
    • Aiihuan wrote:
      Yes.
      And yes, you would have to use background-image: url().

      I tried it, not sure if it works. I can't seem to get the infobox filled, the only thing that shows is the title, other than that wont show. here's the wikitext:

      
      <infobox theme-source="title">
      
        <title source="title">
      
            <default>Warrior</default>
      
        </title>
      
        <image source="Warriorart.jpg">
      
            <caption source="imagecaption" />
      
        </image>
      
        <data source="position">
      
            <label>Position</label>
      
        </data>
      
        <data source="age">
      
            <label>Age444</label>
      
        </data>
      
        <data source="status">
      
            <label>Status</label>
      
        </data>
      
        <data source="height">
      
            <label>Height</label>
      
            <format>{{{height}}} inches</format>
      
        </data>
      
        <data source="weight">
      
            <label>Weight</label>
      
            <format>{{{weight}}} grams</format>
      
        </data>
      
      </infobox>
      
      

      EDIT: I used <default> info</default> to fill in the info, and it worked. Is that the correct tag?

        Loading editor
    • By default, portable infobox data is hidden. It will show up if you fill respective parameters on page or put a default value.

        Loading editor
    • Aiihuan wrote:
      By default, portable infobox data is hidden. It will show up if you fill respective parameters on page or put a default value.

      Is there another way to put an image inside CSS other than background-image: url ()?

      EDIT: The infobox background picture doesn't seem to work, here's the HTLM:

      <infobox theme-source="Character">
      
        <data source="Character">
      
            <label>Character</label>
      
      <default>Warrior</default>
      
        </data>
      
        <data source="position">
      
            <label>Position</label>
      
      <default> lol what </default>
      
        </data>
      
        <data source="age">
      
            <label>Age</label>
      
      <default>444</default>
      
        </data>
      
        <data source="status">
      
            <label>Status</label>
      
      <default>Alive</default>
      
        </data>
      
        <data source="height">
      
            <label>Height</label>
      
      <default>One Thousand</default>
      
            <format>{{{height}}} inches</format>
      
        </data>
      
        <data source="weight">
      
            <label>Weight</label>
      
      <default>1,098lb</default>
      
            <format>{{{weight}}} grams</format>
      
        </data>
      
      </infobox> 

      EDIT-2: I was able to change background by changing it into  infobox theme=warrior instead of the current one. Thanks. However, I have another issue with the image, it repeats when the width is bigger than the image. How do I fix this?

        Loading editor
    • I presume you tried it on w:c:kritika:Warrior?
      For theme-source to work, you have to put the infobox code on template and then fill Character parameter as Warrior.

        Loading editor
    • Aiihuan wrote:
      I presume you tried it on w:c:kritika:Warrior?
      For theme-source to work, you have to put the infobox code on template and then fill Character parameter as Warrior.

      I already found a way to put it, if you look at my previous comment, but just in case could you show me an example? From my understanding that's what I  did, thats why im asking this. Also, how do I fix repating images when the width is bigger than the image itself

        Loading editor
    • Ah, I did not see your edit before. Using "theme-source" section at Help:Infoboxes/CSS shows an example of it. :)
      To prevent image from repeating, you can use background-repeat: no-repeat.

        Loading editor
    • Aiihuan wrote:
      Ah, I did not see your edit before. Using "theme-source" section at Help:Infoboxes/CSS shows an example of it. :)
      To prevent image from repeating, you can use background-repeat: no-repeat.

      How do I make the background image the same width as the infobox?

        Loading editor
    • Usually, using background-size CSS property.

      Try changing

      .portable-infobox.pi-theme-Warrior {
         background-image: url(https://lh3.googleusercontent.com/ALOElQCGAkXrZcTgHYAg51K96lQtMdTFQrSmhWI0vqs6IAxEzFQSowPoXmcdRthfSULN=s128);
         background-repeat: no-repeat;
      }

      to

      .portable-infobox.pi-theme-Warrior {
         background-image: url(https://lh3.googleusercontent.com/ALOElQCGAkXrZcTgHYAg51K96lQtMdTFQrSmhWI0vqs6IAxEzFQSowPoXmcdRthfSULN=s128);
         background-repeat: no-repeat;
         background-size: cover;
      }
        Loading editor
    • KockaAdmiralac wrote:
      Usually, using background-size CSS property.

      Try changing

      .portable-infobox.pi-theme-Warrior {
         background-image: url(https://lh3.googleusercontent.com/ALOElQCGAkXrZcTgHYAg51K96lQtMdTFQrSmhWI0vqs6IAxEzFQSowPoXmcdRthfSULN=s128);
         background-repeat: no-repeat;
      }

      to

      .portable-infobox.pi-theme-Warrior {
         background-image: url(https://lh3.googleusercontent.com/ALOElQCGAkXrZcTgHYAg51K96lQtMdTFQrSmhWI0vqs6IAxEzFQSowPoXmcdRthfSULN=s128);
         background-repeat: no-repeat;
         background-size: cover;
      }

      Ok, thanks so much it worked. Now, the only thing is, the resolution of the image I uploaded appear smaller than what it actually is. I'm not sure if this an url issue

        Loading editor
    • It is, the high-resolution URL is probably https://lh3.googleusercontent.com/ALOElQCGAkXrZcTgHYAg51K96lQtMdTFQrSmhWI0vqs6IAxEzFQSowPoXmcdRthfSULN but I would suggest uploading the image to Wikia instead of linking it from Google.

        Loading editor
    • KockaAdmiralac wrote:
      It is, the high-resolution URL is probably https://lh3.googleusercontent.com/ALOElQCGAkXrZcTgHYAg51K96lQtMdTFQrSmhWI0vqs6IAxEzFQSowPoXmcdRthfSULN but I would suggest uploading the image to Wikia instead of linking it from Google.

      Then, how would I link it in the CSS if I upload it to the wikia

      Nvm, I figured it out, but it still cuts some part of the picture.

        Loading editor
    • How do I adjust an image inside the infobox, below/above the info? I was able to add it, but now the image is too big. The Image is more like an icon that is supposed to be small. (Fixed>

        Loading editor
    • How do I edit two images in the same infobox differently?

      I used this to edit the image from the CSS:

      .portable-infobox img {

          width: 50px;
          height: 50px;
          vertical-align: top;
          float: left;
      }
      

      This affects all images though. How can I edit them separately?

        Loading editor
    • .portable-infobox img:nth-of-type(x)

      where x is image number

        Loading editor
    • Fngplg wrote:
      .portable-infobox img:nth-of-type(x)

      where x is image number

      I tried it, couldn't make it work. It's probably because I can't format image 2 the right way?

      Here is the HTLM

      
      <infobox theme="Warrior">
      
      <image source="WarriorIcon.png">
      
      <default>WarriorIcon.png </default>
      
      </image>
      
      <image source="DoombladeIcon.png">
      
      <default>DoombladeIcon.png</default>
      
      </image>
      
      <title source="title">
      
      <default> Warrior </default>
      
      </title>
      
        <data source="Class Name">
      
            <label>Class Name</label>
      
      <default>Warrior
      
      전사 (KR)</default>
      
        </data>
      
        <data source="Origin">
      
            <label>Origin</label>
      
      <default>[[Thousand Brave Guild]]</default>
      
        </data>
      
        <data source="Trainer">
      
            <label>Trainer</label>
      
      <default>[[Galt]]</default>
      
        </data>
      
        <data source="Weapons used">
      
            <label>Weapons Used</label>
      
      <default>[[Greatsword]], [[Claymore]], [[Longsword]]</default>
      
        </data>
      
        <data source="Specializations">
      
            <label>Specilializations</label>
      
      <default>[[Berserker]], [[Demon Blade]], [[Burst Berserker]]</default>
      
            <format> font: red </format>
      
        </data>
      
      </infobox>
      
      

      Here is the CSS

      .portable-infobox img:nth-of-type(1) {
          width: 50px;
          height: 50px;
          vertical-align: top;
          float: left;
      }
       
      .portable-infobox img:nth-of-type(2) {
          width:50px;
          height: 50px;
          float: right;
          vertical-align: bottom;
       
      }
      
        Loading editor
    • link to the page would be better.

        Loading editor
    • Fngplg wrote:
      link to the page would be better.

      http://kritika.wikia.com/wiki/Warrior

      How can I get two images with the same parent? I have tried putting twice <default>image</default> but that didnt work

        Loading editor
    • .portable-infobox .pi-image:nth-of-type(1) img {
          width: 50px;
          height: 50px;
          vertical-align: top;
          float: left;
      }
      .portable-infobox .pi-image:nth-of-type(2) img {
          width: 50px;
          height: 50px;
          vertical-align: bottom;
          float: right;
      }
        Loading editor
    • Fngplg wrote:
      .portable-infobox .pi-image:nth-of-type(1) img {
          width: 50px;
          height: 50px;
          vertical-align: top;
          float: left;
      }
      .portable-infobox .pi-image:nth-of-type(2) img {
          width: 50px;
          height: 50px;
          vertical-align: bottom;
          float: right;
      }

      Thanks that worked !

        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