You can define a CSS class in the CSS panel on the upper left side of the page designer. Use In-Line for resource location for a single page’s css. (External and static allow you to define a more global class.)
The CSS Class field property on each field in the Field Editor may reference one of these defined classes.
Here are some examples from the XML of a page where I needed to tweak the field or label appearance.
<css>
<cssitem location="inline" name="longTextRight" cachelocation="false">
.longTextRight .nx-basicfieldeditor-item-label
{
width: 17%;
font-weight: bold;
}
</cssitem>
<cssitem location="inline" name="longTextBelow" cachelocation="false">
.longTextBelow .nx-basicfieldeditor-item-label
{
width: 17%;
font-weight: bold;
text-decoration: underline;
}
</cssitem>
<cssitem location="inline" name="boldLabel" cachelocation="false">
.nx-basicfieldeditor-item-label .nx-template
{
font-weight: bold;
}
</cssitem>
<cssitem location="inline" name="centerUnderline" cachelocation="false">
.centerUnderline .nx-basicfieldeditor-item-label
{
text-align: center;
text-decoration: underline;
}
</cssitem>
<cssitem location="inline" name="shortLabel" cachelocation="false">
.shortLabel .nx-basicfieldeditor-item-label
{
width: 39%;
}
</cssitem>
<cssitem location="inline" name="shortShortLabel" cachelocation="false">
.shortShortLabel .nx-basicfieldeditor-item-label
{
width: 22%;
}
</cssitem>
</css>
There may be better ways of doing this, especially on a global basis; I’d love to see other approaches!
