Board Thread:Support Requests - Designing Your Wiki/@comment-36009152-20180815193635/@comment-9605025-20180828194222

1-3) The size of the space between sibling elements is determined by the margin property. The space between the edges of parent elements and their children elements are determined both by the margin of the children and the padding of the parent. Padding is also responsible for the spacing between the edge of an element and its content. Right now, the CSS relevant to the spacing you said you want to change is: If you want all the edges to line-up perfectly, you need to choose how much space you want between the border of the infobox and these other components. For the purposes of this example, let us assume it is 4px since that is the current value for the infobox title. In that case, you would want to change the CSS to the following: Note that if you ever use the navigation tag, it will be impacted by the following CSS: So if you want navigation sections to also line-up, you should change the margins there as well.

As for making the contents of the labels and values closer, you need to change the right padding for the labels and the left padding for the values. In the case of horizontal groups, you would change the bottom padding for labels and top padding for values. On top of that, you will need to do some rearranging of your CSS. Right now, you have: .portable-infobox .pi-data-label { background: #5DBCD2; text-align: right; border-top-left-radius: 8px; border-bottom-left-radius: 8px; } .portable-infobox .pi-data-value { background: #F5B8AD; border-top-right-radius: 8px; border-bottom-right-radius: 8px; } .portable-infobox .pi-data-label.pi-horizontal-group-item { border-bottom-left-radius: 0px; border-top-right-radius: 8px; } .portable-infobox .pi-data-value.pi-horizontal-group-item { border-top-right-radius: 0px; border-bottom-left-radius: 8px; } .portable-infobox .pi-data-label, .portable-infobox .pi-data-value { padding: 2px 9px; font-size: 8pt; } Using 4px as an example value, change it to something like this: .portable-infobox .pi-data-label, .portable-infobox .pi-data-value { padding: 2px 9px; font-size: 8pt; } .portable-infobox .pi-data-label { background: #5DBCD2; text-align: right; border-top-left-radius: 8px; border-bottom-left-radius: 8px; padding-right: 4px; } .portable-infobox .pi-data-value { background: #F5B8AD; border-top-right-radius: 8px; border-bottom-right-radius: 8px; padding-left: 4px; } .portable-infobox .pi-data-label.pi-horizontal-group-item { border-bottom-left-radius: 0px; border-top-right-radius: 8px; padding-bottom: 4px; } .portable-infobox .pi-data-value.pi-horizontal-group-item { border-top-right-radius: 0px; border-bottom-left-radius: 8px; padding-top: 4px; }

Personally, I like transparent. However, it is totally up to you what color you want to use.

4) Try setting the table "border" to "1px solid #eef1f1" and "box-shadow" to "none". Is that what you meant?

5) Okay then.

6) Unfortunately, not being able to use color gradients with rounded corners is a limitation of CSS itself. So there isn't anything Wikia can do about it. Yes, you can use rounded corners on any wiki you want and you can use gradient borders as long as you don't have rounded corners. I am still a bit confused by what you mean by "outer line". If you are referring to the pink line around the entire page section, that is called a border.