Matrix -
I haven’t worked with the field editor headers, but here is xml for a working page using your code and my additions. I’ve used javascript and css, and also given the value ‘redText’ to the CSS Class for your “business” section header. It works differently than expected!
<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">
<models>
<model id="Account" query="true" createrowifnonefound="true" datasource="Ui-Only" processonclient="true">
<fields>
<field id="soft__c" displaytype="TEXT" label="Soft" defaultvaluetype="fieldvalue" defaultValue="soft"/>
<field id="Director__c" displaytype="TEXT" label="Director" defaultvaluetype="fieldvalue" defaultValue="boss"/>
<field id="hard__c" displaytype="TEXT" label="hard"/>
<field id="office__c" displaytype="TEXT" label="office" defaultvaluetype="fieldvalue" defaultValue="here"/>
<field id="home__c" displaytype="TEXT" label="home" defaultvaluetype="fieldvalue" defaultValue="there"/>
</fields>
<conditions/>
<actions/>
</model>
</models>
<components>
<basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="Account" buttonposition="" uniqueid="sk-2aIn1c-812" mode="read" layout="">
<columns layoutmode="fixed">
<column width="100%">
<sections>
<section title="business " collapsible="no" cssclass="redText">
<fields>
<columns uniqueid="sk-2aJBun-867" layoutmode="fixed">
<column width="25%">
<sections>
<section title="Key Official" collapsible="no" showheader="true">
<fields>
<field uniqueid="sk-2aJyS--951" id="soft__c" valuehalign="" type=""/>
<field uniqueid="sk-2aK6pF-957" id="Director__c"/>
<field uniqueid="sk-2aKBdO-961" id="hard__c"/>
</fields>
</section>
</sections>
</column>
<column width="70%">
<sections>
<section title="New Section" collapsible="no" showheader="false">
<fields>
<columns uniqueid="sk-2aLyeT-1108" layoutmode="fixed">
<column width="50%">
<sections>
<section title="New Section" collapsible="no" showheader="false">
<fields>
<field uniqueid="sk-2aMoHX-1211" id="office__c" decimalplaces="" valuehalign="" type="">
<label>office</label>
</field>
<field uniqueid="sk-2aN5-Q-1269" id="home__c" decimalplaces="" valuehalign="" type="CUSTOM" snippet="green">
<label>home</label>
</field>
</fields>
</section>
</sections>
</column>
</columns>
</fields>
</section>
</sections>
</column>
</columns>
</fields>
</section>
</sections>
</column>
</columns>
</basicfieldeditor>
</components>
<resources>
<labels/>
<javascript>
<jsitem location="inlinesnippet" name="green" cachelocation="false">var $ = skuid.$;
var field = arguments[0];
var value = arguments[1];
var cellElem = field.element;
cellElem.addClass("greenHighlight");
var renderer = skuid.ui.fieldRenderers[field.metadata.displaytype].read( field, value );
// May use .read or .edit. The .read is read-only; there is no option for read-with-inline-edit
// toggle, and the row-action edit-row does not change the mode on the field as rendered.
</jsitem>
</javascript>
<css>
<cssitem location="inline" name="redText" cachelocation="false">.redText {
color: red;
background-color: #EE00FF;
}</cssitem>
<cssitem location="inline" name="green" cachelocation="false">.greenHighlight {
background-color: #CCFFCC;
}
</cssitem>
</css>
</resources>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
</skuidpage>
