.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.
.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.
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.
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>
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?
.portable-infobox img:nth-of-type(x)
where x is image number
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; }
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
.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; }
.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 !