New Infobox CSS

Andulien·8/31/2017 in General

Hello all,

I'm currently working on porting the Infoboxes over to the new Portable. For one box I've got now most of the design down, however one thing is still missing. I want to color the label Cell like it used to be before.

Old: http://chihayafuru.wikia.com/wiki/Template:Main_Female
Current: http://chihayafuru.wikia.com/wiki/User:Andulien/Testing
The CSS can be seen on the Wikia.css

I've seen an example here, where the data cell was completely colored, so I thought, maybe this is also possible with the label cell, but so far no luck. Maybe someone here has an idea:
http://dune.wikia.com/wiki/Battle_of_Arrakeen

Thanks for the help.

(Edited by Andulien)

DarkBarbarian·8/31/2017

.portable-infobox .pi-data-label {
    background-color: #FFA500;
}

(Edited by DarkBarbarian)

MACH-59330·8/31/2017

.portable-infobox .pi-data {
    padding: 0;
}
.portable-infobox .pi-data-label {
    background-color: #ffa500;
    color: #fff;
    padding: 5px 0 5px 10px;
}
.portable-infobox .pi-data-value {
    padding: 5px 10px 5px;
}

(Edited by MACH-59330)

Andulien·8/31/2017

Thanks for the hint. Is there a way to reduce the cell spacing so that things get a little closer like in the original? I've tried to play around with padding and margin a little but not looking the best yet. You can check out on the current version with the label color. Thanks for the help.

(Edited by Andulien)

MACH-59330·8/31/2017

Oh, I posted the spacing CSS in the last minute :p

(Edited by MACH-59330)

Andulien·8/31/2017

Wow that is pretty much exactly what I was looking for :D And there I tried and searched already for hours. Thank you so much. I just rounded off the sweetness with:

.portable-infobox .pi-secondary-background {
    margin: 0 0 1px 0;
}

to have also a little space between the titles :D

Thanks again a lot to both of you.

(Edited by Andulien)

What do you think?