Manage Display Field Label not changing: inline does not work

Question

I have the same problem as question 212176 and discovered it has to do with CSS. I have 2 (local) sites both with module ds enabled. I configured in both a field where I want the label and the value in one line: inline

With the classy-theme, this works fine. With the IceMagic theme it does not.

I have "inspect element"-screenshots of both. As there is no float:left with IceMagic, I believe this is the reason the label stays above.

Where and how to fix this?

Answer 1

Solved!

I used Firefox Developer Edition tools to find the relevant css code in a working theme. I copy/pasted this piece of code into the styles.css file of the theme of my choice and adjusted the class-names (single dash instead of double-dash and double-underscore).

To tidy up I should make a subtheme with my adjustments and leave the theme as it is.

I made even a little improvement to the original code: label will be aligned to left of the column and content to the right (I am using Display Suite to divide the content into a column view)

.field-label {
  font-weight: bold;
}
.field-label-inline .field-label {
  float: left; /* LTR */
}
.field-label-inline .field-items {
  float: right; /* LTR */
}
.field-label-inline .field-label,
.field-label-inline > .field-item,
.field-label-inline .field-items {
  padding-right: 0.5em;
}
[dir="rtl"] .field-label-inline .field-label,
[dir="rtl"] .field-label-inline .field-items {
  padding-left: 0.5em;
  padding-right: 0;
}
.field-label-inline .field-label::after {
  content: ':';
}