Edit the display of labels and inputs within Field Editor

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!

Yes, this kind of thing is exactly what CSS is for.

If you want to apply changes globally, you can add custom CSS directly to a skuid theme.

You can play around with the CSS on any live webpage by right-clicking on the element you’re interested and clicking ‘Inspect.’