How to color a column header and particular filed of that column seperatly

This is what we do, with specific fields, but I’d certainly appreciate other approaches - and see if the column heads can also be colored.

Add a CSS In-Line Resource:
table.nx-skootable-data tbody tr.highlight_row_red-odd:nth-child(odd) td {    
   color: #FF0000;
}
table.nx-skootable-data tbody tr.highlight_row_red-even:nth-child(even) td {    
   color: #F80000;
}

Add a Javascript In-line Snippet:
var field = arguments[0];
var value = arguments[1];

field.item.element.removeClass(“highlight_row_red-odd”);
field.item.element.removeClass(“highlight_row_red-even”);

if ( field.model.getFieldValue( field.row, ‘Selection_Date__c’) === null ) 
{
  field.item.element.addClass(“highlight_row_red-odd”);
  field.item.element.addClass(“highlight_row_red-even”);
}
if ( field.mode == “edit” ) {
    skuid.ui.fieldRenderers[field.metadata.displaytype].edit( field, value ); }
else {
    skuid.ui.fieldRenderers[field.metadata.displaytype].read( field, value );
}

On the appropriate column in the table, replace the standard Field Renderer with the Custom snippet defined above.

This is just the tip of the iceberg, so to speak. There is also:

.blueHighlight {    
   background-color: lightblue;
}
var cellElem = field.element;
var cellElem2 = field.item.fields[i].element;
cellElem.addClass(“blueHighlight”);
cellElem2.addClass(“blueHighlight”);

and:

field.element.css(“font-Weight”, “bold”);
field.element.css(“background-color”, “#B1F2A4”);

which may give you some ideas and hints.

Hi mike thanks. i like to know .this my code in xml it is in a field editor many column with some field present . so let suppose i like to color the section header and and a field …director__c .
and also the second header with diffrent color and second field of that column with diffrent color .
please help me . waiting for your reply.

                   <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> </label>
                                                                                                        </field>
                                                                                                        <field uniqueid="sk-2aN5-Q-1269" id="home__c" decimalplaces="" valuehalign="" type="">
                                                                                                            <label> </label>
                                                                                                        </field>
                                                                                                    </fields>
                                                                                                </section>
                                                                                            </sections>
                                                                                        </column>

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>

Hi mike it is only coloring the back ground not the section header.
Please help.
Thanks

Hi mike,
For header it is not working but for field it is working properly.
if i want to color field label than what have to do?
thanks 

Hi mike ,
Thank you so much every thing is working properly.Thank you so much.